async與defer的做用與區別以及阻塞優化

async和defer的做用是什麼？有什麼區別?

1. 在瀏覽器在渲染時，在html文件中讀取<script>，會當即中止渲染，執行JS代碼，若是沒有 defer屬性 或 async屬性，會等script文件下載執行完後才繼續渲染。

2. <script async src="script.js"></script>(異步下載)會下載腳本，可是不會當即執行，而且不必定按照script順序觸發；這種方式加載的 JavaScript 依然會阻塞 load 事件。換句話說，async可能在 DOMContentLoaded 觸發以前或以後執行，但必定會在 load 觸發以前執行。

• (1)HTML5屬性；Chorme,FireFox,IE9+瀏覽器支持
• (2)async屬性僅適用於外部腳本
• (3)執行順序是不肯定的
• (4)async 屬性表示異步執行引入的 JavaScript
• (5)與 defer 的區別在於，若是已經加載好，就會開始執行，不管此刻是 HTML 解析階段仍是 DOMContentLoaded 觸發以後

3. <script defer src="script.js"></script>(延遲執行)是否對腳本執行延遲，直到頁面加載爲止

(1). 兼容全部瀏覽器

(2). defer 與相比普通 script，有兩點區別：載入 JavaScript 文件時不阻塞 HTML 的解析，執行階段被放到HTML標籤解析完成以後；

(3). 若是腳本不改變文檔的內容，能夠用defer屬性，以便加快處理文檔速度

(4).defer 屬性表示延遲執行引入的 JavaScript，即這段 JavaScript 加載時HTML 並未中止解析，這兩個過程是並行的

(5).defer 不會改變 script 中代碼的執行順序，整個 document 解析完畢且 defer-script 也加載完成以後（這兩件事情的順序無關），會執行全部由 defer-script 加載的JavaScript 代碼，而後觸發 DOMContentLoaded 事件。

(6)全部設置了defer屬性的腳本按順序執行,async是無順序的加載

(7)不管設置了defer或async,該script會在onload前執行；

(8)IE/chrome在設置defer時，與firefox不一樣，前者會等腳本執行後才執行DOMContentLoaded;然後者會先於腳本執行

• script腳本阻塞有什麼解決方法？(script異步加載的四種方式)

（1）引入jquery

$(document).ready(function(){
內容

})

（2）async屬性

（3）defer屬性

(4)動態建立<script>標籤--->兼容全部瀏覽器

(function(){
	 var script =document.createElement('script');
	 script.type='text/javascript';
	 script.src="http://code.jquery.com/jquery-1.7.2.min.js";
	 var tmp=document.getElementsByTagName('script')[0],
	tem.parentNode.insertBefore(script,tmp);
 })

- css阻塞有什麼解決方法？

css的加載並不會致使html解析和渲染的中止，可是會影響到js腳本的執行。由於js腳本不只能夠讀取修改到dom，也能夠讀取修改到cssom。故在js腳本執前，browser必須保證到css文件徹底加載並解析完成，即cssom樹徹底構建好。這就致使了js執行的延遲，也所以致使html解析和渲染延遲。（這就是css阻塞js執行，阻塞渲染的根本緣由） 所以一些解決方法：

• 一、在引入順序上，css資源的引入要優於js腳本的引入
• 二、對css進行精簡併儘快提供
• 三、能夠用媒體類型（會加載不會阻塞）
• 四、用媒體查詢（會記載，只有在符合的設備上纔會進行阻塞）

參考文章：

• https://segmentfault.com/q/1010000000640869