一毅待、CSS和JS在網(wǎng)頁中的放置順序是怎樣的？

CSS和JS在網(wǎng)頁中的放置順序

二归榕、解釋白屏和FOUC

• 白屏問題

  如果把樣式放在底部尸红，對于IE瀏覽器，在某些場景下（新窗口打開刹泄、刷新等）頁面會出現(xiàn)白屏外里，而不是內(nèi)容逐步展現(xiàn)；
  如果使用@import標簽特石，即使CSS放入link盅蝗，并且放在頭部，也可能出現(xiàn)白屏姆蘸；
  把JavaScript放入頁面頂部時會阻塞其后內(nèi)容的呈現(xiàn)风科，所以也會導致白屏現(xiàn)象。

• FOUC（Flash Of Unstyled Content）無樣式內(nèi)容閃爍

  如果把樣式放在底部乞旦，對于IE瀏覽器，在某些場景下（點擊鏈接题山，輸入URL兰粉，使用書簽進入等），會出現(xiàn)FOUC現(xiàn)象（逐步加載無樣式的內(nèi)容顶瞳，等CSS加載后頁面突然展現(xiàn)樣式）玖姑。對于Firefox會一直出現(xiàn)FOUC。

三慨菱、async和defer的作用是什么焰络？有什么區(qū)別

• async和defer的作用
  當瀏覽器碰到script腳本的時候：
  1. <script src="script.js"><script>
     沒有defer或async，瀏覽器會立即加載并執(zhí)行指定的腳本符喝，“立即”指的是在渲染該script標簽之下的文檔元素之前闪彼，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
  2. <script async src="script.js"><script>
     有async畏腕，加載和渲染后續(xù)文檔元素的過程將和script.js的加載與執(zhí)行并行進行（異步）缴川。
  3. <script defer src="script.js"><script>
     有defer，加載后續(xù)文檔元素的過程將和script.js的加載并行進行（異步）描馅，但script.js的執(zhí)行要在所有元素解析完成之后把夸，DOMContentLoad事件觸發(fā)之前完成。
• async和defer的區(qū)別
  • defer：腳本延遲到文檔解析和顯示后按順序執(zhí)行铭污，有順序
  • async：腳本的執(zhí)行不保證順序恋日，只要加載完了就會立刻執(zhí)行

四、簡述網(wǎng)頁的渲染機制

網(wǎng)頁的渲染主要分為以下幾步：

• 解析html構建DOM樹
• 解析CSS構建CSSOM樹
• 把DOM和CSSOM組合成渲染樹（Render Tree）
• 在渲染樹的基礎上進行布局嘹狞，計算每個節(jié)點的幾何結構（Layout Tree）

• 把每個節(jié)點繪制到屏幕上（Painting）

  
  

當瀏覽器從服務器接收到了html文檔岂膳，并把html在內(nèi)存中轉換成DOM樹，在轉換過程中如果發(fā)現(xiàn)某個節(jié)點上引用了CSS或者image刁绒，就會再發(fā)一個request去請求CSS或image闷营，然后繼續(xù)執(zhí)行下面的轉換，而不需要等待request的返回知市，當request返回后傻盟，只需要把返回的內(nèi)容放入到DOM樹中對應的位置就可以了。但當引用了JS的時候嫂丙，瀏覽器發(fā)送一個JS request就會一直等待該request的返回娘赴。

五、JavaScript定義了幾種數(shù)據(jù)類型?哪些是簡單類型?哪些是復雜類型?

JavaScript的數(shù)據(jù)類型共有六種：

• 數(shù)值（Number）：整數(shù)和小數(shù)（比如1和3.14）
• 字符串（String）：字符組成的文本（比如“Hello World”）
• 布爾值（Boolean）：true（真）和false（假）兩個特定值
• Undefined：表示“未定義”或不存在跟啤，及此處目前沒有任何值
• Null：表示空缺诽表，及此處應該有一個值，但目前為空
• 對象（Object）：各種指組成的集合

其中有5種簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）：數(shù)值（Number）隅肥、字符串（String）竿奏、布爾值（Boolean）、Undefined腥放、Null泛啸；

1種復雜數(shù)據(jù)類型：對象（Object）

對象又可以分成三個子類型：

• 狹義的對象（Object）
• 數(shù)組（Array）
• 函數(shù)（Function）

六、NaN秃症、undefined候址、null分別代表什么?

• NaN：即非數(shù)值（Not a Number）是一個特殊的數(shù)值，這個數(shù)值用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況

NaN有兩個特點：
* 任何涉及NaN的操作（例如NaN/10）都會返回NaN
* NaN與任何值都不相等种柑，包括NaN本身

