2022年前端面試寶典

2022年前端面試寶典

一、HTML/CSS篇

1、如果把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)系信息

2、請(qǐng)描述一下sessionStorage和localStorage的區(qū)別。

【僅供參考】

sessionStorage用于在本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)，這些數(shù)據(jù)只有同一個(gè)會(huì)話

中的頁面才能訪問，當(dāng)會(huì)話結(jié)束后，數(shù)據(jù)也隨之銷毀。因此sessionStorage

不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。

而localstorage用于持久化本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)

不會(huì)過期的。

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

【僅供參考】

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

間的通信

4、localStorage和cookie的區(qū)別是什么？

【僅供參考】

localStorage的概念和cookie相似，區(qū)別是localStorage是為了更大容量的

存儲(chǔ)設(shè)計(jì)的。cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新頁面時(shí)，cookie

都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬。另外，cookie還需要指定作用

域，不可以跨域調(diào)用。

除此之外，localstorage擁有setlten,getltem、removeitem、clear等

方法，cookie則需要前端開發(fā)者自己封裝setCookie和getCookie。但

cookie也是不可或缺的，因?yàn)閏ookie的作用是與服務(wù)器進(jìn)行交互，并且還是

HTP規(guī)范的一部分，而localStorage僅因?yàn)槭菫榱嗽诒镜亍按鎯?chǔ)”數(shù)據(jù)而已，

無法跨瀏覽器使用。

5、HTML5如何實(shí)現(xiàn)跨域？

【僅供參考】

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

response.setHeader("Access-Control-Allow-Origin","*")；

response.setHeader("Access-Control-Allow-Methods","POST")；

response.setHeader("Access-Control-Allow-Headers","x-requested-

with,content-type")；

6、Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別？

【僅供參考】

D0CTYPE是用來聲明文檔類型和DTD規(guī)范的。CDOCTYPEhtml＞聲明位于

HTML文檔中的第一行，不是一個(gè)HTML標(biāo)簽，處于html標(biāo)簽之前。告知瀏覽

器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)

致文檔以兼容模式呈現(xiàn)。

標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容

模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)

無法工作。

7、什么是Websql?

【僅供參考】

Websql是一個(gè)在瀏覽器客戶端的結(jié)構(gòu)關(guān)系數(shù)據(jù)庫，是瀏覽器內(nèi)的本地RDBMS

(關(guān)系型數(shù)據(jù)庫管理系統(tǒng))，可以使用SQL查詢。

8、如何進(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、使用＜1ink＞不使用@import

Javascript方面

1、將腳本放到頁面底部

2、將javascript和css從外部引入

3、壓縮javascript和css

4、刪除不需要的腳本

5、減少D0M訪問

圖片方面

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

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

3、不要在HTML中拉伸圖片

9、HTML5中如何實(shí)現(xiàn)應(yīng)用緩存？

【僅供參考】

首先，需要指定“manifest”文件，“manifest”文件幫助你定義緩存如何工

作以下是“manifest”文件的結(jié)構(gòu)。

CACHEMANTEEST

#version1.0

/demo,css

/demo,js

/demo,png

所有manifest文件都以“CACHEMANIFEST”語句開始。

#（散列標(biāo)簽）有助于提供緩存文件的版本。

manifest文件的內(nèi)容類型應(yīng)是"text/cache-manifest"。

創(chuàng)建一個(gè)緩存manifest文件后，在HTML頁面中提供manifest鏈接，代碼如

下所示。

＜htmlmanifest*'icketang.appcache”〉

第一次運(yùn)行以上文件時(shí)，它會(huì)添加到瀏覽器應(yīng)用緩存中，在服務(wù)器宕機(jī)時(shí)，頁

面從應(yīng)用緩存中獲取數(shù)據(jù)。

10、什么是SVG?

【僅供參考】

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

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

11、常見兼容性問題？

【僅供參考】

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的

*{margin:0;padding:0;}來統(tǒng)一。

Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示，

可通過加入CSS屬性-webkit-text-size-adjust:none;解決.

12、CSS中可以讓文字在垂直和水平方向上重疊的兩個(gè)屬性是什么？

【僅供參考】

垂直方向的屬性是line-height.水平方向的屬性是letter-spacing。

13、如何使英文單詞發(fā)生詞內(nèi)斷行？

【僅供參考】

輸入word-wrap:break-wordo

14^精靈圖和base64如何選擇？

【僅供參考】

精靈圖：

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

將多個(gè)圖像加載請(qǐng)求合并為一個(gè)請(qǐng)求；

弊端：

難以維護(hù)和更新；

增加內(nèi)存消耗；

base64:

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

將多個(gè)圖像加載請(qǐng)求合并為一個(gè)CSS文件請(qǐng)求；

輕松更新生成文件；

弊端：

base64編碼比原始二進(jìn)制表示大約大25%;

IE6或IE7不支持;

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

【僅供參考】

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

百分比：%

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

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

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

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

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

16、解釋浮動(dòng)及其工作原理。

【僅供參考】

浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含元素(父元素)或

另一個(gè)浮動(dòng)元素的邊框?yàn)橹?。要想使元素浮?dòng)，必須為元素設(shè)置一個(gè)寬度

(width)。雖然浮動(dòng)元素已不在文檔流中，但是它浮動(dòng)后所處的位置依然在浮

動(dòng)之前的水平方向上。

因?yàn)楦?dòng)元素不在文檔流中，所以文檔流中的塊元素表現(xiàn)得就像浮動(dòng)元素不存

在一樣，下面的元素會(huì)填補(bǔ)原來的位置。

有些元素會(huì)在浮動(dòng)元素的下方，但是這些元素的內(nèi)容并不一定會(huì)被浮動(dòng)的元素

遮蓋。當(dāng)定位內(nèi)聯(lián)元素時(shí)，要考慮浮動(dòng)元素的邊界，圍繞浮動(dòng)元素放置內(nèi)聯(lián)元

