拆分初始化負載，提升性能（四）

拆分初始化負載，提升性能

1  在初始化時加載必要的javaScript,其他的JavaScript稍後再加載；避免給用戶帶來響應停頓的印象。（在初始化頁面時，不少函數下載了，但並未執行）；

2   尋找拆分的函數

Firebug的JavaScript性能分析器能顯示出在觸發onload事件以前執行的函數名。咱們能夠經過這個列表，把js代碼拆分紅一個頁面初始化須要加載的文件；另外一個能夠延遲加載。（須要保留醋無處理以及條件判斷的代碼）

Doloto能夠自動拆分javascript代碼的系統，能夠拆分紅不一樣的組，第一組包含初始化網頁所必需的函數，剩下的在初始化函數加載完後再進行無阻塞加載。

3 未定義標識符和競爭狀態

拆分javascript代碼時應該注意：避免出現未定義標識符錯誤；

解決方案：在延遲加載的代碼與用戶界面元素相關鏈的狀況下，能夠經過改變元素的展示來解決延遲代碼沒有加載完的問題（若是延遲代碼沒有加載完，用戶點擊了這個按鈕，就會出現未定義錯誤）；

在這種狀況下，菜單能夠包含一個「加載中...」的圖標；提醒用戶尚未加載完。

 

還有個選擇是延遲加載的代碼裏綁定界面元素的事件處理程序。菜單會初始化爲靜態文本，不會執行js文件；Internet Explorer 可經過attachEvent實現；其它瀏覽器可採用addEventListener.

在延遲加載的代碼不與界面相關連時，可以使用樁(stub)函數解決這個問題。（stub（）函數是一個與原函數名稱相同可是函數體爲空，或者是一些李女士代碼代替原有函數內容。初始化時插入stub()函數，調用他們時，再去加載其餘的javascript代碼；新增的javascript代碼會覆蓋樁函數。若是有須要，樁函數會返回一個值，好比一個空的字符串。也能夠用樁函數記錄用戶的請求，並在javascript代碼加載完時調用相應的代碼）

 

相關例子：google的HTTP瀑布流。