web前端面試題整理

---恢復內容開始---

1.瀏覽器的內核分別是什麼?

　　IE: trident內核
　　Firefox：gecko內核
　　Safari：webkit內核
　　Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
　　Chrome：Blink(基於webkit，Google與Opera Software共同開發)

2.一次完整的HTTP事務是怎樣的一個過程？

基本流程：
    a. 域名解析
    b. 發起TCP的3次握手
    c. 創建TCP鏈接後發起http請求
    d. 服務器端響應http請求，瀏覽器獲得html代碼
    e. 瀏覽器解析html代碼，並請求html代碼中的資源
    f. 瀏覽器對頁面進行渲染呈現給用戶

HTTP協議常見狀態碼的含義,TCP三次握手;基本排序算法?.

　　1. 消息（1字頭）

　　2 成功（2字頭）

　　3 重定向（3字頭)

　　4 請求錯誤（4字)

　　5 服務器錯誤（五、6字頭）

　　三次握手（three times handshake；three-way handshake）

  即對每次發送的數據量是怎樣跟蹤進行協商使數據段的發送和接收同步，根據所接收到的數據量而肯定的數據確認數及數據發送、接收完畢後什麼時候撤消聯繫，並創建虛鏈接。

3.Ajax是什麼?如何建立一個Ajax？

ajax的全稱：Asynchronous Javascript And XML。異步傳輸+js+xml。

簡單的說經過xmlhttprequest對象來向服務器發異步請求,從服務器獲 得數據,而後用js來操做dom而更新頁面,這是其中最關鍵的一步就是從服務器請求數據.

所用到的技術?

　　1.使用css+xhtml來表示

　　2.使用dom模型來交互和動態顯示

　　3.使用xhttprequest來和服務器進行異步通訊

　　4.使用JavaScript來綁定和調用

優勢:頁面是不會發生整頁刷新的，提升了用戶體驗。

缺點:對搜索引擎不友好;跨域問題限制;可能形成請求次數的增長;

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息

(3)設置響應HTTP請求狀態變化的函數

(4)發送HTTP請求

(5)獲取異步調用返回的數據

(6)使用JavaScript和DOM實現局部刷新

4.jsonp的工做原理?

　　它是一種數據的調用方式,出於安全考慮,腳本不能訪問非本域的內容,可是靜態資源是不受域策略限制的,能夠加載任意域的腳本樣式,圖片等靜態資源,jsonp就是利用這種原理來實現跨域獲取數據的.

5.閉包是什麼?用什麼特性?對頁面有什麼影響?

閉包:指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域，將函數內部的變量和方法傳遞到外部。

閉包的特性：

　　1.函數內再嵌套函數

　　2.內部函數能夠引用外層的參數和變量

　　3.參數和變量不會被垃圾回收機制回收

閉包的好處?

　　1.但願一個變量長期駐紮在內存當中

　　2.避免全局變量的污染

　　3.私有成員的存在

6.JavaScript原型，原型鏈 ? 有什麼特色？

　　每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念。

　　關係：instance.constructor.prototype = instance.__proto__

　　特色：JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本，當咱們修改原型時，與之相關的對象也會繼承這一改變。

　　當咱們須要一個屬性時，JavaScript引擎會先看當前對象中是否有這個屬性，若是沒有的話，就會查找它的prototype對象是否有這個屬性，如此遞推下去，一致檢索到Object內建對象。

 1 function Func(){}
 2 Func.prototype.name = "Xiaosong"; 3 Func.prototype.getInfo = function() { 4 return this.name; 5 } 6 var person = new Func(); 7 console.log(person.getInfo()); 8 //"Xiaosong" 9 console.log(Func.prototype); 10 //Func { name = "Xiaosong", getInfo = function() }

7.哪些操做會形成內存泄漏？

　　內存泄漏是指任何對象在您再也不擁有或須要它以後任然存在。

　　垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量，若是一個對象的引用數量爲0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

　　setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

8.前端優化、提升性能的方法有哪些？

（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

（2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

（3） 用innerHTML代替DOM操做，減小DOM操做次數優化javascript性能。

（4） 當須要設置的樣式不少時設置className而不是直接操做style。

（5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

（7） 圖片預加載，將樣式表放在頂部，將腳本放在底部 上時間戳。

（8） 避免在頁面的主體佈局中使用table，table要等其的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。