素。也可以把浮動(dòng)元素想象成被塊元素忽略的元素，而內(nèi)聯(lián)元素會(huì)關(guān)注的元

素。

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

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

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

【僅供參考】

//1.圣杯布局

<divid=，，container，，>

<divid二〃center"class二〃columrTX/div>

，，/，

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

<divid二〃right"class二〃column〃></div>

</div>

ttcontainer{

padding-left:200px;

padding-right:150px;

)

Wcontainer.column{

float:left;

}

Scenter{

width:100%;

)

#left{

width:200px;

margin-left:-100%;

position:relative;

right:200px;

)

Sright{

width:150px;

margin-right:-150px;

)

//2.雙飛翼布局

<divid二〃container,class—column”〉

<divid=z/centerzz></div>

</div>

z，，，

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

=，/，z

<divid二〃right"classcolumn></div>

Scontainer{

width:100%;

)

,column{

float:left;

)

ttcenter{

margin-left:200px;

margin-right:150px;

)

#left{

width:200px;

margin-left:-100%;

)

ttright{

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二〃columrTX/div〉

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

<divid二〃right〃class二〃column〃></div>

,column{

float:left;

}

#left{

width:lOOpx;

)

#right{

width:200px;

)

^center{

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

}

//5.浮動(dòng)

<divid二〃left"class=，，column，，X/div>

<divid二〃right〃class二〃column〃></div>

<divid二〃center〃X/div>

#left{

float:left;

width:lOOpx;

)

#right{

float:right;

width:200px;

)

#center{

margin-left:1OOpx;

margin-right:200px;

)

19、Float布局有哪些缺陷？如何清除浮動(dòng)？

【僅供參考】

使用float之后，元素跳出文檔流，容易引發(fā)父容器塌陷，最好的解決方式是

給復(fù)用器加上：：after偽類進(jìn)行清除浮動(dòng)

20、如何控制單行顯示且顯示不下顯示.??

【僅供參考】

overflow:hidden;

text-overflow:ellipsis;

white-space:no-wrap;

二、JS/ES6/TS篇

1、說幾條寫JavaScript書寫的基本規(guī)范？

【僅供參考】

代碼一定要正確縮進(jìn)，建議使用“二個(gè)或者四個(gè)空格''縮進(jìn)

語句結(jié)束使用分號(hào)；

規(guī)范定義JSON對(duì)象，補(bǔ)全雙引號(hào)

用｛｝和□聲明對(duì)象和數(shù)組

變量和函數(shù)在使用前進(jìn)行聲明

以大寫字母開頭命名構(gòu)造函數(shù)，全大寫命名常量

代碼段使用花括號(hào)｛｝包裹

還有要書寫正確的標(biāo)識(shí)標(biāo)簽

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

【僅供參考】

var存在變量提升。

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

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

3、什么是回調(diào)

【僅供參考】

回調(diào)函數(shù)是作為參數(shù)或選項(xiàng)傳遞給某個(gè)方法的普通JS函數(shù)。

它是一個(gè)函數(shù)，在另一個(gè)函數(shù)完成調(diào)用后執(zhí)行，因此稱為回調(diào)。

4、對(duì)JS的slice和splice的理解？

【僅供參考】

slice是用來截取，比如slice。，3),下標(biāo)含頭不含尾的截取，slice(l),從下

標(biāo)1開始截取到最后，slice(-2)表示截取倒數(shù)第二個(gè)開始，取到最后。返回被

提取的數(shù)組。原數(shù)組不變。

splice通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組，原數(shù)組變

化。

spilce(l,O,'a','b'),在下標(biāo)為1的位置開始刪除0個(gè)元素，追加兩個(gè)元素

'a','b',此時(shí)'a'的下標(biāo)變成1

spilced,l/a/b"),在下標(biāo)為1的位置開始刪除1個(gè)元素,追加兩個(gè)元素

'a','b',此時(shí)'a'的下標(biāo)變成1

返回被刪除的數(shù)組

5、請(qǐng)說一個(gè)pushState與replaceState兩個(gè)方法的作用與區(qū)別

【僅供參考】

作用：都是改變路由(路徑)的，路徑改變時(shí)不會(huì)請(qǐng)求服務(wù)器(除非你f5刷

新)

區(qū)別：

pushState：不會(huì)替換掉之前的歷史路徑

replaceState：會(huì)替換掉之前的歷史路徑

6、請(qǐng)說一下你常用的字符串方法(至少七個(gè))

【僅供參考】

trimO：去首尾空格

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

最大數(shù)量

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

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

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

的子串

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

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

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

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

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

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

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

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

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

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

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

valueOfO：返回原始字符串值

7、prototype和proto的關(guān)系是什么

【僅供參考】

prototype:所有函數(shù)都會(huì)有一個(gè)prototype屬性，它就是函數(shù)的原型對(duì)象

proto:所有實(shí)例對(duì)象上都會(huì)有一個(gè)proto屬性，它等同于函數(shù)的原型對(duì)象

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

【僅供參考】

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

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

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

9、用js遞歸的方式寫1到100求和？

【僅供參考】

functionadd(numl,num2){

constnum=numl+num2;

if(num2===100){

returnnum;

}else{

returnadd(num,num2+1)

)

)

varsum=add(1,2);

10、字符串截取方法substr、substring、slice三者的區(qū)別

【僅供參考】

substr(n,in)：截取的是字符串中索引為n開始的，并且截取m位

substring(n,m)：從索引為n的位置開始截取，截取到索引為m的位置但是不

包含索引為m這一項(xiàng)

slice(n,m)：和substring一樣,但是他可以支持負(fù)數(shù)索引

11、split()join()的區(qū)別

【僅供參考】

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

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

12、ajax過程？

【僅供參考】

