Javascript無阻塞加載具體方式

　　看了《高性能JavaScript》的讀書筆記

　　幾個原則

　　將腳本放在底部

　　<link>還是在head中用以保證在js加載前能加載出正常顯示的頁面

　　<script>放在</body>前

　　成組腳本

　　由於每個<script>標簽下載時阻塞頁面解析過程所以限制頁面的<script>總數也可以改善性能適用於內聯腳本和外部腳本

　　非阻塞腳本

　　等頁面完成加載後再加載js代碼也就是在windowload事件發出後開始下載代碼

　　（）defer屬性支持IE和fierfox更高版本浏覽器

　　<script defer></script>

　　內聯和外部文件

　　帶defer屬性的<script>可出現在文檔的任何位置對應的js文件將在<script>被解析時啟動下載但代碼不會執行直到DOM加載完畢（在onload事件句柄被調用之前）所以實現了和也賣弄其他資源一起並行下載

　　（）動態腳本元素

　　文檔對象模型（DOM）允許你使用js動態創建HTML的幾乎全部文檔內容

復制代碼 代碼如下:
var script=documentcreateElement("script");

　　scripttype="text/javascript";

　　scriptsrc="filejs";

　　documentgetElementByTagName_r("head")[]appendChild(script);

　　
此技術的重點在於無論在何處啟動下載文件額下載和運行都不會阻塞其他頁面處理過程即使在head裡（除了用於下載文件的http鏈接）

　　（）The YUI approach

　　理念用一個很小的初始代碼下載其余的功能代碼先引入文件

復制代碼 代碼如下:
<script type="text/javascript src=http://filesjbnet/file_images/article//yuanma/combojs></script>

　　
此種子文件大約KB

　　使用

復制代碼 代碼如下:
YUI()use("dom"function(Y){

　　YDomaddclass()

　　})

　　
當所有代碼可用時回調函數被調用YUI實例作為參數傳入就可以立即使用新下載的功能

　　The LazyLoad library

　　使用先引入lazyloadminjs

　　()

復制代碼 代碼如下:
LazyLoadjs("ajs"function(){

　　Applictioninit();

　　})

　　
多個文件

復制代碼 代碼如下:
LazyLoadjs(["ajs""bjs"]function(){

　　Applicationinit();

　　})

　　
()The LABjs library

　　先引入labjs

復制代碼 代碼如下:
$LABscript("ajs")wait(function(){

　　Applicationinit();

　　})

　　
多個文件就鏈式寫法

　　他的獨特之處在於能夠管理依賴關系

　　可以通過wait()函數指定哪些文件應該等待其他文件

　　例如bjs的代碼保證不在ajs之前運行

復制代碼 代碼如下:
$LABscript("ajs")wait()script("bjs")wait(function(){

　　Applicationinit();

　　})

　　
這樣雖然兩個文件是並行下載的卻能保證ajs能在bjs之前執行

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20189.html