2023年經(jīng)典前端面試題

2023年經(jīng)典前端面試題

一、HTML/CSS篇

1、HTML5應(yīng)用緩存和常規(guī)的HTML瀏覽器緩存有什么差別？

【僅供參考】

HTML5應(yīng)用緩存最關(guān)鍵的就是支持離線應(yīng)用，可獲取少數(shù)或者全部網(wǎng)站內(nèi)容，

包括HTML、CSS、圖像和JavaScript腳本并存在本地。該特性提升了網(wǎng)站的性

能，可通過如下方式實(shí)現(xiàn)。

<!doctypehtml>

<htmlmanifest="example.appcache”>

</html>

與傳統(tǒng)的瀏覽器緩存比較，該特性并不強(qiáng)制要求用戶訪問網(wǎng)站。

2、HTML5為什么只需要寫<!doctypehtm>?

【僅供參考】

HTML5不基于SGML,因此不需要對(duì)DTD進(jìn)行引用，但是需要D0CTYPE來規(guī)范瀏

覽器的行為（讓瀏覽器按照它們的方式來運(yùn)行）。而HTM4.01基于SGML,所以

需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的類型。

3、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

【僅供參考】

在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接

時(shí)，更新用戶機(jī)器上的緩存文件。

原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制（不是

存儲(chǔ)技術(shù)），通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像

cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被

離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。

如何使用：

創(chuàng)建一個(gè)和html同名的manifest文件，然后在頁面頭部像下面一樣加入一

個(gè)manifest的屬性。

<htmllang="erTmanifest=//index,manifest”〉

在如下cache,manifest文件的編寫離線存儲(chǔ)的資源。

CACHEMANIFEST

#vO.11

CACHE:

js/app.js

css/style,css

NETWORK:

resourse/logo.png

FALLBACK:

//offline,html

CACHE:表示需要離線存儲(chǔ)的資源列表，由于包含manifest文件的頁面將被自

動(dòng)離線存儲(chǔ)，所以不需要把頁面自身也列出來。

NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會(huì)

被離線存儲(chǔ)，所以在離線情況下無法使用這些資源。不過，如果在CACHE和

NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，也就是說

CACHE的優(yōu)先級(jí)更高。

FALLBACK:表示如果訪問第一個(gè)資源失敗，那么就使用第二個(gè)資源來替換他，

比如上面這個(gè)文件表示的就是如果訪問根目錄下任何一個(gè)資源失敗了，那么就

去訪問offline,html。

（3）在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行離線緩存的操作。

如何更新緩存：

1、更新manifest文件

2^通過javascript操作

3、清除瀏覽器緩存

注意事項(xiàng)：

1、瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每

個(gè)站點(diǎn)5MB）o

2、如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更

新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。

3、引用manifest的html必須與manifest文件同源，在同一個(gè)域下。

4、FALLBACK中的資源必須和manifest文件同源。

5、當(dāng)一個(gè)資源被緩存后，該瀏覽器直接請(qǐng)求這個(gè)絕對(duì)路徑也會(huì)訪問緩存中的

資源。

6、站點(diǎn)中的其他頁面即使沒有設(shè)置manifest屬性，請(qǐng)求的資源如果在緩存

中也從緩存中訪問。

7、當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。

4、本地存儲(chǔ)和會(huì)話（事務(wù)）存儲(chǔ)之間的區(qū)別是什么？

【僅供參考】

本地存儲(chǔ)數(shù)據(jù)持續(xù)永久，但是會(huì)話存儲(chǔ)在瀏覽器打開時(shí)有效，在瀏覽器關(guān)閉時(shí)

會(huì)話重置存儲(chǔ)數(shù)據(jù)。

5、HTML5應(yīng)用程序緩存為應(yīng)用帶來什么優(yōu)勢(shì)？

【僅供參考】

應(yīng)用程序緩存為應(yīng)用帶來3個(gè)優(yōu)勢(shì)。

（1）離線瀏覽，讓用戶可在應(yīng)用離線時(shí)（網(wǎng)絡(luò)不可用時(shí)）使用它們。

（2）速度，讓已緩存資源加載得更快。

（3）減少服務(wù)器負(fù)載，讓瀏覽器將只下載服務(wù)器更新過的資源。

6、如何區(qū)別HTML和HTML5?

【僅供參考】

用DOCTYPE聲明新增的結(jié)構(gòu)元素和功能元素來區(qū)別它們。

7、如何進(jìn)行網(wǎng)站性能優(yōu)化

【僅供參考】

content方面

1、減少HTTP請(qǐng)求：合并文件、CSS精靈、inlineImage

2、減少DNS查詢：DNS緩存、將資源分布到恰當(dāng)數(shù)量的主機(jī)名

3、減少D0M元素?cái)?shù)量

Server方面

1、使用CDN

2、配置ETag

3、對(duì)組件使用Gzip壓縮

Cookie方面

1、減小cookie大小

css方面

1、將樣式表放到頁面頂部

2、不使用CSS表達(dá)式

3^使用〈link〉不使用@import

Javascript方面

1、將腳本放到頁面底部

2^將javascript和css從外部引入

3、壓縮javascript和css

4、刪除不需要的腳本

5、減少D0M訪問

圖片方面

1、優(yōu)化圖片：根據(jù)實(shí)際顏色需要選擇色深、壓縮

2、優(yōu)化css精靈

3、不要在HTML中拉伸圖片

8、HTML5Canvas元素有什么作用？

【僅供參考】

Canvas元素用于在網(wǎng)頁上繪制圖形，該元素標(biāo)簽的強(qiáng)大之處在于可以直接在

HTML上進(jìn)行圖形操作。

9、什么是HTML5?

【僅供參考】

HTML5是最新的HTML標(biāo)準(zhǔn)，它的主要目標(biāo)是提供所有內(nèi)容，而不需要任何

Flash、SilverLight等的額外插件，這些內(nèi)容來自動(dòng)畫、視頻、富GUI等

HTML5是萬維網(wǎng)聯(lián)盟（W3C）和網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組（WHATWG）合作輸

出的。

10、iframe的優(yōu)缺點(diǎn)？

【僅供參考】

優(yōu)點(diǎn)：

解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題

Securitysandbox

并行加載腳本

缺點(diǎn)：

iframe會(huì)阻塞主頁面的Onload事件

即時(shí)內(nèi)容為空，加載也需要時(shí)間

沒有語意

11、為什么HTML5里面不需要DTD（DocumentTypeDefinition,文檔類型定

義）？如果不放入＜!doctypehtml＞標(biāo)簽，HTML5還會(huì)工作嗎？

【僅供參考】

HTML5沒有使用SGML或者XHTML,它是一個(gè)全新的類型，因此不需要參考

DTDo對(duì)于HTML5,僅須放置下面的文檔類型代碼，讓瀏覽器識(shí)別HTML5文檔。

