移除阻止呈現的JavaScript

時間 2019-11-09

標籤移除阻止呈現 javascript 欄目 JavaScript 简体版

原文原文鏈接

我的原創網址： http://www.phpthinking.com/archives/443javascript

瀏覽器必須先解析網頁，而後才能將其呈現給用戶。若是瀏覽器在解析過程當中遇到系統阻止的外部腳本，必須中止解析而且下載該JavaScript。每次遇到這種狀況時，瀏覽器都會增長一個網絡往返過程，這樣就會致使首次呈現網頁的時間延遲。php

建議

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

內嵌較小的JavaScript

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

<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異步屬性。例如：網絡

<script async src="my.js">

若是您的JavaScript資源使用的是document.write，則使用異步加載就會不安全。咱們建議您重寫使用document.write的腳本，以改用其餘技術。框架

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

常見問題解答

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。