1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
- 一般情況下CSS被放置在head里面，因為渲染頁面的話，CSS和html頁面的內(nèi)容是同時加載的.
- JS被放置在body內(nèi)容之后加載，因為JS的加載會阻止加載其他的內(nèi)容.
2.解釋白屏和FOUC.
- 不同的瀏覽器對于CSS和HTML的處理方式不一樣，有的是等待CSS加載完成之后，對HTML元素進行渲染和展示。此時容易出現(xiàn)白屏問題
- 有的是先對HTML元素進行展示，然后等待CSS加載完成后重新對樣式進行修改。此時容易出現(xiàn)FOUC無樣式內(nèi)容閃爍
- 如果把CSS樣式放在底部,對于IE瀏覽器,在某些場景下(新窗口打開,刷新等)頁面會出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)，如果使用 @import標簽,即使 CSS 放入 link, 并且放在頭部,也可能出現(xiàn)白屏。
- 如果把CSS樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進入等),會出現(xiàn)FOUC現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于Firefox會一直表現(xiàn)FOUC 。
- 如果把js文件放在頭部，腳本會阻塞后面內(nèi)容的呈現(xiàn)，腳本會阻塞其后組件的下載，出現(xiàn)白屏問題。
3.async和defer的作用是什么？有什么區(qū)別。
- 默認引用 script:<script type="text/javascript" src="x.min.js"></script>
當瀏覽器遇到 script 標簽時，文檔的解析將停止，并立即下載并執(zhí)行腳本，腳本執(zhí)行完畢后將繼續(xù)解析文檔。 - async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
當瀏覽器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，腳本下載完成后開始執(zhí)行腳本，腳本執(zhí)行的過程中文檔將停止解析，直到腳本執(zhí)行完畢。
3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
當瀏覽器遇到 script 標簽時，文檔的解析不會停止，其他線程將下載腳本，待到文檔解析完成，腳本才會執(zhí)行。
區(qū)別:所以async和defer的最主要的區(qū)別就是async是異步下載并立即執(zhí)行，然后文檔繼續(xù)解析，defer是異步加載后解析文檔，然后再執(zhí)行腳本.
5.簡述網(wǎng)頁的渲染機制。
1）瀏覽器會解析三個東西：
一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應(yīng)這三類文檔。解析這三種文件會產(chǎn)生一個DOM Tree。
CSS，解析CSS會產(chǎn)生CSS規(guī)則樹。
Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。注意：
Rendering Tree 渲染樹并不等同于DOM樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點。也就是所謂的Frame。
然后，計算每個Frame（也就是每個Element）的位置，這又叫l(wèi)ayout和reflow過程。
1）瀏覽器會解析三個東西：
一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應(yīng)這三類文檔。解析這三種文件會產(chǎn)生一個DOM Tree。
CSS，解析CSS會產(chǎn)生CSS規(guī)則樹。
Javascript，腳本，主要是通過DOM API和CSSOM API來操作DOM Tree和CSS Rule Tree.
2）解析完成后，瀏覽器引擎會通過DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree。注意：
Rendering Tree 渲染樹并不等同于DOM樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
CSS 的 Rule Tree主要是為了完成匹配并把CSS Rule附加上Rendering Tree上的每個Element。也就是DOM結(jié)點。也就是所謂的Frame。
然后，計算每個Frame（也就是每個Element）的位置，這又叫l(wèi)ayout和reflow過程。
3）最后通過調(diào)用操作系統(tǒng)Native GUI的API繪制。
5.JavaScript 定義了幾種數(shù)據(jù)類型?哪些是簡單類型?哪些是復(fù)雜類型?
數(shù)據(jù)類型包含,一共有5種簡單類型和1種復(fù)雜類型
undefined （簡單）
null （簡單）
boolean （簡單）
number （簡單）
string （簡單）
object（復(fù)雜）
6.NaN、undefined、null分別代表什么?
NaN:not a number 是一個特殊的數(shù)值。
undefined:var 聲明變量，但是沒有對其加以賦值的時候，變量的值是。undefined。
null:表示一個空對象指針。
7.typeof和instanceof的作用和區(qū)別?
instanceof和typeof都能用來判斷一個變量是否為空或是什么類型的變量
在變量和值上調(diào)用typeof，將返回一個字符串，這個字符串標示了這個變量或值的類型。如果這個變量或值是一個引用類型將會返回"object"。
代碼題
1.完成如下代碼判斷一個變量是否是數(shù)字、字符串、布爾、函數(shù) （難度）
2.以下代碼的輸出結(jié)果是?（難度*）
3.以下代碼的輸出結(jié)果是? （難度***）
4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項的平方 （難度**）
5.遍歷 JSON, 打印里面的值
6.下面代碼的輸出是? 為什么
