1.<script>元素的屬性有哪些？其中defer和async的區別
- 當解析器遇到
<script>標簽時，文檔的解析將停止，并立即下載和立即執行腳本，腳本執行完畢后再繼續解析文檔
- 該元素有6個屬性:
-
async：（可選）其他線程立即下載腳本，下載完成后立即執行，腳本執行過程中文檔將停止解析，直到腳本執行完畢（只對外部腳本有效）
-
charset：（可選）表示通過src屬性指定的代碼的字符集（很少用）
-
defer：（可選）文檔解析不停止，但其他線程下載腳本，等到文檔解析完成之后腳本才會執行（只對外部腳本有效）
-
language：（廢棄）表示腳本的語言
-
src：（可選）外部文件路徑
-
type：（可選）可理解為language屬性的替代屬性，默認值text/javascript
-
async與 defer的區別：每一個async屬性的腳本都在它下載結束之后立刻執行，同時會在window的load事件之前執行,所以就有可能出現腳本執行順序被打亂的情況；每一個defer屬性的腳本都是在頁面解析完畢之后，按照原本的順序執行，同時會在document的DOMContentLoaded之前執行（相當于告訴瀏覽器立即下載，但延遲執行）
-
async與 defer的使用場景：如果腳本不依賴于任何腳本，并不被任何腳本依賴，可以使用defer；如果腳本是模塊化的，不依賴于任何腳本則可以使用async
2.頁面嵌入與外部文件
- 直接在頁面嵌入JS代碼：
1.代碼將被從上至下依次解析
2.代碼內部不可以再出現 "<script>"字符串，可以使用轉義字符"<\/script>"
<script type = "text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
- 外部JS文件
1.引用外部文件，src屬性是必需的
2.<script>元素內不再出現JS代碼，否則只執行外部文件，忽略嵌入的代碼
<script type = "text/javascript" src = "demo.js"></script>
3.CSS和JS在網頁中的放置順序是怎樣的
- 優先選擇使用
<link>將CSS放在頂部<head>里，這樣避免出現白屏或者FOUC
-
JS通常放在</body>前，因為JS是阻塞加載（也就是等該部分JS全部加載完成之后才會進行后續代碼的執行），會影響頁面整體的加載速度；當有些重要的或特殊的JS內容需要放在頂部時，可使用defer或async讓后續文檔變成并行渲染（異步）
4.解釋白屏和FOUC
- 瀏覽器的白屏和無樣式內容閃爍（FOUC），是由于瀏覽器加載與顯示頁面方式不同造成的
- IE出現白屏現象，是因為
IE要等CSS全部加載完成之后才對HTML進行渲染和展示樣式表在頁面中位置并不影響頁面中組件的下載時間，但是會影響頁面的呈現
- IE為何如此渲染？因為樣式表仍在加載，構建
render tree就是一種浪費，因為在所有樣式表加載并解釋完畢之前無需繪制任何東西，否則，在其準備好之前顯示的內容會遇到FOUC問題
這樣IE避免了FOUC，也就自然的出現白屏現象，在IE中將樣式表放在文檔底部會導致白屏問題的情形有以下幾種：
1.在新窗口中打開時
2.重新加載時
3.作為主頁打開時
如果使用 @import 標簽,即使 CSS 放入 <link>,并且放在頭部,也可能出現白屏
-
FOUC就是當頁面逐步加載時，文字首先顯示，然后是圖片，最后樣式表正確地下載并解析時，已經呈現的文字和圖片要用新的樣式重繪了；頁面在重繪時，顏色、大小等都可能發生變化，看上去就像在閃爍一樣，體驗也相當不好
- 為了避免白屏和FOUC，最好是使用
<link>將CSS放在<head>中