如果不放入〈！doctypehtml〉標(biāo)簽，HTML5不會(huì)工作。瀏覽器將不能識(shí)別出它

是HTML文檔，同時(shí)HTML5的標(biāo)簽將不能正常工作。

12、如果把HTML5看成一個(gè)開放平臺(tái)，它的構(gòu)建模塊有哪些?

【僅供參考】

如果把HTML5看成一個(gè)開放平臺(tái)，它的構(gòu)建模塊至少包括以下幾個(gè)，如

<nav><header><sectionXfooter>o

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

更加準(zhǔn)確

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

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

〈footer〉標(biāo)簽用來定義頁腳。在典型情況下，該元素會(huì)包含文檔作者的姓名、

文檔的創(chuàng)作日期和聯(lián)系信息

13、什么是SVG?

【僅供參考】

SVG即可縮放失量圖形(ScalableVectorGraphics)□它是基于文本的圖形

語言，使用文本、線條、點(diǎn)等來繪制圖像，這使得它輕便、顯示迅速。

14、rgbaO和opacity的透明效果有什么不同？

【僅供參考】

rgba()和opacity都能實(shí)現(xiàn)透明效果，但它們最大的不同是opacity作用于元

素，并且可以設(shè)置元素內(nèi)所有內(nèi)容的透明度；而rgba()只作用于元素的顏色或

其背景色(設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果)。

15、Irem、lem、Ivh、Ipx各自代表的含義？

【僅供參考】

rem:rem是全部的長(zhǎng)度都相對(duì)于根元素元素。通常做法是給html元素設(shè)置一

個(gè)字體大小，然后其他元素的長(zhǎng)度單位就為rem。

em:子元素字體大小的em是相對(duì)于父元素字體大小，元素的

width/height/padding/margin用em的話是相對(duì)于該元素的font-size

vw/vh:全稱是ViewportWidth和ViewportHeight,視窗的寬度和高度，相

當(dāng)于屏幕寬度和高度的理，不過，處理寬度的時(shí)候?yàn)閱挝桓线m，處理高度的

話vh單位更好。

px:px像素(Pixel)o相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而

言的。

16、CSS中，自適應(yīng)的單位都有哪些？

【僅供參考】

自適應(yīng)的單位有以下幾個(gè)

百分比：%

相對(duì)于視口寬度的單位：WW

相對(duì)于視口高度的單位：vh

相對(duì)于視口寬度或者高度（取決于哪個(gè)小）的單位：Vm

相對(duì)于父元素字體大小的單位：em

相對(duì)于根元素字體大小的單位：rem

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

【僅供參考】

body,ul,ol,li,p,hl,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{marg

in:0;padding:0;border:0;}

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

family:/zSimSunzz,〃宋體〃,/zArialNarrow”;}

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:#c00;text-decoration:underline;}

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

18、如何實(shí)現(xiàn)左邊固定寬，右邊自適應(yīng)布局

【僅供參考】

//1.圣杯布局

<divid=//containerz/>

<divid二〃center"class=zzcolumn/z></div>

<divid="left"class二〃columrTX/div>

<divid=〃right"class=z，columnz，></div>

</div>

Wcontainer{

padding-left:200px;

padding-right:150px;

）

Scontainer.column{

float:left;

Scenter{

width:100%;

}

ttleft{

width:200px;

margin-left:-100%;

position:relative;

right:200px;

)

Sright{

width:150px;

margin-right:-150px;

}

//2.雙飛翼布局

<divid二〃container"class=〃column”〉

<divid二〃center〃X/div>

</div>

<divid二〃left〃class=〃colunin〃X/div>

<divid二〃right〃class二〃colunin〃X/div>

^container{

width:100%;

}

.column{

float:left;

}

Scenter{

margin-left:200px;

margin-right:150px;

)

ttleft{

width:200px;

margin-left:-100%;

}

Sright{

width:150px;

margin-left:-150px;

)

//3.等高布局(假等高)互補(bǔ)的內(nèi)外邊距

.parent{

overflow:hidden;

)

.left,,right{

margin-bottom:-lOOOOpx;

padding-bottom:lOOOOpx;

}

//4.等高布局(真等高)彈性盒子

.parent{

display:flex;

)

.child{

flex:1;

}

//calc

<divid二〃left〃class=〃colunin〃X/div>

<divid二〃center"class二〃column〃X/div>

<divid二〃right〃class二〃colunin〃X/div>

.column{

float:left;

}

#left{

width:lOOpx;

}

bright{

width:200px;

}

#center{

width:calc(100%-lOOpx-200px);

}

//5.浮動(dòng)

<divid二〃left〃class=〃colunin〃X/div>

<divid二〃right〃class二〃colunin〃X/div>

<divid二〃center〃X/div>

#left{

float:left;

width:lOOpx;

}

ttright{

float:right;

width:200px;

}

ttcenter{

margin-left:lOOpx;

margin-right:200px;

}

19、line-height三種賦值方式有何區(qū)別？(帶單位、純數(shù)字、百分比)

【僅供參考】

帶單位：px是固定值，而em會(huì)參考父元素font-size值計(jì)算自身的行高

純數(shù)字：會(huì)把比例傳遞給后代。例如，父級(jí)行高為1.5,子元素字體為18px,

則子元素行高為1.5*18=27px

百分比：將計(jì)算后的值傳遞給后代

20、標(biāo)準(zhǔn)盒子模型和IE(怪異)盒子模型理解多少？

【僅供參考】

box-size：content-box是標(biāo)準(zhǔn)盒子模型，實(shí)際的區(qū)域是padding+border+

content,content區(qū)域就是設(shè)置的元素寬度，padding和border會(huì)占用外部空

間

box-size：border-box的話，元素的寬度為padding+border+content,元

素設(shè)置了寬度，不會(huì)占用外部空間。

二、JS/ES6/TS篇

1、split()joinO的區(qū)別

【僅供參考】

split()：以指定的字符分割字符串返回一個(gè)數(shù)組,字符串方法

JoinO:以指定的字符連接數(shù)組中元素返回一個(gè)字符串，數(shù)組方法

2、documentload事件和documentready事件的區(qū)別

【僅供參考】

頁面加載完成有兩種事件

load是當(dāng)頁面所有資源全部加載完成后(包括D0M文檔樹，css文件，js文

件，圖片資源等)，執(zhí)行一個(gè)函數(shù)

問題：如果圖片資源較多，加載時(shí)間較長(zhǎng)，onload后等待執(zhí)行的函數(shù)需要等待

較長(zhǎng)時(shí)間，所以一些效果可能受到影響

$(document),ready()是當(dāng)DOM文檔樹加載完成后執(zhí)行一個(gè)函數(shù)(不包含圖

片，css等)所以會(huì)比load較快執(zhí)行

在原生的jS中不包括ready()這個(gè)方法，只有l(wèi)oad方法就是onload事件

3、foo=foo||bar,這行代碼是什么意思？為什么要這樣寫？