(1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象.

(2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息.

(3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù).

(4)發(fā)送HTTP請(qǐng)求.

(5)獲取異步調(diào)用返回的數(shù)據(jù).

(6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.

13、什么是jsonp

【僅供參考】

jsonp是一種解決跨域請(qǐng)求問題的技術(shù)

不足點(diǎn)：它只能是get請(qǐng)求

14、如何阻止事件冒泡

【僅供參考】

ev.stopPropagation();

15、怎么判斷一個(gè)變量arr的話是否為數(shù)組(此題用typeof不行)？

【僅供參考】

arrinstanceofArray

arr.constructor==Array

Otype.toString.call(arr)==([ObjectArray]'

16、TypeScript的內(nèi)置類型

【僅供參考】

number、string、boolean、undefined,null、void

17、TypeScript中的類型斷言？

【僅供參考】

類型斷言可以手動(dòng)指定一個(gè)值的類型

//第一種

letemployeeCode=<number>code;

〃第二種

letemployeeCode=codeasnumber

18、如何理解TypeScript中的類

【僅供參考】

TypeScript是一種面向?qū)ο蟮腏avaScript語言，支持OOP編程特性，比如

類、接口等。與Java一樣，類是用于創(chuàng)建可重用組件的基本實(shí)體。它是一組具

有公共屬性的對(duì)象。類是創(chuàng)建對(duì)象的模板或藍(lán)圖。它是一個(gè)邏輯實(shí)體。

"class”關(guān)鍵字用于在Typescript中聲明一個(gè)類。

classStudent{

studCode:number;

studName:string;

constructor(code:number,name:string){

this.studName=name;

this.studCode=code;

)

getGrade():string{

return"A+”;

)

)

類的特征：封裝、繼承、多態(tài)、抽象

19、如何從TypeScript的子類調(diào)用基類構(gòu)造函數(shù)

【僅供參考】

使用super。函數(shù)，從子類中調(diào)用父類或基類構(gòu)造函數(shù)

20>TS中的接口interface和type語句有什么區(qū)別

【僅供參考】

interfaceX{

a:number

b:string

)

typeX={

a:number

b:string

)

接口聲明總是引入指定的對(duì)象類型。接口可以extends繼承。接口創(chuàng)建一個(gè)到

處使用的新名稱。接口重名時(shí)會(huì)產(chǎn)生合并。

類型別名聲明可以為任何類型(包括基元類型、聯(lián)合類型和交集類型)引入名

稱，不能繼承，類型別名不會(huì)創(chuàng)建一個(gè)真正的名字。類型別名重名時(shí)編譯器會(huì)

拋出錯(cuò)誤

三、Vue/React篇

1、當(dāng)調(diào)用setState時(shí)，Reactrender是如何工作的

【僅供參考】

虛擬DOM渲染:當(dāng)render方法被調(diào)用時(shí)，它返回一個(gè)新的組件的虛擬DOM結(jié)

構(gòu)。當(dāng)調(diào)用setState()時(shí)，render會(huì)被再次調(diào)用，因?yàn)槟J(rèn)情況下

shouldComponentUpdate總是返回true,所以默認(rèn)情況下React是沒有優(yōu)化

的。

原生D0M渲染:React只會(huì)在虛擬DOM中修改真實(shí)DOM節(jié)點(diǎn)，而且修改的次數(shù)

非常少一一這是很棒的React特性，它優(yōu)化了真實(shí)D0M的變化，使React變得

更快。

2、描述Flux與MVC?

【僅供參考】

傳統(tǒng)的MVC模式在分離數(shù)據(jù)(Model)、UI(View和邏輯(Controller)方面工作

得很好，但是MVC架構(gòu)經(jīng)常遇到兩個(gè)主要問題：

數(shù)據(jù)流不夠清晰:跨視圖發(fā)生的級(jí)聯(lián)更新常常會(huì)導(dǎo)致混亂的事件網(wǎng)絡(luò)，難于調(diào)

試。

缺乏數(shù)據(jù)完整性:模型數(shù)據(jù)可以在任何地方發(fā)生突變，從而在整個(gè)UI中產(chǎn)生不

可預(yù)測(cè)的結(jié)果。

使用Flux模式的復(fù)雜用戶界面不再遭受級(jí)聯(lián)更新，任何給定的React組件都

能夠根據(jù)store提供的數(shù)據(jù)重建其狀態(tài)。Flux模式還通過限制對(duì)共享數(shù)據(jù)的

直接訪問來加強(qiáng)數(shù)據(jù)完整性

3、什么是受控組件？

【僅供參考】

在HTML中，表單元素如〈input＞、＜textarea＞和〈select》通常維護(hù)自己的狀

態(tài)，并根據(jù)用戶輸入進(jìn)行更新。當(dāng)用戶提交表單時(shí)，來自上述元素的值將隨表

單一起發(fā)送。

而React的工作方式則不同。包含表單的組件將跟蹤其狀態(tài)中的輸入值，并在

每次回調(diào)函數(shù)(例如onChange)觸發(fā)時(shí)重新渲染組件，因?yàn)闋顟B(tài)被更新。以這種

方式由React控制其值的輸入表單元素稱為受控組件。

4、什么是React路由

【僅供參考】

React路由是一個(gè)構(gòu)建在React之上的強(qiáng)大的路由庫，它有助于向應(yīng)用程序添

加新的屏幕和流。這使URL與網(wǎng)頁上顯示的數(shù)據(jù)保持同步。它負(fù)責(zé)維護(hù)標(biāo)準(zhǔn)化

的結(jié)構(gòu)和行為，并用于開發(fā)單頁Web應(yīng)用。React路由有一個(gè)簡(jiǎn)單的API

5^React中的合成事件是什么？

【僅供參考】

合成事件是圍繞瀏覽器原生事件充當(dāng)跨瀏覽器包裝器的對(duì)象。它們將不同瀏覽

器的行為合并為一個(gè)APE這樣做是為了確保事件在不同瀏覽器中顯示一致的

屬性。

6、react中refs是什么?

【僅供參考】

refs是提供一種訪問在render方法中創(chuàng)建D0M節(jié)點(diǎn)或者React元素的方法，

在典型的數(shù)據(jù)流中，props是父子組件交互的唯一方式，想要修改子組件，需

要使用新的props重新渲染它，某些情況下，在典型的數(shù)據(jù)流外，強(qiáng)制修改子

代，這個(gè)時(shí)候可以使用refs

我們可以在組件添加一個(gè)ref屬性來使用，該屬性是一個(gè)回調(diào)函數(shù)，接收作為

其第一個(gè)參數(shù)的底層D0M元素或組件掛載實(shí)例

input元素有一個(gè)ref屬性，他的值是一個(gè)函數(shù)，該函數(shù)接收輸入的實(shí)際D0M

元素，然后將其放在實(shí)例上，這樣就可以在handleSubmit函數(shù)內(nèi)部訪問它

經(jīng)常被誤解的只有在類組件中才能使用refs,但是refs也可以通過利用JS

中的閉包與函數(shù)組件一起使用

7、什么是ReactFiber?

【僅供參考】

Fiber是React16中新的協(xié)調(diào)引擎或重新實(shí)現(xiàn)核心算法。它的主要目標(biāo)是支

持虛擬D0M的增量渲染。ReactFiber的目標(biāo)是提高其在動(dòng)畫、布局、手勢(shì)、

暫停、中止或重用等方面的適用性，并為不同類型的更新分配優(yōu)先級(jí)，以及新

的并發(fā)原語。

ReactFiber的目標(biāo)是增強(qiáng)其在動(dòng)畫、布局和手勢(shì)等領(lǐng)域的適用性。它的主要

特性是增量渲染:能夠?qū)秩竟ぷ鞣指畛蓧K，并將其分散到多個(gè)幀中。

8、使用ReactHooks好處是啥？

【僅供參考】

Hooks是React16.8中的新添加內(nèi)容。它們?cè)试S在不編寫類的情況下使用

