2023年前端面經(jīng)(大廠面試必備)

2023年前端面經(jīng)（大廠面試必備）（一）

一、HTML/CSS篇

1、標(biāo)簽上title與alt屬性的區(qū)別是什么？

【僅供參考】

alt是給搜索引擎識別，在圖像無法顯示時的替代文本；

title是關(guān)于元素的注釋信息，主要是給用戶解讀。

當(dāng)鼠標(biāo)放到文字或是圖片上時有title文字顯示。（因為IE不標(biāo)準(zhǔn)）在IE

瀏覽器中alt起到了title的作用，變成文字提示。

在定義img對象時，將alt和title屬性寫全，可以保證在各種瀏覽器中都

能正常使用。

2、Canvas和SvG的區(qū)別是什么？

【僅供參考】

兩者的區(qū)別如下：

（1）一旦Canvas繪制完成將不能訪問像素或操作它；任何使用SVG繪制的形

狀都能被記憶和操作，可以被瀏覽器再次顯示。

（2）Canvas對繪制動畫和游戲非常有利；SVG對創(chuàng)建圖形（如CAD）非常有

利。

（3）因為不需要記住以后事情，所以Canvas運(yùn)行更快；因為為了之后的操

作，SVG需要記錄坐標(biāo)，所以運(yùn)行比較緩慢。

（4）在Canvas中不能為繪制對象綁定相關(guān)事件；在SVG中可以為繪制對象綁

定相關(guān)事件。

（5）Canvas繪制出的是位圖，因此與分辨率有關(guān)；SvG繪制出的是矢量圖，因

此與分辨率無關(guān)。

3、哪些瀏覽器支持HTML5?

【僅供參考】

幾乎所有的瀏覽器（如Safari、Chrome、Firefox、Opera、IE）都支持

HTML5

4、如何使用Canvas和HTML5中的SVG畫一個矩形？

【僅供參考】

使用SVG繪制矩形的代碼如下：

<svgxmlns=http://www.w3.org/2000/svgversion="l.1”>

<rectstyle=/，fill:rgb(255,100,0)；"height=200"width="400"X/rect>

</svg>

使用Canvas繪制矩形的代碼如下。

<canvasid="myCanvas"widlh=500"height="500"X/canvas>

varcanvas=document.getElementByld('mycanvas')；

varctx=canvas.getContext('2d')；

ctx.rect(100,100,300,200)；

ctxfillstyle='pink'

ctx.fill()

5、HTML5中的應(yīng)用緩存是什么？

【僅供參考】

HTML5應(yīng)用緩存的最終目的是幫助用戶離線瀏覽頁面。換句話說，如果網(wǎng)絡(luò)連

接不可用，打開的頁面就來自瀏覽器緩存，離線應(yīng)用緩存可以幫助用戶達(dá)到這

個目的。

應(yīng)用緩存可以幫助用戶指定哪些文件需要緩存，哪些不需要

6、HTML5標(biāo)準(zhǔn)提供了哪些新的API?

【僅供參考】

HTML5提供很多新的API,包括MediaAPI、TextTrackAPI,Application

CacheAPI、UserInteractionAPI>DataTransferAPI、CommandAPI、

ConstraintionValidationAPI和HistoryAPI

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

【僅供參考】

D0CTYPE是用來聲明文檔類型和DTD規(guī)范的。<!DOCTYPEhtml>聲明位于

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

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

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

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

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

無法工作。

8、如何區(qū)另(JHTML和HTML5?

【僅供參考】

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

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

【僅供參考】

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

間的通信

10、解釋浮動及其工作原理。

【僅供參考】

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

另一個浮動元素的邊框為止。要想使元素浮動，必須為元素設(shè)置一個寬度

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

動之前的水平方向上。

因為浮動元素不在文檔流中，所以文檔流中的塊元素表現(xiàn)得就像浮動元素不存

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

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

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

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

素。

11、畫一條0.5px的直線？

【僅供參考】

考查的是css3的transform

height:Ipx;

transform:scale(0.5);

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

【僅供參考】

//1.圣杯布局

<divid="container”〉

<divid="center"class="column“〉〈/div>

<divid="left"class="columrT〉〈/div>

<divid="righl"class=，，column/，X/div>

</div>

^container{

padding-left:200px;

padding-right:150px;

)

ttcontainer.column{

float:left;

)

ttcenter{

width:100%;

)

#left{

width:200px;

margin-left:-100%;

position:relative;

right:200px;

)

