非同步載入的方式

来源:https://www.cnblogs.com/manshufeier/archive/2018/08/13/9469673.html
-Advertisement-
Play Games

一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、 ...


一、同步載入與非同步載入的形式

1. 同步載入

我們平時最常使用的就是這種同步載入形式：<script src="http://yourdomain.com/script.js"></script> 

同步模式，又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的解析，因此停止了後續的文件載入（如圖像）、渲染、代碼執行。

js 之所以要同步執行，是因為 js 中可能有輸出 document 內容、修改dom、重定向等行為，所以預設同步執行才是安全的。

以前的一般建議是把<script>放在頁面末尾</body>之前，這樣儘可能減少這種阻塞行為，而先讓頁面展示出來。

簡單說：載入的網路 timeline 是瀑布模型，而非同步載入的 timeline 是併發模型。

2. 常見非同步載入（Script DOM Element）

(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

非同步載入又叫非阻塞，瀏覽器在下載執行 js 同時，還會繼續進行後續頁面的處理。

這種方法是在頁面中<script>標簽內，用 js 創建一個 script 元素並插入到 document 中。這樣就做到了非阻塞的下載 js 代碼。

async屬性是HTML5中新增的非同步支持，見後文解釋，加上好（不加也不影響）。

此方法被稱為 Script DOM Element 法，不要求 js 同源。

將js代碼包裹在匿名函數中並立即執行的方式是為了保護變數名泄露到外部可見，這是很常見的方式，尤其是在 js 庫中被普遍使用。

例如 Google Analytics 和 Google+ Badge 都使用了這種非同步載入代碼：

(function() {
     var ga = document.createElement('script'); 
　　  ga.type = 'text/javascript'; 
 　　 ga.async = true;
　　  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();
 
(function(){
　　 var po = document.createElement("script");
　　 po.type = "text/javascript"; 
　　 po.async = true;
　　 po.src = "https://apis.google.com/js/plusone.js";
　　 var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
 })();
但是，這種載入方式在載入執行完之前會阻止 onload 事件的觸發，而現在很多頁面的代碼都在 onload 時還要執行額外的渲染工作等，所以還是會阻塞部分頁面的初始化處理。

3. onload 時的非同步載入

(function() {
     function async_load(){
         var s = document.createElement('script');
         s.type = 'text/javascript';
         s.async = true;
         s.src = 'http://yourdomain.com/script.js';
         var x = document.getElementsByTagName('script')[0];
         x.parentNode.insertBefore(s, x);
     }
     if (window.attachEvent)
         window.attachEvent('onload', async_load);
     else
         window.addEventListener('load', async_load, false);
 })();

這和前面的方式差不多，但關鍵是它不是立即開始非同步載入 js ，而是在 onload 時才開始非同步載入。這樣就解決了阻塞 onload 事件觸發的問題。

補充：DOMContentLoaded 與 OnLoad 事件

DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒有載入完。

OnLoad：頁面的所有資源都載入完畢（包括圖片）。瀏覽器的載入進度在這時才停止。

這兩個時間點將頁面載入的timeline分成了三個階段。

4.$(document).ready()

  • 需要引入jquery

  • 相容所有瀏覽器

$(document).ready(function() {
        alert("載入完成！");
 });

5.<script>標簽的async="async"屬性

<script src="file.js" async></script> 

  • async屬性是HTML5新增屬性，需要Chrome、FireFox、IE9+瀏覽器支持；

  • async屬性規定一旦腳本可用，則會非同步執行；

  • async屬性僅適用於外部腳本；

  • 此方法不能保證腳本按順序執行；

  • 他們將在onload事件之前完成。

6.<script>標簽的defer="defer"屬性

 <script src="file.js" defer></script> 

  • defer屬性規定是否對腳本執行進行延遲，直到頁面載入為止；

  • 如果腳本不會改變文檔的內容，可將defer屬性加入到<script>標簽中，以便加快處理文檔的速度；

  • 相容所有瀏覽器；

  • 此方法可以確保所有設置了defer屬性的腳本按順序執行。

7.非同步載入的其它方法

由於Javascript的動態特性，還有很多非同步載入方法：

  • XHR Eval 

  • XHR Injection

  • Script in Iframe

  • document.write Script Tag

  • 還有一種方法是用 setTimeout 延遲0秒與其它方法組合。

XHR Eval ：通過 ajax 獲取js的內容，然後 eval 執行。

 var xhrObj = getXHRObject(); 
 xhrObj.onreadystatechange =  
   function() {  
     if ( xhrObj.readyState != 4 ) return; 
     eval(xhrObj.responseText); 
   }; 
 xhrObj.open('GET', 'A.js', true); 
 xhrObj.send('');

Script in Iframe：創建並插入一個iframe元素，讓其非同步執行 js 。

 var iframe = document.createElement('iframe'); 
 document.body.appendChild(iframe); 
 var doc = iframe.contentWindow.document; 
 doc.open().write('<body onload="insertJS()">'); 
 doc.close();

GMail Mobile：頁內 js 的內容被註釋，所以不會執行，然後在需要的時候，獲取script元素中 text 內容，去掉註釋後 eval 執行。

<script type="text/javascript"> 
 /* 
 var ...  
 */ 
 </script>

詳見參考資料中2010年的Velocity 大會 Steve Souders 和淘寶的那兩個講義。

二、async 和 defer 屬性

1. defer 屬性

<script src="file.js" defer></script> 

defer屬性聲明這個腳本中將不會有 document.write 或 dom 修改。

瀏覽器將會並行下載 file.js 和其它有 defer 屬性的script，而不會阻塞頁面後續處理。

defer屬性在IE 4.0中就實現了，超過13年了！Firefox 從 3.5 開始支持defer屬性 。

註：所有的defer腳本保證是按順序依次執行的。

2. async 屬性

<script src="file.js" async></script> 

async屬性是HTML5新增的。作用和defer類似，但是它將在下載後儘快執行，不能保證腳本會按順序執行。它們將在onload 事件之前完成。 Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 屬性。可以同時使用 async 和 defer，這樣IE 4之後的所有 IE 都支持非同步載入。

3. 詳細解釋

<script> 標簽在 HTML 4.01 與 HTML5 的區別：

  • type 屬性在HTML 4中是必須的，在HTML5中是可選的。

  • async 屬性是HTML5中新增的。

  • 個別屬性（xml:space）在HTML5中不支持。

說明：

（1）沒有 async 屬性，script 將立即獲取（下載）並執行，然後才繼續後面的處理，這期間阻塞了瀏覽器的後續處理。

（2）如果有 async 屬性，那麼 script 將被非同步下載並執行，同時瀏覽器繼續後續的處理。

（3）HTML4中就有了defer屬性，它提示瀏覽器這個 script 不會產生任何文檔元素（沒有document.write），因此瀏覽器會繼續後續處理和渲染。

（4）如果沒有 async 屬性但是有 defer 屬性，那麼script 將在頁面parse之後執行。

（5）如果同時設置了二者，那麼 defer 屬性主要是為了讓不支持 async 屬性的老瀏覽器按照原來的 defer 方式處理，而不是同步方式。

PS：既然 HTML5 中已經支持非同步載入，為什麼還要使用前面推薦的那種麻煩（動態創建 script 元素）的方式？

答：為了相容尚不支持 async 老瀏覽器。如果將來所有瀏覽器都支持了，那麼直接在script中加上async 屬性是最簡單的方式。

三、延遲載入（lazy loading）

前面解決了非同步載入（async loading）問題，再談談什麼是延遲載入。

延遲載入：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而是稍後的某些情況才需要的。延遲載入就是一開始並不載入這些暫時不用的js，而是在需要的時候或稍後再通過js 的控制來非同步載入。

也就是將 js 切分成許多模塊，頁面初始化時只載入需要立即執行的 js ，然後其它 js 的載入延遲到第一次需要用到的時候再載入。

特別是頁面有大量不同的模塊組成，很多可能暫時不用或根本就沒用到。就像圖片的延遲載入，在圖片出現在可視區域內時（在滾動條下拉）才載入顯示圖片。

四、script 的兩階段載入 與 延遲執行（lazy execution）

JS的載入其實是由兩階段組成：下載內容（download bytes）和執行（parse and execute）。

瀏覽器在下載完 js 的內容後就會立即對其解析和執行，不管是同步載入還是非同步載入。

前面說的非同步載入，解決的只是下載階段的問題，但代碼在下載後會立即執行。

而瀏覽器在解析執行 JS 階段是阻塞任何操作的，這時的瀏覽器處於無響應狀態。

我們都知道通過網路下載 script 需要明顯的時間，但容易忽略了第二階段，解析和執行也是需要時間的。script的解析和執行所花的時間比我們想象的要多，尤其是script 很多很大的時候。有些是需要立刻執行，而有些則不需要（比如只是在展示某個界面或執行某個操作時才需要）。

這些script 可以延遲執行，先非同步下載緩存起來，但不立即執行，而是在第一次需要的時候執行一次。 

利用特殊的技巧可以做到下載與 執行的分離 (再次感謝 javascript 的動態特性)。比如將 JS 的內容作為 Image或 object 對象載入緩存起來，所以就不會立即執行了，然後在第一次需要的時候再執行。 

五、script 標簽使用的歷史

1. script 放在 HEAD 中

<head>
  <script src=“…”></script>
</head>

  • 阻止了後續的下載；

  • 在IE 6-7 中 script 是順序下載的，而不是現在的 “並行下載、順序執行” 的方式；

  • 在下載和解析執行階段阻止渲染（rendering）。

2. script 放在頁面底部（2007）

... 
 <script src=“…”></script> 
 </body>

  • 不阻止其它下載；

  • 在IE 6-7 中 script 是順序下載的；

  • 在下載和解析執行階段阻止渲染（rendering）。

3. 非同步載入script（2009）

var se = document.createElement
('script'); 
se.src = 'http://anydomain.com/A.js'; 
document.getElementsByTagName('head') 
[0].appendChild(se);

這就是本文主要說的方式。

  • 不阻止其它下載；

  • 在所有瀏覽器中，script都是並行下載；

  • 只在解析執行階段阻止渲染（rendering）。

4. 非同步下載 + 按需執行 (2010)

var se = new Image(); 
se.onload = registerScript(); 
se.src = 'http://anydomain.com/A.js';

 把下載 js 與 解析執行 js 分離出來

  • 不阻止其它下載；

  • 在所有瀏覽器中，script都是並行下載；

  • 不阻止渲染（rendering）直到真正需要時。

六、非同步載入的問題

在非同步載入的時候，無法使用 document.write 輸出文檔內容。

在同步模式下，document.write 是在當前 script 所在的位置輸出文檔的。而在非同步模式下，瀏覽器繼續處理後續頁面內容，根本無法確定 document.write 應該輸出到什麼位置，所以非同步模式下 document.write 不可行。而到了頁面已經 onload 之後，再執行 document.write 將導致當前頁面的內容被清空，因為它會自動觸發 document.open 方法。

實際上document.write的名聲並不好，最好少用。

替代方法：

1. 雖然非同步載入不能用 document.write，但還是可以onload之後執行操作dom（創建dom或修改dom）的，這樣可以實現一些自己的動態輸出。比如要在頁面非同步創建一個浮動元素，這和它在頁面中的位置就沒關係了，只要創建出該dom元素添加到 document 中即可。

2. 如果需要在固定位置非同步生成元素的內容，那麼可以在該固定位置設置一個dom元素作為目標，這樣就知道位置了，非同步載入之後就可以對這個元素進行修改。

六、JS 模塊化管理

非同步載入，需要將所有 js 內容按模塊化的方式來切分組織，其中就存在依賴關係，而非同步載入不保證執行順序。

另外，namespace 如何管理等相關問題。這部分已超出本文內容，可參考：

RequireJS 、 CommonJS 以及 王保平(淘寶)的 SeaJS 及其博客 。

七、JS最佳實踐

1. 最小化 js 文件，利用壓縮工具將其最小化，同時開啟http gzip壓縮工具；

2. 儘量不要放在 <head> 中，儘量放在頁面底部，最好是</body>之前的位置；

3. 避免使用 document.write 方法；

4. 非同步載入 js ，使用非阻塞方式，就是此文內容；

5. 儘量不直接在頁面元素上使用 Inline Javascript，如onClick 。有利於統一維護和緩存處理。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • angular應用容器化部署
    angular 應用容器化部署 Intro 我自己有做一個個人主頁，雖然效果不怎麼樣（不懂設計的典型程式猿...)，但是記錄了我對於前端框架及工具的一些實踐， 從開始只有一個 angularjs 製作的頁面到後面加入 less 動態寫css， gulp 自動化的將 less 文件編譯成 css 文件 ...
  • 關於使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入許可權檢查。許可權必須是可安裝的。”的問題
    @font-face是css3中定義字體的規則。 首先，在使用weui時，在Chrome、Firefox下沒有問題，但是在IE下提示“font-face 未能完成 OpenType 嵌入許可權檢查。許可權必須是可安裝的”，如下圖： 經過一番查找資料，解決方法如下： 1. 將@font-face中，字體的 ...
  • 把微信小程式非同步API為Promise，簡化非同步編程
    把微信小程式非同步API轉化為Promise。用Promise處理非同步操作有多方便，誰用誰知道。 微信官方沒有給出Promise API來處理非同步操作，而官方API非同步的又非常多，這使得多非同步編程會層層回調，代碼一複雜，回調起來就想砸電腦。 於是寫了一個通用工具，把微信官方的非同步API轉化為Promi ...
  • Javascript toString()、toLocaleString()、valueOf()三個方法的區別
    Array、Boolean、Date、Number等對象都具有toString()、toLocaleString()、valueOf()三個方法，那這三個方法有什麼區別？？？ 一、JS Array 例子： var array = new Array("niu","li","na"); console ...
  • es6 解構賦值
    結構賦值即按照一種模式對變數進行賦值，分為數組解構賦值和對象結構賦值 1. 數組結構賦值 let a; [a,b]=[1,2]//數組類型解構賦值 console.log(a);//1 [a,b,...rest]=[1,2,3,4,5,6]//輸出1,2,[3,4,5,6] [a,b,c=3]=[1 ...
  • jQuery全屏滾動插件fullPage使用
    1. 引入jquery.js和jquery.fullPage.min.js <script src="jquery.min.js"></script> <script src="chajian/jquery.fullPage.min.js"></script> 2. 書寫html <div id=" ...
  • jQuery獲取Select option 選擇的Text和 Value
    獲取一組radio被選中項的值:var item = $('input[name=items][checked]').val();獲取select被選中項的文本var item = $("select[@name=items] option[@selected]").text(); 獲取select ...
  • ES6的小知識（前半部分）
    一、let與const的使用 let：用來聲明一個變數，與var類似 1.用let聲明的變數，所聲明的變數只在命令所在的代碼塊內有效 2.用let聲明的變數在域解析的時候是不會被提升的 3.let不允許在同一作用域下聲明已經存在的變數 4.let和var在for迴圈里的區別 另外在for迴圈語句里的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類