* 這是關(guān)于JavaScript基本概念、基礎(chǔ)數(shù)據(jù)類型、運(yùn)算符、流程控制語句的一些小知識 *
1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS放在<head>標(biāo)簽里面
JS最好放在</body>前面
如
JS擺放位置.png
2.解釋白屏和FOUC
- 兩者是因?yàn)椴煌瑸g覽器的加載順序不同或者JS阻塞造成的
- 白屏：
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)
- 如果使用 @import標(biāo)簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏
- FOUC：
- 如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點(diǎn)擊鏈接,輸入U(xiǎn)RL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC 。
- 對于圖片和CSS, 在加載時(shí)會并發(fā)加載(如一個(gè)域名下同時(shí)加載兩個(gè)文件). 但在加載 JavaScript 時(shí),會禁用并發(fā),并且阻止其他內(nèi)容的下載. 所以把 JavaScript 放入頁面頂部也會導(dǎo)致白屏現(xiàn)象。
3. async和defer的作用是什么？有什么區(qū)別
-
兩者都是加載異步
- async：
<script async src="script.js"></script>- 有 async，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。** 其中，不保證順序。 **
- async：
-
defer：
<script defer src="script.js"></script>- 有 defer，加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。 ** 其中，腳本延遲到文檔解析和顯示后執(zhí)行，有順序。 **
關(guān)于Javascript中defer和async的區(qū)別總結(jié)
4.簡述網(wǎng)頁的渲染機(jī)制
- 解析 HTML 標(biāo)簽, 構(gòu)建 DOM 樹
- 解析 CSS 標(biāo)簽, 構(gòu)建 CSSOM 樹
- 把 DOM 和 CSSOM 組合成 渲染樹 (render tree)
- 在渲染樹的基礎(chǔ)上進(jìn)行布局, 計(jì)算每個(gè)節(jié)點(diǎn)的幾何結(jié)構(gòu)
- 把每個(gè)節(jié)點(diǎn)繪制到屏幕上 (painting)
網(wǎng)站渲染步驟圖.png
5.JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
- 數(shù)值（Number）：普通的數(shù)字如1、23、456、1.99
- 字符串（String）：字符組成的文本如 "test" 一定要加引號
- 布爾值（boolean）：True False
- undefined：只是聲明但還沒定義（或者不存在），也就是沒有值
- null：表示此處應(yīng)該有一個(gè)值，但目前為空（空缺）
- 對象（Object）：各種值組成的組合。
- 數(shù)組
- 函數(shù)
- 狹義的對象
簡單類型：Null、undefined、Boolean、Number、String
復(fù)雜類型：Object
6. NaN、undefined、null分別代表什么
- NaN：Not a number 非數(shù)值，它不等于任何值（包括自己）
2.undefined：聲明但還沒定義（或者不存在） - null：空，此處應(yīng)該有一個(gè)值，但目前為空（也就是沒有對象）
7.typeof和instanceof的作用和區(qū)別?
- typeof:可以判斷變量的類型 如判斷num,object,string
typeof舉例.png
- instranceof:由于空數(shù)組([])類型為object,null也是object,對象也是object,typeof 無法區(qū)分,可用instanceof區(qū)分(細(xì)分object)
instanceof舉例.png
