1. CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

• CSS最好放入header中，即放在網(wǎng)頁內(nèi)容（html標(biāo)簽中包含的文字和圖片等）和js腳本之前

<link href="index.css" rel="stylesheet">

• JS最好放在最后，即放在網(wǎng)頁內(nèi)容（html標(biāo)簽中包含的文字和圖片等）和js腳本之后

<script src="index.js"></script>

2. 解釋白屏和FOUC

1. 白屏問題：
   - 對于grome等瀏覽器，把樣式放在底部或使用@import。此時，若加載大量html標(biāo)簽、文字和圖片，但樣式并沒有即使加載，則可能出現(xiàn)白屏；
   - 將js放在頂部。因為普通情況下（除非加了async或defer），加載javascript時，會禁用并發(fā)，阻止了其他內(nèi)容的下載。所以js放在頂部可能會出現(xiàn)白屏；

2. FOUC：
   對于火狐等瀏覽器，把樣式放在底部，會出現(xiàn)FOUC（逐步加載無樣式的內(nèi)容，等css加載后頁面突然展現(xiàn)樣式）

3. 解決方法：

   • css：放到頂部
   • js：放到底部

3. async和defer的作用是什么？有什么區(qū)別

1. async：讓script.js和其他元素異步加載和執(zhí)行
2. defer：讓script.js的執(zhí)行再所有元素解析完成之后
3. 區(qū)別：
   • defer使得js腳本延遲到文檔解析和顯示后執(zhí)行，有順序；
   • async不保證順序，可以與文檔加載或顯示同時執(zhí)行

4. 簡述網(wǎng)頁的渲染機(jī)制

1. Grome等瀏覽器：

   
   
   
   • 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
   • 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
   • 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
   • 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)
   • 把每個節(jié)點繪制到屏幕上 (painting)

2. Firefox等瀏覽器

   
   
   • 解析 HTML 標(biāo)簽到Content Sink
   • 這時，先加載Content Sink里面的內(nèi)容，頁面上會顯示一個無樣式的內(nèi)容
   • 循環(huán)加載css樣式，每次加載一部分css樣式后，都會重現(xiàn)渲染頁面

5. 從上面4個題目中隨機(jī)選擇一題寫成博客，投遞到饑人谷技術(shù)博客6 (可選題目)

博客