Sright{

width:150px;

margin-right:-150px;

)

//2.雙飛翼布局

<divid二〃container,class二〃column”)

<divid="center〃></div>

</div>

<divid二〃left"class二〃columrTX/div〉

<divid二〃right,class=，，column/z></div>

Scontainer{

width:100%;

)

,column{

float:left;

)

ttcenter{

margin-left:200px;

margin-right:150px;

)

#left{

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=z，column，，X/div>

<divid二〃center"class=，，columnz，></div>

<divid二〃right,class=，，columnz，></div>

.column{

float:left;

)

#left{

width:lOOpx;

)

Sright{

width:200px;

)

ttcenter{

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

//5.浮動

<divid="left"class="columrT>〈/div>

<divid="right"class=，，column，，X/div>

<divid="center"></div>

#left{

float:left;

width:lOOpx;

)

Wright{

float:right;

width:200px;

)

#center{

margin-left:lOOpx;

margin-right:200px;

)

13、精靈圖和base64如何選擇？

【僅供參考】

精靈圖：

優(yōu)點：

將多個圖像加載請求合并為一個請求；

弊端：

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

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

base64:

優(yōu)點：

將多個圖像加載請求合并為一個CSS文件請求;

輕松更新生成文件；

弊端：

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

IE6或IE7不支持；

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

【僅供參考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

}

/*方法2*/

.border{

border-image:url(border,png)

)

/*方法3*/

.border{

box-shadow:000Ipx#000;

)

15、CSS優(yōu)化、提高性能的方法有哪些？

【僅供參考】

多個css合并，盡量減少HTTP請求

CSS雪碧圖

抽象提取公共樣式，減少代碼量

