建站
咨詢
售后
建站咨詢
新聞中心
無阻塞加載
把js放在head里，瀏覽器是怎么去執(zhí)行它的呢，是按順序加載還是并行加載呢？在舊的瀏覽器下，都是按照先后順序來加載的，這就保證了加載的js依賴不會發(fā)生問題。但是少部分新的瀏覽器已經(jīng)開始允許并行加載js了，也就是說可以同時下載js文件，但是還是按先后順序執(zhí)行文件的。
下載是異步的沒問題，但是每個javascript執(zhí)行的時候還是同步的，就是先出現(xiàn)的script標(biāo)簽一定是先執(zhí)行，即使是并行下載它是最后一個下載完成的，除非標(biāo)有defer的script標(biāo)簽。任何javascript在執(zhí)行的時候都會中斷當(dāng)前html文檔解析，自然會阻止頁面渲染。
javascript加載是不會影響已經(jīng)渲染的頁面，但是會中斷html文檔解析，瀏覽器會在javascript執(zhí)行以后決定當(dāng)前文檔是否需要進(jìn)行重新渲染或者文檔重排。所以即使javascript放到最后面也會使瀏覽器暫停，但不影響之前已經(jīng)解析出來的dom文檔，此時對于用戶來說是可操作的。
javascript下載完畢之后會立即執(zhí)行，所有的javascript執(zhí)行都會阻塞瀏覽器的其他行為，例如阻塞其他javascript的執(zhí)行、其他的http請求的執(zhí)行以及頁面的解析和渲染。（html文檔中外部js的下載也會阻塞瀏覽器的行為，但通過創(chuàng)建script元素動態(tài)js的下載不會，可能是認(rèn)為動態(tài)的js不會改變頁面效果，所以允許資源并行下載。）
圖示動態(tài)腳本的下載
UI線程會根據(jù)頁面里資源（資源是指css文件，圖片等等）書寫的先后順序來加載資源，加載資源也就是使用http請求獲取資源，像css外部文件，html文件以及圖片等資源http請求處理完畢也就意味著資源加載結(jié)束，但是像外部的javascript文件的加載則不同，它的加載過程被分為兩步，第一步和加載css文件和圖片一樣，就是執(zhí)行一個http請求下載外部的js文件，但是javascript完成http操作后并不意味操作完畢，UI線程接著會執(zhí)行它。js腳本的下載和執(zhí)行必須是一個完整的操作，是不能被割裂的。動態(tài)js的下載不會阻塞，但執(zhí)行一定會會。
瀏覽器為了提升用戶體驗(yàn)，加快UI線程的執(zhí)行是一個無法回避的問題，但是拆分js的下載和執(zhí)行是不可行的，如是乎瀏覽器換了種方式，這個方式也就是在同一個時間能下載多個資源。
將常用的，穩(wěn)定的靜態(tài)資源統(tǒng)一放在一個靜態(tài)資源服務(wù)器上，由統(tǒng)一的域名對外提供，這個域名要和主體請求的域名不一樣，原理是因?yàn)闉g覽器只通過域名來限制連接的個數(shù)，如果一個頁面里有兩個不同的域的，那么并行的http請求個數(shù)也會變成兩倍。有度，對DNS解析要開銷，所以2個最佳。
將所有外部js代碼分為UI初始化代碼和其他代碼，UI初始化代碼是在頁面加載時候執(zhí)行的代碼。讓那些不會用于頁面初始化展示的js代碼的加載和執(zhí)行操作通過onload事件在瀏覽器忙指示結(jié)束后觸發(fā)，即讓那些和頁面加載無關(guān)的js腳本在onload方法里執(zhí)行
無阻塞加載腳本的核心技術(shù)就是動態(tài)的創(chuàng)建script的dom節(jié)點(diǎn)，而且可以跨域訪問。
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前文章：JavaScript無阻塞加載和defer、async詳解-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://www.dlmjj.cn/article/giidd.html
