1. 程式人生 > >js效能優化問題學習筆記

js效能優化問題學習筆記

一:載入和執行

因為JavaScript是單執行緒的,具有阻塞性。當html頁面解析時,如果遇到<script>,那麼就會停止頁面的下載和解析過程,先將js指令碼執行完成,再開始下載,解析。注意:瀏覽器在遇到<body>標籤之前是不會渲染頁面的任何部分的。

1、將<script>放在頁面的</body>之前

2、打包指令碼,減少<script>標籤,為<script>標籤新增defer(ie/ff)async(chrome……)屬性

3、動態建立<script>元素,下載執行程式碼。

4、yui,lazyload,LABjs

二:資料訪問

資料的儲存位置影響資料被檢索的速度。

JavaScript的直接量:string、number、Boolean、object、array、function、reg、null、undefined。直接量僅代表自己,不儲存於特定位置。

1、變數,陣列項,物件成員的訪問速度與儲存位置有關。每一種資料儲存位置都具有特定的讀寫操作負擔。如果關心訪問速度的話,那麼應該儘量使用直接量和區域性變數,限制陣列項和物件成員的使用。

2、區域性變數比域外變數訪問更快,由於js是通過原型實現繼承,訪問方式是從作用域鏈內向外訪問,所以訪問的變數越靠近作用域外圍訪問的時間久越長。

3、避免使用with表示式,with表示式會改變執行期上下文的作用域鏈,相當於重排作用域鏈耗效能。try-catch有同樣效果,需要謹慎使用。

4、減少成員巢狀,例如:location.href的訪問速度快於windows.location.href。因為每遇到一個點JavaScript引擎就要在成員上執行一次解析過程,如果屬性不是物件的例項屬性,那麼成員解析還要在每個點上搜索原型鏈。

5、閉包的使用會造成記憶體無法釋放,佔用記憶體,影響效能,所以最好把變數快取到內部作用域內。

三:Dom程式設計

dom是一種獨立語言,是操作xml和html文件的應用程式介面,不屬於JavaScript,並且DOM是通過webkit的WebCore進行處理和渲染,而js是通過JavaScriptCore(Safari)引擎或V8(谷歌實現渲染,不同的瀏覽器有差異。這意味著兩個獨立部分以功能介面連線就會帶來效能損耗。而每一次的連線都會增加損耗。

1、減少dom訪問,減少dom的重排和重繪

2、採用區域性變數儲存dom引用,用變數將迭代集合的長度儲存起來

3、注意判斷一個集合的存在性,使用較新的api

4、採用事件委託的方式減少事件繫結。

5、減少字串連線。

四:演算法和流程控制

1、for,while,do-while迴圈的效能特性相似,for-in開銷會大一些,更適合未知的物件迭代。改善迴圈的最好辦法是減少每次迭代的運算量及次數。

2、一般來說switch會比if-else快。當有大量的離散值需要測試查表法更合適。

3、瀏覽器的呼叫棧尺寸限制了遞迴演算法在js裡面的使用,棧溢位錯誤會導致其他程式碼不能執行,當遇到棧溢位錯誤時,可以使用迭代或者製表法來避免重複工作。

五:正則表示式

正則表示式引擎處理字串的原理:

1、編譯:當建立一個正則表示式後,瀏覽器首先回去檢查模板有沒有錯誤,然後將它轉換成一個本機程式碼例程,用於執行匹配工作。

2、設定起始位置:當一個正則表示式使用時,首先要確定目標字元創中開始搜尋的位置。

3、匹配每個正則表示式的字元:

4、