首頁 >web前端 >js教程 >有關javascript程式的最佳化問題

有關javascript程式的最佳化問題

黄舟
黄舟原創
2016-12-15 10:57:361024瀏覽

有關javascript程式的最佳化問題

這些是我寫程式碼時的一些經驗,總結了一下分想給大家,沒啥順序,想到就寫上了

1.使用局部變數避免使用全域變數
例如
        function test(){
        羅= document.getElementById('aaa');
                s.innerHTML = document.body.clientHeight;
  function test(){
                var d = document,
                
                s.innerHTML = d.body.clientHeight;
        }
的定義人都知道)
我理解原因就是with會創建自己的作用域,這樣就加長了原來的作用域鏈,使得在with塊中執行的代碼反而變慢了,在書寫上好像省了代碼,其實在訪問上反而變長變繁瑣了,性能下降了
例子
        使用with
               ument.body){
                                clientHeight }      clientWidth = '200px'
                        } 都可以寫成
                function test(){
                          ds.clientHeight = '200px';
                       
3. 遍歷nodelist的方式
        一般的方式都是
var as = document.getElementsByTagName('div');
        for(var i=0,l        好處,沒計算長度,省了在循環裡賦值,程式碼更加少了,i++到了判斷裡
        (注意:這個方式用在nodelist裡可以,如果你用到array裡,可會有問題的,數組裡有個0後者null什麼的就瞎了)
        
4.別用那麼多,瞎用那麼多var一個加逗號就搞定了
        var a =1;
        var b = 1;
       
        var a=1,
                b=1,
           
5.innerHTML是最好的選擇
往元素添加元素時,最好用innerHTML

6.ie的removeChild不好用
一般咱們刪除一個元素會用
     不好用,因為在ie下這個只是把這個元素從dom樹中斷開了,但並沒用真正刪除,它現在變成了孤立的節點了,
要想真正刪除,可以這樣
        var ryc = document.createElement('div');
        div.appendChild(subElm);
div.innerHTML = '';
        div = null;
這樣就真的刪除了,除了ie外別的都可以用removeChild達到效果

7.為多個同級元素綁定事件時,不用為每個人都綁定,為他們的父級綁定就行了
比如
        


                   
  • sdf
  • pdfli>
  • li>sdf
  • sdf
  • sdf

  •         

        可能你要為每個為每個可能加上溢出
繁       可能你要為每個為每個可造成溢出且容易溢出(ie)
        其實只要為ul一個添加就行了,因為事件是冒泡向上的
        var ul = document.getElementById(           !e&&(e=event );
                var target = e.srcElement||e.target;
                    //your code 
                }
        } 都是用c/c++編譯而成的他們執行的要比用js寫的方法快多了

9.appendChild用的多時一定要用docuemntfragment
比如
        for(var i=0;i                var o = document.createElement('div');
             ment
        var f = document.createDocumentFragment();
        for(var i=0;i                var o = document.createElement('div');
             document.body.appendChild(f);

10. if else用的>=3個了,那用switch吧,好閱讀,表現好

11. if
12. if==1,if改&&
        if(a== 1)a=2
        改
        a==1&&(a=2);

13.計算元素位置,while()offsetParent
這個瀏覽器
13.計算元素位置,while()offsetParent
這個方式是老瀏覽器chrome,opera(我只測了最新的)都支援這個
el.getBoundingClientRect回傳一個物件,分別是top,left,right,bottom的值

14.正規的查找沒有indexOf快
var s= 'sdfsdfsdfAAAsdf ';
for(var i=0;i        s.indexOf('AAA')
}
比這個快
var s= 'sdfsdfsdfAAAsdfds}
比這個快
var s= 'sdifsdfAAAsdfds_fs'; 1000;i++){
        /AAA/.test(s)
}

15.在正則中多用非捕獲(?這樣快

16.設定某個元素的style時用一些簡單地用非捕獲(?這樣快

16.設定某個元素的style時用cssTextstyle. cssText +=";postion:absolute;"
(注意osition前;不能去了,因為ie沒有這個;position認不出來了就,比的瀏覽器沒這個毛病)

17.在new 時,沒有參數時函數名後邊的括號可以去了
new fn()==>new fn
new Image()==>new Image


先想到這麼多,再想到時在補償,認為不對的提啊,別客氣

以上就是有關javascript程式的最佳化問題的內容,更多相關文章請關注PHP中文網(www.php.cn)! 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn