實現(xiàn)高性能javascript的注意事項
1.少用全局變量
原因:因為作用域鏈?zhǔn)且粋€堆棧的結(jié)構(gòu),所以遵循先進(jìn)先出的原則,而javascript引擎在解析代碼的時候,將全局對象放在棧底,然后向上依次出現(xiàn)的是不同作用域的活動對象(這些活動對象除了閉包沒有相互依賴的關(guān)系),所以在查找變量的時候會從該活動對象開始,然后是閉包它的活動對象,最后是全局對象,如果全局變量過多就會影響獲得變量時的速度,所以不要過多使用全局變量。
2.盡量使用局部變量封裝全局變量
原因:正如前面所說,活動對象在棧的頂端,所以最先查找它的內(nèi)容,當(dāng)我們將document封裝成局部變量后就會減少深層次查找的次數(shù),使性能提高。
3.操作數(shù)組長度、對象屬性時,盡量使用局部變量封裝。
原因:IE、opera存取數(shù)組比對象屬性快,而FF chrome safari正好相反,所以兼顧這些,我們最好封裝一下。
4.盡量減少對象屬性的深度
原因:深度太大,會增加javascript引擎對取得值的地址查找的開銷,相當(dāng)于增加了多層嵌套的指針,導(dǎo)致性能損失。
5.在for循環(huán)中盡量使用局部變量封裝條件項
原因:例如for(var i=0;i<divs.length;i++) 的時候,如果divs為document.getElementsByTagName('div'),這樣在每次循環(huán)判斷條件的時候都會對DOM文檔進(jìn)行一次遍歷求得長度,所以講length封裝起來,會提升性能。
6.謹(jǐn)慎的處理HTMLcollection對象(比如childNodes getElementsByTagName等取得DOM元素集合的對象),最好將其封裝到數(shù)組里操作。
原因:還是因為操作DOM元素需要遍歷DOM文檔,而非DOM元素則不用遍歷,所以請盡量減少對DOM的操作,而將DOM集合放到數(shù)組中去。
7.在針對safari瀏覽器的開發(fā)過程中,請盡量使用“.”獲取對象屬性而不是用“[]”。
8.建議在少于兩次判斷的環(huán)境下使用if-else,而大于三次的就用switch吧。而超過10次的時候,還是使用數(shù)組或json對象來通過索引來查找吧(這種模式相對簡單)
9.如果循環(huán)數(shù)組的順序從低到高或從高到低沒有差別,那么還是從高到低比較好,比如我們循環(huán)輸出一個數(shù)組中的內(nèi)容:
var arr=[1,2,3,4,5]; var i=0; while(i<arr.length){ alert(arr[i]); }//這樣開銷會比較大,因為每次都要遍歷求出數(shù)組元素的長度 //---------------------------------- var i=arr.length; while(i--){ alert(arr[i]); }//使用局部變量保存數(shù)組長度,然后該變量自減,連while中的判斷都省了,因為0轉(zhuǎn)換為布爾值就是false。
10.盡量少使用for-in循環(huán),將其盡量改造成while 或for循環(huán)。
11.處理大數(shù)組時,請遵循duff策略。
duff策略:將大數(shù)組的個數(shù)拆分成8個一組,對這8個為一個單位的數(shù)組的操作不用循環(huán)處理,而是不怕繁瑣的寫出8行處理數(shù)組元素的代碼,這樣會提升大數(shù)組操作的性能。
12.用函數(shù)處理大數(shù)組的每個元素時,盡量使用定時器將每次操作掛起,時間設(shè)定在50-100ms比較合理
原因:如果簡單的用循環(huán)來處理數(shù)組中的每個元素,如果是大數(shù)組,會造成頁面的凍結(jié)和假死,給用戶不好的體驗,而用setTimeout,就會把每次操作都暫時掛起,讓javascript引擎有其他的時間去處理隊列中的其他函數(shù),有效的防止了凍結(jié)和假死,而在設(shè)定的延遲時間之后,有可能javascript引擎是空閑的狀態(tài),可以更好的處理這些數(shù)組操作。相當(dāng)于虛擬了一個后臺操作。下面是zakas提出的解決方案:
function chunk(array,func,context){ setTimeout(function(){ var arr=array.shift(); func.call(context,item); if(array.length>0){ setTimeout(arguments.callee,100);//遞歸循環(huán)這個過程 arguments.callee為chunk這個函數(shù)對象 } },100); }
13.在使用iframe的時候注意window onload的阻塞
原因:iframe的加載會對window onload進(jìn)行阻塞,導(dǎo)致有些window unload事件中加載的代碼在用戶關(guān)掉頁面的時候可能不被執(zhí)行,所以需要我們最好在window onload時間發(fā)生時動態(tài)為iframe設(shè)定src屬性。
PS:能不用iframe就不用。
14.CSS選擇符的優(yōu)化
原因:CSS選擇符的讀取方式為從右至左,所以在寫的時候盡可能右邊規(guī)則詳細(xì),而且盡量少用子選擇符合后代選擇符標(biāo)簽選擇符。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒域炞C
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)拉鏈?zhǔn)降幕瑒域炞C,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05微信端調(diào)取相冊和攝像頭功能,實現(xiàn)圖片上傳,并上傳到服務(wù)器
這篇文章主要介紹了微信端調(diào)取相冊和攝像頭功能圖片上傳服務(wù)器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript高級程序設(shè)計 讀書筆記之十 本地對象Date日期
本地對象Date日期操作實現(xiàn)方法,需要的朋友可以參考下2012-02-02ES6中的class是如何實現(xiàn)的(附Babel編譯的ES5代碼詳解)
這篇文章主要介紹了ES6中的class是如何實現(xiàn)的?(附Babel編譯的ES5代碼詳解),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05