欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 >建站经验 >Js&Ajax > 网页制作JS代码优化经验总结

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

2018-05-09 310 收藏 0 赞一个 0 真差劲 0 去评论

这些是我写代码时的一些经验,总结了一下分想给大家,没啥顺序,想到就写上了

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<as.length;i<l;i++){//只计算一次长度}

我的方式一次都不用

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.为多个同级元素绑定事件时,不用为每个都绑定,为他们的父级绑定就行了

比如

<ul id="a">
<li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li>
</ul>

可能你要为每个li添加click

为每个添加那可繁琐且容易出现溢出(ie)

其实只要为 ul一个添加就行了,因为事件是冒泡向上的

ar 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的值

14.正则的查找没有indexOf快

var s= sdfsdfsdfAAAsdfdsfs;  
for(var i=0;i<1000;i++){  
    s.indexOf(AAA)  
}

比这个快

var s= sdfsdfsdfAAAsdfdsfs;  
for(var i=0;i<1000;i++){  
    /AAA/.test(s)  
}

15.在正则中多用非捕获(?:)这样快

16.设置某个元素的style时用cssText简单些

el.style.cssText +=";postion:absolute;"

(注意:position前;不能去了,因为ie没有这个;position认不出来了就,比的浏览器没这个毛病)

17.在new 时,没有参数时函数名后边的括号可以去了

new fn()==>new fn  
new Image()==>new Image

先想到这么多,再想到时在补偿,认为不对的提啊,别客气

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站所有资源(包括模板、素材、软件、字体等)仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论
分享是个好习惯