state和其他React特性。使用Hooks,可以從組件中提取有狀態(tài)邏輯，這樣

就可以獨(dú)立地測(cè)試和重用它。Hooks允許咱們?cè)诓桓淖兘M件層次結(jié)構(gòu)的情況下

重用有狀態(tài)邏輯，這樣在許多組件之間或與社區(qū)共享Hooks變得很容易

hooks解決了什么問題？

函數(shù)組件中可以使用類組件中的特性問題

17：React中的useState()是什么?

useState是一個(gè)內(nèi)置的ReactHook?useState(0)返回一個(gè)元組，其中第一

個(gè)參數(shù)count是計(jì)數(shù)器的當(dāng)前狀態(tài)，setCounter提供更新計(jì)數(shù)器狀態(tài)的方法。

咱們可以在任何地方使用setCounter方法更新計(jì)數(shù)狀態(tài)-在這種情況下，咱們

在setCount函數(shù)內(nèi)部使用它可以做更多的事情，使用Hooks,能夠使咱們的代

碼保持更多功能，還可以避免過多使用基于類的組件

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

改的方法

useState中修改的方法異步

借助于useEffect進(jìn)行數(shù)據(jù)的監(jiān)聽

可以自己定義Hooks的方法，方法內(nèi)部可以把邏輯返回

9、有沒有自己實(shí)現(xiàn)過相關(guān)hooks?說明一下實(shí)現(xiàn)思路？

【僅供參考】

自定義Hook是一個(gè)函數(shù)，其名稱以“use”開頭，函數(shù)內(nèi)部可以調(diào)用其他的

Hooko

10＞說一下Vue中的computed是什么，有什么用？

【僅供參考】

computed：屬性計(jì)算

11、描述一下vue在生命周期的mounted階段時(shí)，頁面是怎么樣的

【僅供參考】

mounted執(zhí)行時(shí)，數(shù)據(jù)和虛擬D0M樹已經(jīng)都加載完成,也渲染完成

12、響應(yīng)式原理(變化偵測(cè))

【僅供參考】

使用發(fā)布訂閱模式將數(shù)據(jù)劫持和模板編譯結(jié)合，實(shí)現(xiàn)雙向綁定

1、observer:封裝Object.defineProperty方法用來劫持對(duì)象屬性的

getter和setter,以此來追蹤數(shù)據(jù)變化。

2、讀取數(shù)據(jù)時(shí)觸發(fā)getter來收集依賴(Watcher)到Dep。

3、修改數(shù)據(jù)時(shí)觸發(fā)setter,并遍歷依賴列表，通知所有相關(guān)依賴

(Watcher)

4、Dep類為依賴找一個(gè)存儲(chǔ)依賴的地方，用來收集和管理依賴，在getter中

收集，在setter中通知。

5、Watcher類就是收集的依賴，實(shí)際上是一個(gè)訂閱器，Watcher會(huì)將自己的

實(shí)例賦值給window,target（全局變量）上，然后去主動(dòng)訪問屬性，觸發(fā)屬性

的getter,getter中會(huì)將此Watcher收集到Dep中,Watcher的update方法

會(huì)在Dep的通知方法中被調(diào)用，觸發(fā)更新。

6、Observer類用來將一個(gè)對(duì)象的所有屬性和子屬性都變成響應(yīng)式的，通過遞

歸調(diào)用defineReactive來實(shí)現(xiàn)。

7、由于無法偵測(cè)對(duì)象上新增/刪除屬性，所以提供$set和$deleteAPI50

13、對(duì)于vue3.0特性你有什么了解的嗎？

【僅供參考】

Vue3.0的目標(biāo)是讓Vue核心變得更小、更快、更強(qiáng)大，因此Vue3.0增加

以下這些新特性：

（1）監(jiān)測(cè)機(jī)制的改變

3.0將帶來基于代理Proxy的observer實(shí)現(xiàn)，提供全語言覆蓋的反應(yīng)性跟

蹤。這消除了Vue2當(dāng)中基于Object.defineProperty的實(shí)現(xiàn)所存在的很多

限制：

只能監(jiān)測(cè)屬性，不能監(jiān)測(cè)對(duì)象

檢測(cè)屬性的添加和刪除；

檢測(cè)數(shù)組索引和長(zhǎng)度的變更；