【僅供參考】

如果foo轉(zhuǎn)為false,則返回bar；否則直接返回foo

邏輯或：如果第一個(gè)值為true,直接返回第一個(gè)值；否則直接返回第二個(gè)值

邏輯與：如果第一個(gè)值為false,直接返回第一個(gè)值；否則返回第二個(gè)值

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

【僅供參考】

(1)變量直接賦值時(shí)：

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

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

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

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

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

5、null和undefined的區(qū)別？

【僅供參考】

null表示一個(gè)對(duì)象被定義了，值為“空值”；

undefined表示不存在這個(gè)值。

(1)變量被聲明了，但沒有賦值時(shí)，就等于undefined。(2)調(diào)用函數(shù)時(shí)，

應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。(3)對(duì)象沒有賦值的屬

性，該屬性的值為undefined。(4)函數(shù)沒有返回值時(shí)，默認(rèn)返回

undefinedo

6、"==="、"=”的區(qū)別？

【僅供參考】

==,當(dāng)且僅當(dāng)兩個(gè)運(yùn)算數(shù)相等時(shí)，它返回true,即不檢查數(shù)據(jù)類型

===,只有在無需類型轉(zhuǎn)換運(yùn)算數(shù)就相等的情況下，才返回true,需要檢查數(shù)

據(jù)類型

7、target和currentTarget區(qū)別

【僅供參考】

都是事件對(duì)象上的屬性

event,target：返回觸發(fā)事件的元素

event.currentTarget：返回綁定事件的元素(相當(dāng)于事件中this)

8、數(shù)組方法pop()push()unshift()shift()

【僅供參考】

pop()尾部刪除

push。尾部添加

unshift()頭部添加

shift()頭部刪除

9、怎么樣刪除一個(gè)對(duì)象的屬性

【僅供參考】

delete對(duì)象.屬性名

10、可以大量節(jié)省內(nèi)存占用，減少事件注冊(cè)

【僅供參考】

2.可以實(shí)現(xiàn)當(dāng)新增子對(duì)象時(shí)，無需再對(duì)其進(jìn)行事件綁定

11、請(qǐng)解釋一下什么是重排與重繪？

【僅供參考】

重排：當(dāng)改變dom結(jié)構(gòu)的時(shí)候，就會(huì)從dom樹開始從新渲染頁面，這過程叫重

排比如添加或者刪除可見的D0M元素、元素尺寸改變、元素內(nèi)容改變、瀏覽器

窗口尺寸改變等等

重繪：當(dāng)改變樣式(不改變幾何結(jié)構(gòu))的時(shí)候，它會(huì)從render樹開始重新開始

渲染頁面，這過程叫重繪，比如改變顏色，透明等

12、請(qǐng)說出三種減低頁面加載時(shí)間的方法

【僅供參考】

壓縮css、js文件

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

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

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

13、

offsetWidth/offsetHeight,clientWidth/clientHeight,scrollWidth/scroll

Height的區(qū)別？

【僅供參考】

offsetWidth/offsetHeight返回值包含content+padding+border+包含

滾動(dòng)條，效果與e.getBoundingClientRect()相同

c1ientWidth/c1ientHeight返回值只包含content+padding,如果有滾動(dòng)

條，也不包含滾動(dòng)條

scrollWidth/scrollHeight返回值包含content+padding+溢出內(nèi)容的尺

寸

14、JavaScript是單線程的，瀏覽器是多進(jìn)程的

【僅供參考】

每打開一個(gè)新網(wǎng)頁就會(huì)創(chuàng)建一個(gè)渲染進(jìn)程

渲染進(jìn)程是多線程的

負(fù)責(zé)頁面渲染的GUI渲染線程

負(fù)責(zé)JavaScript的執(zhí)行的JavaScript引擎線程，

負(fù)責(zé)瀏覽器事件循環(huán)的事件觸發(fā)線程，注意這不歸JavaScript引擎線程管

負(fù)責(zé)定時(shí)器的定時(shí)觸發(fā)器線程，setTimeout中低于4ms的時(shí)間間隔算為4ms

負(fù)責(zé)XMLHttpRequest的異步http請(qǐng)求線程

GUI渲染線程與JavaScript引擎線程是互斥的

單線程JavaScript是因?yàn)楸苊釪0M渲染的沖突，webworker支持多線程，但

是webworker不能訪問window對(duì)象，document對(duì)象等。

15、什么是裝飾器，它們可以應(yīng)用于什么？

【僅供參考】

裝飾器是一種特殊的聲明，它允許你通過使用敘name〉注釋標(biāo)記來一次性修改類

或類成員。每個(gè)裝飾器都必須引用一個(gè)將在運(yùn)行時(shí)評(píng)估的函數(shù)。

