web前端面試題（匯總）

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

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

a. 域名解析

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3、前端 MV*框架的意義

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

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

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

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

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

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

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

1.4、請簡述盒模型

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)。對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和。(W3C盒子模型)

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

參考《盒模型》

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

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

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

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

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

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

在HTML5中提供了sessionStorage和localStorage.

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

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

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

a. Cookie的大小是受限的

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

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

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

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

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統(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í)行過程中擁有獨(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)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配

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

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

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

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

d. Javascript腳本放在文件末尾

e. 壓縮合并Javascript、CSS代碼

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

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

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標(biāo)準(zhǔn)脫節(jié)(2005年)

c. Trident內(nèi)核的大量 Bug等安全性問題沒有得到及時(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：

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

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

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

區(qū)別：

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

b. 漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(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到客戶端有那些方式?

a. html5 websoket

b. WebSocket 通過 Flash

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

d. XHR Multipart Streaming

e. 不可見的Iframe

f.