支持Map、SetsWeakMap和WeakSeto

新的observer還提供了以下特性：

用于創(chuàng)建observable的公開APR這為中小規(guī)模場(chǎng)景提供了簡(jiǎn)單輕量級(jí)的跨

組件狀態(tài)管理解決方案。

默認(rèn)采用惰性觀察。在2.x中，不管反應(yīng)式數(shù)據(jù)有多大，都會(huì)在啟動(dòng)時(shí)被觀察

到。如果你的數(shù)據(jù)集很大，這可能會(huì)在應(yīng)用啟動(dòng)時(shí)帶來明顯的開銷。在3.x

中，只觀察用于渲染應(yīng)用程序最初可見部分的數(shù)據(jù)。

更精確的變更通知。在2.x中，通過Vue.set強(qiáng)制添加新屬性將導(dǎo)致依賴于

該對(duì)象的watcher收到變更通知。在3.x中，只有依賴于特定屬性的

watcher才會(huì)收到通知。

不可變的observable：我們可以創(chuàng)建值的“不可變”版本（即使是嵌套屬

性），除非系統(tǒng)在內(nèi)部暫時(shí)將其“解禁”。這個(gè)機(jī)制可用于凍結(jié)prop傳遞或

Vuex狀態(tài)樹以外的變化。

更好的調(diào)試功能：我們可以使用新的renderTracked和renderTriggered鉤

子精確地跟蹤組件在什么時(shí)候以及為什么重新渲染。

（2）模板

模板方面沒有大的變更，只改了作用域插槽，2.x的機(jī)制導(dǎo)致作用域插槽變

了，父組件會(huì)重新渲染，而3.0把作用域插槽改成了函數(shù)的方式，這樣只會(huì)影

響子組件的重新渲染，提升了渲染的性能。

同時(shí)，對(duì)于render函數(shù)的方面，vue3.0也會(huì)進(jìn)行一系列更改來方便習(xí)慣直接

使用api來生成vdom。

（3）對(duì)象式的組件聲明方式

vue2.x中的組件是通過聲明的方式傳入一系列option,和TypeScript的結(jié)

合需要通過一些裝飾器的方式來做，雖然能實(shí)現(xiàn)功能，但是比較麻煩。

14、Vue模板編譯原理

【僅供參考】

模板字符串轉(zhuǎn)換成elementAST（解析器）

Vue-loader切割解析.vue文件（parseHTML按標(biāo)簽以出棧入棧形式切割（自

閉合不入棧直接處理），出棧時(shí)維護(hù)父子關(guān)系）生成AST（抽象語法樹

使用大量正則匹配開始結(jié)束標(biāo)簽，while指針定位解析位置，

對(duì)AST進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來做虛擬D0M的渲染優(yōu)化（優(yōu)化器）

在dom更新時(shí)不需diff靜態(tài)節(jié)點(diǎn)。

使用elementAST生成render函數(shù)代碼字符串（代碼生成器）

Vue-template-compiler再解析成render（可執(zhí)行函數(shù)字符串-

with（this）=>{return_c（'div'）}）,newFunction生成函數(shù)，傳遞給組件

的render

在組件渲染的時(shí)候直接調(diào)用render即可

15、談?wù)勀銓?duì)keep-alive的了解？

【僅供參考】

keep-alive是Vue內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，避免重

新渲染，其有以下特性：

一般結(jié)合路由和動(dòng)態(tài)組件一起使用，用于緩存組件；

提供include和exclude屬性，兩者都支持字符串或正則表達(dá)式，include

表示只有名稱匹配的組件會(huì)被緩存，exclude表示任何名稱匹配的組件都不會(huì)

被緩存，其中exclude的優(yōu)先級(jí)比include高；

對(duì)應(yīng)兩個(gè)鉤子函數(shù)activated和deactivated,當(dāng)組件被激活時(shí)，觸發(fā)鉤子

函數(shù)activated,當(dāng)組件被移除時(shí),觸發(fā)鉤子函數(shù)deactivatedo

16、vue常用的修飾符

【僅供參考】

stop阻止點(diǎn)擊事件冒泡。等同于JavaScript中的event.stopPropagation()

prevent防止執(zhí)行預(yù)設(shè)的行為同于JavaScript的event.preventDefault()

trim自動(dòng)過濾用戶輸入的首尾空格

number將輸出字符串轉(zhuǎn)為Number類型

enter回車鍵

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

【僅供參考】

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

18、舉例說明vue事件綁定中有哪些修飾符，分別作用是什么

【僅供參考】

stop-調(diào)用event.stopPropagation()o

prevent-調(diào)用event.preventDefault()□

capture-添加事件偵聽器時(shí)使用capture模式。

self-只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。

{keyCodekeyAlias)-只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)。

,native-監(jiān)聽組件根元素的原生事件。

once-只觸發(fā)一次回調(diào)。

left-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)。

right-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)。

middle-(2.2.0)只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)。

passive-(2.3.0)以{passive:true)模式添加偵聽器

19＞說一下v-on是什么，有什么用？

【僅供參考】

v-on：綁定事件

20、對(duì)于Vue是一套漸進(jìn)式框架的理解

【僅供參考】

主張最少，也就是弱主張，他是在vue核心庫(視圖模板引擎)的基礎(chǔ)上，去

逐步添加所需要功能(如，組件系統(tǒng)、路由、狀態(tài)機(jī)等)

vue“漸進(jìn)式”：是指先使用vue核心庫，在vue核心庫的基礎(chǔ)上，根據(jù)自己需

要再去逐漸增加功能。

Vue的核心的功能，是一個(gè)視圖模板引擎，但這不是說Vue就不能成為一個(gè)框

架。

在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過添加組件系統(tǒng)、客戶

端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個(gè)完整的框架。

更重要的是，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的

部件，不一定要全部整合在一起。

所說的“漸進(jìn)式”，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理

念。

四、Webpack/Rollup篇

1、談?wù)勀銓?duì)Webpack的理解（Webpack是什么？）

