JS 會阻塞後續 DOM 解析以及其它資源(如 CSS，JS 或圖片資源)的載入。CSS不阻塞DOM的載入和解析（它只阻塞DOM的渲染呈現。這裡談載入），不會阻塞其它資源(如圖片)的載入，但是會阻塞 後續JS 檔案的執行（原因之一是，js執行程式碼可能會依賴到css樣式。css只阻塞執行而不阻塞js的載入）。鑑於上面的特性，當css後面存在js的時候，css會間接地阻塞js後面資源的載入（css阻塞js，js阻塞其他資源 ）。現代瀏覽器會進行 prefetch 最佳化，瀏覽器在獲得 html 文件之後會對頁面上引用的資源進行提前下載
外聯js檔案使用defer屬性和asyn可以達到非同步非阻塞載入的效果，由於現代瀏覽器都存在 prefetch，所以 defer, async 可能並沒有太多的用途，可以作為了解擴充套件知識，僅僅將指令碼檔案放到 body 底部(但還是在之前)就可以起到很不錯的最佳化效果（遵循先解析再渲染再執行script這個順序）。當把js放在最後的時候，其實瀏覽器將自動忽略標籤，從而自動在最後的最後補上。
瀏覽器解析
1、瀏覽器透過請求的 URL 進行域名解析，向伺服器發起請求，接收檔案（HTML、CSS、JS、Images等等）。2、HTML 檔案載入後，開始構建 DOM Tree（DOM樹）3、CSS 樣式檔案載入後，開始解析和構建 CSS Rule Tree4、Javascript 指令碼檔案載入後， 透過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree
瀏覽器渲染
1、瀏覽器引擎透過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree（渲染樹）2、佈局階段——在螢幕上繪製渲染樹中的所有節點的幾何屬性，比如： 位置，寬高，大小等等，這個過程稱為 Flow 或 Layout 。3、繪製元素——繪製所有節點的可視屬性。4、合併渲染層——把以上繪製的所有圖層（類似於PhotoShop中的“圖層”）合併,最終輸出一張圖片
就像正常的下載檔案一樣。把服務的js檔案下載下來，然後在本地瀏覽器執行。
另外你需要補充一下瀏覽器載入、解析、渲染的一些知識。複製一下我之前整理的筆記。
瀏覽器載入
載入過程 當瀏覽器獲得一個html檔案時，會”自上而下“載入，並在載入過程中進行解析渲染。 載入過程中遇到外部css檔案，瀏覽器另外發出一個請求，來獲取css檔案。 遇到圖片資源，瀏覽器也會另外發出一個請求，來獲取圖片資源。這是非同步請求，並不會影響html文件進行載入。 但是當文件載入過程中遇到js檔案，html文件會掛起渲染（載入解析渲染同步）的執行緒，不僅要等待文件中js檔案載入完畢，還要等待解析執行完畢，才可以恢復html文件的渲染執行緒。載入外聯js和css的阻塞情況一個不太嚴謹但方便記憶的口訣：JS 全阻塞，CSS 半阻塞
JS 會阻塞後續 DOM 解析以及其它資源(如 CSS，JS 或圖片資源)的載入。CSS不阻塞DOM的載入和解析（它只阻塞DOM的渲染呈現。這裡談載入），不會阻塞其它資源(如圖片)的載入，但是會阻塞 後續JS 檔案的執行（原因之一是，js執行程式碼可能會依賴到css樣式。css只阻塞執行而不阻塞js的載入）。鑑於上面的特性，當css後面存在js的時候，css會間接地阻塞js後面資源的載入（css阻塞js，js阻塞其他資源 ）。現代瀏覽器會進行 prefetch 最佳化，瀏覽器在獲得 html 文件之後會對頁面上引用的資源進行提前下載外聯js檔案使用defer屬性和asyn可以達到非同步非阻塞載入的效果，由於現代瀏覽器都存在 prefetch，所以 defer, async 可能並沒有太多的用途，可以作為了解擴充套件知識，僅僅將指令碼檔案放到 body 底部(但還是在之前)就可以起到很不錯的最佳化效果（遵循先解析再渲染再執行script這個順序）。當把js放在最後的時候，其實瀏覽器將自動忽略標籤，從而自動在最後的最後補上。
瀏覽器解析
1、瀏覽器透過請求的 URL 進行域名解析，向伺服器發起請求，接收檔案（HTML、CSS、JS、Images等等）。2、HTML 檔案載入後，開始構建 DOM Tree（DOM樹）3、CSS 樣式檔案載入後，開始解析和構建 CSS Rule Tree4、Javascript 指令碼檔案載入後， 透過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree瀏覽器渲染
1、瀏覽器引擎透過 DOM Tree 和 CSS Rule Tree 構建 Rendering Tree（渲染樹）2、佈局階段——在螢幕上繪製渲染樹中的所有節點的幾何屬性，比如： 位置，寬高，大小等等，這個過程稱為 Flow 或 Layout 。3、繪製元素——繪製所有節點的可視屬性。4、合併渲染層——把以上繪製的所有圖層（類似於PhotoShop中的“圖層”）合併,最終輸出一張圖片其中的階段3、4可稱之為Paint
Repaint和Reflow
當用戶在瀏覽網頁時進行互動或透過 js 指令碼改變頁面結構時，以上的部分操作有可能重複執行，此過程稱為 Repaint 或 Reflow。
Repaint當元素改變的時候，將不會影響元素在頁面當中的位置（比如 background-color, border-color, visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱為 Repaint。
Reflow當元素改變的時候，將會影響文件內容或結構，或元素位置，此過程稱為 Reflow。（ HTML 使用的是 flow based layout ，也就是流式佈局，所以，如果某元件的幾何尺寸發生了變化，需要重新佈局，也就叫 Reflow。）
Reflow 的成本比 Repaint 的成本高得多的多。我們應當儘量避免Reflow。
如何最佳化瀏覽器渲染過程
1、建立有效的 HTML 和 CSS ，不要忘記指定文件編碼，比如。2、CSS 樣式應該包含在 中， Javascript 指令碼出現在末尾。3、減少 CSS 巢狀層級和選擇適當的選擇器，可參考 如何提升 CSS 選擇器效能。4、不要透過 JS 逐條修改 DOM 的樣式，提前定義好 CSS 的 Class 進行操作。5、儘量減少將 DOM 節點屬性值放在迴圈當中，會導致大量讀寫此屬性值。6、儘可能的為產生動畫的 HTML 元素使用 fixed 或 absolute 的 position ，那麼修改他們的 CSS 是不會 Reflow 的。