選擇器優(yōu)化嵌套，盡量避免層級過深(用'>‘替換'')

屬性值為0時，不加單位

壓縮CSS代碼

避免使用CSS表達(dá)式，它們要計算成千上萬次并且可能會對你頁面的性能產(chǎn)生

影響。

16、vertical-align什么時候生效

【僅供參考】

父元素(iniine-block\block)必須含有l(wèi)ine-height(inline元素有無皆

可),子元素中的(inline-block/inline元素)vertical-align才能起作用

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

子元素居中對齊父元素

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

【僅供參考】

overflow:hidden;

text-overflow:ellipsis;

white-space:no-wrap;

18、常見兼容性問題？

【僅供參考】

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

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

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

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

19、如何讓文字換行

【僅供參考】

word-wrap,word-break,white-space都可以做至U

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-width限制，效果一樣。

〈divstyle二〃border:Ipxsolidred;width:200px;height:200px;

display:flex;“〉

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

word;〃>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

〈divstyle二〃min-width:lOOpx;border:Ipxsolidgreenz，>sss</div>

</div>

〈divstyle二〃border:Ipxsolidred;width:200px;height:200px;

display:flex;，,>

<divstyle=z，flex:1;word-break:break-

word;”〉dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

dddddd</div>

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

</div>

20、文字和圖片放在一起，為什么無法底部對齊

【僅供參考】

因為img也相當(dāng)于一個inline的元素，inline就要遵守行高的構(gòu)成，它會

按照base基線對齊，基線對齊的話那么它就會和底線間有一個縫隙。

對于img,因為它會遵守文字對齊方案，那么就把圖片的對齊方式修改為

vertical-align:bottom?；蛘咦屗鹍isplay:block,這樣圖片雖然會換行，

但是沒有間隙了

二、JS/ES6/TS篇

1、JSON的了解？

【僅供參考】

JSON(JavaScriptObjectNotation)是一種輕量級的數(shù)據(jù)交換格式。

它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單，易于讀寫，占用帶寬小

{'age':'12','name':'back'}

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

【僅供參考】

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

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

3、async/await

【僅供參考】

async是一個通過異步執(zhí)行并隱式返回Promise作為結(jié)果的函數(shù)。是

Generator函數(shù)的語法糖，并對Generator函數(shù)進(jìn)行了改進(jìn)。

改進(jìn)：

內(nèi)置執(zhí)行器，無需手動執(zhí)行nextO方法。

更好的語義

更廣的適用性：co模塊約定，yield命令后面只能是Thunk函數(shù)或Promise

對象，而async函數(shù)的await命令后面，可以是Promise對象和原始類型的值

（數(shù)值、字符串和布爾值，但這時會自動轉(zhuǎn)成立即resolved的Promise對

象）。

返回值是Promise,比Generator函數(shù)返回的Iterator對象方便，可以直接

使用then（）方法進(jìn)行調(diào)用。

async隱式返回Promise作為結(jié)果的函數(shù)，那么可以簡單理解為，await后面

的函數(shù)執(zhí)行完畢時，await會產(chǎn)生一個微任務(wù)（Promise.then是微任務(wù)）。

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

【僅供參考】

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

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

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

【僅供參考】

作用：都是改變路由（路徑）的，路徑改變時不會請求服務(wù)器（除非你f5刷

新）

區(qū)別：

pushState：不會替換掉之前的歷史路徑

replaceState：會替換掉之前的歷史路徑

6、什么是回調(diào)地獄

【僅供參考】

一個異步請求套著一個異步請求，一個異步請求依賴于另一個的執(zhí)行結(jié)果，使

用回調(diào)的方式相互嵌套。

Promise解決了這個問題

async/wait在Promise的基礎(chǔ)上優(yōu)化，同步寫法，異步執(zhí)行，使代碼看起來更

簡潔。

7、HTML5的form如何關(guān)閉自動完成功能？

【僅供參考】

將不想要自動完成的form或input設(shè)置為autocomplete=off

8、this指向的各種情況都有什么？

【僅供參考】

全局作用域中的函數(shù)：非嚴(yán)格模式下其內(nèi)部this指向window

對象內(nèi)部的函數(shù)：其內(nèi)部Ihis指向?qū)ο蟊旧恚?/p>

構(gòu)造函數(shù)：其內(nèi)部this指向生成的實例：

由apply、call、bind改造的函數(shù)：其this指向第一個參數(shù)：

箭頭函數(shù)：箭頭函數(shù)沒有自己的this,看其外層的是否有函數(shù)，如果有，外層

函數(shù)的this就是內(nèi)部箭頭函數(shù)的this,如果沒有，則this是window。(函數(shù)

定義時的this,而不是調(diào)用時this)

9、callee與call與caller的區(qū)別：

【僅供參考】

callee是arguments上面的屬性，表示當(dāng)前正在執(zhí)行的函數(shù)

call改變函數(shù)調(diào)用時里邊this的指向

caller是函數(shù)上的一個屬性,它指向當(dāng)前函數(shù)外一層函數(shù)，沒有外一層函數(shù)，

則為null

10、JSONP的工作原理

【僅供參考】

jsonp是一種跨域通信的手段，它的原理其實很簡單：

首先是利用script標(biāo)簽的src屬性來實現(xiàn)跨域。

通過將前端方法作為參數(shù)傳遞到服務(wù)器端，然后由服務(wù)器端注入?yún)?shù)之后再返

回，實現(xiàn)服務(wù)器端向客戶端通信。

由于使用script標(biāo)簽的src屬性，因此只支持get方法

封裝一個簡單的JSONP