【僅供參考】

Webpack是一個(gè)模塊打包器，可以分析各個(gè)模塊的依賴關(guān)系，最終打包成

bundle靜態(tài)文件（js>css、jpg）。

webpack是一個(gè)靜態(tài)模塊打包器，當(dāng)webpack處理應(yīng)用程序時(shí)，會(huì)遞歸構(gòu)建一

個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將這些模塊打包成一

個(gè)或多個(gè)bundle。

webpack就像一條生產(chǎn)線,要經(jīng)過一系列處理流程（loader）后才能將源文件轉(zhuǎn)換

成輸出結(jié)果。這條生產(chǎn)線上的每個(gè)處理流程的職責(zé)都是單一的，多個(gè)流程之間

有存在依賴關(guān)系，只有完成當(dāng)前處理后才能交給下一個(gè)流程去處理。

插件就像是一個(gè)插入到生產(chǎn)線中的一個(gè)功能,在特定的時(shí)機(jī)對(duì)生產(chǎn)線上的資源做

處理。webpack在運(yùn)行過程中會(huì)廣播事件，插件只需要監(jiān)聽它所關(guān)心的事件，就

能加入到這條生產(chǎn)線中，去改變生產(chǎn)線的運(yùn)作。

2、理解babel-preset-env

【僅供參考】

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

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

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

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

3、怎么配置單頁應(yīng)用？怎么配置多頁應(yīng)用？

【僅供參考】

單頁應(yīng)用可以理解為webpack的標(biāo)準(zhǔn)模式，直接在entry中指定單頁應(yīng)用的入

口即可，這里不再贅述

多頁應(yīng)用的話，可以使用webpack的AutoWebPlugin來完成簡(jiǎn)單自動(dòng)化的構(gòu)

建，但是前提是項(xiàng)目的目錄結(jié)構(gòu)必須遵守他預(yù)設(shè)的規(guī)范。多頁應(yīng)用中要注意的

是：

每個(gè)頁面都有公共的代碼，可以將這些代碼抽離出來，避免重復(fù)的加載。比

如，每個(gè)頁面都引用了同一套CSS樣式表

隨著業(yè)務(wù)的不斷擴(kuò)展，頁面可能會(huì)不斷的追加，所以一定要讓入口的配置足夠

靈活，避免每次添加新頁面還需要修改構(gòu)建配置

4、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)。

5、什么是長(zhǎng)緩存？在webpack中如何做到長(zhǎng)緩存優(yōu)化？

【僅供參考】

瀏覽器在用戶訪問頁面的時(shí)候，為了加快加載速度，會(huì)對(duì)用戶訪問的靜態(tài)資源

進(jìn)行存儲(chǔ)，但是每一次代碼升級(jí)或者更新，都需要瀏覽器去下載新的代碼，最

方便和最簡(jiǎn)單的更新方式就是引入新的文件名稱。

在webpack中，可以在output給出輸出的文件制定chunkhash,并且分離經(jīng)常

更新的代碼和框架代碼，通過NameModulesPlugin或者HashedModulesPlugin

使再次打包文件名不變。

6、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ā)布中。

7、HMR熱模塊更新

【僅供參考】

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

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

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

if(module,hot){

module,hot.accept./library,js),function(){

//Dosomethingwiththeupdatedlibrarymodule…

})；

)

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í)需加載的模塊。

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

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、TreeShaking技術(shù)

【僅供參考】

從技術(shù)實(shí)現(xiàn)上來說，它是依托于ES6提供的模塊系統(tǒng)對(duì)代碼進(jìn)行靜態(tài)分析,并將

代碼中的死代碼（deadcode）移除的一種技術(shù)。因此，利用TreeShaking技術(shù)

可以很方便地實(shí)現(xiàn)我們代碼上的優(yōu)化，減少代碼體積。

□TreeShaking,從這個(gè)技術(shù)的命名十分形象，直譯過來就是“搖樹”的意

思。在去除代碼冗余的過程中，程序會(huì)從入口文件出發(fā)掃描所有的模塊依賴，

以及模塊的子依賴，然后將它們鏈接起來形成-一個(gè)“抽象語法樹"（AST）。隨

后，運(yùn)行所有代碼，查看哪些代碼是用到過的，做好標(biāo)記。最后，再將“抽象

語法樹”中沒有用到的代碼“搖落”。這樣一個(gè)過程后，就去除了沒有用到的

代碼。

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

【僅供參考】

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

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

development側(cè)重于goujiansud移除loaders,必須使用rules（在3版本的

時(shí)候loaders和rules是共存的但是到4的時(shí)候只允許使用rules）移除了

CommonsChunkPlugin（提取公共代碼），用optimization,splitChunks和

optimization.runtimeChunk來代替支持es6的方式導(dǎo)入JSON文件，并且可以

過濾無用的代碼

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

【僅供參考】

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

installedModules找是否加載過，加載過則直接返回之前的export,不會(huì)重

復(fù)加載。

12、你是如何提高webpack構(gòu)件速度的？

【僅供參考】

多入口情況下，使用CommonsChunkPlugin來提取公共代碼

通過externals配置來提取常用庫

利用DIIPlugin和DIIReferencePlugin預(yù)編譯資源模塊通過DllPlugin來對(duì)那

些我們

引用但是絕對(duì)不會(huì)修改的npm包來進(jìn)行預(yù)編譯，再通過DllReferencePlugin將

預(yù)編譯的模塊加載進(jìn)來。

使用Happypack實(shí)現(xiàn)多線程加速編譯

使用webpack-uglify-paralle來提升uglifyPlugin的壓縮速度。

原理上webpack-uglify-parallel采用了多核并行壓縮來提升壓縮速度

使用Tree-shaking和ScopeHoisting來剔除多余代碼

13、常見Plugins

【僅供參考】

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

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

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?他們是解決什么問題的？

【僅供參考】

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)境變量

16、webpack的核心概念

【僅供參考】

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

