如何加快JavaScript的載入與執行-js教程-PHP中文網

首頁

web前端

js教程

如何加快JavaScript的載入與執行

黄舟

Dec 20, 2016 pm 03:40 PM

javascript載入執行

JS 有個很無言的阻塞特性，就是當瀏覽器在執行JS 程式碼時，不能同時做其他任何事情，無論其程式碼是內嵌的還是外部的。

瀏覽器在碰到一個引入外部JS 文件的<script>標籤時會停下所有工作來下載並解析執行它，在這個過程中，頁面渲染和用戶交互完全被阻塞了，為了避免頁面加載時的停頓甚至空白頁的出現，JS 腳本應盡量放置在頁面底部，這點很重要：</script>

<html>
<head>
<title>无标题文档</title>
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">
</head>
<body>
<p>页面的内容。。。</p>
<!-- 推荐的位置，页面底部： -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

為了改善上面的阻塞情況，應盡可能的減少頁面中<script>標籤的出現次數，這同時也是考慮到HTTP 請求會帶來額外的效能開銷，也就是說應減少頁面中外鏈腳本的數量。 </script>

你可以手動合併你的多個JS 文件，也可採用類似Yahoo! combo handler 這樣的實時在線服務來實現，例如下面的這個<script>標籤實際上便載入了3個JS 文件：</script>

<html>  
<head>  
<title>无标题文档</title>  
<link rel="stylesheet" type="text/<a href="http://www.php1.cn/category/72.html">css</a>" href="http://www.php1.cn/">  
</head>  
<body>  
   
<p>页面的内容。。。</p>  
   
<!-- 推荐的位置，页面底部： --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?file1.js&file2.js&file3.js"></script>  
</body>  
</html>

為了阻塞狀況，這裡提供了幾個實作並行下載JS 腳本的方案。

1. 延遲的腳本

HTML4 為<script>標籤定義了一個defer 屬性，它能讓這段程式碼延遲執行，然而該屬性只有IE4+ 和Firefox 3.5+ 支援。宣告了defer 屬性的<script>會在DOM載入完成，window.onload 事件觸發前被解析執行：</script>

<script type="text/javascript" src="file1.js" defer></script>

2. 動態腳本元素

這是最通用的解決方案，透過DOM 動態地建立<script>元素並插入到文件中，文件在該元素被添加到頁面時開始下載，這樣無論在何時啟動下載，文件的下載和執行過程不會阻塞頁面其他進程。 </script>

不過要注意使用這種方式載入的程式碼會立刻執行，這樣需清楚的了解各文件的作用以及合理的執行順序，此時跟踪並確保腳本下載完成並準備就緒是很有必要的，非IE瀏覽器會在<script>元素接收完成時觸發一個load 事件，而IE 下則會觸發一個readystatechange 事件並透過readyState 屬性加以判斷便可。以下是相容地動態載入一個JS 腳本的函數：</script>

function load_script(url, callback) {  
    var script = document.createElement(&#39;script&#39;);  
    script.type = &#39;text/javascript&#39;;  
    if (script.readyState) {  //IE  
        script.onreadystatechange = function() {  
            if (script.readyState == &#39;loaded&#39; || script.readyState == &#39;complete&#39;) {  
                script.onreadystatechange = null;  
                callback();  
            }  
        }  
    } else {  //others  
        script.onload = function() {  
            callback();  
        }  
    }  
    script.src = url;  
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);  
}

你可以將這個函數儲存至一個load_script.js 文件，然後用該函數來載入其他的腳本，當要載入多個腳本時，為了確保正確的載入順序，可以將load_script() 的執行串聯起來，最後如前面說到的放至頁面的底部，這便是比較完美的解決方案了：

<script type="text/javascript" src="load_script.js"></script>  
<script type="text/javascript">
load_script(&#39;file1.js&#39;, function() {  
    load_script(&#39;file2.js&#39;, function() {  
        load_script(&#39;file3.js&#39;, function() {  
            //全部载入后的操作...  
        } );  
    } );  
} );  
</script>

3. XMLHttpRequest 腳本注入

即透過AJAX 方式加載，不過這種方式無法實現跨網域加載，不適用於大型網站。

我們上面做的這些工作當然也已經被那些牛人們完成了，並寫成了一些優秀的JS 類庫以便我們使用，它們均能很好地解決JS 腳本的阻塞問題，實現並行下載，例如： YUI3、LazyLoad、LABjs 等。

以上就是如何加快JavaScript的載入與執行的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。