前端面試題（三）

1.px 和 em 和r em 的區別？

px像素，相對長度單位；

em相對長度單位，會繼承父元素的字體大小；

rem相對長度單位，會根據節點html定義，不會受父元素的影響。

2.如何理解css的盒子模型？

盒子模型包含內容的大小，padding，border，margin

css盒子模型分為IE盒子模型和標準盒子模型；

IE盒子模型內容的寬高包含了padding和border。

3.css選擇符有哪些？那些屬性可以繼承？優先順序演算法如何計算？css3新增偽類有哪些？

class，ID，標簽，通配符 * ，偽類，子代，後代，相鄰；

font-size，font-family，color，ul，li；

*                              0

標簽                        1

class                       10

ID                            100

內聯樣式                  1000

！imported               無窮大

計算時根據它的權重和來計算；

last-of-type ， last-child ， first-of-type ， first-child

4.push()，pop() ， shift() ， unshift()分別是什麼功能？

push() 尾部插入；

pop() 尾部刪除；

shift() 頭部刪除；

unshift() 頭部插入；

5.什麼是預設行為？什麼是冒泡？如何禁止。

網頁元素都有預設行為；

冒泡指事件由文檔嵌套最深的元素接受，然後逐級向外傳播；

通過stopPropagation() 方法用event對象在事件函數中調用阻止事件冒泡；

通過preventdefault() 方法用event對象在事件函數中調用阻止預設行為；

 6.請給出非同步載入js方案

動態創建<script>標簽

示例：

方案2：<script>標簽的async="async"屬性

async的定義和用法(是HTML5的屬性)

async 屬性規定一旦腳本可用，則會非同步執行。

示例： 

<script type="text/javascript" src="xxxxxxx.js" async="async"></script> 

方案3：<script>標簽的defer="defer"屬性

defer 屬性規定是否對腳本執行進行延遲，直到頁面載入為止。 

有的 javascript 腳本 document.write 方法來創建當前的文檔內容，其他腳本就不一定是了。

如果您的腳本不會改變文檔的內容，可將 defer 屬性加入到 <script> 標簽中，以便加快處理文檔的速度。因為瀏覽器知道它將能夠安全地讀取文檔的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文檔已經顯示給用戶為止。

示例：

<script type="text/javascript" defer="defer"> 
　　alert(document.getElementById("p1").firstChild.nodeValue); 
</script> 

 7.$(document).ready() 是什麼函數？為什麼要用它？跟window.onload有什麼區別？嘗試實現ready方法。

$(document).ready()是jQuery中是入口函數。它能適應與所有瀏覽器；

window.onload是頁面中的所有元素載入完成後才執行；

$(document).ready()是將頁面中的DOM文檔結構繪製完成就執行。

8.怎樣添加，移除，移動，繪製，創建和查找節點。

（1）創建新節點

      createDocumentFragment()    //創建一個DOM片段

      createElement()   //創建一個具體的元素

      createTextNode()   //創建一個文本節點

（2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通過標簽名稱

      getElementsByName()    //通過元素的Name屬性的值

      getElementById()    //通過元素Id，唯一性

9.簡述一下css sprites及其優點。

css sprites  ：  精靈圖/雪碧圖

能夠優化頁面性能，減少圖片的位元組和http請求。

10.談談ES6 中的 let，const 聲明。

 let 類似於 var， let無法重覆定義，塊級作用域外無法讀取塊級作用域內的let聲明的變數，let沒有變數提升，無法在聲明之前使用變數；

const是常量聲明，一旦聲明就不能更改，聲明的變數是數組或者對象的時候，聲明的只是一個引用地址並不是一個值，所以數組和對象中的值是可以改變的。

 11.什麼是閉包，如何使用它，為什麼要使用它？

在函數中在嵌套一個函數，裡面的函數能夠訪問外面函數中的變數，外部的變數是內部函數的一部分；

用外層函數包裹要保護的變數和內層函數，外層函數將內層函數返回到外部，調用外層函數，可以獲得內層函數的對象，保存在外部變數中。

閉包能夠有效的防治變數被污染；

12.什麼是跨域？跨域請求資源的方法有哪些？

由於瀏覽器的同源策略，凡是發送請求 URL 的協議，功能變數名稱，埠三者之間任意一個與當前頁面地址不同即為跨域；

跨域請求資源方法：

proxy代理，jsonp ， cors

