無阻塞載入 把js放在head里，瀏覽器是怎麼去執行它的呢，是按順序載入還是並行載入呢？在舊的瀏覽器下，都是按照先後順序來載入的，這就保證了載入的js依賴不會發生問題。但是少部分新的瀏覽器已經開始允許並行載入js了，也就是說可以同時下載js文件，但是還是按先後順序執行文件的。 下載是非同步的沒問題，但 ...
無阻塞載入
把js放在head里，瀏覽器是怎麼去執行它的呢，是按順序載入還是並行載入呢？在舊的瀏覽器下，都是按照先後順序來載入的，這就保證了載入的js依賴不會發生問題。但是少部分新的瀏覽器已經開始允許並行載入js了，也就是說可以同時下載js文件，但是還是按先後順序執行文件的。
下載是非同步的沒問題，但是每個javascript執行的時候還是同步的，就是先出現的script標簽一定是先執行，即使是並行下載它是最後一個下載完成的，除非標有defer的script標簽。任何javascript在執行的時候都會中斷當前html文檔解析，自然會阻止頁面渲染。
javascript載入是不會影響已經渲染的頁面，但是會中斷html文檔解析，瀏覽器會在javascript執行以後決定當前文檔是否需要進行重新渲染或者文檔重排。所以即使javascript放到最後面也會使瀏覽器暫停，但不影響之前已經解析出來的dom文檔，此時對於用戶來說是可操作的。
javascript下載完畢之後會立即執行，所有的javascript執行都會阻塞瀏覽器的其他行為，例如阻塞其他javascript的執行、其他的http請求的執行以及頁面的解析和渲染。（html文檔中外部js的下載也會阻塞瀏覽器的行為，但通過創建script元素動態js的下載不會，可能是認為動態的js不會改變頁面效果，所以允許資源並行下載。）
圖示動態腳本的下載
UI線程會根據頁面里資源（資源是指css文件，圖片等等）書寫的先後順序來載入資源，載入資源也就是使用http請求獲取資源，像css外部文件，html文件以及圖片等資源http請求處理完畢也就意味著資源載入結束，但是像外部的javascript文件的載入則不同，它的載入過程被分為兩步，第一步和載入css文件和圖片一樣，就是執行一個http請求下載外部的js文件，但是javascript完成http操作後並不意味操作完畢，UI線程接著會執行它。js腳本的下載和執行必須是一個完整的操作，是不能被割裂的。動態js的下載不會阻塞，但執行一定會會。
瀏覽器為了提升用戶體驗，加快UI線程的執行是一個無法迴避的問題，但是拆分js的下載和執行是不可行的，如是乎瀏覽器換了種方式，這個方式也就是在同一個時間能下載多個資源。
將常用的，穩定的靜態資源統一放在一個靜態資源伺服器上，由統一的功能變數名稱對外提供，這個功能變數名稱要和主體請求的功能變數名稱不一樣，原理是因為瀏覽器只通過功能變數名稱來限制連接的個數，如果一個頁面里有兩個不同的域的，那麼並行的http請求個數也會變成兩倍。有度，對DNS解析要開銷，所以2個最佳。
將所有外部js代碼分為UI初始化代碼和其他代碼，UI初始化代碼是在頁面載入時候執行的代碼。讓那些不會用於頁面初始化展示的js代碼的載入和執行操作通過onload事件在瀏覽器忙指示結束後觸發，即讓那些和頁面載入無關的js腳本在onload方法里執行
無阻塞載入腳本的核心技術就是動態的創建script的dom節點，而且可以跨域訪問。
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
動態腳本元素，就是說 <script> 標簽不是寫死在HTML中的，而是由現有的腳本生成的，因為 <script> 標簽也是DOM元素的一種，而JavaScript是可以通過DOM API操作DOM的。動態腳本只有在新建的script元素被添加到html文檔時開始下載，下載完立即執行。
無阻塞腳本的好處就是不會阻塞UI的執行，也不會影響其他同步js代碼的執行，不無阻塞腳本改變了腳本的載入順序，所以在使用無阻塞腳本時候一定要更加註意腳本之間的依賴關係，保證整個頁面的腳本都能正常執行。
使用無阻塞腳本了，代碼置於head標簽還是html文檔底部也就無關緊要了。
頁面載入的總時間不是衡量頁面載入快捷的標準，頁面同步阻塞載入的時間才是衡量頁面載入效率的準確標準，非阻塞腳本載入可能會增加整個頁面載入的時間，但是它可以減少頁面阻塞載入的時間。
腳本的非同步執行，會產生前後依賴的問題。在腳本載入執行完畢後，非ie瀏覽器會觸發該 <script> 元素的 onload 事件，ie瀏覽器下有onreadystatechange事件，我們可以將回調放到這個事件中處理。
每當瀏覽器解析到<script>標簽（無論內嵌還是外鏈）時，瀏覽器會優先下載、解析並執行該標簽中的javaScript代碼，而阻塞其後所有頁面內容的下載和渲染。（也就是說外部js的下載也會阻塞別的線程，目前有少部分瀏覽器支持並行下載js）
無阻塞載入腳本技術的核心就是：動態下載js腳本的時候，不會阻塞UI線程的執行。動態腳本為什麼不阻塞ui線程？可能是因為瀏覽器認為動態資源不會影響頁面渲染。
讓script延遲和非同步的兩個屬性：defer和async
js腳本會改變文檔輸入流的內容，所以執行js時會暫停頁面的渲染。對於內聯腳本沒什麼問題，因為腳本和html文檔被同時載入了。但對於外部引入的腳本，腳本的下載（取決於網速）也會阻塞瀏覽器文檔的解析和渲染，甚至會阻塞有些瀏覽器下載別的資源（目前有些瀏覽器已經實現並行下載）。所以出現defer和async屬性，優化頁面的顯示。
defer（延遲）是html4.0中定義的，該屬性使得瀏覽器能延遲腳本的下載，等document文檔載入和解析完成後，按照他們在文檔中出現順序再去下載解析。也就是說defer屬性的<script>就類似於將<script>放在body底部的效果，會在document的DOMContentLoaded事件之前執行。
將腳本放在body底部比給腳本增加defer屬性讓腳本延遲載入更好。
async（非同步）是HTML5新增的屬性，該屬性的作用是讓瀏覽器能並行下載腳本且不阻塞瀏覽器的文檔解析和渲染，下載完成後腳本立即執行，可能無序執行，取決於下載完成的時間）
若瀏覽器同時支持上述兩種屬性且script標簽同時具有這兩種屬性，則async屬性會優於defer生效。
在不支持async屬性的瀏覽器里，可以通過動態創建script元素並插入文檔中，實現腳本的非同步載入和執行：
requirejs就是使用這個方法實現的。
