歷年前端大廠面試必備

歷年前端大廠面試必備(一)

一、HTML/CSS篇

1、如何刷新瀏覽器的應(yīng)用緩存？

【僅供參考】

應(yīng)用緩存通過變更，”標(biāo)簽后的版本號來刷新，如下所示：

CACHEMANIFEST

#version2.0

/icketang.css

/icketang.js

/icketang.png

NETWORK：

login,php

2、HTML5如何實現(xiàn)跨域？

【僅供參考】

在服務(wù)器端設(shè)置允許在其他域名下訪問，例如允許所有域名訪問以下內(nèi)容。

response.setHeader(z，Access-Control-Allow-Originzz,〃*〃)；

response.setHeader(zzAccess-Control-Allow-Methodsz/,“POST")；

response.setHeader(，zAccess-Control-Allow-Headers，z,z，x-requested-with,content-

type")；

3、與HTML4比較，HTML5廢棄了哪些元素？

【僅供參考】

廢棄的元素包括frame>frameset、noframe>applet、big>center和basefonto

4、如果把HTML5看成一個開放平臺，它的構(gòu)建模塊有哪些？

【僅供參考】

如果把HTML5看成一個開放平臺，它的構(gòu)建模塊至少包括以下幾個，如<navXheader><section>

<footer>0

Wnav>標(biāo)簽用來將具有導(dǎo)航性質(zhì)的鏈接劃分在一起，使代碼結(jié)構(gòu)在語義化方面更加準(zhǔn)確

〈header》標(biāo)簽用來定義文檔的頁眉。

〈section〉標(biāo)簽用來描述文檔的結(jié)構(gòu)。

(footer》標(biāo)簽用來定義頁腳。在典型情況下，該元素會包含文檔作者的姓名、文檔的創(chuàng)作日期

和聯(lián)系信息

5、請你說一下WebWorker和WebSocket的作用。

【僅供參考】

第1/26頁

WebWorker的作用如下：

(1)通過worker=newWorker(url)加載一個JavaScript文件，創(chuàng)建一個Worker,同時返

回一個Worker實例

(2)用worker.postMessage(data)向Worker發(fā)送數(shù)據(jù)

(3)綁定worker,onmessage接收Worker發(fā)送過來的數(shù)據(jù)

(4)可以使用worker,terminate()終止一個Worker的執(zhí)行。

WebSocket的作用如下。

它是Web應(yīng)用程序的傳輸協(xié)議，提供了雙向的、按序到達的數(shù)據(jù)流。它是HTML5新增的協(xié)議，

WebSocket的連接是持久的，它在客戶端和服務(wù)器之間保持雙工連接，服務(wù)器的更新可以及時推

送到客戶端，而不需要客戶端以一定的時間間隔去輪詢。

6、本地存儲的數(shù)據(jù)有生命周期嗎？

【僅供參考】

本地存儲的數(shù)據(jù)沒有生命周期，它將一直存儲數(shù)據(jù)，直到用戶從瀏覽器清除或者使用

JavaScript代碼移除。

7、應(yīng)用緩存中的回退是什么？

【僅供參考】

應(yīng)用緩存中的回退會幫助你指定在服務(wù)器不可訪問時，顯示某文件。例如在下面的manifest文

件中，如果用戶輸入了“/home”，同時服務(wù)器不可到達，“404htm”文件應(yīng)送達。

FALLBACK：

/home//404.html

8、HTML5新增了哪些功能AP?

【僅供參考】

新增的功能API包括MediaAPI、TextTrackAPI、ApplicationCacheAPI、User

Interaction、DataTransferAPI、CommandAPI、ConstraintValidationAPI、History

API

9、如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域

【僅供參考】

1map+area或者svg

2、border-radius

3、純js實現(xiàn)，一個點不在圓上的算法

10、簡述一下你對HTML語義化的理解？

【僅供參考】

用正確的標(biāo)簽做正確的事情。

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析；即使在沒有樣

式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；

第2/26頁

搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

11、如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信？

【僅供參考】

在標(biāo)簽頁之間，調(diào)用localstorge.cookies等數(shù)據(jù)存儲，可以實現(xiàn)標(biāo)簽頁之間的通信

12、什么是SVG?

【僅供參考】

SVG即可縮放失量圖形(ScalableVectorGraphics)0它是基于文本的圖形語言，使用文

本、線條、點等來繪制圖像，這使得它輕便、顯示迅速。

13、子元素如何垂直水平居中？你會用哪幾種方式？不使用margin和padding的情況下

【僅供參考】

方法一：使用flex,無論子元素是行級元素還是塊級元素，都能搞定

.parent{

display:flex;

justify-content:center;//水平居中

align-items:center;//垂直居中

)

方法二：如果子元素是行級元素，text-align和line-height就可以解決

.parent{

height:200px;

width:200px;

text-align:center;

line-height:200px;//Sameasheight

)

如果子元素是塊級元素，使用table-cell+vertical-align也可以解決

.parent{

display:table-cell;

vertical-align:middle;

)

.child{

margin:0auto;

)

方法三：transform可以解決

第3/26頁

.parent{

position:relative;

)

.child{

position:absolute;

top:50%;

left:50%;11從相對父元素寬高50%的地方開始繪制子元素

transform:translate(-50%,-50%);//把繪制好的子元素，往上和左邊，平移子元素50%

的寬高

)

14、無樣式內(nèi)容閃爍(FOUC)FlashofUnstyleContent**

【僅供參考】

@import導(dǎo)入CSS文件會等到文檔加載完后再加載CSS樣式表。因此，在頁面DOM加載完成到CSS導(dǎo)

入完成之間會有一段時間頁面上的內(nèi)容是沒有樣式的。

解決方法：使用link標(biāo)簽加載CSS樣式文件。因為link是順序加載的，這樣頁面會等到CSS下載

完之后再下載HTML文件，這樣先布局好，就不會出現(xiàn)F0UC問題。

15、vertical-align什么時候生效

【僅供參考】

父元素(inline-block\block)必須含有l(wèi)ine-height(inline元素有無皆可),子元素中的

(inline-block/inline元素)vertical-align才能起作用

當(dāng)父元素沒有設(shè)置line-height時，只對行內(nèi)元素的兄弟元素對齊有用，無法子元素居中對齊父

元素

16、我們會在寫css的時候做一些標(biāo)簽選擇器的初始化樣式？為什么？比如：

【僅供參考】

body,ul,ol,li,p,hl,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0

;border:。；}

body{background:#fff;color:#333;font-size:12px;margin-top:5px;font-

family:"SimSun","宋體","ArialNarrow”;}

ul,ol{list-style-type:none;}

select,input,img,select{vertical-align:middle;}

a{text-decoration:none;}

a:link{color:#009;}

a:visited{color:#800080;}

a:hover,a:active,a:focus{color:4c00;text-decoration:underline;}

第4/26頁

為了保證默認的標(biāo)簽樣式在不同瀏覽器能有一致的效果

17、如何讓文字換行

【僅供參考】

word-wrap,word-break,white-space都可以做到

word-wrap:normal;遇到空格才換行

word-break：break-all；把所有字符(包括空格)當(dāng)一行，遇到邊界換行

word-break：break-word；先按空格換行，再拆分單詞和word-wrap：break-word一樣

white-space：normal；正常遇到空白換行

white-space：no-wrap；空白都不換行，一行顯示所有

word-wrap和word-break在flex布局下的效果，word-wrap不能換行，word-break可以。

但是如果二者都有width或者min-widt邸艮制，效果一樣。

〈divstyle二〃border:lpxsolidred;width:200px;height:200px;display:flex;〃>

〈divstyle="flex:1;word-wrap:break-

word;z/>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

〈divstyle="min-width:lOOpx;border:lpxsolidgreen，z>sss</div>

</div>

〈divstyle二〃border:lpxsolidred;width:200px;height:200px;display:flex;〃>

〈divstyle二〃flex:1;word-break:break-

word;，z>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</div>

〈divstyle="min-width:lOOpx;border:lpxsolidgreenzz>sss</div>

</div>

18、移動端lpx邊框怎么設(shè)置

【僅供參考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

}

/*方法2*/

,border(

border-image:url(border.png)

)

/*方法3*/

第5/26頁

.border{

box-shadow:000lpx#000;

)

19、CSSSprite(雪碧圖，精靈圖)是什么，談?wù)勥@個技術(shù)的優(yōu)缺點？

【僅供參考】

就是把很多圖標(biāo)合并到一張圖上，然后根據(jù)圖片的位置(background-position)加上顯示的寬

高來控制具體用哪個圖標(biāo)，這樣可以減少網(wǎng)絡(luò)請求，但是制作和使用會顯得復(fù)雜一些。

20、calc,support,media各自的含義及用法？

【僅供參考】

?support主要是用于檢測瀏覽器是否支持CSS的某個屬性，其實就是條件判斷，如果支持某個

屬性，你可以寫一套樣式，如果不支持某個屬性，你也可以提供另外一套樣式作為替補。

calc()函數(shù)用于動態(tài)計算長度值。calc()函數(shù)支持“+”，，“*”，“/”運算；

?media查詢，你可以針對不同的媒體類型定義不同的樣式。

二、JS/ES6/TS篇

1、請說一下你常用的字符串方法(至少七個)

【僅供參考】

trimO：去首尾空格

split(sep,limit)：將字符串分割為字符數(shù)組，limit為從頭開始執(zhí)行分割的最大數(shù)量

indexOf(str):返回str在父串中第一次出現(xiàn)的位置，若沒有則返回T

lastlndexOf(str):返回str在父串中最后一次出現(xiàn)的位置，若沒有則返回T

substr(start,length)：從字符索引start的位置開始，返回長度為length的子串

substring(from,to)：返回字符索引在from和to(不含)之間的子串

slice(start,end)：返回字符索引在start和end(不含)之間的子串

toLowerCase()：將字符串轉(zhuǎn)換為小寫

toUpperCaseO：將字符串轉(zhuǎn)換為大寫

replace(strl,str2):strl也可以為正則表達式，用str2替換strl

concat(strl,str2,...):連接多個字符串,返回連接后的字符串的副本

match(regex):搜索字符串，并返回正則表達式的所有匹配

charAt(index):返回指定索引處的字符串

charCodeAt(index):返回指定索引處的字符的Unicode的值

fromCharCode():將Unicode值轉(zhuǎn)換成實際的字符串

search(regex):基于正則表達式搜索字符串，并返回第一個匹配的位置

valueOfO：返回原始字符串值

2、for循環(huán)與forEach循環(huán)的區(qū)別？

【僅供參考】

第6/26頁

for循環(huán)中可以使用break、continue不用使用return因為它有循環(huán)體，且不是函數(shù)；

forEach循環(huán)不能使用break、continue,可以return,因為它執(zhí)行的是函數(shù)；

3、怎么降維數(shù)組[[1,2],[3,4]]->[1,2,3,4]

【僅供參考】

使用遞歸循環(huán)，把所有元素放到一個新數(shù)組

Array,prototype,concat.apply(口,[[1,2],[3,41]);

4、如何使用JS刪除cookie

【僅供參考】

如果要刪除cookie以便后續(xù)嘗試讀取cookie,則只需將過期日期設(shè)置為過去的時間。

咱們應(yīng)該定義cookie路徑以確保刪除正確的cookie。

如果未指定路徑，某些瀏覽器將不允許咱們刪除cookie

5、圖片img標(biāo)簽title與alt屬性的區(qū)別

【僅供參考】

title屬性：光標(biāo)移入要顯示圖片文字

alt屬性：當(dāng)圖片加載失敗時要顯示的文字

6、var、let、const區(qū)別？

【僅供參考】

var存在變量提升。

let只能在塊級作用域內(nèi)訪問。

const用來定義常量，必須初始化，不能修改(對象特殊)

7、基本數(shù)據(jù)類型和引用數(shù)據(jù)類型有什么區(qū)別？

【僅供參考】

(1)變量直接賦值時：

基本數(shù)據(jù)類型賦值的是數(shù)據(jù)的副本，原數(shù)據(jù)的更改不會影響傳入后的數(shù)據(jù)。

引用數(shù)據(jù)類型賦值的是數(shù)據(jù)的引用地址，原數(shù)據(jù)的更改會影響傳入后的數(shù)據(jù)。

(2)兩者在內(nèi)存中的存儲位置：

基本數(shù)據(jù)類型存儲在棧中。

引用數(shù)據(jù)類型在棧中存儲了指針，該指針指向的數(shù)據(jù)實體存儲在堆中。

8^toStringO與valueOf()的區(qū)別

【僅供參考】

toStringO方法返回一個表示該對象的字符串。

valueOfO方法返回指定對象的原始值，如果對象沒有原始值，貝UvalueOf將返回對象本身

9、null/undefined的區(qū)別

第7/26頁

【僅供參考】

null值：屬于null類型，代表“空值〃，代表一個空對象指針；使用typeof運算得到

“object”,所以你可以認為它是一個特殊的對象值。

undefined值：屬于undefined類型，當(dāng)一個聲明的變量未初始化賦值時，得到的就是

undefinedo使用typeof運算得到"undefined",

10、事件綁定和普通事件有什么區(qū)別？

【僅供參考】

普通事件會覆蓋掉，只執(zhí)行后者方法

dom.onelick=function(){}

事件綁定不會覆蓋掉，會依次執(zhí)行

addEventListener('click),function(){},true)

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

【僅供參考】

壓縮css、js文件

合并js、css文件，減少http請求(精靈圖)

外部js、css文件放在最底下

減少dom操作，盡可能用變量替代不必要的dom操作

12、說一下innerHTML與innerText的作用與區(qū)別？

【僅供參考】

作用：都可以獲取或者設(shè)置元素的內(nèi)容

區(qū)別：innerHTML可以解析內(nèi)容中的html標(biāo)簽

innerText不能解析內(nèi)容中的html標(biāo)簽

13、如何在TypeScript中實現(xiàn)繼承

【僅供參考】

繼承是一種從另一個類獲取一個類的屬性和行為的機制。繼承成員的類稱為基類，繼承這些成

員的類稱為派生類。

classShape{

Area:number

constructor(area:number){

this.Area=area

)

)

classCircleextendsShape{

display():void{

console,log(“圓的面積：“+this.Area)

第8/26頁

varobj=newCircle(320);

obj.display()

14、TypeScript中？.，？？，?。海琠,**等符號的含義？

【僅供參考】

?.可選鏈

??類似與短路或，？?避免了一些意外情況，0,NaN以及〃"，false被視為false值。只有

undefind,null被視為false值。

!.在變量名后添加！，可以斷言排除undefined和null類型

_,聲明該函數(shù)將被傳遞一個參數(shù)，但您并不關(guān)心它

!：待會分配這個變量，ts不要擔(dān)心

**求累

15、TypeScript支持哪些面向?qū)ο蟮男g(shù)語

【僅供參考】

1.模塊

2.類

3.接口

4.繼承

5.數(shù)據(jù)類型

6.成員函數(shù)

16、TS的接口是什么意思？

【僅供參考】

接口是在我們的應(yīng)用程序中充當(dāng)契約的結(jié)構(gòu)，它定義了要遵循的類的語法，這意味著實現(xiàn)接口的

類必須實現(xiàn)它的所有成員.它不能被實例化，但是可以被實現(xiàn)它的類對象引用。

interfaceinterface_name{

//字段聲明

//方法聲明

17、枚舉和常量枚舉的區(qū)別？

【僅供參考】

枚舉會被編譯時會編譯成一個對象，可以被當(dāng)作對象使用

const枚舉會在typescript編譯期間被刪除，const枚舉成員在使用的地方會被內(nèi)聯(lián)進來,

避免額外的性能開銷

18、下面Set結(jié)構(gòu)，打印出的size值是多少

【僅供參考】

lets=newSet();

第9/26頁

s.add([l]);s.add([l]);

console.log(s.size);

答案：2

兩個數(shù)組[1]并不是同一個值，它們分別定義的數(shù)組，在內(nèi)存中分別對應(yīng)著不同的存儲地址，因

此并不是相同的值都能存儲到Set結(jié)構(gòu)中，所以size為2

19、理解async/await以及對Generator的優(yōu)勢

【僅供參考】

async/await的介紹：

asyncawait是用來解決異步的，async函數(shù)是Generator函數(shù)的語法糖

使用關(guān)鍵字async來表示，在函數(shù)內(nèi)部使用await來表示異步

async函數(shù)返回一個Promise對象，可以使用then方法添加回調(diào)函數(shù)

當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，

再接著執(zhí)行函數(shù)體內(nèi)后面的語句

async較Generator的優(yōu)勢：

(1)內(nèi)置執(zhí)行器。Generator函數(shù)的執(zhí)行必須依靠執(zhí)行器，而Aysnc函數(shù)自帶執(zhí)行器，

調(diào)用方式跟普通函數(shù)的調(diào)用一樣

(2)更好的語義。async和await相較于*和yield更加語義化

(3)返回值是Promise。async函數(shù)返回的是Promise對象，

比Generator函數(shù)返回的Iterator對象方便，可以直接使用then0方法進行調(diào)用

20、Promise構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么then方法呢？

【僅供參考】

創(chuàng)建Promise時，傳入的回調(diào)函數(shù)的執(zhí)行，是同步的

promise對象上then函數(shù)中的回調(diào)執(zhí)行，是異步的

三、Vue/ReactjB

1、什么是propdrilling,如何避免？

【僅供參考】

在構(gòu)建React應(yīng)用程序時，在多層嵌套組件來使用另一個嵌套組件提供的數(shù)據(jù)。最簡單的方法

是將一個prop從每個組件一層層的傳遞下去，從源組件傳遞到深層嵌套組件，這叫做prop

drillingo

propdrilling的主要缺點是原本不需要數(shù)據(jù)的組件變得不必要地復(fù)雜，并且難以維護。

為了避免propdrilling,一種常用的方法是使用ReactContext0通過定義提供數(shù)據(jù)的

Provider組件，并允許嵌套的組件通過Consumer組件或useContextHook使用上下文數(shù)據(jù)

2、解釋Reducer的作用

【僅供參考】

第10/26頁

Reducers是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng)ACTION而改變。Reducers通過接受

先前的狀態(tài)和action來工作，然后它返回一個新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪

種更新，然后返回新的值。如果不需要完成任務(wù)，它會返回原來的狀態(tài)

3、你對“單一事實來源”有什么理解？

【僅供參考】

Redux使用“Store”將程序的整個狀態(tài)存儲在同一個地方。因此所有組件的狀態(tài)都存儲在

Store中，并且它們從Store本身接收更新。單一狀態(tài)樹可以更容易地跟蹤隨時間的變化，并

調(diào)試或檢查程序

4、這三個點(...)在React干嘛用的？

【僅供參考】

擴展運算符或者叫展開操作符，對于創(chuàng)建具有現(xiàn)有對象的大多數(shù)屬性的新對象非常方便，在更

新state時經(jīng)常這么用

5、什么是虛擬D0M?

【僅供參考】

虛擬DOM是真實DOM在內(nèi)存中的表示，ul的表示形式保存在內(nèi)存中，并且與實際的D0M同步，這是

一個發(fā)生在渲染函數(shù)被調(diào)用和元素在屏幕上顯示的步驟，整個過程被稱為調(diào)和

6、怎樣解釋React中render0的目的

【僅供參考】

每個React組件強制要求必須有一個render()o它返回一個React元素，是原生DOM組件的

表示。如果需要渲染多個HTML元素，則必須將它們組合在一個封閉標(biāo)記內(nèi)，例如〈form〉、

〈group＞、＜p＞等。此函數(shù)必須保持純凈，即必須每次調(diào)用時都返回相同的結(jié)果

7、為什么不直接更新state?

【僅供參考】

如果試圖直接更新state,就不會重新渲染組件

需要使用setState()方法更新state,它對state對象進行更新，當(dāng)state改變時，組件通過重

新渲染來響應(yīng)

8、Redux有哪些優(yōu)點？

【僅供參考】

Redux的優(yōu)點如下：

結(jié)果的可預(yù)測性-由于總是存在一個真實來源，即store,因此不存在如何將當(dāng)前狀態(tài)與動

作和應(yīng)用的其他部分同步的問題。

可維護性-代碼變得更容易維護，具有可預(yù)測的結(jié)果和嚴格的結(jié)構(gòu)。

服務(wù)器端渲染-你只需將服務(wù)器上創(chuàng)建的store傳到客戶端即可。這對初始渲染非常有用，

并且可以優(yōu)化應(yīng)用性能，從而提供更好的用戶體驗。

第11/26頁

開發(fā)人員工具-從操作到狀態(tài)更改，開發(fā)人員可以實時跟蹤應(yīng)用中發(fā)生的所有事情。

社區(qū)和生態(tài)系統(tǒng)-Redux背后有一個巨大的社區(qū)，這使得它更加迷人。一個由才華橫溢的人組

成的大型社區(qū)為庫的改進做出了貢獻，并開發(fā)了各種應(yīng)用。

易于測試-Redux的代碼主要是小巧、純粹和獨立的功能。這使代碼可測試且獨立。

組織-Redux準(zhǔn)確地說明了代碼的組織方式，這使得代碼在團隊使用時更加一致和簡單

9、依賴其它數(shù)據(jù)計算生成一個新的數(shù)據(jù)屬性；

【僅供參考】

2、當(dāng)里邊依賴的其它數(shù)據(jù)發(fā)生改變，就會重新計算，

10、Vuex用過嗎？簡單介紹一下？

【僅供參考】

狀態(tài)管理模式+庫

相當(dāng)于共享倉庫，方便任何組件直接獲取和修改。

state-數(shù)據(jù)【存項目共享狀態(tài)，是響應(yīng)式的，store的數(shù)據(jù)改變，所有依賴此狀態(tài)的組件會更

新】

$store.state,count

mutations-方法【同步函數(shù)，只建議在這個地方修改數(shù)據(jù)】

inc(state,參數(shù)唯一){}

$store.commitCinc',2)

actions-【異步操作】【提交的是mutations,不直接修改狀態(tài)】

increment(context,num){context,commit()}

this.$store.dispatch('',arg)

getters-包裝數(shù)據(jù)【store的計算屬性，可緩存】

show:function(state){}

this.$store.getters.show

傳參,返回函數(shù)：show(state){returnfunction(參數(shù)){return...}}【不會緩存數(shù)據(jù)】

11、$on()函數(shù)有什么用?

【僅供參考】

監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由vm.$emit觸發(fā)

12、組件間通訊方式

【僅供參考】

props/$emit

(1)父組件向子組件傳值(props將數(shù)據(jù)自上而下傳遞)

(2)子組件向父組件傳遞數(shù)據(jù)($emit和v-on來向上傳遞信息)

eventBus事件總線($emit/$on)

通過EventBus進行信息的發(fā)布與訂閱

第12/26頁

vuex:

是全局數(shù)據(jù)管理庫，可以通過vuex管理全局的數(shù)據(jù)流

ref/$refs

ref：這個屬性用在子組件上，它的用用就指向了子組件的實例，可以通過實例來訪問組件的數(shù)

據(jù)和方法

依賴注入(provide/inject)

provide和inject是vue提供的兩個鉤子，和data、methods是同級的。并且provide的書寫形

式和data一樣。

provide鉤子用來發(fā)送數(shù)據(jù)或方法。

inject鉤子用來接收數(shù)據(jù)或方法

$parent/$children

使用$parent可以讓組件訪問父組件的實例(訪問的是上一級父組件的屬性和方法)。

使用$children可以讓組件訪問子組件的實例，但是，$children并不能保證順序，并且訪

問的數(shù)據(jù)也不是響應(yīng)式的。

$attrs/$listeners

實現(xiàn)組件之間的跨代通信。

13、Vue中的key有什么作用？

【僅供參考】

key是為Vue中vnode的唯一標(biāo)記，通過這個key,我們的diff操作可以更準(zhǔn)確、更快

速。

Vue的diff過程可以概括為：oldCh和newCh各有兩個頭尾的變量oldStartlndex.

oldEndlndex和newStartlndex、newEndIndex,它們會新節(jié)點和舊節(jié)點會進行兩兩對比，即一

共有4種比較方式:newStartlndex和oldStartlndex、newEndlndex和oldEndlndex、

newStartIndex和oldEndlndex、newEndlndex和oldStartlndex,如果以上4種比較都沒

匹配，如果設(shè)置了key,就會用key再進行比較，在比較的過程中，遍歷會往中間靠，一旦

Startldx>Endldx表明oldCh和newCh至少有一個已經(jīng)遍歷完了，就會結(jié)束比較。

所以Vue中key的作用是：key是為Vue中vnode的唯一標(biāo)記，通過這個key,我們的

diff操作可以更準(zhǔn)確、更快速！

更準(zhǔn)確：因為帶key就不是就地復(fù)用了，在sameNode函數(shù)a.key===b.key對比中可以避

免就地復(fù)用的情況。所以會更加準(zhǔn)確。

更快速：利用key的唯一性生成map對象來獲取對應(yīng)節(jié)點，比遍歷方式更快，源碼如下：

functioncreateKeyToOldldx(children,beginldx,endldx){

leti,key

constmap={}

for(i=beginldx;i<=endldx;++i){

第13/26頁

key=children[i].key

if（isDef（key））map[key]=i

）

returnmap

}

14、Vuex如何區(qū)分state是外部直接修改，還是通過mutation方法修改的？

【僅供參考】

在vuex底層會有一個committing變量，初始值false；當(dāng)通過mutation方法修改數(shù)據(jù)時

把committing變量變成true；如果是直接改變的變量則不改變committing變量

15、描述一下vue在生命周期的beforeMount階段時，頁面是怎么樣的

【僅供參考】

beforeMount執(zhí)行時,數(shù)據(jù)和虛擬D0M樹已經(jīng)都加載完成，但是這時數(shù)據(jù)沒有渲染

16、Vue原理總結(jié)

【僅供參考】

【模板編譯】將template模板，經(jīng)過編譯系統(tǒng)后生成VNode,（模板字符串一AST-Render函

數(shù)）

【渲染】然后再通過渲染系統(tǒng)來將VNode生成真實DOM（document.createElement&&Mount掛載

到真實DOM節(jié)點上）

【響應(yīng)式】通過響應(yīng)式系統(tǒng)對數(shù)據(jù)進行監(jiān)聽，當(dāng)數(shù)據(jù)發(fā)生改變時，觸發(fā)依賴項（組件）

[Diff&Patch]組件內(nèi)收到通知后，會通過diff算法對比VNode的變化，盡可能復(fù)用代碼，找

出最小差異，保證性能消耗最小。

【渲染】拿到需要新增/刪除/修改的VNode后，逐一去操作真實D0M進行修改（通過選擇器選擇

到對應(yīng)真實D0M節(jié)點進行修改）

17、什么是Proxy?

【僅供參考】

Proxy：代理，是ES6新增的功能，可以理解為代理器（即由它代理某些操作）。

Proxy：對象用于定義或修改某些操作的自定義行為，可以在外界對目標(biāo)對象進行訪問前，對

外界的訪問進行改寫。

Proxy是ES6中新增的一個特性JavaScript中用來表示由它來‘代理'某些操作

Proxy是ES6中新增的一個特性，翻譯過來意思是"代理"，用在這里表示由它來“代理”某些

操作。Proxy讓我們能夠以簡潔易懂的方式控制外部對對象的訪問。其功能非常類似于設(shè)計模

式中的代理模式。

Proxy可以理解成，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過

這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。

使用Proxy的核心優(yōu)點是可以交由它來處理一些非核心邏輯（如：讀取或設(shè)置對象的某些屬性

前記錄日志；設(shè)置對象的某些屬性值前，需要驗證；某些屬性的訪問控制等）。從而可以讓對

象只需關(guān)注于核心邏輯，達到關(guān)注點分離，降低對象復(fù)雜度等目的。

第14/26頁

18、說一下v-model的作用

【僅供參考】

v-model：

雙向綁定，用于表單元素綁定數(shù)據(jù)，數(shù)據(jù)的改變會響應(yīng)到頁面；

頁面表單元素value的改變，同樣也會響應(yīng)到數(shù)據(jù)

19、說一下vm.$once()的作用

【僅供參考】

監(jiān)聽一個自定義事件，但是只觸發(fā)一次。一旦觸發(fā)之后，監(jiān)聽器就會被移除。

20、Vue是如何實現(xiàn)數(shù)據(jù)雙向綁定的？

【僅供參考】

如果被問到Vue怎么實現(xiàn)數(shù)據(jù)雙向綁定，大家肯定都會回答通過Object,definePropertyO

對數(shù)據(jù)進行劫持，但是Object,definePropertyO只能對屬性進行數(shù)據(jù)劫持，不能對整個對象

進行劫持。

同理無法對數(shù)組進行劫持，但是我們在使用Vue框架中都知道，Vue能檢測到對象和數(shù)組(部

分方法的操作)的變化，那它是怎么實現(xiàn)的呢？我們查看相關(guān)代碼如下：

/**

*ObservealistofArrayitems.

*/

observeArray(items:Array<any>){

for(leti=0,1=items,length;i<1;i++){

observe(items[i])//observe功能為監(jiān)測數(shù)據(jù)的變化

)

/**

*對屬性進行遞歸遍歷

*/

letchildOb=!shallow&&observe(val)//observe功能為監(jiān)測數(shù)據(jù)的變化

通過以上Vue源碼部分查看，我們就能知道Vue框架是通過遍歷數(shù)組和遞歸遍歷對象，從而

達到利用Object,definePropertyO也能對對象和數(shù)組(部分方法的操作)進行監(jiān)聽。

四、Webpack/RollupM

1、如何解決循環(huán)依賴問題

【僅供參考】

第15/26頁

Webpack中將require替換為webpack_require,會根據(jù)moduleld到installedModules找

是否加載過，加載過則直接返回之前的export,不會重復(fù)加載。

2、有哪些常見的Plugin?他們是解決什么問題的？

【僅供參考】

html-webpack-plugin：可以復(fù)制一個有結(jié)構(gòu)的html文件，并自動引入打包輸出的所有資源

(JS/CSS)

c1ean-webpack-plugin：重新打包自動清空dist目錄

mini-css-extract-plugin：提取js中的css成單獨文件

optimize-css-assets-webpack-plugin：壓縮css

uglifyjs-webpack-plugin：壓縮js

commons-chunk-p1ugin：提取公共代碼

define-plugin：定義環(huán)境變量

3、有哪些常見的Loader?他們是解決什么問題的？

【僅供參考】

file-loader：把文件輸出到一個文件夾中，在代碼中通過相對URL去引用輸出的文件

url-loader：和file-loader類似，但是能在文件很小的情況下以base64的方式把文件內(nèi)容

注入到代碼中去

source-map-loader：加載額外的SourceMap文件，以方便斷點調(diào)試

image-loader：加載并且壓縮圖片文件

babel-loader：把ES6轉(zhuǎn)換成ES5

css-loader：加載CSS,支持模塊化、壓縮、文件導(dǎo)入等特性

style-loader：把CSS代碼注入到JavaScript中，通過D0M操作去加載CSS。

eslint-loader：通過ESLint檢查JavaScript代碼

4、webpack3和webpack4的區(qū)別

【僅供參考】

mode/-mode參數(shù)，新增了mode/-mode參數(shù)來表示是開發(fā)還是生產(chǎn)

(development/production)production側(cè)重于打包后的文件大小，development側(cè)重于

goujiansud移除loaders,必須使用rules(在3版本的時候loaders和rules是共存的但是到4的

時候只允許使用rules)移除了CommonsChunkPlugin(提取公共代碼)，用

optimization.splitChunks和optimization.runtimeChunk來代替支持es6的方式導(dǎo)入JSON文

件，并且可以過濾無用的代碼

5、webpack如何配置多入口文件？

【僅供參考】

entry:{

home:resolve(_dirname,"src/home/index.js"),

about:resolve(_dirname,"src/about/index.js")

第16/26頁

用于描述入口的對象。你可以使用如下屬性：

dependOn:當(dāng)前入口所依賴的入口。它們必須在該入口被加載前被加載。

filename:指定要輸出的文件名稱。

import:啟動時需加載的模塊。

library:指定library選項，為當(dāng)前entry構(gòu)建一個library。

runtime:運行時chunk的名字。如果設(shè)置了，就會創(chuàng)建一個新的運行時chunko在webpack

5.43.0之后可將其設(shè)為false以避免一個新的運行時chunko

publicPath:當(dāng)該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共URL地址

6、webpack的核心概念

【僅供參考】

Entry：入口，Webpack執(zhí)行構(gòu)建的第一步將從Entry開始，可抽象成輸入。告訴webpack要使

用哪個模塊作為構(gòu)建項目的起點，默認為./src/index.js

output：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認為./dist

Module：模塊，在Webpack里一切皆模塊，一個模塊對應(yīng)著一個文件。Webpack會從配置的

Entry開始遞歸找出所有依賴的模塊。

Chunk：代碼塊，一個Chunk由多個模塊組合而成，用于代碼合并與分割。

Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。

Plugin：擴展插件，在Webpack構(gòu)建流程中的特定時機會廣播出對應(yīng)的事件，插件可以監(jiān)聽這

些事件的發(fā)生，在特定時機做對應(yīng)的事情。

7、npm打包時需要注意哪些？如何利用webpack來更好的構(gòu)建？

【僅供參考】

Npm是目前最大的JavaScript模塊倉庫，里面有來自全世界開發(fā)者上傳的可復(fù)用模塊。

你可能只是JS模塊的使用者，但是有些情況你也會去選擇上傳自己開發(fā)的模塊。

關(guān)于NPM模塊上傳的方法可以去官網(wǎng)上進行學(xué)習(xí)，這里只講解如何利用webpack來構(gòu)建。

NPM模塊需要注意以下問題：

要支持CommonJS模塊化規(guī)范，所以要求打包后的最后結(jié)果也遵守該規(guī)則。

Npm模塊使用者的環(huán)境是不確定的，很有可能并不支持ES6,所以打包的最后結(jié)果應(yīng)該是采用ES5

編寫的。并且如果ES5是經(jīng)過轉(zhuǎn)換的，請最好連同SourceMap一同上傳。

Npm包大小應(yīng)該是盡量?。ㄓ行﹤}庫會限制包大?。?/p>

發(fā)布的模塊不能將依賴的模塊也一同打包，應(yīng)該讓用戶選擇性的去自行安裝。這樣可以避免模

塊應(yīng)用者再次打包時出現(xiàn)底層模塊被重復(fù)打包的情況。

UI組件類的模塊應(yīng)該將依賴的其它資源文件，例如.css文件也需要包含在發(fā)布的模塊里。

8、Loader機制的作用是什么？

【僅供參考】

webpack默認只能打包js文件，配置里的module,rules數(shù)組配置了一組規(guī)則，告訴Webpack在

遇到哪些文件時使用哪些Loader去加載和轉(zhuǎn)換打包成js。

注意：

use屬性的值需要是一個由Loader名稱組成的數(shù)組，Loader的執(zhí)行順序是由后到前的；

第17/26頁

每一個Loader都可以通過URLquerystring的方式傳入?yún)?shù)，例如cssToader?minimize中

的minimize告訴css-loader要開啟CSS壓縮。

9、什么是Tree-sharking?

【僅供參考】

指打包中去除那些引入了但在代碼中沒用到的死代碼。在wepack中jstreeshaking通過

UglifyJsPlugin來進行，css中通過purify-CSS來進行。

10、理解babel-preset-env

【僅供參考】

babel-preset-es2015:可以將es6的代碼編譯成es5.

babel-preset-es2016:可以將es7的代碼編譯為es6.

babel-preset-es2017:可以將es8的代碼編譯為es7.

babel-preset-latest:支持現(xiàn)有所有ECMAScript版本的新特性

11、plugin的作用

【僅供參考】

plugin是一個類，類中有一個apply()方法，主要用于Plugin的安裝，可以在其中監(jiān)聽一些來自

編譯器發(fā)出的事件，在合適的時機做一些事情。

12、lazyloading(模塊懶加載)

【僅供參考】

借助import。語法異步引入組件，實現(xiàn)文件懶加載：prefetch,preloading

webpack提倡多寫異步代碼，提升代碼利用率，從而提升頁面性能

先加載主業(yè)務(wù)文件，prefetch利用網(wǎng)絡(luò)空閑時間，異步加載組件

import(/*webpackPrefetch:true/'LoginModal');

preload和主業(yè)務(wù)文件一起加載，異步加載組件

import(/webpackPreload:true*/'ChartingLibrary');

13、HMR熱模塊更新

【僅供參考】

借助webpack.HotModuleReplacementPlugin(),devServer開啟hot

場景1：實現(xiàn)只刷新css,不影響js

場景2：js中實現(xiàn)熱更新，只更新指定js模塊

if(module,hot){

module,hot.acceptC./library.jsJ,function0{

//Dosomethingwiththeupdatedlibrarymodule---

})；

第18/26頁

14、Plugin(插件)的作用是什么？

【僅供參考】

Plugin是用來擴展Webpack功能的，通過在構(gòu)建流程里注入鉤子實現(xiàn)，它給Webpack帶來了

很大的靈活性。

Webpack是通過plugins屬性來配置需要使用的插件列表的。plugins屬性是一個數(shù)組，里面的

每一項都是插件的一個實例，在實例化一個組件時可以通過構(gòu)造函數(shù)傳入這個組件支持的配置

屬性。

15、webpack-dev-server和http服務(wù)器的區(qū)別

【僅供參考】

webpack-dev-server使用內(nèi)存來存儲webpack開發(fā)環(huán)境下的打包文件，并且可以使用模塊熱更

新，比傳統(tǒng)的http服務(wù)對開發(fā)更加有效。

16、Webpack的基本功能有哪些？

【僅供參考】

代碼轉(zhuǎn)換:TypeScript編譯成JavaScript、SCSS編譯成CSS等等

文件優(yōu)化：壓縮JavaScript、CSS、html代碼，壓縮合并圖片等

代碼分割：提取多個頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載

模塊合并：在采用模塊化的項目有很多模塊和文件，需要構(gòu)建功能把模塊分類合并成一個文件

自動刷新：監(jiān)聽本地源代碼的變化，自動構(gòu)建，刷新瀏覽器

代碼校驗：在代碼被提交到倉庫前需要檢測代碼是否符合規(guī)范，以及單元測試是否通過

自動發(fā)布：更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。

17、webpack的工作原理？

【僅供參考】

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及

其它的一些瀏覽器不能直接運行的拓展語言(Sass,TypeScript等)，并將其轉(zhuǎn)換和打包為合

適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負起了優(yōu)化項目的責(zé)任。

18、gulp/grunt與webpack的區(qū)別是什么？

【僅供參考】

三者都是前端構(gòu)建工具，grunt和gulp在早期比較流行，現(xiàn)在webpack相對來說比較主流，不過

一些輕量化的任務(wù)還是會用gulp來處理，比如單獨打包CSS文件等。

grunt和gulp是基于任務(wù)和流(TasksStream)的。

類似jQue:ry,找到一個(或一類)文件，對其做一系列鏈?zhǔn)讲僮鳎铝魃系臄?shù)據(jù)，整條鏈?zhǔn)?/p>

操作構(gòu)成了一個任務(wù)，多個任務(wù)就構(gòu)成了整個web的構(gòu)建流程。

webpack是基于入口的。

webpack會自動地遞歸解析入口所需要加載的所有資源文件，然后用不同的Loader來處理不同的

文件，用Plugin來擴展webpack功能。

19、sourceMap

第19/26頁

【僅供參考】

是一個映射關(guān)系，將打包后的文件隱射到源代碼，用于定位報錯位置

配置方式：

例如：devtool：'source-map'

加不同前綴意義：

inline:不生成映射關(guān)系文件，打包進main.js

cheap:L只精確到行，不精確到列，打包速度快2.只管業(yè)務(wù)代碼，不管第三方模塊

module：不僅管業(yè)務(wù)代碼，而且管第三方代碼

eval:執(zhí)行效率最快，性能最好

最佳實踐：

開發(fā)環(huán)境：cheap-module-eval-source-map

線上環(huán)境：cheap-mudole-source-map

20、webpack的熱更新是如何做到的？說明其原理？

【僅供參考】

1、在webpack的watch模式下，文件系統(tǒng)中某一個文件發(fā)生修改，webpack監(jiān)聽到文件變

化，根據(jù)配置文件對模塊重新編譯打包，并將打包后的代碼通過簡單的JavaScript對象保存

在內(nèi)存中。

2、webpack-dev-server和webpack之間的接口交互，而在這一步，主要是dev-server的

中間件webpack-dev-middleware和webpack之間的交互，webpack-dev-middleware調(diào)用

webpack暴露的API對代碼變化進行監(jiān)控，并且告訴webpack,將代碼打包到內(nèi)存中。

3、webpack-dev-server對文件變化的一個監(jiān)控，這一步不同于第一步，并不是監(jiān)控代碼變化

重新打包。當(dāng)我們在配置文件中配置了devServer.watchContentBase為true的時候，Server

會監(jiān)聽這些配置文件夾中靜態(tài)文件的變化，變化后會通知瀏覽器端對應(yīng)用進行l(wèi)ivereloado

注意，這兒是瀏覽器刷新，和HMR是兩個概念

4、webpack-dev-server代碼的工作，該步驟主要是通過sockjs（webpack-dev-server的依

賴）在瀏覽器端和服務(wù)端之間建立一個websocket長連接，將webpack編譯打包的各個階段

的狀態(tài)信息告知瀏覽器端，

同時也包括第三步中Server監(jiān)聽靜態(tài)文件變化的信息。瀏覽器端根據(jù)這些socket消息

進行不同的操作。當(dāng)然服務(wù)端傳遞的最主要信息還是新模塊的hash值，后面的步驟根據(jù)這一

hash值來進行模塊熱替換。

webpack-dev-server/client端并不能夠請求更新的代碼，也不會執(zhí)行熱更模塊操作，而

把這些工作又交回給了webpack,webpack/hot/dev-server的工作就是根據(jù)webpack-dev-

server/client傳給它的信息以及dev-server的配置決定是刷新瀏覽器呢還是進行模塊熱更

新。當(dāng)然如果僅僅是刷新瀏覽器，也就沒有后面那些步驟了。IIotModuleReplacement.runtime

是客戶端HMR的中樞，它接收到上一步傳遞給他的新模塊的hash值，它通過

JsonpMainTemplate.runtime向server端發(fā)送Ajax請求，服務(wù)端返回一個json,該json

包含了所有要更新的模塊的hash值，獲取到更新列表后，該模塊再次通過jsonp請求，獲取

到最新的模塊代碼。

5、決定HMR成功與否的關(guān)鍵步驟，在該步驟中，HotModulePlugin將會對新舊模塊進行對

第20/26頁

比，決定是否更新模塊，在決定更新模塊后，檢查模塊之間的依賴關(guān)系，更新模塊的同時更新

模塊間的依賴引用。最后一步，當(dāng)HMR失敗后，回退到livereload操作，也就是進行瀏覽

器刷新來獲取最新打包代碼。

五、性能/瀏覽器/其他篇

1、哪些方法可以提升網(wǎng)站前端性能？

【僅供參考】

精靈圖合并，減少HTTP請求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態(tài)文件；使用

localstorage緩存和mainfest應(yīng)用緩存。

2、針對HTML,如何優(yōu)化性能？

【僅供參考】

具體方法如下。

(1)對于資源加載，按需加載和異步加載

(2)首次加載的資源不超過1024KB,即越小越好。

(3)壓縮HTML、CSS、JavaScript文件。

(4)減少DOM節(jié)點。

(5)避免空src(空src在部分瀏覽器中會導(dǎo)致無效請求)。

(6)避免30*、40*、50*請求錯誤

(7)添加Favicon,ico,如果沒有設(shè)置圖標(biāo)ico,則默認的圖標(biāo)會導(dǎo)致發(fā)送一個404或者500請

求。

3、性能優(yōu)化六大指標(biāo)

【僅供參考】

六大指標(biāo)基本囊括大部分性能優(yōu)化細節(jié)，可作為九大策略的補充。筆者根據(jù)每條性能優(yōu)化建議

的特征將指標(biāo)劃分為以下六方面。

「加載優(yōu)化」：資源在加載時可做的性能優(yōu)化

「執(zhí)行優(yōu)化」：資源在執(zhí)行時可做的性能優(yōu)化

「渲染優(yōu)化」：資源在渲染時可做的性能優(yōu)化

「樣式優(yōu)化」：樣式在編碼時可做的性能優(yōu)化

「腳本優(yōu)化」：腳本在編碼時可做的性能優(yōu)化

「V8引擎優(yōu)化」：針對V8引擎特征可做的性能優(yōu)化

4、常見的瀏覽器內(nèi)核有哪些？

【僅供參考】

Trident內(nèi)核：IE,MaxThon,TT,TheWorld,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等

Presto內(nèi)核：0pera7及以上。[Opera內(nèi)核原為：Presto,現(xiàn)為：Blink;]

Webkit內(nèi)核：Safari,Chrome等。[Chrome的：Blink(WebKit的分支)]

第21/26頁

5、平時你是如何對代碼進行性能優(yōu)化的？

【僅供參考】

利用性能分析工具監(jiān)測性能，包括靜態(tài)Analyze工具和運行時的Profile工具（在Xcode工具欄

中依次單擊Product-Profile項可以啟動）。

比如測試程序的運行時間，當(dāng)單擊TimeProfiler項時，應(yīng)用程序開始運行，這就能獲取到運

行整個應(yīng)用程序所消耗時間的分布和百分比。為了保證數(shù)據(jù)分析在同一使用場景下的真實性，

一定要使用真機，因為此時模擬器在Mac上運行，而Mac上的CPU往往比iOS設(shè)備要快。

6、針對CSS,如何優(yōu)化性能？

【僅供參考】

具體優(yōu)化方法如下。

（1）正確使用display屬性，display屬性會影響頁面的渲染，因此要注意以下幾方面。

display:inline后不應(yīng)該再使用width、height、margin、padding和float。

display:inline-block后不應(yīng)該再使用float。

display:block后不應(yīng)該再使用vertical-aligno

display:table-*后不應(yīng)該再使用margin或者float。

（2）不濫用floato

（3）不聲明過多的font-size。

（4）當(dāng)值為0時不需要單位。

（5）標(biāo)準(zhǔn)化各種瀏覽器前綴，并注意以下幾方面。

瀏覽器無前綴應(yīng)放在最后。

CSS動畫只用（-webkit-無前綴）兩種即可。

其他前綴包括-webkit-、-moz-、-ms-、無前綴（Opera瀏覽器改用blink內(nèi)核，所以-0-被淘

汰）

（6）避免讓選擇符看起來像是正則表達式。高級選擇器不容易讀懂，執(zhí)行時間也長。

（7）盡量使用id、class選擇器設(shè)置樣式（避免使用style屬性設(shè)置行內(nèi)樣式）

（8）盡量使用CSS3動畫。

（9）減少重繪和回流。

7、請說一下