(function(global){

varid=0,

container=document.getElementsByTagName("head")[0];

functionjsonp(options){

if(ioptions||!options,url)return;

varscriptNode=document.createElement("script"),

data=options,data|{},

url=options,url,

callback=options,callback,

fnName="jsonp"+id++;

//添加回調(diào)函數(shù)

data["callback"]=fnName;

//拼接url

varparams=[];

for(varkeyindata){

params.push(encodeURIComponent(key)++

encodeURIComponent(data[key]));

)

url=url.indexOf(，z?z，)>0?(url+〃&〃):(url+〃？〃)；

url十=params,join(〃&〃)；

scriptNode.src=url;

//傳遞的是一個匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個全局方法

global[fnName]=function(ret){

callback&&callback(ret);

container.removeChiId(scriptNode);

deleteglobal[fnName];

)

//出錯處理

scriptNode.onerror=function(){

callback&&callback({error：z，errorz/});

container.removeChild(scriptNode);

global[fnName]&&deleteglobal[fnName];

)

scriptNode.type=，/text/javascript^;

container.appendChiId(scriptNode)

)

global,jsonp=jsonp;

})(this);

調(diào)用

jsonp({

url:〃www.example,com”,

data:{id:1},

callback:function(ret)

console,log(ret);

11、請說出以下flag的結(jié)果？為什么？

【僅供參考】

functionshow(){}

functiongetName(){return'牛夫人'

varflag=show()||getName0

答案：flag值為'牛夫人'

解釋：1.函數(shù)都會有一個默認(rèn)的返回值undefined

邏輯或如果第一個值成立就直接返回第一個值，否則直接返回第二個值

12、javascript的typeof返回哪些數(shù)據(jù)類型（至少六個）檢測類型如下：

【僅供參考】

string、number>boolean、undefined、object、function、

symbol（ES6之后新增的類型）

13、請解釋一下什么是重排與重繪？

【僅供參考】

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

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

窗口尺寸改變等等

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

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

14、說一下元素節(jié)點、文本節(jié)點、屬性節(jié)點的nodeType、nodeName、

nodeValue分別是什么

【僅供參考】

nodeType（節(jié)點類型）nodeName（節(jié)點名稱）nodeValue（節(jié)點的值）

元素節(jié)點：1元素標(biāo)簽名null（沒有值）

屬性節(jié)點：2屬性名屬性值

文本節(jié)點：3text節(jié)點內(nèi)容

15、對JS的slice和splice的理解？

【僅供參考】

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

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

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

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

化。

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

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

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

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

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

16、請說出以下結(jié)果輸出什么？為什么？

【僅供參考】

for(vari=0;i<5;i++){

setTimeout(function(){

console,log(i)

},0)

)

答案：5個5

解釋：異步代碼需要等同步代碼先執(zhí)行，所以當(dāng)異步定時器執(zhí)行時，

同步的for循環(huán)已經(jīng)循環(huán)完畢

17、對JS的apply,call,bind的理解？

【僅供參考】

bind是返回對應(yīng)函數(shù)，便于稍后調(diào)用；apply.call則是立即調(diào)用。

call和apply都是為了改變某個函數(shù)運(yùn)行時的上下文(context)而存在的，

換句話說，就是為了改變函數(shù)體內(nèi)部this的指向。

JavaScript的一大特點是，函數(shù)存在「定義時上下文」和「運(yùn)行時上下文」以

及「上下文是可以改變的」這樣的概念。

functionfruits(){}

fruits,prototype={

color:"red",

say:function(){

console.log(，，Mycoloris〃+this,color);

)

varapple=newfruits;

apple.say();//Mycolorisred

但是如果我們有一個對象banana={color:"yellow"},我們不想對它重新定

義say方法，那么我們可以通過call或apply用apple的say方法：

banana={

color:"yellow”

)

apple.say.call(banana);//Mycolorisyellow

apple,say.apply(banana);//Mycolorisyellow

對于apply,call二者而言，作用完全一樣，只是接受參數(shù)的方式不太一樣。

call按順序傳參，apply接收數(shù)組

func.call(this,argl,arg2);

func.apply(this,[argl,arg2])

Math.max.apply(Math,[5,458,120,-215])

Math.max.call(Math,5,458,120,-215)

bind。最簡單的用法是創(chuàng)建一個函數(shù)，使這個函數(shù)不論怎么調(diào)用都有同樣的

this值。常見的錯誤就像上面的例子一樣，將方法從對象中拿出來，然后調(diào)

用，并且希望this指向原來的對象。如果不做特殊處理，一般會丟失原來的對

象。使用bind。方法能夠很漂亮的解決這個問題：

this,num=9;

varmymodule={

num:81,

getNum:function0{

console.log(this.num);

)

)；

mymodule.getNumO;//81

vargetNum=mymodule.getNum;

getNumO;//9,因為在這個例子中，"this”指向全局對象

varboundGetNum=getNum.bind(mymodule);

boundGetNumO;//81

MDN的解釋是：bind。方法會創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個綁

定函數(shù)時，綁定函數(shù)會以創(chuàng)建它時傳入bind。方法的第一個參數(shù)作為this,

傳入bindO方法的第二個以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時本身的參數(shù)按

照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。

varfoo={

bar:1,

eventBind:function(){

$('.someClass().onCclick,,function(event){

/*Actontheevent*/

console,log(this,bar);//I

//如果不用bind,this將指向?qū)?yīng)class的那個元素對象

}.bind(this));

)

)

(functionfn(a,b,c){

returna+b+c;

}).bind(null,10,20)(5)

//35

//轉(zhuǎn)成了一個新函數(shù),a和b已經(jīng)和10,20綁定了，5傳遞給了這個新函數(shù)的剩

余參數(shù)

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

【僅供參考】

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

19、Omit類型有什么作用？

【僅供參考】

Omit是實用程序類型的一種形式，它促進(jìn)了常見的類型轉(zhuǎn)換。Omit允許你通過

傳遞電流Type并選擇Keys在新類型中省略來構(gòu)造類型。

0mit<Type,Keys>

20、Promise中reject和catch處理上有什么區(qū)別

【僅供參考】

reject是用來拋出異常，catch是用來處理異常

reject是Promise的方法，而catch是Promise實例的方法

reject后的東西，一定會進(jìn)入then中的第二個回調(diào)，如果then中沒有寫第二

個回調(diào)，則進(jìn)入catch

網(wǎng)絡(luò)異常(比如斷網(wǎng))，會直接進(jìn)入catch而不會進(jìn)入then的第二個回調(diào)

三、Vue/React篇

1、什么是ReactFiber?

【僅供參考】

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

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

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

的并發(fā)原語。

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

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

2、受控組件和非受控組件區(qū)別是啥？

【僅供參考】

受控組件是React控制中的組件，并且是表單數(shù)據(jù)真實的唯一來源。

非受控組件是由DOM處理表單數(shù)據(jù)的地方，而不是在React組件中。

盡管非受控組件通常更易于實現(xiàn)，因為只需使用refs即可從DOM中獲取值，

但通常建議優(yōu)先選擇受控制的組件，而不是非受控制的組件。

這樣做的主要原因是受控組件支持即時字段驗證，允許有條件地禁用/啟用按

鈕，強(qiáng)制輸入格式

3、在構(gòu)造函數(shù)調(diào)用super并將props作為參數(shù)傳入的作用是啥？

【僅供參考】

在調(diào)用super()方法之前，子類構(gòu)造函數(shù)無法使用this引用，ES6子類也是

如此。將props參數(shù)傳遞給super()調(diào)用的主要原因是在子構(gòu)造函數(shù)中能夠

通過this,props來獲取傳入的propso

props的行為只有在構(gòu)造函數(shù)中是不同的，在構(gòu)造函數(shù)之外也是一樣的

4、說一下vm.$mount()的作用

【僅供參考】

手動地掛載一個未掛載的實例

5、說一下v-bind是什么，有什么用？

【僅供參考】

v-bind：綁定屬性

6、虛擬DOM的優(yōu)缺點？

【僅供參考】

優(yōu)點：

保證性能下限：框架的虛擬DOM需要適配任何上層API可能產(chǎn)生的操作，它

的一些DOM操作的實現(xiàn)必須是普適的，所以它的性能并不是最優(yōu)的；但是比起

粗暴的DOM操作性能要好很多，因此框架的虛擬DOM至少可以保證在你不需

要手動優(yōu)化的情況下，依然可以提供還不錯的性能，即保證性能的下限；

無需手動操作DOM：我們不再需要手動去操作DOM,只需要寫好View-Model

的代碼邏輯，框架會根據(jù)虛擬D0M和數(shù)據(jù)雙向綁定，幫我們以可預(yù)期的方式

更新視圖，極大提高我們的開發(fā)效率；

跨平臺：虛擬D0M本質(zhì)上是JavaScript對象，而D0M與平臺強(qiáng)相關(guān)，相比

之下虛擬D0M可以進(jìn)行更方便地跨平臺操作，例如服務(wù)器渲染、weex開發(fā)等

等。

缺點：

無法進(jìn)行極致優(yōu)化：雖然虛擬D0M+合理的優(yōu)化，足以應(yīng)對絕大部分應(yīng)用的

性能需求，但在一些性能要求極高的應(yīng)用中虛擬D0M無法進(jìn)行針對性的極致優(yōu)

化。

7、說一下Vue生命周期四個初始化階段方法

【僅供參考】

beforeCreate(){},創(chuàng)建vue之前執(zhí)行(數(shù)據(jù)和虛擬D0M樹還沒有加載完

成)

created(){},創(chuàng)建vue之前執(zhí)行(數(shù)據(jù)已經(jīng)加載好，虛擬D0M樹沒有加載完

成)

beforeMount(){},頁面渲染之前執(zhí)行(數(shù)據(jù)和虛擬DOM樹都已經(jīng)加載好，但

數(shù)據(jù)這時并沒有填充)

mounted(){},頁面渲染之后(數(shù)據(jù)已經(jīng)填充完成)

8、vue常用的修飾符

【僅供參考】

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

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

trim自動過濾用戶輸入的首尾空格

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

enter回車鍵

9、vue中key值的作用

【僅供參考】

需要使用key來給每個節(jié)點做一個唯一標(biāo)識，Diff算法就可以正確的識別此

節(jié)點，找到正確的位置區(qū)插入新的節(jié)點

所以一句話，key的作用主要是為了高效的更新虛擬DOM

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.commit('inc',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、Vue組件間通信有哪幾種方式？

【僅供參考】

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

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

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

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

間通信。

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

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

開介紹。

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

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

組件上，引用就指向組件實例

$parent/$children：訪問父/子實例

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

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

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

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

$attrs：包含了父作用域中不被prop所識別（且獲?。┑奶匦越壎ǎ╟lass

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

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

部組件。通常配合inheritAttrs選項一起使用。

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

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

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

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

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

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

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

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

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

核心就是store（倉庫）。"store”基本上就是一個容器，它包含著你的應(yīng)用

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

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

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

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

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

12、說一下v-slot的作用

【僅供參考】

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

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

【僅供參考】

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

14、說一下vm.$off()的作用

【僅供參考】

移除自定義事件監(jiān)聽器。

15、談?wù)勀銓WM開發(fā)模式的理解？

【僅供參考】

MVVM分為Model、View、ViewModel三者。

Model代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；

View代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；

ViewModel負(fù)責(zé)監(jiān)聽Model中數(shù)據(jù)的改變并且控制視圖的更新，處理用戶交互

操作；

Model和View并無直接關(guān)聯(lián)，而是通過ViewModel來進(jìn)行聯(lián)系的，Model和

ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系。因此當(dāng)Model中的數(shù)據(jù)改變時會觸

發(fā)View層的刷新，View中由于用戶交互操作而改變的數(shù)據(jù)也會在Model中

同步。

這種模式實現(xiàn)了Model和View的數(shù)據(jù)自動同步，因此開發(fā)者只需要專注對數(shù)

據(jù)的維護(hù)操作即可，而不需要自己操作dom?

16、vueslot是做什么的？

【僅供參考】

可以插入的槽口，比如插座的插孔。

17、$refs屬性是什么，有什么用

【僅供參考】

$refs屬性是什么：文檔說明該屬性是一個對象類型，而且是只讀的

作用：通過$refs獲取的ref屬性標(biāo)識的元素對象

18、你有對Vue項目進(jìn)行哪些優(yōu)化？

【僅供參考】

(1)代碼層面的優(yōu)化

v-if和v-show區(qū)分使用場景

computed和watch區(qū)分使用場景

v-for遍歷必須為item添加key,且避免同時使用v-if

長列表性能優(yōu)化

事件的銷毀

圖片資源懶加載

路由懶加載

第三方插件的按需引入

優(yōu)化無限列表性能

服務(wù)端渲染SSRor預(yù)渲染

(2)Webpack層面的優(yōu)化

Webpack對圖片進(jìn)行壓縮

減少ES6轉(zhuǎn)為ES5的冗余代碼

提取公共代碼

模板預(yù)編譯

提取組件的CSS

優(yōu)化SourceMap

構(gòu)建結(jié)果輸出分析

Vue項目的編譯優(yōu)化

(3)基礎(chǔ)的Web技術(shù)的優(yōu)化

開啟gzip壓縮

瀏覽器緩存

CDN的使用

使用ChromePerformance查找性能瓶頸

19、當(dāng)?shù)谝淮问褂糜嬎愕男聦傩詴r，會初始計算一次，

【僅供參考】

并且把值緩存，后面的每次調(diào)用都使用緩存值；除非改變了依賴的屬性數(shù)據(jù)

20、Vue3.0將用原生Proxy替換Object.defineProperty,為什么要替換

Object.defineProperty?

【僅供參考】

Object.defineProperty只能遍歷對象屬性進(jìn)行劫持

Proxy直接可以劫持整個對象，并返回一個新對象，我們可以只操作新的對象

達(dá)到響應(yīng)式目的

在Vue中，Object,defineProperty無法監(jiān)控到數(shù)組下標(biāo)的變化，導(dǎo)致直接通

過數(shù)組的下標(biāo)給數(shù)組設(shè)置值，不能實時響應(yīng)。

Object,defineProperty只能劫持對象的屬性，因此我們需要對每個對象的每個

屬性進(jìn)行遍歷。

四、Webpack/Rollup篇

1、lazyloading(模塊懶加載)

【僅供參考】

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

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

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

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

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

import(/webpackPreload:true*/4ChartingLibrary");

2、HMR熱模塊更新

【僅供參考】

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

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

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

if(module,hot){

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

//Dosomethingwiththeupdatedlibrarymodule---

})：

3、常用loader

【僅供參考】

css-loader讀取合并CSS文件

style-loader把CSS內(nèi)容注入到JavaScript里

sass-loader解析sass文件（安裝sass-loader,node-sass）

postcss-loader自動添加瀏覽器兼容前綴（postcss.config配置）

urlToader將文件轉(zhuǎn)換為base64URI。

vue-loeider處理vue文件。

4、webpack,rollup和parcel對比？

【僅供參考】

webpack為處理資源管理和分割代碼而生，可以包含任何類型的文件，靈活，

插件多

rollup用標(biāo)準(zhǔn)化的格式（es6）來寫代碼，通過減少死代碼（tree-shaking）

盡可能地縮小包體積

parcel超快的打包速度，多線程在多核上并發(fā)編譯，不用任何配置

webpack和rollup都需要配config文件,指明entry,output,plugin,

transformations

二者的細(xì)微區(qū)別在于：

rollup有對import/export所做的nodepolyfiIls,webpack沒有

rollup支持相對路徑，而webpack沒有，所以得使用path.resolve/path.join

兩者實現(xiàn)tree-shaking的方式也不一樣，這是個面試點，會問到，實現(xiàn)方式，

哪個體積更小更徹底，為什么

parcel則是完全開箱可用的，不用配置

5、什么是bundle,什么是chunk,什么是module

【僅供參考】

bundle：是由webpack打包出來的文件

chunk：是指webpack在進(jìn)行模塊依賴分析的時候，代碼分割出來的代碼塊

module：是開發(fā)中的單個模塊

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

env作用等等

【僅供參考】

polyfill以及runtime區(qū)別

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

polyfill會做兼容。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7、TreeShaking技術(shù)

【僅供參考】

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

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

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

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

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

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

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

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

代碼。

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

【僅供參考】

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

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

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

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

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

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

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

的處理；

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

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

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

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

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

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

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

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

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

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

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

【僅供參考】

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

說比較主流，不過一些輕量化的任務(wù)還是會用gulp來處理，比如單獨打包CSS

文件等。

grunt和gulp是基于任務(wù)和流(Task、Stream)的。

類似jQuejry,找到一個(或一類)文件，對其做一系列鏈?zhǔn)讲僮?，更新流上?/p>

數(shù)據(jù)，整條鏈?zhǔn)讲僮鳂?gòu)成了一個任務(wù)，多個任務(wù)就構(gòu)成了整個web的構(gòu)建流

