問答
Paste_Image.png
Paste_Image.png
Paste_Image.png
一、CSS和JS在網頁中的放置順序是怎樣的？
- 使用link標簽將css樣式表放在頂部
- 將
<script></script>放在尾部
二、解釋白屏和FOUC
- 先把樣式加載完匯總再渲染的瀏覽器
- 先把內容加載出來等發現樣式的時候再去繪制一遍的瀏覽器
- 如果是1類瀏覽器如果將css放在后面，因為等待時間加上自身的下載時間，會出現長時間白屏,如果是使用@import標簽引入css也會出現白屏現象@import見簡書
- 如果是2類瀏覽器會出現Flash of Unstyled Content
- 若未將js放在頂部，腳本禁用并發并阻塞其他內容下載并呈現，導致白屏或者內容加載到一半停住的情況。
三、async和defer的作用是什么？有什么區別
- 作用：如果將js放在
<head>內，ayync和defer延遲加載script.js，實現異步加載防止阻塞后面內容呈現和在組件下載。 - 區別：
- defer延遲到文檔解析和顯示后執行，有順序（在現實中瀏覽器不一定按順序執行也不一定在DomContentload執行之前完成。但是未來肯定會越來越遵從ECMA而規范。）
- async加載完js后馬上執行，無順序。誰快誰先上。
- 兼容性：async>IE9，defer<=9會有bug.
操作dom的腳本不用async和defer(或者該部分腳本回調)
執行腳和好頁面執行共用一個線程，不能同時進行。
攜程
segmentfault1
segmentfault2
四、簡述網頁的渲染機制
- 解析HTML標簽，構建DOM樹
- 解析CSS標簽，構建CSSOM樹
- 把DOM和CSSOM組合成渲染樹(render tree)
- 在渲染樹的基礎上進行Layout，定位坐標和大小，是否換行，各種positiono，verflow，z-index屬性
- 把每個節點繪制到屏幕上
- 某些動態修改dom屬性或是css屬性的js會導致重新layout
- Reflow重新驗證并計算Render Tree并layout，Repaint重新layout
五、JavaScript 定義了幾種數據類型? 哪些是簡單類型?哪些是復雜類型?
- 6+Symbol類型
- 簡單：number/string/boolean/undefined/null
- 復雜：object{object狹義/數組/函數}
六、NaN、undefined、null分別代表什么?
- NaN（not a number）:本質是number類型，是js的特殊值，主要出現在將字符串解析成數字出錯的場合。
- underfined和null是兩種特殊的數據類型。
- undefined:系統為變量分配了內存地址有指針。但未給變量賦值。
- 如調用函數時該傳遞的參數未提供
- 對象沒有賦值的屬性
- 函數沒有返回值時默認返回undefined
- null:空指針。表示一個值被定義了，定義為空值，即該處的值現在為空。比如，調用函數時，不需要傳入某個參數，這時就可以傳入null。
七、typeof和instanceof的作用和區別?
- 兩者都是數據類型
- typeof運算符：返回一個值的數據類型（number|string|boolean|function|undefined|object）
- instanceof運算符:區分object類型里面{window|函數|數組|null}instanceof運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。
