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