一些關於JS的基礎問題-js教程-PHP中文網

一些關於JS的基礎問題

jacklove

發布： 2018-05-21 10:21:12

原創

1612 人瀏覽過

在開發學習中常會遇到一些js問題，本篇將會介紹一些相關的js基礎問題。

CSS和JS在網頁中的放置順序是怎麼樣的？

一般我們把CSS放在head頭部標籤中，把JS程式碼放在body程式碼的尾部。

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS基础</title>
  <style>
    
    /* 这里放css代码 */      
    
  </style></head><body>
  <!-- 这里放HTML代码 -->
    
  <script>

登入後複製

#11114'解釋白屏和FOUC

白屏：如果把CSS樣式放在底部，在某些場景下（新窗口打開、刷新等）頁面會出現白屏，而不是內容逐步展現，如果使用@ import標籤，即時CSS放入link，並且放在頭部，也可能出現白屏現象。

腳步會阻塞後面內容的展現

腳本會阻塞其後組成的下載

對於圖片和CSS，在載入時會並發載入（如一個網域下同時載入兩個文件），但在載入JS時，會停用並發，並且阻止其它內容的下載，所以把JS放到頁面的頂部也會出現白屏的現象。

FOUC(Flash of Unstyled Content)無樣式內容閃爍：如果把CSS樣式放在底部，對於IE瀏覽器，在某些場景下（點擊鏈接，輸入URL，使用書籤進入等），就會出現FOUC現象（逐步載入無樣式的內容，等CSS載入後頁面突然展現樣式），對於Firefox會一直出現FOUC現象。

async和defer的作用是什麼？有什麼區別

沒有async和defer，在瀏覽器載入中會立即載入執行目前的腳本，並阻塞瀏覽器渲染script標籤之下的文件元素，而有了async和defer可以讓瀏覽器載入渲染後續文件的過程和JS腳本的載入與執行並行進行，也就是載入非同步。

兩者的差異：主要是腳本下載完成之後何時執行，defer會按照載入順序腳本延遲到文件解析顯示後執行，而async不管你宣告的順序如何，只要他載入完了就會立刻執行，並不會依照順序。

一般來說defer更符合我們的使用場景。

網頁的渲染機制

解析HTML 標籤, 建構DOM 樹

解析CSS 標籤, 建構CSSOM 樹

根據DOM 和CSSOM 組合成渲染樹(render tree)進行基礎佈局

計算每個節點的幾何結構

把每個節點繪製到螢幕上呈現給使用者

JavaScript 定義了幾種資料類型?哪些是簡單型別?哪些是複雜型別?

Null ：是空指標

Underfined ：有指標但未指向任何空間

Boolean ：布林值，真假（true,false)

Number ：數字類型。

String ：字串類型，單引號或雙引號表示。

Object ：對象，JS核心概念，最重要的資料型態。（一切皆為物件）

前5種為簡單類型，Object為複雜型別。

NaN、undefined、null分別代表什麼?

NaN：意義是Not a number，表示非數字，與任何值都不相等，包括他自己，（一種不等於任何值的數字類型）

underfined：是Underfined唯一的值，表示變數只是被聲明，但是沒有初始化，代表有這個指針，但是此指針沒有指向任何空間

null：Null唯一的值，表示空指針，也就是不存在的東西

typeof和instanceof的作用和區別?

typeof的作用,可以判斷返回一個值的數據類型，放在運算在數的前面，運算數可以是任何型別。

function a(){}

a(){}typeof a"function" //運算數為函數傳回functiontypeof 123421"number"typeof "32423423423""string"typeof true”boolean" typeof undefined"undefined" //利用這一點檢查未定義變數typeof window"object" //其他全部返回object 一些關於JS的基礎問題

#instanceof 用於判斷一個變數是否某個物件的實例，因為typeof null,數組,物件時都會回傳object類型，所以當我們要判斷一個物件是否是數組時，或者判斷某個變數是否是某個物件的實例則要選擇使用instanceof

程式碼問題

1.如下程式碼判斷一個變數是否為數字、字串、布林、函數

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) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true

登入後複製

2.以下程式碼的輸出結果是?

我是圖

3.以下程式碼的輸出結果是?

var a = 1;

a a;typeof a 2;

一些關於JS的基礎問題