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