例如，裝飾器@sealed將對(duì)應(yīng)于sealed函數(shù)。任何標(biāo)有的@$6a16(1都將用于評(píng)

估sealed函數(shù)。

functionsealed(target){

//dosomethingwith'target"...

}

它們可以附加到：

類聲明

方法

配件

特性

參數(shù)

注意：默認(rèn)情況下不啟用裝飾器。要啟用它們，你必須

experimentalDecorators從tsconfig.json文件或命令行編輯編譯器選項(xiàng)中的

字段

16、TypeScript中？.，？？，?。?，_,**等符號(hào)的含義？

【僅供參考】

?.可選鏈

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

false值。只有undefind,null被視為false值。

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

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

!:待會(huì)分配這個(gè)變量，ts不要擔(dān)心

**求幕

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

【僅供參考】

枚舉會(huì)被編譯時(shí)會(huì)編譯成一個(gè)對(duì)象，可以被當(dāng)作對(duì)象使用

const枚舉會(huì)在typescript編譯期間被刪除，const枚舉成員在使用的地方

會(huì)被內(nèi)聯(lián)進(jìn)來，避免額外的性能開銷

18、什么時(shí)候應(yīng)該使用關(guān)鍵字unknown?

【僅供參考】

unknown,如果你不知道預(yù)先期望哪種類型，但想稍后分配它，則應(yīng)該使用該

any關(guān)鍵字，并且該關(guān)鍵字將不起作用。

19、es6中對(duì)象新增的方法

【僅供參考】

①object,assign。用于合并對(duì)象和淺拷貝

②object,keys()返回值是一個(gè)數(shù)組，數(shù)組包含了對(duì)象可遍歷屬性的所有key

值(與for..in的區(qū)別：for...in會(huì)走原型鏈，他不會(huì)走原型鏈)

③object,values。返回值是一個(gè)數(shù)組，數(shù)組包含了目標(biāo)對(duì)象可遍歷的所有鍵

值(與for...of的區(qū)別：返回值不一樣，for...of可以對(duì)遍歷的鍵值進(jìn)行額外

操作，object,values()不行)

?object.entries()返回的是所有可遍歷屬性鍵和鍵值的數(shù)組

20、設(shè)計(jì)一個(gè)對(duì)象，鍵名的類型至少包含一個(gè)symbol類型，并且實(shí)現(xiàn)遍歷所

有key

【僅供參考】

letname=Symbol('name");

letproduct={

[name]:"洗衣機(jī)”，

“price”:799

)；

Reflect.ownKeys(product);

三、Vue/React篇

1、React中的狀態(tài)是什么？它是如何使用的？

【僅供參考】

狀態(tài)是React組件的核心，是數(shù)據(jù)的來源，必須盡可能簡(jiǎn)單。基本上狀態(tài)是確

定組件呈現(xiàn)和行為的對(duì)象。與props不同，它們是可變的，并創(chuàng)建動(dòng)態(tài)和交互

式組件?？梢酝ㄟ^this,state()訪問它們

2、什么是Props?

【僅供參考】

Props是React中屬性的簡(jiǎn)寫。它們是只讀組件，必須保持純，即不可變。它

們總是在整個(gè)應(yīng)用中從父組件傳遞到子組件。子組件永遠(yuǎn)不能將prop送回父

組件。這有助于維護(hù)單向數(shù)據(jù)流，通常用于呈現(xiàn)動(dòng)態(tài)生成的數(shù)據(jù)

3、常用的hooks有哪些？

【僅供參考】

》useState：保存組件內(nèi)部狀態(tài)的函數(shù)，提供了setState改變組件狀態(tài)。

》uesEffect：在函數(shù)組件中執(zhí)行副作用操作，componentDidMount,

componentDidUpdate和componentWi1lUnmount0

負(fù)責(zé)對(duì)某些值進(jìn)行實(shí)時(shí)監(jiān)控。如果第二個(gè)可選參數(shù)為空，表明在第一次渲染時(shí)

進(jìn)行。

如果是需要清除的副作用，一個(gè)return一鍵清除?！緮?shù)據(jù)請(qǐng)求】

》useContext：跨組件傳值

》useReducer：useState的加強(qiáng)版，在某些場(chǎng)景下，useReducer會(huì)比

useState更適用，例如state邏輯較復(fù)雜且包含多個(gè)子值，或者下一個(gè)

state依賴于之前的state等。

》useCallback：和useEffect類似，把函數(shù)做為第一個(gè)參數(shù)，把函數(shù)的依賴

項(xiàng)作為第二個(gè)參數(shù)傳入，改回調(diào)函數(shù)只有在函數(shù)的依賴項(xiàng)發(fā)生改變時(shí)才會(huì)調(diào)

用，返回的是一個(gè)回調(diào)函數(shù)。

》useMemo和uesCallback類似......返回的是一個(gè)值。

》useRefconstrefContainer=useRef(initialValue);

useRef返回一個(gè)可變的ref對(duì)象，其.current屬性被初始化為傳入的參數(shù)

(initialValue)。返回的ref對(duì)象在組件的整個(gè)生命周期內(nèi)持續(xù)存在。

本質(zhì)上，useRef就像是可以在其.current屬性中保存一個(gè)可變值的“盒

子”。

你應(yīng)該熟悉ref這一種訪問D0M的主要方式。如果你將ref對(duì)象以＜div

ref={myRef}/＞形式傳入組件，則無論該節(jié)點(diǎn)如何改變，React都會(huì)將ref

對(duì)象的.current屬性設(shè)置為相應(yīng)的D0M節(jié)點(diǎn)。

然而，useRef()比ref屬性更有用。它可以〈a

href=zzhttps://http://zhuanlan.zhihu.com/p/515755713/editttis-there-

somethingTike-instance-variables”＞很方便地保存任何可變值，其類似于在

class中使用實(shí)例字段的方式。

這是因?yàn)樗鼊?chuàng)建的是一個(gè)普通Javascript對(duì)象。而useRef()和自建一個(gè)

{current:...)對(duì)象的唯一區(qū)別是，useRef會(huì)在每次渲染時(shí)返回同一個(gè)ref

對(duì)象。

請(qǐng)記住，當(dāng)ref對(duì)象內(nèi)容發(fā)生變化時(shí)，useRef并不會(huì)通知你。變更.current

屬性不會(huì)引發(fā)組件重新渲染。如果想要在React綁定或解綁D0M節(jié)點(diǎn)的ref

時(shí)運(yùn)行某些代碼，則需要使用回調(diào)ref來實(shí)現(xiàn)。

》uselmperativeHandleuselmperativeHandle(ref,createHandle,[deps])

uselmperativeHandle可以讓你在使用ref時(shí)自定義暴露給父組件的實(shí)例值。

在大多數(shù)情況下，應(yīng)當(dāng)避免使用ref這樣的命令式代碼。

uselmperativeHandle應(yīng)當(dāng)與forwardRef一起使用：

functionFancyinput(props,ref){

constinputRef=useRef();

uselmperativeHandle(ref,()=>({

focus:()=>{

inputRef.current,focus();

}

}))；

return<inputref={inputRef}.../>;}

Fancyinput=forwardRef(Fancyinput);

在本例中，渲染<FancyInputref={inputRef}/>的父組件可以調(diào)用

inputRef.current,focus()。

》useLayoutEffect

其函數(shù)簽名與useEffect相同，但它會(huì)在所有的DOM變更之后同步調(diào)用

effecto可以使用它來讀取D0M布局并同步觸發(fā)重渲染。在瀏覽器執(zhí)行繪制之

前，useLayoutEffect內(nèi)部的更新計(jì)劃將被同步刷新。

盡可能使用標(biāo)準(zhǔn)的useEffect以避免阻塞視覺更新。

》useDebugValue可用于在React開發(fā)者工具中顯示自定義hook的標(biāo)簽。

》useDeferredValueconst[deferredValue]=useDeferredValue(value);

接受一個(gè)值并返回該值的新副本，該副本將推遲到更緊急的更新。如果當(dāng)前渲

染是緊急更新的結(jié)果(如用戶輸入)，React將返回以前的值，然后在緊急渲染

完成后渲染新值。

useDeferredValue只延遲傳遞給它的值。

如果要防止子組件在緊急更新期間重新呈現(xiàn)，還必須使用React來記憶該組

件。記錄或反應(yīng)。使用備忘錄：

functionTypeahead(){

constquery=useSearchQuery;

constdeferredQuery=useDeferredValue(query);

//Memonizing告訴React僅在延遲查詢更改時(shí)重新呈現(xiàn)，

〃當(dāng)查詢發(fā)生變化時(shí)不會(huì)。

constsuggestions=useMemo(()=>

<SearchSuggestionsquery=(deferredQuery}/>,

[deferredQuery]

)；

return(

<>

<SearchInputquery={query)/>

<Suspensefallback=//Loadingresults...

{suggestions)

</Suspense>

</>

)；)

記住子對(duì)象會(huì)告訴React,它只需要在延遲查詢更改時(shí)重新呈現(xiàn)它們，而不需

