js性能優化 · 前端技術指南

## 前言通過本文我們將總結一些常用的如何正確的加載和執行js代碼的技巧，希望能夠幫助到你。 ## 概覽無論當前 JavaScript 代碼是內嵌還是在外鏈文件中，頁面的下載和渲染都必須停下來等待腳本執行完成。JavaScript 執行過程耗時越久，瀏覽器等待響應用戶輸入的時間就越長。瀏覽器在下載和執行腳本時出現阻塞的原因在于，腳本可能會改變頁面或 JavaScript 的命名空間，它們對后面頁面內容造成影響。一個典型的例子就是在頁面中使用document.write()。當瀏覽器遇到`<script>`標簽時，當前 html 頁面無從獲知 JavaScript 是否會向`<p>` 標簽添加內容，或引入其他元素，或甚至移除該標簽。因此，這時瀏覽器會停止處理頁面，先執行` JavaScript`代碼，然后再繼續解析和渲染頁面。同樣的情況也發生在使用 src 屬性加載 JavaScript的過程中，瀏覽器必須先花時間下載外鏈文件中的代碼，然后解析并執行它。在這個過程中，頁面渲染和用戶交互完全被阻塞了。 ## 腳本位置 HTML 4 規范指出` <script> `標簽可以放在 HTML 文檔的`<head>`或`<body>`中，并允許出現多次。web 開發人員一般習慣在` <head>` 中加載外鏈的 JavaScript，接著用 `<link> `標簽用來加載外鏈的 CSS 文件或者其他頁面信息。 ~~~ //低效的方式 <head> <title>Source Example</title> <script type="text/javascript" src="script1.js"></script> <script type="text/javascript" src="script2.js"></script> <script type="text/javascript" src="script3.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> ~~~ 然而這種常規的做法卻隱藏著嚴重的性能問題。在network中的分析欄，可以看到在腳本沒有下載和執行完成前，所有的樣式以及dom都是不被加載的，頁面處于空白狀態，所以我們應該避免這種情況。（作為常識要知道，1. 另一個腳本文件開始前會有一定的延遲，這個延遲就是上一個腳本文件的執行時間，雖然可能很短。2. 如果你需要依賴前一個腳本執行完，這樣邏輯是可以的，但依賴不是這么玩的哦）。 ## 參考文檔 * 參考文檔：http://mp.weixin.qq.com/s/W6B0nOpzA7q9nGjIpeaGBQ