前言

javascript在瀏覽器中的性能，可以認為是開發者所面臨的最嚴重的可用性問題，今天，自己看完高性能的javascript的加載和執行這一章，聊聊怎么解決js的加載順序和執行的原理，下面話不多說了，來一起看看詳細的介紹：

當瀏覽器遇到<script>標簽的時候，瀏覽器必須先話時間下載外鏈的文件然后并執行，在這過程中，頁面渲染和用戶交互是完全被阻塞的。

腳本放在哪里比較好？

這種情況無疑是存在嚴重的性能問題的，由于腳本會阻塞頁面的渲染，直到它們全部下載并執行完成后，頁面渲染才會繼續，下面的圖就是代碼的執行順序

第一個js文件下載，要等到第一個js文件下載完全才會執行第二個js文件，不過現在IE8，Firefox3.5,Safari4和Chrome2都允許并行下載js文件，遺憾的是，js下載過程還是會阻塞其他資源的下載，例如：圖片

所以提高性能的方法之一：將腳本放在body底部

組織腳本

由于每個<script>標簽下載時都會阻塞頁面的渲染，所以減少頁面包含的<script>標簽數量是必不可少的，解決方法：可以把多個js文件合并打包成一個js文件,這樣子做的好處就是可以最小化延遲時間將會明顯的改善頁面的總體性能，除此之外，還可以減少HTTP的請求。

一般來說下載單個100KB的文件比下載4個25KB的文件快。

如果有多個外鏈的js文件，可以合并成一個js文件

無阻塞的腳本

盡管下載單個較大的js文件只產生一次HTTP的請求，但是會假死瀏覽器一大段時間，為了避免這種情況，你需要向頁面中逐步加載js文件。

延遲的腳本

defer屬性指明本元素所含的腳本可以延遲執行，但是只有IE4+和Firefox3.5+的瀏覽器支持

簡單來說defer的機制就是知道DOM加載完成前才去下載js文件，不會阻塞瀏覽器的其他進程

在不支持defer屬性的瀏覽器彈出的順序是：defer,script,load

支持defer屬性的瀏覽器彈出的順序是:script,defer,load

所以說defer是在onload事件執行之前被調用

動態腳本

動態腳本的注入有兩種方式，第一就是動態創建script標簽，第二就是通過XMLHttpRequest注入頁面

先說說第一種怎么使用：

這種技術的重點在于：無論在何時啟動下載，文件的下載和執行過程不會阻塞頁面其他進程，但是使用動態腳本節點下載js文件時，返回的代碼會立即執行（除了Firefox和Opera，它們會等待此前所有動態腳本節點執行完畢）

在主流的瀏覽器會在<script>標簽接收完成時觸發一個load事件，但是ie瀏覽器沒有，所以我們必須封裝一個兼容所有的瀏覽器都可以使用的方法

這種方式的缺點就是要清楚文件的加載順序，當js文件多了，依賴關系復雜的時候，很難管理加載的依賴順序

就像這樣子寫的代碼很難維護

第二種動態創建腳本方式

實際上相當于創建一個帶有內聯腳本的<script>標簽，一旦新創建的<script>元素被添加到頁面，代碼就會立即執行然后準備就緒。

優點：就是下載的js代碼但是不立即執行，這樣子可以把腳本的執行推遲到你準備好的時候執行，這種方法還可以兼容所有的瀏覽器

缺點：js文件必須與所請求的頁面處于相同的域，js文件不能從CDN下載，一般大型web應用都不會使用這種方式

推薦使用無阻塞模式：

先添加動態所需的代碼，然后假裝初始化頁面的剩下的代碼

[圖片上傳失敗...(image-dd3f9-1515902024710)]

上面介紹了那么多，給大家推薦一些動態延遲加載的庫

有YUI3，LazyLoad和LABjs等這些庫，個人覺得LABjs庫比較好用，但是沒有用過，大家可以去了解一下，使用方法就不在這里說了。

總結：

提高js性能的幾個方面

      1.</body>閉合標簽之前，將所有的<script>標簽放到頁面底部。這能確保在腳本執行前頁面已經完成了渲染

      2.合并腳本。頁面中的<script>標簽越少，加載也就越快，響應也更快。無論外鏈文件還是內嵌腳本都是如此

      3.有多種無阻塞下載js的方法

            3.1使用<script>標簽的defer屬性

            3.2使用動態創建的<script>元素來下載并執行代碼

            3.3使用XHR對象下載js代碼并注入頁面中

通過以上策略，可以極大提高那些需要使用大量js的web應用的實際性能

好了，

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com