13.請解釋JSONP的工作原理，以及它為什麼不是正真的AJAX。

 Ajax工作原理是

相當於在用戶和伺服器之間加了—個中間層(AJAX引擎),使用戶操作與伺服器響應非同步化。

對於用戶請求ajax引擎會做一些數據驗證和數據處理，不是所有請求都提交給伺服器，當需要從伺服器讀取新數據時由Ajax引擎代為向伺服器提交請求。AJAX最大優點就是不刷新整個頁面的前提下與伺服器通信維護數據。

過程的話

第一步：創建一個ajax引擎對象，ie6的是new ActiveXObject其他瀏覽器是new一個xmlHttpRequest對象

第二步 調用open方法啟動一個請求以備發送，open方法傳入三個參數 請求類型，請求url和一個布爾值

第三步 調用send方法發送

第四部 處理回調函數onreadystatechange，當readState = 4 響應數據完成時 並且2status=200請求成功的時候處理響應數據

註意：回調函數要寫在open（）和send（）之前

Jsonp原理

動態創建一個script標簽，利用script標簽src屬性訪問沒有限制，實現跨域。

web客戶端通過與調用腳本一樣的方式來調用跨域伺服器上動態生成的js格式文件(尾碼.json)，伺服器之所以要動態生成json文件目的把客戶端需要的數據裝入進去。

允許用戶傳遞一個callback參數給服務端，然後服務端返回數據時會將這個callback參數作為函數名來包裹住json數據 這樣客戶端就可以隨意定製自己的函數來自動處理返回數據

Ajax 和 jsonp的區別

1.ajax和jsonp的調用方式很像，目的一樣，都是請求url，然後把伺服器返回的數據進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；

2.實質不同

　ajax的核心是通過xmlHttpRequest獲取非本頁內容

　jsonp的核心是動態添加script標簽調用伺服器提供的js腳本（尾碼.json)

3.區別聯繫

　不在於是否跨域

　ajax通過服務端代理一樣跨域

　jsonp也不並不排斥同域的數據的獲取

4.jsonp是一種方式或者說非強制性的協議

　ajax也不一定非要用json格式來傳遞數據　

5.jsonp只支持get請求，ajax支持get和post請求

14.請解釋GET/POST的區別，分別在什麼場景下使用。

　　GET ： 數據在地址欄中；

　　POST ： 數據在請求體中；

在不同的網頁需要接受同一個賬號名的時候用GET；

在登錄和註冊提交的時候用POST；

總之獲取數據用 GET，提交數據用POST。

15.call 與 apply 區別？

JavaScript中的每一個Function對象都有一個apply()方法和一個call()方法，它們的語法分別為：

/*apply()方法*/
function.apply(thisObj[, argArray])

/*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它們各自的定義：

apply：調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。

call：調用一個對象的一個方法，用另一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

它們的共同之處：

都“可以用來代替另一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象”。

它們的不同之處：

apply：最多只能有兩個參數——新this對象和一個數組argArray。如果給該方法傳遞多個參數，則把參數都寫進這個數組裡面，當然，即使只有一個參數，也要寫進數組裡。如果argArray不是一個有效的數組或arguments對象，那麼將導致一個TypeError。如果沒有提供argArray和thisObj任何一個參數，那麼Global對象將被用作thisObj，並且無法被傳遞任何參數。

call：它可以接受多個參數，第一個參數與apply一樣，後面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊情況下需要改變this指針。如果沒有提供thisObj參數，那麼 Global 對象被用作thisObj。 

實際上，apply和call的功能是一樣的，只是傳入的參數列表形式不同。

 16.什麼是事件委托， jQuery 和原生 js 怎麼去實現

利用事件冒泡，只指定一個事件處理程式，就可以管理某一類型的所有事件。

<ul class=’lis’>

      <li></li>

</ul>

Js:

var lis = document.getElementsByclassName(‘lis’);

lis.add

17.如何判斷一個數組和一個類數組。

Object.prototype.toString.call()

 18.清除浮動的幾種方式。

在父級尾部添加一個空的 div ，div 添加 clear ： both

在父級設置  overflow ： hidden

使用偽元素

使用雙偽元素 after 和 before；

19.簡述一下你對 promise 的理解

Promise是最早由社區提出和實現的一種解決非同步編程的方案，比其他傳統的解決方案（回調函數和事件）更合理和更強大。

ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例。

 20.web 前端開發，如何提高頁面性能優化？

詳細參閱   35條 雅虎軍規！