web前端面試題（匯總）

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

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

a. 域名解析

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

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

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

e. 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源

f. 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù)

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

1.2、談?wù)勀銓?duì)前端性能優(yōu)化的理解

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

b. 請(qǐng)求帶寬：開(kāi)啟GZip，精簡(jiǎn)JavaScript，移除重復(fù)腳本，圖像優(yōu)化，將icon做成字體

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

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

e. 代碼校驗(yàn)：避免CSS表達(dá)式，避免重定向

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

1.3、前端 MV*框架的意義

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

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

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

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

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

之所以感受不到 MV*框架的重要性，是因?yàn)镸odel部分代碼較少，View的相對(duì)多一些。如果主要在操作View和Controller，那當(dāng)然 jQuery 這類(lèi)庫(kù)比較好用了。

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

1.4、請(qǐng)簡(jiǎn)述盒模型

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

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

CSS3中有個(gè)box-sizing屬性可以控制盒子的計(jì)算方式，

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

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

參考《盒模型》

1.5、請(qǐng)你談?wù)凜ookie的弊端

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

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

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

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

1.6、瀏覽器本地存儲(chǔ)

在HTML5中提供了sessionStorage和localStorage.

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀，是會(huì)話級(jí)別的存儲(chǔ)。

localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。

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

a. Cookie的大小是受限的

b. 每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬

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

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

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

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

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

a. 一個(gè)程序至少有一個(gè)進(jìn)程，一個(gè)進(jìn)程至少有一個(gè)線程

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

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

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

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

1.10、請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法

a. 盡量減少頁(yè)面中重復(fù)的HTTP請(qǐng)求數(shù)量

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

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

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript、CSS代碼

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

參考《減低頁(yè)面加載時(shí)間的方法》

1.11、你都使用哪些工具來(lái)測(cè)試代碼的性能?

JSPerf, Dromaeo

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

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

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

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

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

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

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

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

參考《Trident(排版引擎)》

1.15、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)?

漸進(jìn)增強(qiáng) progressive enhancement：

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

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

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

區(qū)別：

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

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

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

參考《優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)的區(qū)別》

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

a. html5 websoket

b. WebSocket 通過(guò) Flash

c. XHR長(zhǎng)時(shí)間連接

d. XHR Multipart Streaming

e. 不可見(jiàn)的Iframe

f.