Javascript無阻塞加載具體方式
看了《高性能JavaScript》的讀書筆記
幾個(gè)原則：
1、將腳本放在底部
<link>還是在head中，用以保證在js加載前，能加載出正常顯示的頁面。
<script>放在</body>前。
2、成組腳本
由于每個(gè)<script>標(biāo)簽下載時(shí)阻塞頁面解析過程，所以限制頁面的<script>總數(shù)也可以改善性能。適用于內(nèi)聯(lián)腳本和外部腳本。
3、非阻塞腳本
等頁面完成加載后，再加載js代碼。也就是，在window.load事件發(fā)出后開始下載代碼。
（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)了和也賣弄其他資源一起并行下載。
（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)在于：無論在何處啟動(dòng)下載，文件額下載和運(yùn)行都不會(huì)阻塞其他頁面處理過程。即使在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)綄懛?/P>
他的獨(dú)特之處在于能夠管理依賴關(guān)系。
可以通過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)文章
常用限制input的方法的js代碼...2007-03-03
js實(shí)現(xiàn)的捐贈(zèng)管理完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的捐贈(zèng)管理完整實(shí)例,包括了html頁面、js腳本及css樣式的完整實(shí)現(xiàn)代碼,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版)
這篇文章主要介紹了js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
平時(shí)項(xiàng)目中筆者也常用dayjs,它確實(shí)很好用,Day.js有著幾乎和Moment.js一樣的API,因此如果你用過Moment.js,那么也可以輕松使用Day.js,這篇文章主要給大家介紹了關(guān)于時(shí)間處理工具day.js常用方法的相關(guān)資料,需要的朋友可以參考下2024-02-02
JavaScript Event學(xué)習(xí)第六章 事件的訪問
在這一章我會(huì)講解如何去訪問一個(gè)事件對(duì)象。2010-02-02
js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件
本節(jié)主要介紹了js監(jiān)控IE火狐瀏覽器關(guān)閉、刷新、回退、前進(jìn)事件的方法2014-07-07
JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，它們?cè)阪I類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別，適用于不同的場(chǎng)景，本文給大家詳細(xì)講解js map、weakmap和object區(qū)別，需要的朋友可以參考下2023-04-04
JS ListBox的簡(jiǎn)單功能實(shí)現(xiàn)代碼
這段時(shí)間在項(xiàng)目組都是做靜態(tài)頁面，都是些復(fù)制粘貼的活，難得碰到個(gè)稍微有點(diǎn)難度的頁面。后來看到這個(gè)頁面還不錯(cuò)，可以自己做做看，雖然公司已經(jīng)有這樣的組件，但不想用，反正沒什么事，就當(dāng)多學(xué)學(xué)JS好了。2008-10-10
本文主要介紹了最常見和最有用的字符串相關(guān)的方法，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
Openlayers實(shí)現(xiàn)長(zhǎng)度測(cè)量的方法
在Openlayers中,使用ol/sphere模塊的getDistance函數(shù)可以計(jì)算兩點(diǎn)間的大圓距離,繪制線路時(shí),通過監(jiān)聽繪制事件和幾何對(duì)象的變化,可實(shí)時(shí)更新距離,同時(shí)getLength函數(shù)幫助獲取整條線路的長(zhǎng)度,這些功能主要用于地理信息系統(tǒng)中的距離測(cè)量和地圖制作2024-11-11