如何異步加載腳本？
沒有 defer 或 async，瀏覽器會立即加載并執行指定的腳本，“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待后續載入的文檔元素，讀到就加載并執行。
<script src="script.js"></script>
有 async，加載和渲染后續文檔元素的過程將和 script.js 的加載與執行并行進行（異步）。
<script async src="script.js"></script>
有 defer，加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但 script.js 的執行要在所有元素解析完成之后，DOMContentLoaded 事件觸發之前完成。
<script defer src="script.js"></script>
ES3、ES5、ES6分別指什么？
ES3、ES5、ES6均為國際標準化組織ECMA（European Computer Manufacturers Association）規定的瀏覽器腳本語言的標準。
ES3即ECMAScript 3.0版于1999年12月發布，成為JavaScript的通行標準；
ES5為原ECMAScript 3.1（ES4被廢棄），于2009年12月正式發布；
ES6于2015年6月正式發布；
ECMAScript只用來標準化JavaScript這種語言的基本語法結構，與部署環境相關的標準都由其他標準規定，比如DOM的標準就是由W3C組織（World Wide Web Consortium）制定的。
目前大多數瀏覽器能較好的支持ES3、ES5，也是當前的主流。
解釋瀏覽器的渲染機制
- 解析 HTML 標簽, 構建 DOM 樹
- 解析 CSS 標簽, 構建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎上進行布局, 計算每個節點的幾何結構
- 把每個節點繪制到屏幕上 (painting)
[圖片上傳失敗...(image-f340a4-1533880511645)]
repaint 和 reflow 分別指什么
- 對于DOM結構中的各個元素都有自己的盒子（模型），這些都需要瀏覽器根據各種樣式（瀏覽器的、開發人員定義的等）來計算并根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow（回流）；
- 當各種盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來后，瀏覽器于是便把這些元素都按照各自的特性繪制了一遍，于是頁面的內容出現了，這個過程稱之為repaint（重繪）。
解釋白屏和 FOUC。
白屏：
瀏覽器要等到所有樣式和頁面組件加載完再繪制在屏幕上，在繪制之前瀏覽器窗口顯示為空白。——Chrome
導致白屏的原因：
(1)樣式文件放在底部，對于IE瀏覽器，在某些場景下(新窗口打開,刷新等)頁面會出現白屏
(2)使用 @import 標簽, 即使 CSS 放入 link, 并且放在頭部,也可能出現白屏
(3)把 JavaScript 放入頁面頂部也會導致白屏現象，在加載 JavaScript 時,會禁用并發,并且阻止其他內容的下載
FOUC（無樣式內容閃爍）：
瀏覽器邊加載邊渲染樣式，加載完的內容會立即繪制在屏幕上，由于布局樣式的改變，造成一定程度上的閃爍?！狥irefox
導致FOUC的原因 :
把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現 FOUC 現象(逐步加載無樣式的內容,等CSS加載后頁面突然展現樣式)。對于 Firefox 會一直表現出 FOUC 。
白屏——Chrome
白屏.gif
fouc——Firefox
fouc.gif
