网页制作JS代码优化经验总结

文章插图

文章插图

这些是我写代码时的一些经验，总结了一下分想给大家，没啥顺序，想到就写上了
1.使用局部变量避免使用全局变量
比如

function test(){
var s = document.getElementById(aaa);
s.innerHTML = document.body.clientHeight;
}
改成

function test(){
var d = document;
s = d.getElementById(aaa);
s.innerHTML = d.body.clientHeight;
}
局部变量的好处就是减少了作用域链的查找
我建议要是有两次的引用就用局部变量
2.避免使用with（这个估计地球人都知道）
我理解原因就是with会创建自己的作用域，这样就加长了原来的作用域链，使得在with块中执行的代码反而变慢了，在书写上好像省了代码，其实在访问上反而变长变繁琐了，性能下降了
例子
使用with

function test(){
with(document.body){
clientHeight = 200px;
clientWidth = 200px
}
}
其实都可以写成

function test(){
var ds = document.body;
ds.clientHeight = 200px;
ds.clientWidth = 200px
}
3. 遍历nodelist的方式
一般的方式都是
var as = document.getElementsByTagName(div);
for(var i=0,l我的方式一次都不用
for(var i=0,ci;ci=as[i];){}当nodeList完结时就为false就结束了
好处，没计算长度，省了在循环里赋值，代码更加少了,i到了判断里
（注意：这个方式用在nodelist里可以，如果你用到array里，可会有问题的，数组里有个0后者null什么的就瞎了)

4.别用那么多个var，一个加逗号就搞定了
var a =1;
var b = 1;
var c =1;
代码长，性能差
拆成
var a=1,
b=1,
c=1;
5.innerHTML是最好的选择
往元素添加元素时，最好用innerHTML
6.ie的removeChild不好用
一般咱们删除一个元素会用
elm.removeChild(subElm)
这个在ie下不好用，因为在ie下这个只是把这个元素从dom树中断开了，但并没用真正删除，它现在变成了孤立的节点了，要想真正删除，可以这样

var ryc = document.createElement(div);
div.appendChild(subElm);
div.innerHTML = ;
div = null;
这样就真的删除了，除了ie外别的都可以用removeChild达到效果
7.为多个同级元素绑定事件时，不用为每个都绑定，为他们的父级绑定就行了
比如

可能你要为每个li添加click
为每个添加那可繁琐且容易出现溢出(ie）
其实只要为 ul一个添加就行了,因为事件是冒泡向上的

var ul = document.getElementById(a);
ul.onclick = function (e){
!e&&(e=event);
var target = e.srcElement||e.target;
if(target.tagName==LI){
//your code
}
}

8.尽量用原生的方法，因为原生的都是用c/c编译而成的他们执行的要比用js写的方法快多了
9.appendChild用的多时一定要用docuemntfragment
比如
for(var i=0;i<1000;i){
var o = document.createElement(div);
document.body.appendChild(o);
}
用documentFragment

var f = document.createDocumentFragment();
for(var i=0;i<1000;i){
var o = document.createElement(div);
f.appendChild(o);
}
document.body.appendChild(f);
10. if else用的>=3个了，那用switch吧，好阅读，性能好
11. if<=3,别用if了，用3元表达式吧
12. if==1，if改&&

if(a==1)a=2
改
a==1&&(a=2);
13.计算元素位置，while()offsetParent
这个方式是老方式了，现在的浏览器ie6以上，ff3.1以上,chrome,opera(我只测了最新的)都支持这个el.getBoundingClientRect返回一个对像，分别是top,left,right,bottom的值