要在查詢更改時(shí)重新呈現(xiàn)它們。這個(gè)警告并不是useDeferredValue獨(dú)有的，

它與使用去抖動(dòng)或節(jié)流的類似鉤子使用的模式相同。

》useTransitionconst[isPending,startTransition]=useTransition();

返回轉(zhuǎn)換掛起狀態(tài)的有狀態(tài)值，以及啟動(dòng)轉(zhuǎn)換的函數(shù)。

startTransition允許您將提供的回調(diào)中的更新標(biāo)記為轉(zhuǎn)換：

》useldconstid=useld();

useld是一個(gè)鉤子，用于生成跨服務(wù)器和客戶端穩(wěn)定的唯一ID,同時(shí)避免不匹

配。

例如，將id直接傳遞給需要它的元素：

》useSyncExternalStore

conststate=useSyncExternalStore(subscribe,getSnapshot[,

getServerSnapshot]);

是一個(gè)推薦用于讀取和訂閱外部數(shù)據(jù)源的鉤子，其方式與選擇性水合和時(shí)間切

片等并發(fā)渲染功能兼容。

》uselnsertionEffectuselnsertionEffect(didUpdate);

簽名與useEffeet相同，但它在所有DOM突變之前同步激發(fā)。在

useLayoutEffect中讀取布局之前，使用此選項(xiàng)將樣式注入D0M。由于這個(gè)鉤子

的作用域有限，所以這個(gè)鉤子不能訪問refs,也不能安排更新。

4、useEffect的回調(diào)函數(shù)為什么無法使用async?

【僅供參考】

React本身并不支持這么做，理由是effectfunction應(yīng)該返回一個(gè)銷毀函數(shù)

(effect：是指return返回的cleanup函數(shù))，如果useEffect第一個(gè)參數(shù)傳

入async,返回值則變成了Promise,會(huì)導(dǎo)致react在調(diào)用銷毀函數(shù)的時(shí)候報(bào)

錯(cuò)：function,applyisundefinedo

5、列出Redux的組件

【僅供參考】

Action-這是一個(gè)用來描述發(fā)生了什么事情的對(duì)象。

Reducer-這是一個(gè)確定狀態(tài)將如何變化的地方。

Store-整個(gè)程序的狀態(tài)/對(duì)象樹保存在Store中。

View-只顯示Store提供的數(shù)據(jù)。

6、類組件和函數(shù)組件之間的區(qū)別是什么？

【僅供參考】

類組件可以使用其他特性，如狀態(tài)和生命周期鉤子，并且他有this

函數(shù)組件只能接收props渲染到頁面，無狀態(tài)組件，沒有this,不能使用生命

周期鉤子

函數(shù)組件性能要高于類組件，因?yàn)轭惤M件使用要實(shí)例化，而函數(shù)組件直接執(zhí)行

取返回結(jié)果即可，為了提高性能，盡量使用函數(shù)組件

7、常用的hooks

【僅供參考】

useState：定義state的數(shù)據(jù)，參數(shù)是初始化的數(shù)據(jù)，返回值兩個(gè)值1.初始

化值，2.修改的方法

useEffect：副作用函數(shù)，顧名思義，副作用即只有使用過后才會(huì)產(chǎn)生副作用

當(dāng)作生命周期來使用：第二個(gè)參數(shù)如果沒寫的話，頁面一更新觸發(fā)，

compoentDidMountcompoentDidUpdate

第二個(gè)參數(shù)如果空數(shù)組的話，只執(zhí)行一次，compoentDidMount

數(shù)組中跟某些變量，當(dāng)作監(jiān)聽器來使用，監(jiān)聽數(shù)據(jù)的變化，

useEffect是一個(gè)副作用函數(shù)，組件更新完成后觸發(fā)的函數(shù)

如果我們?cè)趗seEffect返回一個(gè)函數(shù)的，組件被銷毀的時(shí)候觸發(fā)

useMemo：用來計(jì)算數(shù)據(jù)，返回一個(gè)結(jié)果，監(jiān)聽數(shù)據(jù)的變化，第二個(gè)參數(shù)就是監(jiān)

聽的數(shù)據(jù)，具有緩存性

useMemo和useEffect相比較來說，useMemo是組件更新的時(shí)候觸發(fā)生命周期

useCallback：當(dāng)父組件向子組件傳遞函數(shù)的時(shí)候，父組件的改變會(huì)導(dǎo)致函數(shù)的

重新調(diào)用產(chǎn)生新的作用域，所以還是會(huì)導(dǎo)致子組件的更新渲染，這個(gè)時(shí)候我們

可以使用useCallback來緩存組件

useRef：相當(dāng)于createRef的使用，創(chuàng)建組件的屬性信息

useContext：相當(dāng)在函數(shù)組件中獲取context狀態(tài)數(shù)的內(nèi)容信息

useReducer：useReducer是用來彌補(bǔ)useState的補(bǔ)不足，可以把數(shù)據(jù)進(jìn)行集

中式的管理，單獨(dú)處理數(shù)據(jù)的邏輯信息

8、如何創(chuàng)建refs?

【僅供參考】

通過React.createRef()創(chuàng)建的，并通過ref屬性附加到react元素，在構(gòu)

造組件中，

通常將Refs分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。

9、react生命周期方法有哪些？

【僅供參考】

componentWillMount:在渲染之前執(zhí)行，用于根組件中的App級(jí)配置。

componentDidMount：在第一次渲染之后執(zhí)行，可以在這里做AJAX請(qǐng)求，D0M

的操作或狀態(tài)更新以及設(shè)置事件監(jiān)聽器。

componentWillReceiveProps：在初始化render的時(shí)候不會(huì)執(zhí)行，它會(huì)在組件

接受到新的狀態(tài)(Props)時(shí)被觸發(fā)，一般用于父組件狀態(tài)更新時(shí)子組件的重新渲

染

shouldComponentUpdate：確定是否更新組件。默認(rèn)情況下，它返回true。如

果確定在state或props更新后組件不需要在重新渲染，則可以返回

false,這是一個(gè)提高性能的方法。

componentWillUpdate：在shouldComponentUpdate返回true確定要更新組件

之前件之前執(zhí)行。

componentDidUpdate：它主要用于更新D0M以響應(yīng)props或state更改。

componentWi1lUnmount：它用于取消任何的網(wǎng)絡(luò)請(qǐng)求，或刪除與組件關(guān)聯(lián)的所

有事件監(jiān)聽器。

10、vue-cli工程升級(jí)vue版本

【僅供參考】

在項(xiàng)目目錄里運(yùn)行npmupgradevuevue-temp1ate-compi1er,不出意外的

話，可以正常運(yùn)行和buildo如果有任何問題，刪除node_modules文件夾然

后重新運(yùn)行npmi即可。

(簡(jiǎn)單的說就是升級(jí)vue和vue-temp1ate-compi1er兩個(gè)插件)

11、v-html與v-text區(qū)別