• undefined：表示不存在值岗仑，就是此處不存在任何值。典型的用法是：

  • 變量被聲明了聚请，但沒有賦值時荠雕，這個變量的值就是undefined
    
  • 調用函數(shù)時，應該提供的參數(shù)沒有提供，該參數(shù)等于undefined
    
  • 對象沒有賦值的屬性舞虱，該屬性的值為undefined
    
  • 函數(shù)沒有返回值時欢际，默認返回undefined
    

• null：表示空值，即該處的值現(xiàn)在為空矾兜。從邏輯角度來看损趋，null值表示一個空對象指針，而這也正是使用typeof操作符檢測null時會返回“object”的原因椅寺，如下面例子所示：
  

  
  如果定義的變量準備在將來用于保存對象浑槽，那么最好將該變量初始化為null而不是其他值。這樣一來返帕，只要直接檢查null值就可以知道相應的變量是否已經(jīng)保存了一個對象引用桐玻，如下面的例子所示：

    if(car != null){
        //對car對象執(zhí)行某些操作
    }
  

七、typeof和instanceof的作用和區(qū)別?

• typeof：用于獲取給定變量的數(shù)據(jù)類型荆萤。對一個值使用typeof操作符可能返回下列某個字符串：

  • “undefined”——如果這個值未定義镊靴；

    
    

  • “boolean”——如果這個值是布爾值；

    
    

  • “string”——如果這個值是字符串链韭；

    
    

  • “number”——如果這個只是數(shù)值偏竟；

    
    
  • “object”——如果這個值是對象或null；
    
  • “function”——如果這個值是函數(shù)敞峭；
    
    
    我們可以使用typeof來獲取一個變量是否存在踊谋，如if(typeof a!="undefined"){}，而不要去使用if(a)旋讹，因為如果a不存在（為聲明）則會出錯殖蚕，對于Array，Null等特殊對象使用typeof一律返回object沉迹，這正是typeof的局限性睦疫。
    

• instanceof：用于判斷一個變量是否屬于某個對象的實例。返回結果為boolean值鞭呕，true或false笼痛。用法：

    var a=new Array();
    alert(a instanceof Array); //返回true
    alert(a instanceof Object)  //也會返回true，因為Array是object的子類  
  

代碼實例

1.完成如下代碼判斷一個變量是否是數(shù)字、字符串枷恕、布爾党晋、函數(shù)（難度*）

function isNumber(el){
    if(typeof el === "number"){
            return true;
        }
        else{
            return false;
        }
}
function isString(el){
    if(typeof el === "string"){
            return true;
        }
        else{
            return false;
        }
}
function isBoolean(el){
    if(typeof el === "boolean"){
            return true;
        }
        else{
            return false;
        }
}
function isFunction(el){
    if(typeof el === "function"){
            return true;
        }
        else{
            return false;
        }
}

var a = 2,
    b = "jirengu",
    c = false;
alert( isNumber(a) );  //true
alert( isString(a) );  //false
alert( isString(b) );  //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true

代碼

2.以下代碼的輸出結果是？（難度**）

console.log(1+1);  //2
console.log("2"+"4");  //24
console.log(2+"4");  //24
console.log(+new Date()); //146913500108
console.log(+"4");  //4

操作符"+"對不同的數(shù)據(jù)類型有不同的含義：

• 兩個操作數(shù)都是數(shù)字的時候，會做加法運算
• 參數(shù)中至少有一個是字符串時未玻，會把另外的非字符串參數(shù)轉換成字符串做字符串拼接
• 在參數(shù)有對象的情況下會調用其valueOf或toString
• 在只有一個字符串參數(shù)的時候會嘗試將其轉換為數(shù)字
• 在只有一個數(shù)字參數(shù)的時候返回其正數(shù)值

3.以下代碼的輸出結果是灾而？（難度***）

var a = 1; 
a+++a;
//3
typeof a+2;
//number2

4.遍歷數(shù)組，把數(shù)組里的打印數(shù)組每一項的平方（難度**）

var arr = [3,4,5];
for(var i = 0; i < arr.length; i++)
{
    var a = arr[i];
    console.log(a*a);
}

5.遍歷JSON扳剿，打印里面的值（難度**）

var obj = {
    name: 'hunger',
    sex: 'male',
    age: 28
};
for(var prop in obj)
{
   console.log(prop+":"+obj[prop]); 
}

6.下面代碼的輸出是旁趟？為什么（難度***）

console.log(a);  //undefined
var a = 1;
console.log(a);  //1
console.log(b);  //報錯

JavaScript引擎的工作方式是，先解析代碼庇绽，獲取所有被聲明的變量锡搜，然后再一行一行地運行。這造成的結果瞧掺，就是所有的變量的聲明語句耕餐，都會被提升到代碼的頭部，這就叫做變量提升

由于變量提升辟狈，我們?nèi)绻暶髁俗兞砍Φ蓿词乖诼暶髡Z句前使用也是可以的，只不過其值是初始值undefined

本文版權屬吳天喬所有哼转，轉載務必注明出處明未。