在javascript中如何實現高效能的載入順序

這篇文章主要為大家介紹了關於高效能的javascript之加載順序與執行原理的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們一起學習學習吧。

前言

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

##當瀏覽器遇到<script>標籤的時候，瀏覽器必須先話時間下載外鏈的檔案然後並執行，在這過程中，頁面渲染和使用者互動是完全被阻塞的。 <p><p><span style="max-width:90%">腳本放在哪裡比較好？ <strong><p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc28bc5804d079bd32dbd5b68ebce33e-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>這種情況無疑是存在嚴重的效能問題的，由於腳本會阻塞頁面的渲染，直到它們全部下載並執行完成後，頁面渲染才會繼續，下面的圖就是程式碼的執行順序<p><p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc28bc5804d079bd32dbd5b68ebce33e-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>第一個js檔案下載，要等到第一個js檔案下載完全才會執行第二個js文件，不過現在IE8，Firefox3.5,Safari4和Chrome2都允許並行下載js文件，遺憾的是，js下載過程還是會阻塞其他資源的下載，例如：圖片<p><p><span style="max-width:90%">#所以提高效能的方法之一：將腳本放在body底部<strong><p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p><span style="max-width:90%">#組織腳本<strong> <p>#由於每個<script>標籤下載時都會阻塞頁面的渲染，所以減少頁麵包含的<script>標籤數量是必不可少的，解決方法：可以把多個js檔案合併打包成一個js檔,這樣子做的好處就是可以最小化延遲時間將會明顯的改善頁面的整體效能，除此之外，還可以減少HTTP的請求。 <p>一般來說下載單一100KB的檔案比下載4個25KB的檔案快。 <p>如果有多個外鏈的js文件，可以合併成一個js文件<p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p><span style="max-width:90%"><strong>#無阻塞的腳本 <p>儘管下載單一較大的js檔案只會產生一次HTTP的請求，但會假死瀏覽器一大一段時間，為了避免這種情況，你需要逐步載入js檔案到頁面中。 <p><span style="color: #ff0000"><strong>延遲的腳本<p>defer屬性指明本元素所包含的腳本可以延遲執行，但是只有IE4 和Firefox3.5 的瀏覽器支援<p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/dc82a41b29238b83c4c963701b7747fb-5.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>簡單來說defer的機制就是知道DOM載入完成前才去下載js文件，不會阻塞瀏覽器的其他行程<p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>在不支援defer屬性的瀏覽器彈出的順序是：defer,script,load<p>#支援defer屬性的瀏覽器彈出的順序是:script,defer,load<p> 所以說defer是在onload事件執行之前被呼叫<p><span style="max-width:90%"><strong>動態腳本<p>動態腳本的注入有兩種方式，第一就是動態建立script標籤，第二就是透過XMLHttpRequest注入頁面<p><strong>先說說第一種怎麼使用：<p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-7.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>##這種技術的重點在於：無論在何時啟動下載，檔案的下載和執行過程不會阻塞頁面其他進程，但使用動態腳本節點下載js檔案時，傳回的程式碼會立即執行（除了Firefox和Opera，它們會等待先前所有動態腳本節點執行完畢）<p>在主流的瀏覽器會在<script>標籤接收完成時觸發一個load事件，但是ie瀏覽器沒有，所以我們必須封裝一個兼容所有的瀏覽器都可以使用的方法<p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/8659708c1168fe97e3e14aa8d1c4748e-8.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>這種方式的缺點就是要清楚檔案的載入順序，當js檔案多了，依賴關係複雜的時候，很難管理載入的依賴順序<p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>就像這樣子寫的程式碼很難維護<p><strong>第二種動態建立腳本方式<p style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/31eb9d88b81f295bb1a4888cb5a72016-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><p>#實際上相當於創建一個帶有內聯腳本的<script>標籤，一旦新建立的<script>元素被加入到頁面，程式碼就會立即執行然後準備就緒。 <p><strong>優點：就是下載的js程式碼但是不立即執行，這樣子可以把腳本的執行推遲到你準備好的時候執行，這種方法還可以兼容所有的瀏覽器<p><strong>缺點：js檔案必須與所要求的頁面處於相同的網域，js檔案不能從CDN下載，一般大型web應用程式都不會使用這種方式<p> <strong>#建議使用無阻塞模式：<p>先加入動態所需的程式碼，然後假裝初始化頁面的剩下的程式碼<p>[圖片上傳失敗...( image-dd3f9-1515902024710)]<p>上面介紹了那麼多，給大家推荐一些動態延遲加載的庫<p>有YUI3，LazyLoad和LABjs等這些庫，個人覺得LABjs庫比較好用，但沒有用過，大家可以去了解一下，使用方法就不在這裡說了。 <p><span style="max-width:90%"><strong>總結：## 幾個提升js效能的面向<p>      1.</script>

以上是在javascript中如何實現高效能的載入順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！