歷年前端大廠面試必備

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

一、HTML/CSS篇

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

【僅供參考】

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

CACHEMANIFEST

#version2.0

/icketang.css

/icketang.js

/icketang.png

NETWORK：

login,php

2、HTML5如何實(shí)現(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è)開放平臺(tái)，它的構(gòu)建模塊有哪些？

【僅供參考】

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

<footer>0

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

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

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

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

和聯(lián)系信息

5、請(qǐng)你說一下WebWorker和WebSocket的作用。

【僅供參考】

第1/26頁(yè)

WebWorker的作用如下：

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

回一個(gè)Worker實(shí)例

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

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

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

WebSocket的作用如下。

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

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

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

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

【僅供參考】

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

JavaScript代碼移除。

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

【僅供參考】

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

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

FALLBACK：

/home//404.html

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

【僅供參考】

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

Interaction、DataTransferAPI、CommandAPI、ConstraintValidationAPI、History

API

9、如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域

【僅供參考】

1map+area或者svg

2、border-radius

3、純js實(shí)現(xiàn)，一個(gè)點(diǎn)不在圓上的算法

10、簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

【僅供參考】

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

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

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

第2/26頁(yè)

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

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

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

【僅供參考】

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

12、什么是SVG?

【僅供參考】

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

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

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

【僅供參考】

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

.parent{

display:flex;

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

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

)

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

.parent{

height:200px;

width:200px;

text-align:center;

line-height:200px;//Sameasheight

)

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

.parent{

display:table-cell;

vertical-align:middle;

)

.child{

margin:0auto;

)

方法三：transform可以解決

第3/26頁(yè)

.parent{

position:relative;

)

.child{

position:absolute;

top:50%;

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

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

的寬高

)

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

【僅供參考】

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

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

解決方法：使用link標(biāo)簽加載CSS樣式文件。因?yàn)閘ink是順序加載的，這樣頁(yè)面會(huì)等到CSS下載

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

15、vertical-align什么時(shí)候生效

【僅供參考】

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

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

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

元素

16、我們會(huì)在寫css的時(shí)候做一些標(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頁(yè)

為了保證默認(rèn)的標(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、移動(dòng)端lpx邊框怎么設(shè)置

【僅供參考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

}

/*方法2*/

,border(

border-image:url(border.png)

)

/*方法3*/

第5/26頁(yè)

.border{

box-shadow:000lpx#000;

)

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

【僅供參考】

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

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

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

【僅供參考】

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

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

calc()函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。calc()函數(shù)支持“+”，，“*”，“/”運(yùn)算；

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

二、JS/ES6/TS篇

1、請(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替換strl

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

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

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

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

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

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

valueOfO：返回原始字符串值

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

【僅供參考】

第6/26頁(yè)

for循環(huán)中可以使用break、continue不用使用return因?yàn)樗醒h(huán)體，且不是函數(shù)；

forEach循環(huán)不能使用break、continue,可以return,因?yàn)樗鼒?zhí)行的是函數(shù)；

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

【僅供參考】

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

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

4、如何使用JS刪除cookie

【僅供參考】

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

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

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

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

【僅供參考】

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

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

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

【僅供參考】

var存在變量提升。

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

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

7、基本數(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ǔ)在堆中。

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

【僅供參考】

toStringO方法返回一個(gè)表示該對(duì)象的字符串。

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

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

第7/26頁(yè)

【僅供參考】

null值：屬于null類型，代表“空值〃，代表一個(gè)空對(duì)象指針；使用typeof運(yùn)算得到

“object”,所以你可以認(rèn)為它是一個(gè)特殊的對(duì)象值。

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

undefinedo使用typeof運(yùn)算得到"undefined",

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

【僅供參考】

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

dom.onelick=function(){}

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

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

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

【僅供參考】

壓縮css、js文件

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

外部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中實(shí)現(xiàn)繼承

【僅供參考】

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

員的類稱為派生類。

classShape{

Area:number

constructor(area:number){

this.Area=area

)

)