告訴webpack要使用哪個(gè)模塊作為構(gòu)建項(xiàng)目的起點(diǎn)，默認(rèn)為./src/index.js

output：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認(rèn)

為./dist

Module：模塊，在Webpack里一切皆模塊，一個(gè)模塊對(duì)應(yīng)著一個(gè)文件。

Webpack會(huì)從配置的Entry開始遞歸找出所有依賴的模塊。

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

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

Plugin：擴(kuò)展插件，在Webpack構(gòu)建流程中的特定時(shí)機(jī)會(huì)廣播出對(duì)應(yīng)的事件，

插件可以監(jiān)聽這些事件的發(fā)生，在特定時(shí)機(jī)做對(duì)應(yīng)的事情。

17、webpack打包原理

【僅供參考】

把一切都視為模塊：不管是css、JS.Image還是html都可以互相引用，通

過定義entry,js,對(duì)所有依賴的文件進(jìn)行跟蹤，將各個(gè)模塊通過loader和

plugins處理，然后打包在一起。

按需加載：打包過程中Webpack通過CodeSplitting功能將文件分為多個(gè)

chunks,還可以將重復(fù)的部分單獨(dú)提取出來作為commonChunk,從而實(shí)現(xiàn)按需

加載。把所有依賴打包成一個(gè)bundle.js文件，通過代碼分割成單元片段并按

需加載

18、ExtractTextPlugin插件的作用

【僅供參考】

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

獨(dú)的文件。

對(duì)此你可以通過插件的filename屬性，告訴插件輸出的CSS文件名稱是通過

[name][contenthash:8].css字符串模版生成的，里面的[name]代表文件名

稱，[contenthash:8]代表根據(jù)文件內(nèi)容算出的8位hash值，還有很多配置

選項(xiàng)可以在ExtractTextPlugin的主頁上查到。

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

【僅供參考】

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

以使用模塊熱更新，比傳統(tǒng)的http服務(wù)對(duì)開發(fā)更加有效。

20、有哪些常見的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中，通過D0M操作去加載

CSSo

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

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

1、談?wù)勀銓?duì)重構(gòu)的理解。

【僅供參考】

網(wǎng)站重構(gòu)是指在不改變外部行為的前提下，簡(jiǎn)化結(jié)構(gòu)、添加可讀性，且在網(wǎng)站

前端保持一致的行為。也就是說，在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化，在

擴(kuò)展的同時(shí)保持一致的UI。

對(duì)于傳統(tǒng)的網(wǎng)站來說，重構(gòu)通常包括以下方面。

把表格（table）布局改為DV+CSS。

使網(wǎng)站前端兼容現(xiàn)代瀏覽器。

對(duì)移動(dòng)平臺(tái)進(jìn)行優(yōu)化。

針對(duì)搜索引擎進(jìn)行優(yōu)化。

深層次的網(wǎng)站重構(gòu)應(yīng)該考慮以下方面。

減少代碼間的耦合

讓代碼保持彈性。

嚴(yán)格按規(guī)范編寫代碼。

設(shè)計(jì)可擴(kuò)展的API。

代替舊的框架、語言（如VB）

增強(qiáng)用戶體驗(yàn)。

對(duì)速度進(jìn)行優(yōu)化。

壓縮JavaScript、CSS、image等前端資源（通常由服務(wù)器來解決）。

優(yōu)化程序的性能（如數(shù)據(jù)讀寫）。

采用CDN來加速資源加載。

優(yōu)化JavaScriptDOM。

緩存HTTP服務(wù)器的文件。

2、哪些方法能提升移動(dòng)端CSS3動(dòng)畫體驗(yàn)？

【僅供參考】

（1）盡可能多地利用硬件能力，如使用3D變形來開啟GPU加速，例如以下代

碼。

-webkit-transform:translate3d（0,0,0）;

-moz-transform:translate3d（0,0,0）;

-ms-transform:translate3d（0,0,0）;

transform:translate3d（0,0,0）；

一個(gè)元素通過translate3d右移500X的動(dòng)畫流暢度會(huì)明顯優(yōu)于使用left屬性

實(shí)現(xiàn)的動(dòng)畫移動(dòng)，原因是CSS動(dòng)畫屬性會(huì)觸發(fā)整個(gè)頁面重排、重繪、重組。

paint通常是最耗性能的，盡可能避免使用觸發(fā)paint的CSS動(dòng)畫屬性。

如果動(dòng)畫執(zhí)行過程中有閃爍（通常發(fā)生在動(dòng)畫開始的時(shí)候），可以通過如下方式

處理。

-webkit-backface-visibility:hidden;

-moz-backface-visibility:hidden；

-ms-backface-visibility:hidden;

backface-visibility:hidden；

-webkit-perspective：1000；

-moz-perspective：1000；

-ms-perspective：1000；

perspective：1000;

（2）盡可能少使用box-shadows和gradients,它們往往嚴(yán)重影響頁面的性

能，尤其是在一個(gè)元素中同時(shí)都使用時(shí)。

（3）盡可能讓動(dòng)畫元素脫離文檔流，以減少重排，如以下代碼所示。

position:fixed；

position:absolute;

3、列舉你知道的Web性能優(yōu)化方法。

【僅供參考】

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

（1）壓縮源碼和圖片（JavaScript采用混淆壓縮，CSS進(jìn)行普通壓縮，JPG

圖片根據(jù)具體質(zhì)量壓縮為50婷70隊(duì)把PNG圖片從24色壓縮成8色以去掉一些

PNG格式信息等）。

（2）選擇合適的圖片格式（顏色數(shù)多用JPG格式，而很少使用PNG格式，如果

能通過服務(wù)器端判斷瀏覽器支持WebP就用WebP或SVG格式）。

（3）合并靜態(tài)資源（減少HTTP請(qǐng)求）

（4）把多個(gè)CSS合并為一個(gè)CSS,把圖片組合成雪碧圖。

（5）開啟服務(wù)器端的Gzip壓縮（對(duì)文本資源非常有效）。

