html页面首尾分离,性能、JavaScript与html标签分离(代码与结构和内容分离)、平稳退化...

性能

尽量减少DOM访问和标记，减少document.getElementsByTagName()之类方法的使用，把这类方法返回的值存储在变量之中。

合并脚本、样式文件、图片文件等，以便减少加载页面时的请求数量。

压缩脚本。

JavaScript与html标签分离

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

Click here

//这边是JavaScript的代码

function doSomething1(node){}

function doSomething2(node){}

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

Click here

Click here

Click here

Click here

Click here

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

其实我们可以这个样子：

Click here

Click here

Click here

Click here

Click here

window.οnlοad=function(){

var divs=documen.getElementById("contain").getElementsByTagName("div");

for(var i=0;i

if(divs[i].getAttribute("id").replace("div","")<=3){    //判断是否是div1~div3

divs[i].οnclick=doSomething1;

}else{

divs[i].οnclick=doSomething2;

}

}

}

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

平稳退化

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

            

            

            

            

            

            

            

接下来是js代码：

window.οnlοad=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[i].οnclick=function(){

return !showPic(this);

//这步很关键。便签被点击后是会使页面跳转的，除非触发onclick事件后得到false的返回

//于是，若js正常执行，则点击标签可看到图片

//若js被禁用，则点击标签会发生跳转，同样可以看到图片

}

}

}

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被禁用的情况下，仍然可以浏览到内容。