程。

webpack是基于入口的。

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

Loader來處理不同的文件，用Plugin來擴(kuò)展webpack功能。

10、webpack打包原理

【僅供參考】

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

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

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

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

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

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

需加載

11、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.splilChunks和

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

過濾無用的代碼

12、什么是Tree-sharking?

【僅供參考】

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

treeshaking通過UglifyJsPlugin來進(jìn)行，css中通過purify-CSS來進(jìn)行。

13、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-midd1eware調(diào)用webpack暴露的API對代碼變化進(jìn)行監(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)用進(jìn)行l(wèi)ivereloada注

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

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

dev-server的依賴）在瀏覽器端和服務(wù)端之間建立一個websocket長連接，

將webpack編譯打包的各個階段的狀態(tài)信息告知瀏覽器端，

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

些socket消息進(jìn)行不同的操作。當(dāng)然服務(wù)端傳遞的最主要信息還是新模塊的

hash值，后面的步驟根據(jù)這一hash值來進(jìn)行模塊熱替換。

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

更模塊操作，而把這些工作又交回給了webpack,webpack/hot/dev-server的

工作就是根據(jù)webpack-dev-server/client傳給它的信息以及dev-server的

配置決定是刷新瀏覽器呢還是進(jìn)行模塊熱更新。當(dāng)然如果僅僅是刷新瀏覽器，