（6）使用CDN（對(duì)公開庫共享緩存）。

（7）延長(zhǎng)靜態(tài)資源緩存時(shí)間。

（8）把CSS放在頁面頭部把JavaScript代碼放在頁面底部（這樣避免阻塞頁

面渲染而使頁面出現(xiàn)長(zhǎng)時(shí)間的空白）

4、大文件上傳斷點(diǎn)續(xù)傳

【僅供參考】

大文件上傳

前端上傳大文件時(shí)使用Blob,prototype,slice將文件切片，并發(fā)上傳多個(gè)切

片，最后發(fā)送一個(gè)合并的請(qǐng)求通知服務(wù)端合并切片

服務(wù)端接收切片并存儲(chǔ)，收到合并請(qǐng)求后使用流將切片合并到最終文件

原生XMLHttpRequest的upload,onprogress對(duì)切片上傳進(jìn)度的監(jiān)聽

使用Vue計(jì)算屬性根據(jù)每個(gè)切片的進(jìn)度算出整個(gè)文件的上傳進(jìn)度

斷點(diǎn)續(xù)傳

使用spark-md5根據(jù)文件內(nèi)容算出文件hash

通過hash可以判斷服務(wù)端是否已經(jīng)上傳該文件，從而直接提示用戶上傳成功

（秒傳）

計(jì)算hash耗時(shí)的問題，不僅可以通過web-workder,還可以參考React的

FFiber架構(gòu)，通過requestldleCallback來利用瀏覽器的空閑時(shí)間計(jì)算，也不

會(huì)卡死主線程

通過XMLHttpRequest的abort方法暫停切片的上傳

上傳前服務(wù)端返回已經(jīng)上傳的切片名，前端跳過這些切片的上傳

5、談?wù)勑阅軆?yōu)化問題。

【僅供參考】

可以在以下層面優(yōu)化性能。

緩存利用:緩存Ajax,使用CDN、外部JavaScript和CSS文件緩存，添加

Expires頭，在服務(wù)器端配置Etag,減少DNS查找等。

請(qǐng)求數(shù)量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按

需加載，靜態(tài)資源延遲加載。

請(qǐng)求帶寬：壓縮文件，開啟GZIP。

CSS代碼：避免使用CSS表達(dá)式、高級(jí)選擇器、通配選擇器。

JavaScript代碼：用散列表來優(yōu)化查找，少用全局變量，用innerHTML代替

D0M操作，減少D0M操作次數(shù)，優(yōu)化JavaScript性能，用setTimeout避免頁

面失去響應(yīng)，緩存D0M節(jié)點(diǎn)查找的結(jié)果，避免使用with（with會(huì)創(chuàng)建自己的作

用域，增加作用域鏈的長(zhǎng)度），多個(gè)變量聲明合并。

HTML代碼：避免圖片和iFrame等src屬性為空。src屬性為空，會(huì)重新加載

當(dāng)前頁面，影響速度和效率，盡量避免在HTML標(biāo)簽中寫Style屬性

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

【僅供參考】

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

（1）正確使用display屬性，display屬性會(huì)影響頁面的渲染，因此要注意

以下幾方面。

display:inline后不應(yīng)該再使用widthsheight,、margin、padding和

floato

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

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

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

（2）不濫用float,

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

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

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

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

CSS動(dòng)畫只用（-webkit-無前綴）兩種即可。

其他前綴包括-webkit-、-moz->-ms-、無前綴（Opera瀏覽器改用blink內(nèi)

核，所以-0-被淘汰）

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

也長(zhǎng)。

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

式）

（8）盡量使用CSS3動(dòng)畫。

（9）減少重繪和回流。

7、你做過哪些網(wǎng)站重構(gòu)，及性能提升方面的優(yōu)化相關(guān)工作

【僅供參考】

之前react用的classcomponent,現(xiàn)在全部轉(zhuǎn)成functioncomponent了

之前都是javascript,現(xiàn)在全部轉(zhuǎn)成typescript

ajax調(diào)用之前都寫在具體文件，現(xiàn)在都抽離在對(duì)應(yīng)的api文件

對(duì)所有的Exception都加上了handle的邏輯

websocket多并發(fā)造成頁面卡死

script腳本簡(jiǎn)化log日志

8、瀏覽器緩存優(yōu)化

【僅供參考】

為了讓瀏覽器緩存發(fā)揮最大作用，該策略盡量遵循以下五點(diǎn)就能發(fā)揮瀏覽器緩

存最大作用。

「考慮拒絕一切緩存策略」：Cache-Control:no-store

r考慮資源是否每次向服務(wù)器請(qǐng)求」：Cache-Control:no-cache

「考慮資源是否被代理服務(wù)器緩存」：Cache-Control:public/private

［考慮資源過期時(shí)間」:Expires:t/Cache-Control:max-age=t,s-maxage=t

「考慮協(xié)商緩存」：Last-Modified/Etag

緩存策略通過設(shè)置HTTP報(bào)文實(shí)現(xiàn)，在形式上分為**「強(qiáng)緩存/強(qiáng)制緩存」和

「協(xié)商緩存/對(duì)比緩存」**。為了方便對(duì)比，筆者將某些細(xì)節(jié)使用圖例展示，相

信你有更好的理解。

整個(gè)緩存策略機(jī)制很明了，先走強(qiáng)緩存，若命中失敗才走協(xié)商緩存。若命中強(qiáng)

緩存，直接使用強(qiáng)緩存；若未命中強(qiáng)緩存，發(fā)送請(qǐng)求到服務(wù)器檢查是否命中協(xié)

商緩存；若命中協(xié)商緩存，服務(wù)器返回304通知瀏覽器使用本地緩存，否則返

回最新資源。

有兩種較常用的應(yīng)用場(chǎng)景值得使用緩存策略一試，當(dāng)然更多應(yīng)用場(chǎng)景都可根據(jù)

項(xiàng)目需求制定。

「頻繁變動(dòng)資源」：設(shè)置Cache