Javascript無阻塞加載具體方式
看了《高性能JavaScript》的讀書筆記
幾個原則：
1、將腳本放在底部
<link>還是在head中，用以保證在js加載前，能加載出正常顯示的頁面。
<script>放在</body>前。
2、成組腳本
由于每個<script>標簽下載時阻塞頁面解析過程，所以限制頁面的<script>總數(shù)也可以改善性能。適用于內聯(lián)腳本和外部腳本。
3、非阻塞腳本
等頁面完成加載后，再加載js代碼。也就是，在window.load事件發(fā)出后開始下載代碼。
（1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器
<script defer>...</script>
內聯(lián)和外部文件
帶defer屬性的<script>可出現(xiàn)在文檔的任何位置，對應的js文件將在<script>被解析時啟動下載，但代碼不會執(zhí)行，直到DOM加載完畢（在onload事件句柄被調用之前）。所以實現(xiàn)了和也賣弄其他資源一起并行下載。
（2）動態(tài)腳本元素
文檔對象模型（DOM）允許你使用js動態(tài)創(chuàng)建HTML的幾乎全部文檔內容。
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementByTagName_r("head")[0].appendChild(script);
此技術的重點在于：無論在何處啟動下載，文件額下載和運行都不會阻塞其他頁面處理過程。即使在head里（除了用于下載文件的http鏈接）。
（3）The YUI3 approach
理念：用一個很小的初始代碼，下載其余的功能代碼，先引入文件：
<script type="text/javascript src=//img.jbzj.com/file_images/article/201306/yuanma/combo.js></script>
此種子文件大約10KB，
使用：
YUI().use("dom",function(Y){
Y.Dom.addclass(...)
})
當所有代碼可用時，回調函數(shù)被調用，YUI實例作為參數(shù)傳入，就可以立即使用新下載的功能。
The LazyLoad library
使用：先引入：lazyload-min.js
(4)
LazyLoad.js("a.js",function(){
Appliction.init();
})
多個文件：
LazyLoad.js(["a.js","b.js"],function(){
Application.init();
})
(5)The LABjs library
先引入：lab.js
$LAB.script("a.js").wait(function(){
Application.init();
})
多個文件，就鏈式寫法
他的獨特之處在于能夠管理依賴關系。
可以通過wait()函數(shù)指定哪些文件應該等待其他文件。
例如：b.js的代碼保證不在a.js之前運行
$LAB.script("a.js").wait().script("b.js").wait(function(){
Application.init();
})
這樣，雖然兩個文件是并行下載的，卻能保證a.js能在b.js之前執(zhí)行
相關文章
JavaScript新增的兩個原始數(shù)據(jù)類型詳解(Record和Tuple)
js中原始數(shù)據(jù)類型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的數(shù)據(jù)類型),引用的數(shù)據(jù)類型有Object,Array,Function,下面這篇文章主要給大家介紹了關于JavaScript新增兩個原始數(shù)據(jù)類型(Record和Tuple)的相關資料,需要的朋友可以參考下2022-03-03
一文徹底理解js原生語法prototype,__proto__和constructor
作為一名前端工程師,必須搞懂JS中的prototype、__proto__與constructor屬性,相信很多初學者對這些屬性存在許多困惑,容易把它們混淆,下面這篇文章主要給大家介紹了關于js原生語法prototype,__proto__和constructor的相關資料,需要的朋友可以參考下2021-10-10
本篇文章主要介紹了關于預加載InstantClick的問題解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了通過微信公眾平臺獲取公眾號文章的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
用js實現(xiàn)預覽待上傳的本地圖片...2007-03-03
在前端開發(fā)中,我們經(jīng)常需要實現(xiàn)文件下載功能,例如下載用戶上傳的圖片、用戶生成的文件等,這篇文章主要給大家介紹了關于如何通過1分鐘快速了解js實現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下2024-03-03
JavaScript利用Canvas實現(xiàn)粒子動畫倒計時
粒子動畫就是頁面上通過發(fā)射許多微小粒子來表示不規(guī)則模糊物體。本文將利用canvas實現(xiàn)酷炫的粒子動畫倒計時，感興趣的小伙伴可以嘗試一下2022-12-12
這篇文章主要為大家詳細介紹了JS原生上傳大文件顯示進度條，php上傳文件關鍵代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
可拖拽排序的菜單效果大家想必都很熟悉，本次我們通過一個可拖拽排序的九宮格案例來演示其實現(xiàn)原理，感興趣的小伙伴可以跟隨小編一起學習一下2022-05-05
這篇文章主要介紹了JS仿Base.js實現(xiàn)的繼承,結合具體實例形式分析了javascript擴展操作及面向對象程序設計相關實現(xiàn)技巧,需要的朋友可以參考下2017-04-04