也就沒有后面那些步驟了。HotModuleReplacement.runtime是客戶端HMR的

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

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

json,該json包含了所有要更新的模塊的hash值，獲取到更新列表后，該

模塊再次通過jsonp請求，獲取到最新的模塊代碼。

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

舊模塊進(jìn)行對比，決定是否更新模塊，在決定更新模塊后，檢查模塊之間的依

賴關(guān)系，更新模塊的同時更新模塊間的依賴引用。最后一步，當(dāng)HMR失敗后，

回退到livereload操作，也就是進(jìn)行瀏覽器刷新來獲取最新打包代碼。

14、loader的作用

【僅供參考】

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

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

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

15、plugin的作用

【僅供參考】

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

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

16、webpack的核心概念

【僅供參考】

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

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

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

為./dist

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

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

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

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

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

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

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

【僅供參考】

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

復(fù)用模塊。

你可能只是JS模塊的使用者，但是有些情況你也會去選擇上傳自己開發(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)換的，請最好連同

SourceMap一同上傳。

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

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

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

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

的模塊里。

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

【僅供參考】

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

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

復(fù)加載。

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

【僅供參考】

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

亂，因為它們存在依賴關(guān)系，同時對于ES6+等新的語法，less,sass等CSS預(yù)

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

20、什么是模熱更新？有什么優(yōu)點？

【僅供參考】

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

器就可以更新。

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

新瀏覽器。

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

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

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

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

【僅供參考】

六大指標(biāo)基本囊括大部分性能優(yōu)化細(xì)節(jié)，可作為九大策略的補(bǔ)充。筆者根據(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)化」:腳本在編碼時可