【僅供參考】

答案：

v-html:可以轉(zhuǎn)義標(biāo)簽和渲染數(shù)據(jù)

v-text：不能轉(zhuǎn)義標(biāo)簽只能渲染數(shù)據(jù)

v-text展示效果：<strong>Hello</strong>Vue!

v-html展示效果：HelloVue!

12、為什么避免v-if和v-for用在一起

【僅供參考】

當(dāng)Vue處理指令時(shí)，v-for比v-if具有更高的優(yōu)先級(jí)，這意味著v-if將分

別重復(fù)運(yùn)行于每個(gè)v-for循環(huán)中，帶來性能方面的浪費(fèi)。

我們可以把v-if移動(dòng)到父級(jí)（容器）元素，不會(huì)再重復(fù)遍歷列表中的每個(gè)

值。取而代之的是，我們只檢查它一次，且不會(huì)在v-if為否的時(shí)候運(yùn)算v-

foro

或者在外層嵌套template（頁面渲染不生成dom節(jié)點(diǎn)），在這一層進(jìn)行v-if判

斷，然后在內(nèi)部進(jìn)行v-for循環(huán)

13、vue2和vue3的響應(yīng)式原理都有什么區(qū)別呢？

【僅供參考】

vue2用的是Object.defindProperty但是vue3用的是Proxy

Object.defindProperty缺點(diǎn)：

一次只能對(duì)一個(gè)屬性進(jìn)行監(jiān)聽，需要遍歷來對(duì)所有屬性監(jiān)聽

對(duì)于對(duì)象的新增屬性，需要手動(dòng)監(jiān)聽

對(duì)于數(shù)組通過push、unshift方法增加的元素，也無法監(jiān)聽

Proxy就沒有這個(gè)問題，可以監(jiān)聽整個(gè)對(duì)象的數(shù)據(jù)變化，所以用vue3.0會(huì)用

Proxy代替definedProperty□

14、Vue框架怎么實(shí)現(xiàn)對(duì)象和數(shù)組的監(jiān)聽？

【僅供參考】

Vue數(shù)據(jù)雙向綁定主要是指：數(shù)據(jù)變化更新視圖，視圖變化更新數(shù)據(jù)。

即：

輸入框內(nèi)容變化時(shí)，Data中的數(shù)據(jù)同步變化。即View=>Data的變化。

Data中的數(shù)據(jù)變化時(shí)，文本節(jié)點(diǎn)的內(nèi)容同步變化。即Data=>View的變化。

其中，View變化更新Data,可以通過事件監(jiān)聽的方式來實(shí)現(xiàn)，所以Vue的

數(shù)據(jù)雙向綁定的工作主要是如何根據(jù)Data變化更新Viewo

Vue主要通過以下4個(gè)步驟來實(shí)現(xiàn)數(shù)據(jù)雙向綁定的：

實(shí)現(xiàn)一個(gè)監(jiān)聽器Observer：對(duì)數(shù)據(jù)對(duì)象進(jìn)行遍歷，包括子屬性對(duì)象的屬性，利

用Object.defineProperty（）對(duì)屬性都加上setter和getter。這樣的話，

給這個(gè)對(duì)象的某個(gè)值賦值，就會(huì)觸發(fā)setter,那么就能監(jiān)聽到了數(shù)據(jù)變化。

實(shí)現(xiàn)一個(gè)解析器Compile：解析Vue模板指令，將模板中的變量都替換成數(shù)

據(jù)，然后初始化渲染頁面視圖，并將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加

監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動(dòng)，收到通知，調(diào)用更新函數(shù)進(jìn)行數(shù)據(jù)更

新。

實(shí)現(xiàn)一個(gè)訂閱者Watcher：ffatcher訂閱者是Observer和Compile之間通信

的橋梁，主要的任務(wù)是訂閱Observer中的屬性值變化的消息，當(dāng)收到屬性值

變化的消息時(shí)，觸發(fā)解析器Compile中對(duì)應(yīng)的更新函數(shù)。

實(shí)現(xiàn)一個(gè)訂閱器Dep：訂閱器采用發(fā)布-訂閱設(shè)計(jì)模式，用來收集訂閱者

Watcher,對(duì)監(jiān)聽器Observer和訂閱者Watcher進(jìn)行統(tǒng)一管理。

15、Vuex是通過什么方式提供響應(yīng)式數(shù)據(jù)的？

【僅供參考】

在Store構(gòu)造函數(shù)中通過newVue（｛｝）實(shí)現(xiàn)的。

利用Vue來監(jiān)聽state下的數(shù)據(jù)變化，

給狀態(tài)（數(shù)據(jù)）添加getter、setter可以監(jiān)聽數(shù)據(jù)改變。

16、v-cloak可以解決什么問題

【僅供參考】

v-cloak指令解決vue屏幕閃屏

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和CSS規(guī)則如[v-cloak]

｛display:none）一起用時(shí)，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直

到實(shí)例準(zhǔn)備完畢。

17、0修改了組件的聲明方式，改成了類式的寫法，這樣使得和TypeScript

的結(jié)合變得很容易。

【僅供參考】

此外，vue的源碼也改用了TypeScript來寫。其實(shí)當(dāng)代碼的功能復(fù)雜之后，

必須有一個(gè)靜態(tài)類型系統(tǒng)來做一些輔助管理。

現(xiàn)在vue3.0也全面改用TypeScript來重寫了，更是使得對(duì)外暴露的api更

容易結(jié)合TypeScripto靜態(tài)類型系統(tǒng)對(duì)于復(fù)雜代碼的維護(hù)確實(shí)很有必要。

（4）其它方面的更改

vue3.0的改變是全面的，上面只涉及到主要的3個(gè)方面，還有一些其他的更

改：

支持自定義渲染器，從而使得weex可以通過自定義渲染器的方式來擴(kuò)展，而

不是直接fork源碼來改的方式。

支持Fragment（多個(gè)根節(jié)點(diǎn)）和Protal（在dom其他部分渲染組建內(nèi)容）組

件，針對(duì)一些特殊的場(chǎng)景做了處理。

基于treeshaking優(yōu)化，提供了更多的內(nèi)置功能。

18、Vue組件間通信有哪幾種方式？

【僅供參考】

Vue組件間通信是面試?？嫉闹R(shí)點(diǎn)之一，這題有點(diǎn)類似于開放題，你回答出

越多方法當(dāng)然越加分，表明你對(duì)Vue掌握的越熟練。

Vue組件間通信只要指以下3類通信：父子組件通信、隔代組件通信、兄弟組

件通信，下面我們分別介紹每種通信方式且會(huì)說明此種方法可適用于哪類組件

間通信。

（1）props/$emit適用父子組件通信

這種方法是Vue組件的基礎(chǔ)，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展

開介紹。

（2）ref與Sparent/$children適用父子組件通信

ref：如果在普通的D0M元素上使用，引用指向的就是D0M元素；如果用在子

