1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的咙咽？
順序一般是：
- 個別特殊JS亿傅，比如用于調(diào)試的基礎(chǔ)腳本（部署時未必有）媒峡、性能日志之類，必須放在盡量最前的位置葵擎。
- 外部樣式表（link[rel=stylesheet]）
- 本頁樣式（style）
- 基礎(chǔ)庫谅阿，比如loader，各種shim/polyfill坪蚁，jQuery之類的
- 少量本頁script
2. 解釋白屏和FOUC
白屏問題:
如果把樣式放在底部，對于IE瀏覽器镜沽，chrome等（css全部加載后再呈現(xiàn),有可能等待長）敏晤，在某些場景下(新窗口打開，刷新等)頁面會出現(xiàn)白屏缅茉，而不是內(nèi)容逐步展現(xiàn)嘴脾。使用 @import 標(biāo)簽，即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
對于圖片和CSS, 在加載時會并發(fā)加載(如一個域名下同時加載兩個文件)译打。 但在加載 JavaScript 時耗拓，會禁用并發(fā)，并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象.FOUC:
Flash of Unstyled Content "無樣式內(nèi)容閃爍“：有些瀏覽器是邊渲染邊呈現(xiàn)奏司，CSS放置body標(biāo)簽底部乔询，會出現(xiàn)加載html結(jié)束后才一次性加載css樣式，從而導(dǎo)致頁面閃爍韵洋。
3. async和defer的作用是什么竿刁？有什么區(qū)別
加入異步
沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本搪缨，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前食拜，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行副编。
-
async: 腳本延遲到文檔解析和顯示后執(zhí)行负甸，有順序<script async src="script.js"></script>
有async，加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進行（異步）痹届。 -
defer: 不保證順序<script defer src="script.js"></script>
有 defer呻待，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行（異步），但script.js的執(zhí)行要在所有元素解析完成之后短纵，DOMContentLoaded事件觸發(fā)之前完成带污。
4. 簡述網(wǎng)頁的渲染機制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
- 把每個節(jié)點繪制到屏幕上 (painting)
image.png
