您當前位置：首頁 > 互聯網 > 移除阻止呈現的JavaScript

移除阻止呈現的JavaScript

來源：程序員人生發布時間：2014-10-03 08:00:00 閱讀次數：3199次

歡迎訪問個人原創地址：http://www.phpthinking.com/archives/443

瀏覽器必須先解析網頁，然后才能將其呈現給用戶。如果瀏覽器在解析過程中遇到系統阻止的外部腳本，必須停止解析并且下載該JavaScript。每次遇到這種情況時，瀏覽器都會增加一個網絡往返過程，這樣就會導致首次呈現網頁的時間延遲。

建議

建議您以內嵌方式處理呈現首屏區域所需的JavaScript，并讓為網頁添加其他功能所需的JavaScript延遲加載，直到首屏內容發送完畢為止。請注意，要通過這種方式縮短加載時間，您還必須優化CSS發送過程。

內嵌較小的JavaScript

如果外部腳本較小，您可以直接將它們添加到HTML文檔。通過這種方式內嵌較小文件可讓瀏覽器繼續呈現網頁。例如，如果HTML文檔如下所示：

<html> <head> <scripttype="text/javascript"src="small.js"></script> </head> <body> <div> Hello, world! </div> </body></html>

資源small.js如下所示：

/* contents of a small JavaScript file */

那么，您即可按如下這樣內嵌腳本：

<html> <head> <scripttype="text/javascript"> /* contents of a small JavaScript file */ </script> </head> <body> <div> Hello, world! </div> </body></html>

這樣，您就可以將small.js內嵌在HTML文檔中，從而消除對它的外部請求。

延遲加載JavaScript

為防止JavaScript阻止網頁加載，建議您在加載JavaScript時使用HTML異步屬性。例如：

如果您的JavaScript資源使用的是document.write，則使用異步加載就會不安全。我們建議您重寫使用document.write的腳本，以改用其他技術。

此外，異步加載JavaScript時，如果您的網頁加載互相依賴的腳本，請務必謹慎，以確保您的應用以合適的依賴順序加載腳本。

常見問題解答

如果我使用的是JavaScript庫（例如jQuery），該怎么做？: 很多JavaScript庫（例如jQuery）都可用來增強網頁，從而為網頁增添額外的互動性、動畫和其他效果。不過，這些行為大多可在首屏內容呈現后再安全添加。請考慮是否可以將此類JavaScript的執行和加載延遲到網頁加載后。
如果我使用JavaScript框架來構造網頁，該如何操作？: 如果網頁內容由客戶端JavaScript構造，那么您應考慮一下是否可以嵌入相關的JavaScript模塊，從而避免產生額外的網絡往返過程。同樣，利用服務器端呈現可顯著提升首次網頁加載的效果，方式如下：在服務器上呈現JS模板，并將結果內嵌到HTML，然后在應用加載后使用客戶端模板。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生