性能、JavaScript与html标签分离、平稳退化

性能

1. 尽量减少DOM访问和标记，减少document.getElementsByTagName()之类方法的使用，把这类方法返回的值存储在变量之中。
2. 合并脚本、样式文件、图片文件等，一遍减少加载页面时的请求数量。
3. 压缩脚本。

JavaScript与html标签分离

当我们添加动作时，会有个第一反应：

<div id="div1" onclick="doSomething(this)">Click here</div>

//这边是JavaScript的代码
function doSomething1(node){}
function doSomething2(node){}

但这样是不科学的。当我们需要修改一系列类似的标签，他们有着类似的方法：

<div id="contain">
    <div id="div1" onclick="doSomething1(this)">Click here</div>
    <div id="div2" onclick="doSomething1(this)">Click here</div>
    <div id="div3" onclick="doSomething1(this)">Click here</div>
    <div id="div4" onclick="doSomething1(this)">Click here</div>
    <div id="div5" onclick="doSomething1(this)">Click here</div>
</div>

如果需要把其他方法（比如doSomething2（））绑定给div4和div5的onclick事件，就需要面对一些繁琐的工作。

其实我们可以这个样子：

<div id="contain">
    <div id="div1">Click here</div>
    <div id="div2">Click here</div>
    <div id="div3">Click here</div>
    <div id="div4">Click here</div>
    <div id="div5">Click here</div>
</div>

window.onload=function(){
    var divs=documen.getElementById("contain").getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        if(divs[i].getAttribute("id").replace("div","")<=3){    //判断是否是div1~div3
            divs[i].onclick=doSomething1;
        }else{
            divs[i].onclick=doSomething2;
        }
    }
}

至此，若还需要对html页面中的元素进行动作添加、修改、删除，在js文件中进行就可以了。

平稳退化

需求：点击上方链接，下方区域出现图片，点不同的链接出现的图片不同。

<ul id="imagegallery">
        <li>
            <a href="images/1.jpg" title="1.jpg"><img src="images/1.jpg"/></a>
        </li>
        <li>
            <a href="images/2.jpg" title="2.jpg"><img src="images/2.jpg"/></a>
        </li>
        <li>
            <a href="images/3.jpg" title="3.jpg"><img src="images/3.jpg"/></a>
        </li>
        <li>
            <a href="images/4.jpg" title="4.jpg"><img src="images/4.jpg"/></a>
        </li>
        <li>
            <a href="images/5.jpg" title="5.jpg"><img src="images/5.jpg"/></a>
        </li>
        <li>
            <a href="images/6.jpg" title="6.jpg"><img src="images/6.jpg"/></a>
        </li>
        <li>
            <a href="images/7.jpg" title="7.jpg"><img src="images/7.jpg"/></a>
        </li>
    </ul>

接下来是js代码：

window.onload=function(){        //遍历ul中的li元素，事件绑定
    if(!document.getElementsByTagName
        ||!document.getElementById
        ||!document.getElementById("imagegallery")){
        return false;
    }
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            return !showPic(this);
            //这步很关键。<a>便签被点击后是会使页面跳转的，除非触发onclick事件后得到false的返回
            //于是，若js正常执行，则点击<a>标签可看到图片
            //若js被禁用，则点击<a>标签会发生跳转，同样可以看到图片
        }
    }
}
function showPic(whichPic){
    //如果展示图片的区域不存在，则页面跳转，跳到图片处
    if(!document.getElementById("placeHolder"))return false;    
    var source=whichPic.getAttribute("href");
    var placeHolder=document.getElementById("placeHolder");
    placeHolder.setAttribute("src",source);
    if(document.getElementById("description")){
        var text=whichPic.getAttribute("title");
        var description=document.getElementById("description");
        description.firstChild.nodeValue=text;
    }
    return true;
}

无论如何，内容最重要。要保证在js被禁用的情况下，仍然可以浏览到内容。