CSS和JS在網(wǎng)頁中的放置順序是怎樣的？
CSS以link方式放在頭部嫩海，否則有可能出現(xiàn)白屏或者FOUC(無樣式內(nèi)容閃爍)厚宰。
JS放在底部魂角，否則有可能會出現(xiàn)腳本阻塞后面內(nèi)容的呈現(xiàn)或者阻塞其后組件的下載。
解釋白屏和FOUC尚猿。
為何出現(xiàn)白屏和FOUC（無樣式內(nèi)容閃爍）
** 白屏 **
1窝稿、如果把CSS樣式放在底部，對于IE瀏覽器凿掂，在某些場景下（新窗口打開伴榔，刷新等）頁面會等到html和css加載完成后再進(jìn)行渲染，造成頁面內(nèi)容不會逐步展現(xiàn)庄萎；如果使用@import標(biāo)簽踪少，即使CSS放入link,并且放在頭部，也可能出現(xiàn)白屏;
2糠涛、如果把JS放在網(wǎng)頁頭部或者h(yuǎn)tml中援奢，在加載JavaScript時，會禁用并發(fā)脱羡，并且阻止其他內(nèi)容的下載萝究，出現(xiàn)白屏免都；
** FOUC (Flash of Unstyled Content) 無樣式內(nèi)容閃爍 **
如果把樣式放在底部,對于IE瀏覽器,在某些場景下(點擊鏈接,輸入URL,使用書簽進(jìn)入等),會出現(xiàn) FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式).對于 Firefox 會一直表現(xiàn)出 FOUC 。
參考文章
瀏覽器渲染過程
瀏覽器是怎樣工作的：渲染引擎帆竹，HTML解析（連載二)
async和defer的作用是什么绕娘？有什么區(qū)別？
在瀏覽器中如果沒有特別聲明栽连，js文件會和html同步加載解析险领，在文件頭部或者中間時運行JS有可能會出現(xiàn)白屏。
<script async src="script.js"></script>有 async秒紧，加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）绢陌。
<script defer src="myscript.js"></script>有 defer，加載后續(xù)文檔元素的過程將和 script.js的加載并行進(jìn)行（異步）,但是 script.js的執(zhí)行要在所有元素解析完成之后熔恢，DOMContentLoaded事件觸發(fā)之前完成脐湾。
** 區(qū)別 ** async雖然加載異步，但是執(zhí)行沒有順序叙淌。defer 加載異步秤掌，但是執(zhí)行在所有元素解析完成之后。所以一旦頁面渲染依賴該script腳本鹰霍，則不可用async闻鉴，只能用defer。
簡述網(wǎng)頁的渲染機(jī)制
瀏覽器的通常渲染過程：
- 瀏覽器解析html源碼茂洒，然后創(chuàng)建一個 DOM樹孟岛。
- 瀏覽器解析CSS代碼，計算出最終的樣式數(shù)據(jù)督勺，創(chuàng)建一個CSSOM樹渠羞。解析CSS的時候會按照如下順序來定義優(yōu)先級：瀏覽器默認(rèn)設(shè)置，用戶設(shè)置玷氏，外鏈樣式堵未，內(nèi)聯(lián)樣式，html中的style盏触。
- 構(gòu)建出DOM樹渗蟹，并且計算出樣式數(shù)據(jù)后，下一步就是構(gòu)建一個渲染樹（rendering tree）赞辩。
- 一旦渲染樹創(chuàng)建好了雌芽，瀏覽器就可以根據(jù)渲染樹直接把頁面繪制到屏幕上。
** DOM樹和渲染樹的區(qū)別 **
- 每一個html標(biāo)簽對應(yīng)一個DOM節(jié)點辨嗽，每一個文本也會有一個文本節(jié)點世落，DOM樹的根節(jié)點就是 documentElement，對應(yīng)節(jié)點是html標(biāo)簽糟需。
- 渲染樹會忽略掉不需要渲染的元素屉佳，比如head谷朝、display:none的元素等。而且一大段文本中的每一個行在渲染樹中都是獨立的一個節(jié)點武花。渲染樹中的每一個節(jié)點都存儲有對應(yīng)的css屬性圆凰。
參考文章：瀏覽器渲染頁面的過程，以及重繪和重排
JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?
JS定義了兩大類數(shù)據(jù)類型
簡單類型
- Number (數(shù)字類型)
- String(字符串類型)
- Boolean(布爾類型)
- Null
- Undefined
復(fù)雜類型 - Object
- Array(數(shù)組)
- Function(函數(shù))
- object （狹義對象）
NaN体箕、undefined专钉、null分別代表什么?
-
NaN not a number 非數(shù)字類型
NaN -
undefined 只聲明未賦值，沒有初始化
undefined -
null 空類型,指不存在的東西累铅；空指針,未指向任何內(nèi)容,可用于取消對象的引用跃须。
undefined和null
typeof和instanceof的作用和區(qū)別?
** typeof 運算符返回一個用來表示表達(dá)式的數(shù)據(jù)類型的 字符串 **。判斷一個變量的類型常常會用 typeof 運算符娃兽，但無論引用的是什么類型的對象菇民，它都返回 “object”。
** instanceof **它是用來判斷對象是否是某個類型的實例换薄，它返回的是一個布爾值玉雾；是 JavaScript 語言中原生的用來判斷實例繼承關(guān)系的操作符。
參考文章JavaScript instanceof 運算符深入剖析
代碼題
1.代碼一題
2.代碼二題
console.log(1+1); //2
console.log("2"+"4"); //"24"（字符串join）
console.log(2+"4"); //"24"（2轉(zhuǎn)換成字符串然后join）
console.log(+new Date());//1467943817909(用new Date() 會轉(zhuǎn)換為從1970.1.1開始的毫秒數(shù))
console.log(+"4");//4
3.代碼三題
var a = 1;//賦值
a+++a;//（a++）+a=1+2=3;a=2
typeof a+2;//number2(其中typeof 比+優(yōu)先級高冲泥，+是連接符號，如果變成-等運算符號壁涎，就會輸出NaN)
4.遍歷數(shù)組凡恍，把數(shù)組里的打印數(shù)組每一項的平方
5.遍歷 JSON, 打印里面的值
6.下面代碼的輸出是? 為什么？
console.log(a);//undefined,變量聲明提前怔球，未賦值
var a = 1;
console.log(a);//1
console.log(b);//報錯,不存在
** 本教程版權(quán)歸博主和饑人谷所有嚼酝，轉(zhuǎn)載須說明來源。**
