CSS和JS在網頁中的放置順序是怎樣的？
- 為什么引入js文件?
因為網頁 = Html+CSS+JavaScript;
Html: 網頁元素內容
CSS: 控制網頁樣式
JavaScript：操作網頁內容，實現功能或者效果.
-
css放在head標簽里面
方式: - link標簽推薦使用
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
- <style type="text/css"> 樣式 </style>
<head>
<style>
.content {
background: red;
}
</style>
</head>
- 引入外部 CSS 文件
<style>
@import url(style.css);
</style>
-
引入js方式如下
JS代碼存放在標簽對<script>...</script>中,而<script>...</script>放在body中.推薦放在閉合標簽</body>之前
<body>
<script type="text/javascript">
//這里編寫JavaScript程序
</script>
</body>
- 使用script標簽的src屬性引入一個js文件
引用外部JS文件的script標簽可以放在head標簽內，也可以放在body標簽中.
<script src="js/index.js" type="text/javascript"></script>
- 元素事件中引入JS
<body>
<input type="button" onClick="alert('綠葉學習網')" value="按鈕"/>
</body>
- 頁頭引入JS，指的就是在<head></head>標簽內編寫JavaScript
<head>
<title></title>
<script type="text/javascript">
//這里編寫JavaScript程序
</script>
</head>
解釋白屏和FOUC?
白屏產生原因:
渲染引擎開始解析html，并將標簽轉化為內容樹中的dom節點。接著，它解析外部CSS文件及style標簽中的樣式信息。這些樣式信息以及html中的可見性指令將被用來構建另一棵樹——render樹。render樹:將 DOM 與 CSSOM 合并成一個渲染樹.
為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。
如果我們在Render樹未完全繪制并渲染之前，向下快速拖動滾動條會看到上圖所示的白屏現象,瀏覽器渲染不及時造成.場景:
如果使用 @import標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現白屏。
如果把js文件放在頭部，腳本會阻塞后面內容的呈現，腳本會阻塞其后組件的下載，出現白屏問題FOUC:
FOUC 全稱 Flash of unstyled content,無樣式內容閃爍.是指 HTML 頁面在打開過程中，內容先于樣式展示，導致頁面樣式在瞬間出現劇變，并且人眼可見
1、使用@import方法導入CSS時，例如：
<style type="text/css" media="all">@import "../fouc.css";</style>
此方式由于IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。
2、將樣式表鏈接放在頁面不同位置時，在IE5/6下某些頁面會無樣式顯示內容且瞬間閃爍，這現象就是文檔樣式短暫失效（Flash Of Unstyled Content），即FOUC。關于FOUC，其實是FireFox的渲染邏輯和Chrome的不太一樣，一開始Chrome是等待渲染樹和位置計算好才會出來網頁的內容，但到了FireFox每加載一次dom樹就會重繪一次網頁樣式
解決方法：避免使用@import方法導入CSS，且將樣式表鏈接都放在head中即可避免
async和defer的作用是什么？有什么區別?
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。<script async src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。<script defer src="script.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。區別
defer:腳本延遲到文檔解析和顯示后執行，有順序
async:不保證順序
簡述網頁的渲染機制?
處理 HTML 標記并構建 DOM 樹。
處理 CSS 標記并構建 CSSOM 樹。
將 DOM 與 CSSOM 合并成一個渲染樹render 樹。
計算每個Frame（也就是每個Element）的位置，這又叫layout
根據渲染樹來布局，以計算每個節點的Frame（也就是每個Element）的位置,這又叫layout和reflow過程。
最后通過調用操作系統Native GUI的API繪制,將各個節點繪制到屏幕上。
