CSS和JS在網(wǎng)頁(yè)中的放置順序是怎樣的躏筏？
- CSS放置head標(biāo)簽里面，可以使用link標(biāo)簽引入css文件，也可以用style標(biāo)簽包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
- JS放置body閉合標(biāo)簽之前，也就是頁(yè)面底部,可以使用script標(biāo)簽引入js文件荐操，也可以用script標(biāo)簽包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>javascript</h1>
<script src="index.js"></script>
<script>
var a = 10;
</script>
</body>
</html>
## 解釋白屏和FOUC
#### 白屏
1. 如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(新窗口打開,刷新等)頁(yè)面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
2. 如果使用 `@import` 標(biāo)簽,即使 CSS 放入 `link`, 并且放在頭部,也可能出現(xiàn)白屏
3. 把 JavaScript 放入頁(yè)面頂部也會(huì)導(dǎo)致 白屏 現(xiàn)象（因?yàn)榧虞d JavaScript 時(shí),會(huì)禁用并發(fā),并且阻止其他內(nèi)容的下載）
#### FOUC： (Flash of Unstyled Content) 無(wú)樣式內(nèi)容閃爍
1. 如果把樣式放在底部,對(duì)于IE瀏覽器,在某些場(chǎng)景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會(huì)出現(xiàn) FOUC 現(xiàn)象(逐步加載無(wú)樣式的內(nèi)容,等CSS加載后頁(yè)面突然展現(xiàn)樣式).對(duì)于 Firefox 會(huì)一直表現(xiàn)出 FOUC
## async和defer的作用是什么？有什么區(qū)別
[async和defer區(qū)別](http://www.reibang.com/p/92d354d5ac81)
## 簡(jiǎn)述網(wǎng)頁(yè)的渲染機(jī)制
1. 瀏覽器請(qǐng)求到HTML代碼后珍策，解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
2. CSS文件下載完成托启，開始構(gòu)建CSSOM
3. CSSOM構(gòu)建結(jié)束后， DOM和CSSOM 一起生成 Render Tree攘宙。
4. 有了Render Tree然后Layout屯耸， 計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置
5. 按照算出來的規(guī)則，然后把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (Painting)