組件上，引用就指向組件實(shí)例

$parent/$children：訪問父/子實(shí)例

（3）EventBus（$emit/$on）適用于父子、隔代、兄弟組件通信

這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)

事件和監(jiān)聽事件，從而實(shí)現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件。

（4）$attrs/$listeners適用于隔代組件通信

$attrs：包含了父作用域中不被prop所識(shí)別（且獲取）的特性綁定（class

和style除外）o當(dāng)一個(gè)組件沒有聲明任何prop時(shí)，這里會(huì)包含所有父作用

域的綁定（class和style除外）,并且可以通過v-bind="$attrs”傳入內(nèi)

部組件。通常配合inheritAttrs選項(xiàng)一起使用。

$listeners：包含了父作用域中的（不含.native修飾器的）v-on事件監(jiān)聽

器。它可以通過v-on="$listeners”傳入內(nèi)部組件

（5）provide/inject適用于隔代組件通信

祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注

入變量。provide/injectAPI主要解決了跨級(jí)組件間的通信問題，不過它的

使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提

供與依賴注入的關(guān)系。

（6）Vuex適用于父子、隔代、兄弟組件通信

Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個(gè)Vuex應(yīng)用的

核心就是store（倉庫）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用

中大部分的狀態(tài)（state）o

Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng)Vue組件從store中讀取狀態(tài)的時(shí)候，若

store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

改變store中的狀態(tài)的唯一途徑就是顯式地提交（commit）mutation。這樣使

得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

19、什么是Proxy?

【僅供參考】

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

作）。

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

進(jìn)行訪問前，對(duì)外界的訪問進(jìn)行改寫。

Proxy是ES6中新增的一個(gè)特性JavaScript中用來表示由它來'代理’某些

操作

Proxy是ES6中新增的一個(gè)特性，翻譯過來意思是〃代理〃，用在這里表示由它

來“代理”某些操作。Proxy讓我們能夠以簡(jiǎn)潔易懂的方式控制外部對(duì)對(duì)象的

訪問。其功能非常類似于設(shè)計(jì)模式中的代理模式。

Proxy可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪

問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問進(jìn)行過

濾和改寫。

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

對(duì)象的某些屬性前記錄日志；設(shè)置對(duì)象的某些屬性值前，需要驗(yàn)證；某些屬性

的訪問控制等）。從而可以讓對(duì)象只需關(guān)注于核心邏輯，達(dá)到關(guān)注點(diǎn)分離，降

低對(duì)象復(fù)雜度等目的。

20、說一下v-slot的作用

【僅供參考】

提供具名插槽或需要接收prop的插槽。

四、Webpack/Rollup篇

1、webpack的工作原理？

【僅供參考】

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

JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Sass,

TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)

后，Webpack還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。

2、gulp和webpack區(qū)別

【僅供參考】

gulp：是工具鏈、構(gòu)建工具，可以配合各種插件做js壓縮，css壓縮，less編

譯替代手工實(shí)現(xiàn)自動(dòng)化工作

（1）構(gòu)建工具

（2）自動(dòng)化

（3）用于：提高效率一一能夠優(yōu)化前端工作流程，提高工作效率

（4）自動(dòng)刷新頁面，雪碧圖，壓縮css、js,編譯less,檢查語法等

（5）使用gulp可以配置你需要的插件，把以前需要手工做的事情讓它幫你做

T

webpack：是文件打包工具，可以把項(xiàng)目的各種js文件、css文件等打包合并

成一個(gè)或多個(gè)文件，主要用于模塊化方案，預(yù)編譯模塊的方案

（1）打包工具

（2）模塊化識(shí)別

（3）用于：編譯模塊代碼方案

兩者不是一個(gè)工具，不具有可比性，更不沖突

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

【僅供參考】

file-loader：把文件輸出到一個(gè)文件夾中，在代碼中通過相對(duì)URL去引用輸

出的文件

url-loader：和file-loader類似，但是能在文件很小的情況下以base64的

方式把文件內(nèi)容注入到代碼中去

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

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

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

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

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

CSSo

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

4、Webpack中Loader和Plugin的區(qū)別

【僅供參考】

運(yùn)行時(shí)機(jī)1.loader運(yùn)行在編譯階段2.plugins在整個(gè)周期都起作用

使用方式Loader:1.下載2.使用Plugin:1.下載2.引用3.使用

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

【僅供參考】

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

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

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

步加載

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

合并成一個(gè)文件

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

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

是否通過

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

6、什么是模熱更新？有什么優(yōu)點(diǎn)？

【僅供參考】

模塊熱更新是webpack的一個(gè)功能，它可以使得代碼修改之后，不用刷新瀏覽

器就可以更新。

在應(yīng)用過程中替換添加刪出模塊，無需重新加載整個(gè)頁面，是高級(jí)版的自動(dòng)刷

新瀏覽器。

優(yōu)點(diǎn)：只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時(shí)間。調(diào)整樣式更加快速，幾乎相

當(dāng)于在瀏覽器中更改樣式

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

【僅供參考】

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

復(fù)用模塊。

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

塊。

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

webpack來構(gòu)建。

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

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

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

果應(yīng)該是采用ES5編寫的。并且如果ES5是經(jīng)過轉(zhuǎn)換的，請(qǐng)最好連同

SourceMap一同上傳。

Npm包大小應(yīng)該是盡量小(有些倉庫會(huì)限制包大小)

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

這樣可以避免模塊應(yīng)用者再次打包時(shí)出現(xiàn)底層模塊被重復(fù)打包的情況。

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

的模塊里。

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

【僅供參考】

entry:{

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

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

}

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

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

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

import:啟動(dòng)時(shí)需加載的模塊。

library:指定library選項(xiàng)，為當(dāng)前entry構(gòu)建——個(gè)library0

runtime:運(yùn)行時(shí)chunk的名字。如果設(shè)置了，就會(huì)創(chuàng)建一個(gè)新的運(yùn)行時(shí)

chunko在webpack5.43.0之后可將其設(shè)為false以避免一個(gè)新的運(yùn)行時(shí)

chunko

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

URL地址

9、plugin的作用

【僅供參考】

plugin是一個(gè)類，類中有一個(gè)apply()方法，主要用于Plugin的安裝，可以在

其中監(jiān)聽一些來自編譯器發(fā)出的事件，在合適的時(shí)機(jī)做一些事情。

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

【僅供參考】

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

出的所有資源（JS/CSS）

clean-webpack-plugin：重新打包自動(dòng)清空dist目錄

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

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

uglifyjs-webpack-plugin：壓縮js

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

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

11、常見Plugins

【僅供參考】

HtmlWbpackPlugin自動(dòng)在打包結(jié)束后生成html文件，并引入bundle,js

cleanwebPackPlugin打包自動(dòng)刪除上次打包文件

12、Webpack的打包過程/打包原理/構(gòu)建流程？

【僅供參考】

