前端面試題目

2024年前端面試題目

一、理論學(xué)問(wèn)

1.1、前端MV框架的意義

早期前端都是比較簡(jiǎn)潔，基本以頁(yè)面為工作單元，內(nèi)容以?huà)呙樾蜑橹?，也間或有簡(jiǎn)潔的表單操作，基本不太需要框架。

隨著AJAX的消失，Web2.0的興起，人們可以在頁(yè)面上可以做比較簡(jiǎn)單的事情了，然后前端框架才真正消失了。

假如是頁(yè)面型產(chǎn)品，多數(shù)的確不太需要它，由于頁(yè)面中的JavaScript代碼，處理交互的肯定遠(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框架的重要性，是由于Model部分代碼較少，View的相對(duì)多一些。假如主要在操作View和Controller，那當(dāng)然jQuery這類(lèi)庫(kù)比較好用了。

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

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

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

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

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

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

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

參考《盒模型》

1.3、請(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.4、掃瞄器本地存儲(chǔ)

在HTML5中供應(yīng)了sessionStage和localStage。

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

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

1.5、webstage和cookie的區(qū)分

a.Cookie的大小是受限的

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

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

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

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

f.IE7、IE6中的UserData通過(guò)簡(jiǎn)潔的代碼封裝可以統(tǒng)一到全部的掃瞄器都支持webstage

1.6、對(duì)BFC規(guī)范的理解

BFC全稱(chēng)是BlockFmattingContext，即塊格式化上下文。它是CSS2.1規(guī)范定義的，關(guān)于CSS渲染定位的一個(gè)概念。

BFC是頁(yè)面CSS視覺(jué)渲染的一部分，用于打算塊盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。

BFC的一個(gè)最重要的效果是，讓處于BFC內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響。

利用BFC可以閉合浮動(dòng)，防止與浮動(dòng)元素重疊。

參考《LearningBFC》

1.7、線(xiàn)程與進(jìn)程的區(qū)分

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

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

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

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

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

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

JSPerf,Dromaeo

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

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

1.11、列舉IE與其他掃瞄器不一樣的特性？

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

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

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

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

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

參考《Trident（排版引擎）》

1.12、什么叫優(yōu)雅降級(jí)和漸進(jìn)增加？

漸進(jìn)增加progressiveenhancement：

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

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

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

區(qū)分：

a.優(yōu)雅降級(jí)是從簡(jiǎn)單的現(xiàn)狀開(kāi)頭，并試圖削減用戶(hù)體驗(yàn)的供應(yīng)

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

c.降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增加則意味著朝前看，同時(shí)保證其根基處于平安地帶

參考《優(yōu)雅降級(jí)和漸進(jìn)增加的區(qū)分》

1.13、WEB應(yīng)