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

大 中 小  文章来源：万象互联 更新时间：2011-8-18 14:30:31
分享：
副标题#e#

万象互联网络资讯网提示：网页制作代码经验总结: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<as.length;i<l;i++){//只计算一次长度}
        我的方式一次都不用
        for(var i=0,ci;ci=as[i++];){}当nodeList完结时就为false就结束了
        好处，没计算长度，省了在循环里赋值，代码更加少了,i++到了判断里
（注意：这个方式用在nodelist里可以，如果你用到array里，可会有问题的，数组里有个0后者null什么的就瞎了)

#p#副标题#e#

万象互联网络资讯网提示：网页制作代码经验总结:JS代码优化.

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一个添加就行了,因为事件是冒泡向上的


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

#p#副标题#e#

万象互联网络资讯网提示：网页制作代码经验总结:JS代码优化.

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

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

版权说明:本站原创文章,由万象互联SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/3880.html
分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博
在线咨询