初始化：?jiǎn)?dòng)構(gòu)建，讀取與合并配置參數(shù)，加載plugin,實(shí)例化Compiler

編譯：從Entry出發(fā)，針對(duì)每個(gè)Module串行調(diào)用對(duì)應(yīng)的Loader去翻譯文件中

的內(nèi)容，再找到該Module依賴的Module,遞歸的進(jìn)行編譯處理

輸出：將編譯后的Module組合成Chunk,將Chunk轉(zhuǎn)換成文件，輸出到文件系

統(tǒng)中

細(xì)節(jié)：

WebpackCLI通過yargs模塊解析CLI參數(shù)，并轉(zhuǎn)化為配置對(duì)象option（單

入口：Object,多入口：Array）,調(diào)用webpack（option）創(chuàng)建compiler對(duì)

象。

如果有option,plugin,則遍歷調(diào)用plugin,apply（）來注冊(cè)plugin,

判斷是否開啟了watch,如果開啟則調(diào)用compiler,watch,否則調(diào)用

compiler,run,開始構(gòu)建。

創(chuàng)建Compilation對(duì)象來收集全部資源和信息，然后觸發(fā)make鉤子。

make階段從入口開始遞歸所有依賴，

每次遍歷時(shí)調(diào)用對(duì)應(yīng)Loader翻譯文件中內(nèi)容，然后生成AST,遍歷AST找到下

個(gè)依賴?yán)^續(xù)遞歸，

根據(jù)入口和模塊之間關(guān)系組裝chunk,輸出到dist中的一個(gè)文件內(nèi)。

在以上過程中，webpack會(huì)在特定的時(shí)間點(diǎn)（使用tapable模塊）廣播特定的

事件，插件監(jiān)聽事件并執(zhí)行相應(yīng)的邏輯，并且插件可以調(diào)用webpack提供的

api改變webpack的運(yùn)行結(jié)果

13、webpack是解決什么問題而生的？

【僅供參考】

如果像以前開發(fā)時(shí)一個(gè)html文件可能會(huì)引用十幾個(gè)js文件,而且順序還不能

亂，因?yàn)樗鼈兇嬖谝蕾囮P(guān)系，同時(shí)對(duì)于ES6+等新的語法，less,sass等CSS預(yù)

處理都不能很好的解決……，此時(shí)就需要一個(gè)處理這些問題的工具。

14、loader的作用

【僅供參考】

webpack中的loader是一個(gè)函數(shù)，主要為了實(shí)現(xiàn)源碼的轉(zhuǎn)換，所以loader函

數(shù)會(huì)以源碼作為參數(shù)，比如，將ES6轉(zhuǎn)換為ES5,將less轉(zhuǎn)換為css,然后再

將css轉(zhuǎn)換為js,以便能嵌入到html文件中。

15、Plugin（插件）的作用是什么?

【僅供參考】

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

Webpack帶來了很大的靈活性。

Webpack是通過plugins屬性來配置需要使用的插件列表的。plugins屬性是

一個(gè)數(shù)組，里面的每一項(xiàng)都是插件的一個(gè)實(shí)例，在實(shí)例化一個(gè)組件時(shí)可以通過

構(gòu)造函數(shù)傳入這個(gè)組件支持的配置屬性。

16、webpack的構(gòu)建流程是什么?從讀取配置到輸出文件這個(gè)過程盡量說全。

【僅供參考】

Webpack的運(yùn)行流程是一個(gè)串行的過程，從啟動(dòng)到結(jié)束會(huì)依次執(zhí)行以下流程：

初始化參數(shù)：從配置文件和Shell語句中讀取與合并參數(shù)，得出最終的參數(shù)；

開始編譯：用上一步得到的參數(shù)初始化Compiler對(duì)象，加載所有配置的插

件，執(zhí)行對(duì)象的run方法開始執(zhí)行編譯；

確定入口：根據(jù)配置中的entry找出所有的入口文件；

編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的Loader對(duì)模塊進(jìn)行翻譯，再找

出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟

的處理；

完成模塊編譯：在經(jīng)過第4步使用Loader翻譯完所有模塊后，得到了每個(gè)模

塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；

輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的

Chunk,再把每個(gè)Chunk轉(zhuǎn)換成一個(gè)單獨(dú)的文件加入到輸出列表，這步是可以

修改輸出內(nèi)容的最后機(jī)會(huì)；

輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件

內(nèi)容寫入到文件系統(tǒng)。

在以上過程中，Webpack會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件，插件在監(jiān)聽到

感興趣的事件后會(huì)執(zhí)行特定的邏輯，并且插件可以調(diào)用Webpack提供的API

改變Webpack的運(yùn)行結(jié)果。

17、babel相關(guān)：polyfill以及runtime區(qū)別，ESstage含義，preset-

env作用等等

【僅供參考】

polyfill以及runtime區(qū)別

babel-polyfill的原理是當(dāng)運(yùn)行環(huán)境中并沒有實(shí)現(xiàn)的一些方法，babel-

polyfill會(huì)做兼容。

babel-runtime它是將es6編譯成es5去執(zhí)行。我們使用es6的語法來編寫，

最終會(huì)通過babel-runtime編譯成es5.也就是說，不管瀏覽器是否支持ES6,

只要是ES6的語法，它都會(huì)進(jìn)行轉(zhuǎn)碼成ES5.所以就有很多冗余的代碼。

babel-polyfill它是通過向全局對(duì)象和內(nèi)置對(duì)象的prototype上添加方法來實(shí)

現(xiàn)的。比如運(yùn)行環(huán)境中不支持Array,prototype,find方法，引入polyfill,

我們就可以使用es6方法來編寫了，但是缺點(diǎn)就是會(huì)造成全局空間污染。

babel-runtime:它不會(huì)污染全局對(duì)象和內(nèi)置對(duì)象的原型，比如說我們需要

Promise,我們只需要importPromisefrom'babel-runtime/core-

js/promise'即可，這樣不僅避免污染全局對(duì)象，而且可以減少不必要的代碼。

stage-x：指處于某一階段的js語言提案

Stage0-設(shè)想(Strawman)：只是一個(gè)想法，可能有Babel插件。

Stage1-建議(Proposal)：這是值得跟進(jìn)的。

Stage2-草案(Draft)：初始規(guī)范。

Stage3-候選(Candidate)：完成規(guī)范并在瀏覽器上初步實(shí)現(xiàn)。

Stage4-完成(Finished)：將添加到下一個(gè)年度版本發(fā)布中。

18、lazyloading(模塊懶加載)

【僅供參考】

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

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

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

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

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

import(/webpackPreload:true*/ChartingLibrary?;

19>ExtractTextPlugin插件的作用

【僅供參考】

ExtractTextPlugin插件的作用是提取出JavaScript代碼里的CSS到一個(gè)單

獨(dú)的文件。

對(duì)此你可以通過插件的filename屬性，告訴插件輸出的CS