【前端工程師手冊】css會阻塞頁面dom解析嗎？javascript呢？

時間 2019-11-06

標籤前端工程師手冊 css 阻塞頁面 dom 解析 javascript 欄目 CSS 简体版

原文原文鏈接

總結一下這幾個經典問題。javascript

JavaScript爲何要放在HTML文檔的底部？

首先說結論：

不管是內聯仍是外鏈js都會阻塞後續dom的解析和渲染

若是把JavaScript放在頁面頂部，下載和解析JavaScript的時間裏面，dom遲遲得不到解析和渲染，瀏覽器一直處於白屏，因此把JavaScript文件放在頁面底部更有利於頁面快速呈現。css

defer和async

首先，async和defer對於內聯JavaScript都是無效的html

defer

設置了defer的script外鏈文件，在下載js文件期間不會阻塞HTML的解析，並且等js下載完畢時若HTML還沒解析完畢，js會等到HTML文檔解析完畢後再執行。若是有多個js下載文件，那麼執行時也是按照順序執行。java

async

設置了async的script外鏈文件，在下載js文件期間不會阻塞HTML的解析，可是js下載完畢以後就會當即執行，不管如今HTML是否正在解析。瀏覽器

從圖能夠更直觀的看出區別（圖片來自https://harttle.land/2016/05/...）：
dom

Css爲何要放在HTML文檔的<head>標籤內

Css阻塞渲染

首先說結論：

對於一個HTML文檔來講，無論是內聯仍是外鏈的css，都會阻礙後續的dom渲染，可是不會阻礙後續dom的解析。

若是把css文件引用放在HTML文檔的底部，瀏覽器爲了防止無樣式內容閃爍，會在css文件下載並解析完畢以前什麼都不顯示，這也就會形成白屏現象。（可是在firefox瀏覽器中測試，會出現樣式閃爍，這也算是不一樣瀏覽器的權衡吧，要麼等css全解析完一塊兒顯示，要麼先顯示而後css解析完再從新畫上新樣式）
當css文件放在<head>中時，雖然css解析也會阻塞後續dom的渲染，可是在解析css的同時也在解析dom，因此等到css解析完畢就會逐步的渲染頁面了。async