介紹同步加載、異步加載、延遲加載

同步加載 同步模式又稱阻塞模式，會阻止瀏覽器的後續處理，中止了後續的文件的解析，執行，如圖像的渲染。流覽器之因此會採用同步模式，是由於加載的js文件中有對dom的操做，重定向，輸出document等默認行爲，因此同步纔是最安全的。一般會把要加載的js放到body結束標籤以前，使得js可在頁面最後加載，儘可能減小阻塞頁面的渲染。這樣能夠先讓頁面顯示出來

簡單的說

js在網頁中加載會阻塞到未加載的css，html的加載跟渲染

•異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時，同時還會執行後續的頁面處理。

在script標籤內，用js建立一個script元素並插入到document中，這種就是異步加載js文件了。

•同步加載流程是瀑布模型，異步加載流程是併發模型。

簡單的說

•異步加載不會阻塞未加載的css、html的加載，

延遲加載（lazy loading）

 

延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。延遲加載就是一開始並不加載這些暫時不用的js，而是在須要的時候或稍後再經過js 的控制來異步加載。

簡單的說

•用的時候再執行，不用不執行

分享下封裝好的代碼

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; //<script style = 「text/javascript」>
   script.src = url; //<script style = 「text/javascript」 url = 「」>
   if(script.readyState) {} // readyState載入中
   (function() { function async_load() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); // parentNode返回元素的父節點
 // insertBefore在當前子節點的旁邊插入節點
 } if(window.attachEvent) //attachEvent將代碼層跟ul層相分離
  window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })();