網(wǎng)頁(yè)制作JS代碼優(yōu)化經(jīng)驗(yàn)總結(jié)

這些是我寫(xiě)代碼時(shí)的一些經(jīng)驗(yàn)，總結(jié)了一下分想給大家，沒(méi)啥順序，想到就寫(xiě)上了

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（這個(gè)估計(jì)地球人都知道）

我理解原因就是with會(huì)創(chuàng)建自己的作用域，這樣就加長(zhǎng)了原來(lái)的作用域鏈，使得在with塊中執(zhí)行的代碼反而變慢了，在書(shū)寫(xiě)上好像省了代碼，其實(shí)在訪問(wèn)上反而變長(zhǎng)變繁瑣了，性能下降了
例子
        使用with

function test(){
                        with(document.body){
                                clientHeight = 200px;
                                clientWidth = 200px
                        }
                }

        其實(shí)都可以寫(xiě)成

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++){//只計(jì)算一次長(zhǎng)度}
        我的方式一次都不用
        for(var i=0,ci;ci=as[i++];){}當(dāng)nodeList完結(jié)時(shí)就為false就結(jié)束了
        好處，沒(méi)計(jì)算長(zhǎng)度，省了在循環(huán)里賦值，代碼更加少了,i++到了判斷里
（注意：這個(gè)方式用在nodelist里可以，如果你用到array里，可會(huì)有問(wèn)題的，數(shù)組里有個(gè)0后者null什么的就瞎了)
 

4.別用那么多個(gè)var，一個(gè)加逗號(hào)就搞定了

var a =1;
        var b = 1;
        var c =1;
        代碼長(zhǎng)，性能差
        拆成
        var a=1,
                b=1,
                c=1;

 5.innerHTML是最好的選擇

往元素添加元素時(shí)，最好用innerHTML

6.ie的removeChild不好用

一般咱們刪除一個(gè)元素會(huì)用

elm.removeChild(subElm)

這個(gè)在ie下不好用，因?yàn)樵趇e下這個(gè)只是把這個(gè)元素從dom樹(shù)中斷開(kāi)了，但并沒(méi)用真正刪除，它現(xiàn)在變成了孤立的節(jié)點(diǎn)了，要想真正刪除，可以這樣

var ryc = document.createElement(div);
        div.appendChild(subElm);
        div.innerHTML = ;
        div = null;

這樣就真的刪除了，除了ie外別的都可以用removeChild達(dá)到效果

7.為多個(gè)同級(jí)元素綁定事件時(shí)，不用為每個(gè)都綁定，為他們的父級(jí)綁定就行了
比如

<ul id="a">
                <li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li>
        </ul>
可能你要為每個(gè)li添加click

為每個(gè)添加那可繁瑣且容易出現(xiàn)溢出(ie）

其實(shí)只要為 ul一個(gè)添加就行了,因?yàn)槭录敲芭菹蛏系?/p>

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.盡量用原生的方法，因?yàn)樵亩际怯胏/c++編譯而成的他們執(zhí)行的要比用js寫(xiě)的方法快多了
9.appendChild用的多時(shí)一定要用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個(gè)了，那用switch吧，好閱讀，性能好

11. if<=3,別用if了，用3元表達(dá)式吧

12. if==1，if改&&

if(a==1)a=2
        改
        a==1&&(a=2);
13.計(jì)算元素位置，while()offsetParent

這個(gè)方式是老方式了，現(xiàn)在的瀏覽器ie6以上，ff3.1以上,chrome,opera(我只測(cè)了最新的)都支持這個(gè)el.getBoundingClientRect返回一個(gè)對(duì)像，分別是top,left,right,bottom的值

14.正則的查找沒(méi)有indexOf快

var s= sdfsdfsdfAAAsdfdsfs;
for(var i=0;i<1000;i++){
        s.indexOf(AAA)
}
比這個(gè)快

var s= sdfsdfsdfAAAsdfdsfs;
for(var i=0;i<1000;i++){
        /AAA/.test(s)
}
15.在正則中多用非捕獲(?:)這樣快

16.設(shè)置某個(gè)元素的style時(shí)用cssText簡(jiǎn)單些

el.style.cssText +=";postion:absolute;"
（注意:position前;不能去了,因?yàn)閕e沒(méi)有這個(gè);position認(rèn)不出來(lái)了就，比的瀏覽器沒(méi)這個(gè)毛病)

17.在new 時(shí),沒(méi)有參數(shù)時(shí)函數(shù)名后邊的括號(hào)可以去了

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