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 服務器錯誤(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。
web前端面試題整理