Javascript 非同步載入詳解(轉)
<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 同時,還會繼續進行後續頁面的處理。
(function但是,這種載入方式在載入執行完之前會阻止 onload 事件的觸發,而現在很多頁面的程式碼都在 onload 時還要執行額外的渲染工作等,所以還是會阻塞部分頁面的初始化處理。 3. onload 時的非同步載入() { 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); })();
(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.非同步載入的其它方法 由於Javascript的動態特性,還有很多非同步載入方法:
- XHR Eval
- XHR Injection
- Script in Iframe
- Script Defer
- document.write Script Tag
- 還有一種方法是用 setTimeout 延遲0秒 與 其它方法組合。
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中不支援。
- 沒有 async 屬性,script 將立即獲取(下載)並執行,然後才繼續後面的處理,這期間阻塞了瀏覽器的後續處理。
- 如果有 async 屬性,那麼 script 將被非同步下載並執行,同時瀏覽器繼續後續的處理。
- HTML4中就有了defer屬性,它提示瀏覽器這個 script 不會產生任何文件元素(沒有document.write),因此瀏覽器會繼續後續處理和渲染。
- 如果沒有 async 屬性 但是有 defer 屬性,那麼script 將在頁面parse之後執行。
- 如果同時設定了二者,那麼 defer 屬性主要是為了讓不支援 async 屬性的老瀏覽器按照原來的 defer 方式處理,而不是同步方式。
var t_start = Number(new Date()); while ( t_start + 5000 > Number(new Date()) ) {}這個程式碼將使 js 執行5秒才能完成! 五、script 標籤使用的歷史 1. script 放在 HEAD 中
<head> <script src=“…”></script> </head>
- 阻止了後續的下載;
- 在IE 6-7 中 script 是順序下載的,而不是現在的 “並行下載、順序執行” 的方式;
- 在下載和解析執行階段阻止渲染(rendering);
... <script src=“…”></script> </body>
- 不阻止其它下載;
- 在IE 6-7 中 script 是順序下載的;
- 在下載和解析執行階段阻止渲染(rendering);
var se = document.createElement ('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se);這就是本文主要說的方式。
- 不阻止其它下載;
- 在所有瀏覽器中,script都是並行下載;
- 只在解析執行階段阻止渲染(rendering);
var se = new Image(); se.onload = registerScript(); se.src = 'http://anydomain.com/A.js';
把下載 js 與 解析執行 js 分離出來
- 不阻止其它下載;
- 在所有瀏覽器中,script都是並行下載;
- 不阻止渲染(rendering)直到真正需要時;
相關推薦
Javascript 非同步載入詳解(轉)
本文總結一下瀏覽器在 javascript 的載入方式。 關鍵詞:非同步載入(async loading),延遲載入(lazy loading),延遲執行(lazy execution),async 屬性, defer 屬性 一、同步載入與非同步載入的形式 1. 同步載入 我們平時最常使用
JavaScript apply 方法 詳解(轉)
主要我是要解決一下幾個問題: 1. apply和call的區別在哪裡 2. 什麼情況下用apply,什麼情況下用call 3. apply的其他巧妙用法(一般在什麼情況下可以使用apply) 我首先從網上查到關於ap
JavaScript之js非同步載入精解
在解釋之前先鋪墊幾個知識點。 DomTree:在頁面渲染時候會把html構建成一個樹形結構,把標籤全部掛在樹形結構上,構建DOM樹採用深度優先原則。 Dom解析:繪製DOM樹過程中,當遇到外部引入的檔案標籤時候,不用等到DOM元素全
Javascript圖片預載入詳解
預載入圖片是提高使用者體驗的一個很好方法。圖片預先載入到瀏覽器中,訪問者便可順利地在你的網站上衝浪,並享受到極快的載入速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利,它保證了圖片快速、無縫地釋出,也可幫助使用者在瀏覽你網站內容時獲得更好的使用者體驗。本文將分享三個不同
Rsyslog配置文件詳解(轉)
安裝 權限 lines true time cor optional tex 以及 最近在搭建日誌審計服務器,使用了rsyslog,發現這篇文章很有用,收藏一下。 原文鏈接:http://my.oschina.net/0757/blog/198329 具體內容: 非常詳
javascript設計模式詳解之命令模式
這一 clas 例子 別了 logs 操作 book 技術 概念 每種設計模式的出現都是為了彌補語言在某方面的不足,解決特定環境下的問題。思想是相通的。只不過不同的設計語言有其特定的實現。對javascript這種動態語言來說,弱類型的特性,與生俱來的多態性,導致某些設
Buffer類的詳解(轉)
iteye 原始數據類型 pub bst exception 如何 數字 硬件 final Buffer 類是 java.nio 的構造基礎。一個 Buffer 對象是固定數量的數據的容器,其作用是一個存儲器,或者分段運輸區,在這裏,數據可被存儲並在之後用於檢索。緩沖區可以
UML類圖與類的關系詳解--轉
position 好的 -a erp 生命 靜態 pan 雙向 單選 http://www.uml.org.cn/oobject/201104212.asp 原文地址 UML類圖與類的關系詳解 2011-04-21 來源:網絡
CentOS 7.1下SSH遠程登錄服務器詳解-轉
info which 開啟 如何 pty wan public keygen ger 轉自:http://www.linuxidc.com/Linux/2016-03/129204.htm 一、明文傳輸與加密傳輸 明文傳輸:當我們的數據包在網絡上傳輸的時候,以數據包的原
lucene、lucene.NET詳細使用與優化詳解[轉]
構造 bitset 更多 隱患 .net wrapper 屬性設置 似的 擔心 1 lucene簡介1.1 什麽是luceneLucene是一個全文搜索框架,而不是應用產品。因此它並不像www.baidu.com 或者google Desktop那麽拿來就能用,它只是提供了
c++拷貝函數詳解(轉)
light clu 默認 fun 編譯 存在 自動生成 pri 指針成員 一. 什麽是拷貝構造函數 首先對於普通類型的對象來說,它們之間的復制是很簡單的,例如 int a = 100; int b = a; 而類對象與普通對象不同,類對象內部結構一般
KM算法詳解[轉]
分割 貪心 方便 itl 兩個 最大權值匹配 之間 保留 top KM算法詳解 原帖鏈接:http://www.cnblogs.com/zpfbuaa/p/7218607.html#_label0 閱讀目錄 二分圖博客推薦 匈牙利算法步驟 匈牙利算
JavaScript Date.parse()詳解
note num order 寫法 瀏覽器兼容 支持 div ref ice Date.parse() 函數用於分析一個包含日期的字符串,並返回該日期與 1970 年 1 月 1 日午夜之間相差的毫秒數。 語法 Date.parse( dateString ) 參數
MANIFEST.MF 文件內容完全詳解(轉)
做的 software 多功能 keys 要求 ext pmd 獲取 可執行 打開Java的JAR文件我們經常可以看到文件中包含著一個META-INF目錄, 這個目錄下會有一些文件,其中必有一個MANIFEST.MF,這個文件描述了該Jar文件的很多信息,下面將詳細介紹MA
Flume日誌收集系統架構詳解--轉
with 指定 mwl 裏程碑 工程 生命 數據接收 dba -i 2017-09-06 朱潔 大數據和雲計算技術 任何一個生產系統在運行過程中都會產生大量的日誌,日誌往往隱藏了很多有價值的信息。在沒有分析方法之前,這些日誌存儲一段時間後就會被清理。隨著技術的發展和
macOS開發之NSTableView的應用詳解 - 轉
validate creat 編寫 移除 分割線 gen styles 如果 bool 傳送門:https://my.oschina.net/u/2340880/blog/886861 摘要: NSTableView是AppKit中的表視圖控件,是macOS開發中非常重要的
SSD(single shot multibox detector)算法及Caffe代碼詳解[轉]
作者 3.4 pdf 論文 做了 對比度調整 覆蓋 eccv 添加 這篇博客主要介紹SSD算法,該算法是最近一年比較優秀的object detection算法,主要特點在於采用了特征融合。 論文:SSD single shot multibox detector論文鏈接:h
Linux如何實現開機啟動程序詳解(轉)
window 自己的 進行 執行時間 dns服務 全部 星期 ext 例如 Linux開機啟動程序詳解我們假設大家已經熟悉其它操作系統的引導過程,了解硬件的自檢引導步驟,就只從Linux操作系統的引導加載程序(對個人電腦而言通常是LILO)開始,介紹Linux開機引導的步驟
Python中time模塊詳解(轉)
才有 border 格式化時間 sta 程序 格式化字符串 夏令時 oca import 在平常的代碼中,我們常常需要與時間打交道。在Python中,與時間處理有關的模塊就包括:time,datetime以及calendar。這篇文章,主要講解time模塊。 在開始之前,首
Java8學習筆記(五)--Stream API詳解[轉]
有效 編程效率 實時處理 phaser 綜合 files -- bin 並發模式 為什麽要使用StreamStream 作為 Java 8 的一大亮點,它與 java.io 包裏的 InputStream 和 OutputStream 是完全不同的概念。它也不同於 StAX