前端js效能優化(一)

2021-07-29 03:15:03 字數 2921 閱讀 6606

多數瀏覽器使用單一程序來處理ui重新整理js指令碼執行,因此同一時刻只能做一件事。

因此,當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行,無論指令碼是內嵌的還是外鏈的。

由於每乙個script標籤都會阻塞頁面渲染,所以減少頁面包含的script標籤數量有助於改善這一狀況。這不僅僅針對外鏈指令碼,內嵌指令碼的數量也要限制。

實現無阻塞指令碼的方式有以下三種:

html4為script標籤新定義了乙個屬性:defer

html5則又新增了乙個async屬性。

具體也可以看js學習筆記:script元素

通常,把動態script元素新增到head標籤中比新增到body中更保險,尤其是在頁面載入過程中執行**時更是如此。

在html5中,可以使用document.head直接獲取head元素的引用。

var script = document.createelement("script");

script.onload = function()

script.src = "file1.js"

;document.head

ie支援另一種實現方式,它會觸發乙個readystatechange事件。

動態指令碼載入是最通用的無阻塞載入解決方案。

另一種無阻塞指令碼的方法是使用xmlhttprequest物件獲取指令碼並注入頁面中。

也就是通過ajax來獲取外部指令碼檔案,然後通過動態建立script元素將該指令碼新增到頁面中。

電腦科學中的乙個經典問題就是通過改變資料的儲存位置來獲得最佳的讀寫效能,資料儲存的文職關係到**執行過程中資料的檢索速度。

每乙個js函式都有乙個內部屬性scope,它包含了乙個函式被建立時的作用域中物件的集合,這個集合被稱為函式的作用域鏈,它決定了哪些資料能被函式訪問。

作用域鏈中的每乙個物件被稱為乙個變數物件。當乙個函式被建立時,它的作用域鏈會被建立此函式的作用域中可訪問的資料物件所填充。

而在執行函式時,會建立乙個稱為執行上下文的內部物件。乙個執行上下文定義了乙個函式執行時的環境。

函式每次執行時對應的執行上下文都是獨一無二的,所以多次呼叫同乙個函式就會導致建立多個執行上下文。

當函式執行完畢,執行上下文就會被銷毀。

每個執行上下文都有自己的作用域鏈,用於解析識別符號。

當執行上下文被建立時,它的作用域鏈初始化為當前執行函式的scope屬性中的物件。這些值按照它們出現在函式中的順序被複製到當前執行上下文的作用域鏈中。這個過程一旦完成,乙個被稱為「活動物件」的新物件就為執行上下文建立好了。

活動物件作為函式執行時的變數物件,包含了所有區域性變數、命名引數、arguments以及this。

然後此物件被推入作用域鏈的最前端。

當執行上下文被銷毀,活動物件也隨之銷毀。

在函式執行過程中,每遇到乙個變數都會經歷一次識別符號解析的過程,以決定從**獲取或儲存資料。該過程搜尋執行上下文的作用域鏈,查詢同名識別符號。

正是這種搜尋過程影響了效能。

在執行上下文的作用域鏈中,乙個識別符號所在的位置越深,它的讀寫速度就越慢。因此函式中讀寫區域性變數總是最快的,而讀寫全域性變數通常是最慢的。

因此在實際操作中,如果某個跨作用域的值在函式中被引用一次以上,那麼就把它儲存到區域性變數中。

例如在操作dom的時候,很有可能多次引用全域性變數document,搜尋該變數的過程必須遍歷整個作用域鏈。

可以先將全域性變數的引用儲存在乙個區域性變數中,然後使用這個區域性變數代替全域性變數。

function

()

一般來說乙個執行上下文的作用域鏈是不會改變的,但有兩個語句可以在執行時臨時改變作用域鏈:

當**執行到with時,執行上下文的作用域鏈臨時被改變了。乙個新的變數物件被建立,它包含了with引數指定的物件的所有屬性。

這個物件被推入作用域鏈的首位,這意味著函式的所有區域性變數現在處於第二個作用域鏈物件中,因此訪問的代價更高了。

而當在try**塊中發生錯誤,執行過程就會自動跳轉到catch子句,然後把異常物件推入乙個變數物件並置於作用域鏈的首位。和with相同,在catch**塊內部,函式所有區域性變數將會放在第二個作用域鏈物件中。

無論是with語句、try-catch語句還是eval語句,都被認為是動態作用域。

動態作用域只存在於**執行過程中,因此無法通過靜態分析檢測出來。

閉包允許函式訪問區域性作用域之外的資料。

但是使用閉包可能會導致效能問題。

如:

funciton a()

}

上面例子中的事件處理函式就是乙個閉包。

當a函式執行時,乙個包含了變數id以及其他資料的活動物件被建立,它成為執行上下文作用域鏈中的第乙個物件,全域性物件緊隨其後。

當閉包被建立時,它的scope屬性被初始化為上面這些物件。

通常來說函式的活動物件會隨著執行上下文一同銷毀,但由於閉包的scope屬性包含了與執行上下文作用域鏈相同的物件的引用,由於引用還存在於閉包的scope中,因此變數物件無法被銷毀。這意味著閉包需要更多的記憶體開銷。

屬性或方法在原型鏈中的位置越深,訪問它的速度越慢。

前端js效能優化總結

前端js效能優化總結 從 書寫效率和巨集觀的部署等兩個方向進行總結。1 效率 變數使用優化 宣告物件和陣列使用字面量,如var newarray var newobject js尋找變數使用變數作用域鏈,如果常常使用的在外層作用域的可以使用臨時變數代替。如for 寫成var tbody docume...

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...