前端面試題目

2024年前端面試題目

一、理論學(xué)問

1.1、前端MV框架的意義

早期前端都是比較簡潔，基本以頁面為工作單元，內(nèi)容以掃瞄型為主，也間或有簡潔的表單操作，基本不太需要框架。

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

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

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

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

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

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

1.2、請簡述盒模型

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

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

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

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

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

參考《盒模型》

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

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

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

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

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

1.4、掃瞄器本地存儲

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

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

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

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

a.Cookie的大小是受限的

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

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

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

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

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

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

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

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

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

利用BFC可以閉合浮動，防止與浮動元素重疊。

參考《LearningBFC》

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

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

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

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

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

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

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

JSPerf,Dromaeo

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

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

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

a.IE的排版引擎是Trident（又稱為MSHTML）

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

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

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

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

參考《Trident（排版引擎）》

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

漸進(jìn)增加progressiveenhancement：

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

優(yōu)雅降級gracefuldegradation：

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

區(qū)分：

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

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

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

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

1.13、WEB應(yīng)