classCircleextendsShape{

display():void{

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

第8/26頁(yè)

varobj=newCircle(320);

obj.display()

14、TypeScript中？.，？？，！：，_,**等符號(hào)的含義？

【僅供參考】

?.可選鏈

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

undefind,null被視為false值。

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

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

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

**求累

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

【僅供參考】

1.模塊

2.類

3.接口

4.繼承

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

6.成員函數(shù)

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

【僅供參考】

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

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

interfaceinterface_name{

//字段聲明

//方法聲明

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

【僅供參考】

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

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

避免額外的性能開銷

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

【僅供參考】

lets=newSet();

第9/26頁(yè)

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

console.log(s.size);

答案：2

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

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

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

【僅供參考】

async/await的介紹：

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

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

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

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

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

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

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

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

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

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

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

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

【僅供參考】

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

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

三、Vue/ReactjB

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

【僅供參考】

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

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

drillingo

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

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

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

2、解釋Reducer的作用

【僅供參考】

第10/26頁(yè)

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

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

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

3、你對(duì)“單一事實(shí)來源”有什么理解？

【僅供參考】

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

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

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

4、這三個(gè)點(diǎn)(...)在React干嘛用的？

【僅供參考】

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

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

5、什么是虛擬D0M?

【僅供參考】

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

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

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

【僅供參考】

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

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

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

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

【僅供參考】

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

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

新渲染來響應(yīng)

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

【僅供參考】

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

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

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

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

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

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

第11/26頁(yè)

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

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

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

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

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

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

【僅供參考】

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

10、Vuex用過嗎？簡(jiǎn)單介紹一下？

【僅供參考】

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

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

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

新】

$store.state,count

mutations-方法【同步函數(shù)，只建議在這個(gè)地方修改數(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的計(jì)算屬性，可緩存】

show:function(state){}

this.$store.getters.show

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

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

【僅供參考】

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

12、組件間通訊方式

【僅供參考】

props/$emit

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

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

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

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

第12/26頁(yè)

vuex:

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

ref/$refs

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

據(jù)和方法

依賴注入(provide/inject)

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

式和data一樣。

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

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

$parent/$children

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

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

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

$attrs/$listeners

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

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

【僅供參考】

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

速。

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

oldEndlndex和newStartlndex、newEndIndex,它們會(huì)新節(jié)點(diǎn)和舊節(jié)點(diǎn)會(huì)進(jìn)行兩兩對(duì)比，即一

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

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

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

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

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

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

更準(zhǔn)確：因?yàn)閹ey就不是就地復(fù)用了，在sameNode函數(shù)a.key===b.key對(duì)比中可以避

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

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

functioncreateKeyToOldldx(children,beginldx,endldx){

leti,key

constmap={}

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

第13/26頁(yè)

key=children[i].key

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

）

returnmap

}

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

【僅供參考】

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

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

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

【僅供參考】

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

16、Vue原理總結(jié)

【僅供參考】

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

數(shù)）

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

到真實(shí)DOM節(jié)點(diǎn)上）

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

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

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

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

到對(duì)應(yīng)真實(shí)D0M節(jié)點(diǎn)進(jìn)行修改）

17、什么是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ù)雜度等目的。

第14/26頁(yè)

18、說一下v-model的作用

【僅供參考】

v-model：

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

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

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

【僅供參考】

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

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

【僅供參考】

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

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

進(jìn)行劫持。

同理無法對(duì)數(shù)組進(jìn)行劫持，但是我們?cè)谑褂肰ue框架中都知道，Vue能檢測(cè)到對(duì)象和數(shù)組(部

分方法的操作)的變化，那它是怎么實(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)測(cè)數(shù)據(jù)的變化

)

/**

*對(duì)屬性進(jìn)行遞歸遍歷

*/

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

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

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

四、Webpack/RollupM

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

【僅供參考】

第15/26頁(yè)

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

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

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

【僅供參考】

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

(JS/CSS)

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

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

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

uglifyjs-webpack-plugin：壓縮js

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

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

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中，通過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版本的時(shí)候loaders和rules是共存的但是到4的

時(shí)候只允許使用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頁(yè)

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

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

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

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

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

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

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

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

6、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)的事情。

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

【僅供參考】

Npm是目前最大的JavaScript模塊倉(cāng)庫(kù)，里面有來自全世界開發(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)該是盡量?。ㄓ行﹤}(cāng)庫(kù)會(huì)限制包大?。?/p>

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

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

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

8、Loader機(jī)制的作用是什么？

【僅供參考】

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

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

注意：

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

第17/26頁(yè)

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

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

9、什么是Tree-sharking?

【僅供參考】

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

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

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是一個(gè)類，類中有一個(gè)apply()方法，主要用于Plugin的安裝，可以在其中監(jiān)聽一些來自

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

12、lazyloading(模塊懶加載)

【僅供參考】

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

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

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

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

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

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

13、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.acceptC./library.jsJ,function0{

//Dosomethingwiththeupdatedlibrarymodule---

})；

第18/26頁(yè)

14、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è)組件支持的配置

屬性。

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

【僅供參考】

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

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

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

【僅供參考】

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

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

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

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

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

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

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

17、webpack的工作原理？

【僅供參考】

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

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

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

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

【僅供參考】

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

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

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

類似jQue:ry,找到一個(gè)(或一類)文件，對(duì)其做一系列鏈?zhǔn)讲僮?，更新流上的?shù)據(jù)，整條鏈?zhǔn)?/p>

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

webpack是基于入口的。

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

文件，用Plugin來擴(kuò)展webpack功能。

19、sourceMap

第19/26頁(yè)

【僅供參考】

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

配置方式：

例如：devtool：'source-map'

加不同前綴意義：

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

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

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

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

最佳實(shí)踐：

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

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

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

【僅供參考】

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

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

在內(nèi)存中。

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

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

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

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

重新打包。當(dāng)我們?cè)谂渲梦募信渲昧薲evServer.watchContentBase為true的時(shí)候，Server

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

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

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

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

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

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

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

hash值來進(jìn)行模塊熱替換。

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

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

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

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

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

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

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

到最新的模塊代碼。

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

第20/26頁(yè)

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

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

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

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

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

【僅供參考】

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

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

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

【僅供參考】

具體方法如下。

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

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

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

(4)減少DOM節(jié)點(diǎn)。

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

(6)避免30*、40*、50*請(qǐng)求錯(cuò)誤

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

求。

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

【僅供參考】

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

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

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

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

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

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

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

「V8引擎優(yōu)化」：針對(duì)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頁(yè)

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

【僅供參考】

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

中依次單擊Product-Profile項(xiàng)可以啟動(dòng)）。

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

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

一定要使用真機(jī)，因?yàn)榇藭r(shí)模擬器在Mac上運(yùn)行，而Mac上的CPU往往比iOS設(shè)備要快。

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

【僅供參考】

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

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

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時(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、請(qǐng)說一下