web前端面試題（匯總）

web前端面試題（匯總）
一、理論知識

1.1、講講輸入完網(wǎng)址按下回車，到看到網(wǎng)頁這個過程中發(fā)生了什么

a. 域名解析

b. 發(fā)起TCP的3次握手

c. 建立TCP連接后發(fā)起http請求

d. 服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼

e. 瀏覽器解析html代碼，并請求html代碼中的資源

f. 瀏覽器對頁面進行渲染呈現(xiàn)給用戶

參考《一次完整的HTTP事務(wù)是怎樣一個過程》

1.2、談?wù)勀銓η岸诵阅軆?yōu)化的理解

a. 請求數(shù)量：合并腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啟GZip，精簡JavaScript，移除重復腳本，圖像優(yōu)化，將icon做成字體

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存

d. 頁面結(jié)構(gòu)：將樣式表放在頂部，將腳本放在底部，盡早刷新文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向

參考《前端工程與性能優(yōu)化》

1.3、前端 MV*框架的意義

早期前端都是比較簡單，基本以頁面為工作單元，內(nèi)容以瀏覽型為主，也偶爾有簡單的表單操作，基本不太需要框架.

隨著 AJAX 的出現(xiàn)，Web2.0的興起，人們可以在頁面上可以做比較復雜的事情了，然后前端框架才真正出現(xiàn)了。

如果是頁面型產(chǎn)品，多數(shù)確實不太需要它，因為頁面中的 JavaScript代碼，處理交互的絕對遠遠超過處理模型的，但是如果是應(yīng)用軟件類產(chǎn)品，這就太需要了。

長期做某個行業(yè)軟件的公司，一般都會沉淀下來一些業(yè)務(wù)組件，主要體現(xiàn)在數(shù)據(jù)模型、業(yè)務(wù)規(guī)則和業(yè)務(wù)流程，這些組件基本都存在于后端，在前端很少有相應(yīng)的組織。

從協(xié)作關(guān)系上講，很多前端開發(fā)團隊每個成員的職責不是很清晰，有了前端的 MV框架，這個狀況會大有改觀。

之所以感受不到 MV*框架的重要性，是因為Model部分代碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。

參考《前端 MV*框架的意義》

1.4、請簡述盒模型

IE6盒子模型與W3C盒子模型。

文檔中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內(nèi)邊距邊界padding與內(nèi)容邊界content。

CSS3中有個box-sizing屬性可以控制盒子的計算方式，

content-box：padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border、padding之和。(W3C盒子模型)

border-box：padding和border被包含在定義的width和height之內(nèi)。對象的實際寬度就等于設(shè)置的width值。(IE6盒子模型)

參考《盒模型》

1.5、請你談?wù)凜ookie的弊端

a. 每個特定的域名下最多生成的cookie個數(shù)有限制

b. IE和Opera 會清理近期最少使用的cookie，F(xiàn)irefox會隨機清理cookie

c. cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)

d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。

1.6、瀏覽器本地存儲

在HTML5中提供了sessionStorage和localStorage.

sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀，是會話級別的存儲。

localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。

1.7、web storage和cookie的區(qū)別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬

c. cookie還需要指定作用域，不可以跨域調(diào)用

d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發(fā)者自己封裝setCookie，getCookie

e. Cookie的作用是與服務(wù)器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage

1.9、線程與進程的區(qū)別

a. 一個程序至少有一個進程，一個進程至少有一個線程

b. 線程的劃分尺度小于進程，使得多線程程序的并發(fā)性高

c. 進程在執(zhí)行過程中擁有獨立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運行效率

d. 每個獨立的線程有一個程序運行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制

e. 多線程的意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨立的應(yīng)用，來實現(xiàn)進程的調(diào)度和管理以及資源分配

1.10、請說出三種減少頁面加載時間的方法

a. 盡量減少頁面中重復的HTTP請求數(shù)量

b. 服務(wù)器開啟gzip壓縮

c. css樣式的定義放置在文件頭部

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript、CSS代碼

f. 使用多域名負載網(wǎng)頁內(nèi)的多個文件、圖片

參考《減低頁面加載時間的方法》

1.11、你都使用哪些工具來測試代碼的性能?

JSPerf, Dromaeo

1.12、你遇到過比較難的技術(shù)問題是?你是如何解決的?

1.13、常使用的庫有哪些?常用的前端開發(fā)工具?開發(fā)過什么應(yīng)用或組件?

1.14、列舉IE與其他瀏覽器不一樣的特性?

a. IE的排版引擎是Trident (又稱為MSHTML)

b. Trident內(nèi)核曾經(jīng)幾乎與W3C標準脫節(jié)(2005年)

c. Trident內(nèi)核的大量 Bug等安全性問題沒有得到及時解決

d. JS方面，有很多獨立的方法，例如綁定事件的attachEvent、創(chuàng)建事件的createEventObject等

e. CSS方面，也有自己獨有的處理方式，例如設(shè)置透明，低版本IE中使用濾鏡的方式

參考《Trident(排版引擎)》

1.15、什么叫優(yōu)雅降級和漸進增強?

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優(yōu)雅降級 graceful degradation：

一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。

區(qū)別：

a. 優(yōu)雅降級是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

參考《優(yōu)雅降級和漸進增強的區(qū)別》

1.16、WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式?

a. html5 websoket

b. WebSocket 通過 Flash

c. XHR長時間連接

d. XHR Multipart Streaming

e. 不可見的Iframe

f.