歷年前端(1~5年經(jīng)驗)面試題

歷年前端（1~5年經(jīng)驗）面試題（一）

一、HTML/CSS篇

1、href與SrC區(qū)別？

【僅供參考】

href（HypertextReferenCe）指定網(wǎng)絡資源的位置，從而在當前元素或者當前

文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關(guān)系。（目的

不是為了引用資源，而是為了建立聯(lián)系，讓當前標簽能夠鏈接到目標地址。）

SrCsource（縮寫），指向外部資源的位置，指向的內(nèi)容將會應用到文檔中當前

標簽所在位置。

href與src的區(qū)別

請求資源類型不同：href指向網(wǎng)絡資源所在位置，建立和當前元素（錨點）或

當前文檔（鏈接）之間的聯(lián)系。在請求SrC資源時會將其指向的資源下載并應

用到文檔中，比如JavaScript腳本，img圖片；

作用結(jié)果不同：href用于在當前文檔和引用資源之間確立聯(lián)系；SrC用于替換

當前內(nèi)容；

瀏覽器解析方式不同：當瀏覽器解析到SrC,會暫停其他資源的下載和處理，

直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等也如此，類似于將所指向

資源應用到當前內(nèi)容。這也是為什么建議把js腳本放在底部而不是頭部的原

因。

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

【僅供參考】

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

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

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

3、行內(nèi)元素有哪些？塊級元素有哪些？空（Void）元素有那些？

【僅供參考】

定義：CSS規(guī)范規(guī)定，每個元素都有display屬性，確定該元素的類型，每個

元素都有默認的display值，如div的display默認值為“block"，則為

“塊級”元素；span默認display屬性值為"inline”，是“行內(nèi)”元素。

行內(nèi)元素有：abspanimginputselectstrong（強調(diào)的語氣）

塊級元素有：divulolIidldtddhlh2h3h4???p

空元素：

常見：brhrimginputlinkmeta

不常見：areabasecolcommandembedkeygenparamsourcetrackwbr

4、請你說一下WebWOrker和WebSoCket的作用。

【僅供參考】

WebWorker的作用如下：

(1)通過worker=newWorker(url)加載一個JaVaSCriPt文件，創(chuàng)建一個

Worker,同時返回一個Worker實例

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

(3)綁定WOrker.Onmessage接收WOrker發(fā)送過來的數(shù)據(jù)

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

WebSocket的作用如下。

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

HTML5新增的協(xié)議，WebSoCket的連接是持久的，它在客戶端和服務器之間保

持雙工連接，服務器的更新可以及時推送到客戶端，而不需要客戶端以一定的

時間間隔去輪詢。

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

【僅供參考】

應用程序緩存為應用帶來3個優(yōu)勢。

(1)離線瀏覽，讓用戶可在應用離線時(網(wǎng)絡不可用時)使用它們。

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

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

6、介紹一下你對瀏覽器內(nèi)核的理解？

【僅供參考】

主要分成兩部分：渲染引擎(IayoUtengineer或RenderingEngine)和JS引

擎。

渲染引擎：負責取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加

入CSS等)，以及計算網(wǎng)頁的顯示方式，然后渲染到用戶的屏幕上。

JS引擎則：解析和執(zhí)行Javascript來實現(xiàn)邏輯和控制DOM進行交互。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，

內(nèi)核就傾向于只指渲染引擎。

7、＜img＞的title和alt有什么區(qū)別

【僅供參考】

通常當鼠標滑動到元素上的時候顯示

alt是＜img＞的特有屬性，是圖片內(nèi)容的等價描述，用于圖片無法加載時顯示、

讀屏器閱讀圖片?？商釄D片高可訪問性，除了純裝飾圖片外都必須設置有意義

的值，搜索引擎會重點分析。

8、title與hl的區(qū)別？

【僅供參考】

title屬性沒有明確意義只表示是個標題，hl則表示層次明確的標題，對頁面

信息的抓取也有很大的影響。

9、標準盒子模型和IE（怪異）盒子模型理解多少？

【僅供參考】

box-size：COntent-boX是標準盒子模型,實際的區(qū)域是Padding+border+

Content,content區(qū)域就是設置的元素寬度，Padding和border會占用外部空

間

box-size：border-boxfr?）i?,元素的寬度為Padding+border+content,元

素設置了寬度，不會占用外部空間。

10、FIOat布局有哪些缺陷？如何清除浮動？

【僅供參考】

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

給復用器加上：：after偽類進行清除浮動

11、CSSSprite（雪碧圖，精靈圖）是什么，談談這個技術(shù)的優(yōu)缺點？

【僅供參考】

就是把很多圖標合并到一張圖上，然后根據(jù)圖片的位置（background-

PoSition）加上顯示的寬高來控制具體用哪個圖標，這樣可以減少網(wǎng)絡請求，

但是制作和使用會顯得復雜一些。

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

【僅供參考】

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

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

（width）o雖然浮動元素已不在文檔流中，但是它浮動后所處的位置依然在浮

動之前的水平方向上。

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

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

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

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

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

素。

13、哪些css屬性可以繼承？

【僅供參考】

答案：

可繼承：text-align>font、color>line-height>letter-spacing>word-

spacingstext-indent

不可繼承：borderpaddingmarginwidthheight;

14、我們會在寫CSS的時候做一些標簽選擇器的初始化樣式？為什么？比如：

【僅供參考】

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一

famiIy:"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:tteθθ;text-decoration:underline;}

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

15、移動端IPX邊框怎么設置

【僅供參考】

/*方法1*/

.border{

width:100%;

height:lpx;

background:red;

)

∕*方法2*/

.border{

border-image:url(border,png)

)

∕*方法3*/

.border{

box-shadow:000Ipx#000;

)

16、lrem%Iem、IVh、IPX各自代表的含義？

【僅供參考】

rem:rem是全部的長度都相對于根元素元素。通常做法是給html元素設置一

個字體大小，然后其他元素的長度單位就為rem。

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

Widlh∕height∕padding∕margin用em的話是相對于該元素的font-size

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

當于屏幕寬度和高度的1%，不過，處理寬度的時候%單位更合適，處理高度的

話vh單位更好。

px:PX像素(Pixel)0相對長度單位。像素PX是相對于顯示器屏幕分辨率而

言的。

17、rgba()和opacity的透明效果有什么不同？

【僅供參考】

OPaCity作用于元素以及元素內(nèi)的所有內(nèi)容(包括文字)的透明度

rgba()只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果

18、rgbaθ和OPaCity的透明效果有什么不同？

【僅供參考】

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

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

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

19、CSS中，自適應的單位都有哪些？

【僅供參考】

自適應的單位有以下幾個

百分比：%

相對于視口寬度的單位：WW

相對于視口高度的單位：Vh

相對于視口寬度或者高度（取決于哪個小）的單位：Vm

相對于父元素字體大小的單位：em

相對于根元素字體大小的單位：rem

20、CSS3新特性你能說出哪些？

【僅供參考】

新增選擇器p:nth-chiId(n){color:rgba(255,0,0,0.75)}

彈性盒模型display:flex;

多列布局column-count:5;

媒體查詢?media(max-width:480px){.box:{column-count:1;}}

個性化字體@font-face{font-family:BorderWeb;src:url(BORDERWO.eot);}

顏色透明度color:rgba(255,0,0,0.75);

圓角border-radius:5px;

漸變background:linear-gradient(red,green,blue);

陰影box-shadow:3px3px3pxrgba(0,64,128,0.3);

倒影boχ-reflect:below2px;

文字裝飾text-stroke-color:red;

文字溢出text-overflow:ellipsis;

背景效果background-size:IOOpx100px;

邊框效果border-image:url(btblue,png)010;

平滑過渡transition:all.3sease-in.Is;

動畫?keyframesanim-l{50%{border-radius:50%;}}animation:anim-1

Is;

變形transform

旋轉(zhuǎn)transform:rotate(20deg);

傾斜transform:skew(150deg,-IOdeg);

位移transform:translate(20px,20px);

縮放transform:scale(.5);

二、JS∕ES6∕TS篇

1、原生對象和宿主對象

【僅供參考】

原生對象：JS內(nèi)置的對象，比如Array,Date

宿主對象：由宿主環(huán)境決定，如果在瀏覽器運行，會有WindOW及其子對象

document,IoCation等，如果在node環(huán)境運行，則有g(shù)lobla及其子對象

2、JavaScript中如何檢測一個變量是一^zString類型？

【僅供參考】

typeof變量

變量.constructor===String

ObjeCt.prototype.toString.call(變量)〃推薦使用

3、事件隊列(宏任務微任務)

【僅供參考】

可以分為微任務(microtask)隊列和宏任務(macrotask)隊列。

微任務一般比宏任務先執(zhí)行，并且微任務隊列只有一個，宏任務隊列可能有多

個。另外我們常見的點擊和鍵盤等事件也屬于宏任務。

下面我們看一下常見宏任務和常見微任務。

常見宏任務：

SetTimeout()

setinterval()

SetImmediate()

常見微任務：

promise,then0promise,catch()

newMutaionObserver()

process.nextTick()

微任務和宏任務的本質(zhì)區(qū)別。

宏任務特征：有明確的異步任務需要執(zhí)行和回調(diào)；需要其他異步線程支持。

微任務特征：沒有明確的異步任務需要執(zhí)行，只有回調(diào)；不需要其他異步線程

支持。

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

【僅供參考】

(1)變量直接賦值時：

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

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

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

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

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

5、把＜script＞放在＜∕body＞之前和之后有什么區(qū)別？

【僅供參考】

瀏覽器會如何解析它們？

按照HTML標準，在結(jié)束后出現(xiàn)〈script〉或任何元素的開始標簽都是解析錯

雖然不符合HTML標準，但瀏覽器會自動容錯，使實際效果與寫在＜∕body＞之前

沒有區(qū)別

瀏覽器的容錯機制會忽略〈script》之前的，視作〈script〉仍在body體內(nèi)。

6、請說一下你常用的數(shù)組方法(至少七個)

【僅供參考】

Array.push()：此方法是在數(shù)組的后面添加新加元素，此方法改變了數(shù)組的長

度：

Array.pop()：此方法在數(shù)組后面刪除最后一個元素，并返回數(shù)組，此方法改變

了數(shù)組的長度：

Array,shift()：此方法在數(shù)組后面刪除第一個元素，并返回數(shù)組，此方法改變

了數(shù)組的長度：

Array.unshiftO：此方法是將一個或多個元素添加到數(shù)組的開頭，并返回新數(shù)

組的長度：

Array.isArray()：判斷一個對象是不是數(shù)組，返回的是布爾值

Array,concat()：此方法是一個可以將多個數(shù)組拼接成一個數(shù)組：

Array.toString()：把數(shù)組作為字符串返回

Array,join()：以指定字符拼接成字符串，然后返回

Array,splice：(開始位置，刪除的個數(shù)，元素)

Array,map()：此方法是將數(shù)組中的每個元素調(diào)用一個提供的函數(shù)，結(jié)果作為一

個新的數(shù)組返回，并沒有改變原來的數(shù)組

Array.forEach():此方法是將數(shù)組中的每個元素執(zhí)行傳進提供的函數(shù)，沒有返

回值，直接改變原數(shù)組，注意和map方法區(qū)分

Array,filter0：此方法是將所有元素進行判斷，將滿足條件的元素作為一個

新的數(shù)組返回

Array,every()：此方法是將所有元素進行判斷返回一個布爾值，如果所有元素

都滿足判斷條件，則返回true,否則為false：

Array,some():此方法是將所有元素進行判斷返回一個布爾值，如果存在元素

都滿足判斷條件，則返回true,若所有元素都不滿足判斷條件，則返回

false：

Array,reduce()：此方法是所有元素調(diào)用返回函數(shù)，返回值為最后結(jié)果,傳入的

值必須是函數(shù)類型：

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

【僅供參考】

for循環(huán)中可以使用break、ContinUe不用使用return因為它有循環(huán)體，且不

是函數(shù)；

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

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

【僅供參考】

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

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

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

【僅供參考】

arrinstanceofArray

arr.constructor==Array

Object,protype.toString.call(arr)==i[ObjectArray],

10、Var、let、const區(qū)別？

【僅供參考】

var存在變量提升。

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

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

11、函數(shù)聲明與函數(shù)表達式的區(qū)別？

【僅供參考】

數(shù)聲明就是直接通過function進行聲明函數(shù)，例如：functionShOW(){}可以

在聲明函數(shù)之前調(diào)用0函

12、對WEB標準以及W3C的理解與認識

【僅供參考】

標簽閉合、標簽小寫、不亂嵌套

使用外鏈CSS和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快

W3C標準使網(wǎng)站容易維護、有利于搜索引擎查找

13、TypeScript中的類型斷言？

【僅供參考】

類型斷言可以手動指定一個值的類型

//第一種

letemployeeCode=<number>code;

〃第二種

letemployeeCode=codeasnumber

14、TyPeSCriPt中？.，？？，?。?，_,**等符號的含義？

【僅供參考】

?.可選鏈

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

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

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

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

!：待會分配這個變量，ts不要擔心

**求罌

15、TypeScript的as語法是什么？

【僅供參考】

as是TyPeSCriPt中類型斷言的附加語法，引入as-語法的原因是原始語法。與

JSX沖突

letempCode:any=111;

letemployeeCode=codeasnumber;

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

【僅供參考】

枚舉會被編譯時會編譯成一個對象，可以被當作對象使用

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

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

17、TyPeSCriPt與JaVaSCriPt有什么不同

【僅供參考】

1.TypeScript支持ES6

2.它支持強類型或靜態(tài)類型、模塊、可選參數(shù)等。

3.它支持面向?qū)ο蟮木幊谈拍?，如類、接口、繼承、泛型等。

4.TypeScript有可選的參數(shù)特性。

5.它編譯代碼并在開發(fā)期間突出顯示錯誤。

6.TypeScript支持模塊。

7.TypeScript在編譯時提供了錯誤檢查功能。它將編譯代碼，如果發(fā)現(xiàn)任何

錯誤，它將在運行腳本之前突出顯示這些錯誤。

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

【僅供參考】

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

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

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

個回調(diào)，則進入CatCh

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

19、ES6的模板字符串有哪些新特性？并實現(xiàn)一個類模板字符串的功能

【僅供參考】

基本的字符串格式化。

將表達式嵌入字符串中進行拼接。

用${}來界定在ES5時我們通過反斜杠。來做多行字符串或者字符串一行行拼

接。

ES6反引號('')就能解決類模板字符串的功能

letname='web';

letage=10;

letstr='你好,${name)已經(jīng)${age}歲了‘

str=str.replace(/\$\{([}]*)?}∕g,function(){

returneval(arguments[1]);

})

COnSoIe.1Og(Str);〃你好，web已經(jīng)10歲了

20、什么時候不使用箭頭函數(shù)？說出三個或更多的例子

【僅供參考】

使用函數(shù)作為構(gòu)造函數(shù)時(箭頭函數(shù)沒有構(gòu)造函數(shù))

要在函數(shù)中使用this/arguments時，由于箭頭函數(shù)本身不具有

this/arguments,因此它們?nèi)Q于外部上下文

當想要函數(shù)被提升時（箭頭函數(shù)是匿名的）

當我們希望函數(shù)中的this指向調(diào)用這個函數(shù)的對象時，也不用箭頭函數(shù)，

因為咱們無法保證this即對象本身。

三、Vue/React篇

1、什么是ReactFiber?

【僅供參考】

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

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

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

的并發(fā)原語。

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

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

2、ReaCt中的合成事件是什么？

【僅供參考】

合成事件是圍繞瀏覽器原生事件充當跨瀏覽器包裝器的對象。它們將不同瀏覽

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

屬性。

3、如何在ReactJS的Props上應用驗證？

【僅供參考】

當應用程序在開發(fā)模式下運行時，React將自動檢查咱們在組件上設置的所有

props,以確保它們具有正確的數(shù)據(jù)類型。對于不正確的類型，開發(fā)模式下會在

控制臺中生成警告消息，而在生產(chǎn)模式中由于性能影響而禁用它。強制的

props用isRequired定義的。

下面是一組預定義的prop類型：

React.PropTypes.string

React.PropTypes.number

React.PropTypes.func

React.PropTypes.node

React.PropTypes.bool

4、為什么ReactRouterv4中使用switch關(guān)鍵字

【僅供參考】

雖然〈P〉用于封裝Router中的多個路由，當你想要僅顯示要在多個定義的路

線中呈現(xiàn)的單個路線時，可以使用“switch”關(guān)鍵字。使用時，＜switch＞標

記會按順序?qū)⒁讯x的URL與己定義的路由進行匹配。找到第一個匹配項后，

它將渲染指定的路徑。從而繞過其它路線

5、什么是高階組件？

【僅供參考】

高階組件(HOC)是接受一個組件并返回一個新組件的函數(shù)。基本上，這是一個模

式，是從React的組合特性中衍生出來的，稱其為純組件，因為它們可以接受

任何動態(tài)提供的子組件，但不會修改或復制輸入組件中的任何行為

HOC可以用于以下許多用例

代碼重用、邏輯和引導抽象

渲染劫持

state抽象和操作

props處理

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

【僅供參考】

Vue組件間通信是面試常考的知識點之一，這題有點類似于開放題，你回答出

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

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

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

間通信。

(1)props/$emit適用父子組件通信

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

開介紹。

(2)ref與$Parent/$children適用父子組件通信

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

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

Sparent/$Children：訪問父/子實例

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

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

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

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

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

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

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

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

Slisteners:包含了父作用域中的（不含.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應用程序開發(fā)的狀態(tài)管理模式。每一個Vuex應用的

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

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

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

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

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

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

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

【僅供參考】

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

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

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

8、vue.js的兩個核心是什么？

【僅供參考】

數(shù)據(jù)驅(qū)動和組件化思想

9、ObjeCt.defineProperty怎么用，三個參數(shù)？，有什么作用?。?/p>

【僅供參考】

Object.defineProperty()方法會直接在一個對象上定義一個新屬性，或者修

改一個對象的現(xiàn)有屬性，并返回此對象。

obj：需要定義屬性的對象

prop：需要定義的屬性

{}：要定義或修改的屬性描述符。

VaIUe:"18〃，//設置默認值(與get()互斥)

enumerable:true,〃這一句控制屬性可以枚舉enumerable改為true就

可以參與遍歷了默認值false

writable:true,//該屬性是否可寫默認值false(與set()互

斥)

configurable:true,//該屬性是否可被刪除默認值false

get//當有人讀取prop的時候get函數(shù)就會調(diào)用，并且返回就是sss的值

Set//當有人修改prop的時候set函數(shù)就會調(diào)用，有個參數(shù)這個參數(shù)就是

修改后的值

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

【僅供參考】

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

成)

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

成)

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

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

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

11、v-pre的作用

【僅供參考】

可以讓元素及元素的子元素不編譯解析，這樣可以加快VUe的解析速度

12、響應式原理(變化偵測)

【僅供參考】

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

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

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

2、讀取數(shù)據(jù)時觸發(fā)getter來收集依賴(WatCher)到Depo

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

(Watcher)

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

收集，在setter中通知。

5、WatCher類就是收集的依賴，實際上是一個訂閱器，WatCher會將自己的

實例賦值給WindOW.target(全局變量)上，然后去主動訪問屬性，觸發(fā)屬性

的getter,getter中會將此Watcher收集到Dep中,Watcher的update方法

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

6、Observer類用來將一個對象的所有屬性和子屬性都變成響應式的，通過遞

歸調(diào)用defIneReactive來實現(xiàn)。

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

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

【僅供參考】

v-bind：綁定屬性

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

【僅供參考】

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

15、vue中key值的作用

【僅供參考】

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

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

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

16、談談你對keep-alive的了解？

【僅供參考】

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

新渲染，其有以下特性：

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

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

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

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

對應兩個鉤子函數(shù)activated和deactivated,當組件被激活時，觸發(fā)鉤子

函數(shù)activated,當組件被移除時，觸發(fā)鉤子函數(shù)deactivated0

17、V-CIOak指令的作用

【僅供參考】

用于防止閃屏，防止頁面出現(xiàn){{}}

18、說一下你對組件的理解

【僅供參考】

對頁面某一個區(qū)域進行封裝，這個區(qū)域可以很小，也可以就是整個頁面

組件本身就是一個Vue實例對象

組件必須有且只有一個根元素

1、就是一個可復用的VUe實例，可以作用組件對頁面進行封裝，可以把頁面

的某一個區(qū)域封裝成一個組件，然后復用

封裝的區(qū)域可以就是一個標簽，也可以是整個頁面

2、組件就是一個可復用的VUe實例，則VUe中有的東西，組件中都可以使用

(比如屬性計算，監(jiān)聽，生命周期)

但是組件沒有el這個選項，并且data是一個函數(shù)

3、組件必需要有一個根元素標簽(不能有兩個)

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

【僅供參考】

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

prevent-調(diào)用event.PreventDefault()(>

capture-添加事件偵聽器時使用capture模式。

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

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

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

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

left-(2.2.0)只當點擊鼠標左鍵時觸發(fā)。

right-(2.2.0)只當點擊鼠標右鍵時觸發(fā)。

middle-(2.2.0)只當點擊鼠標中鍵時觸發(fā)。

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

20^v-model的原理？

【僅供參考】

我們在VUe項目中主要使用v-model指令在表單inpul、textarea、select

等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道v-model本質(zhì)上不過是語法糖，V-

model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

text和textarea元素使用VaIUe屬性和input事件；

checkbox和radio使用checked屬性和change事件；

select字段將value作為prop并將change作為事件。

以input表單元素為例：

<inputv-model=，something,>

相當于

<inputv-bind:Value=zzSomethingzzv-on:input=,zsomething=

$event.target,valuez,>

如果在自定義組件中，v-model默認會利用名為value的prop和名為input

的事件，如下所示：

父組件：

<ModelChildv-model=z,messagezz><∕ModelChild>

子組件：

<div>{{value}}<∕div>

props:{

value:String

),

methods:{

testl(){

this.$emit(,input,,‘小紅')

),

},

四、WebPaCk/RoIlup篇

1、webpack,rollup和parcel對比？

【僅供參考】

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

插件多

rollup用標準化的格式(es6)來寫代碼，通過減少死代碼(tree-shaking)

盡可能地縮小包體積

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

WebPaCk和rollup都需要配COnfig文件,指明entry,output,plugin,

transformations

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

rollup有對import/eXPort所做的nodepolyfills,WebPaCk沒有

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

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

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

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

2、WebPaCk的基本功能有哪些？

【僅供參考】

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

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

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

步加載

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

合并成一個文件

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

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

是否通過

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

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

【僅供參考】

初始化：啟動構(gòu)建，讀取與合并配置參數(shù)，加載PlUgin,實例化ComPiIer

編譯：從Entry出發(fā)，針對每個MOdUIe串行調(diào)用對應的Loader去翻譯文件中

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

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

統(tǒng)中

細節(jié)：

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

入口：Object,多入口：Array),調(diào)用webpack(option)創(chuàng)建compiIer對

象。

如果有option,plugin,則遍歷調(diào)用PlUgin.apply()來注冊plugin,

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

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

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

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

每次遍歷時調(diào)用對應LOader翻譯文件中內(nèi)容，然后生成AST,遍歷AST找到下

個依賴繼續(xù)遞歸，

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

在以上過程中，WebPaCk會在特定的時間點(使用tapable模塊)廣播特定的

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

api改變WebPaCk的運行結(jié)果

4、WebPaCk的作用是什么，談談你對它的理解？

【僅供參考】

現(xiàn)在的前端網(wǎng)頁功能豐富，特別是SPA(singlepageWebapplication單頁

應用)技術(shù)流行后，JaVaSCriPt的復雜度增加和需要一大堆依賴包，還需要解

決Scss,Less……新增樣式的擴展寫法的編譯工作。

所以現(xiàn)代化的前端已經(jīng)完全依賴于webpack的輔助了。

現(xiàn)在最流行的三個前端框架，可以說和WebPaCk已經(jīng)緊密相連，框架官方都推

出了和自身框架依賴的webpack構(gòu)建工具。

react.js+WebPack

vue.js+WebPack

AngluarJS+WebPack

5、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???

})；

)

6、webpack的工作原理？

【僅供參考】

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

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

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

后，WebPaCk還肩負起了優(yōu)化項目的責任。

7、有哪些常見的PIUgin?他們是解決什么問題的?

【僅供參考】

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

出的所有資源（JS/CSS）

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

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

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

UgIifyjS-WebPaCk-PlUgin：壓縮js

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

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

8、常見PIUginS

【僅供參考】

HtnilWbpackPlugin自動在打包結(jié)束后生成html文件，并引入bundle.js

CIeanWebPaCkPlUgin打包自動刪除上次打包文件

9、前端為什么要進行打包和構(gòu)建？

【僅供參考】

代碼層面：

體積更?。═ree-shaking>壓縮、合并），加載更快

編譯高級語言和語法（TSsES6、模塊化、scss）

兼容性和錯誤檢查（polyfill,postcss,eslint）

研發(fā)流程層面：

統(tǒng)一、高效的開發(fā)環(huán)境

統(tǒng)一的構(gòu)建流程和產(chǎn)出標準

集成公司構(gòu)建規(guī)范（提測、上線）

10>webpack的核心概念

【僅供參考】

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

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

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

為./dist

MOdUIe：模塊，在Webpack里一切皆模塊，一個模塊對應著一個文件。

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

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

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

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

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

11、loader的作用

【僅供參考】

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

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

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

12、談談你對WebPaCk的理解（WebPaCk是什么？）

【僅供參考】

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

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

webpack是一個靜態(tài)模塊打包器，當webpack處理應用程序時，會遞歸構(gòu)建一

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

個或多個bundle0

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

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

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

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

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

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

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

【僅供參考】

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

出的文件

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

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

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

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

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

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

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

CSSo

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

14、什么是Tree-Sharking?

【僅供參考】

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

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

15、理解babel-preset-env

【僅供參考】

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

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

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

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

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

env作用等等

【僅供參考】

polyfill以及runtime區(qū)別

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

POlyfill會做兼容。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17、PIUgin的作用

【僅供參考】

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

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

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

【僅供參考】

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

Webpack帶來了很大的靈活性。

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

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

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

19＞什么是bundle,什么是ChUnk,什么是module

【僅供參考】

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

chunk：是指WebPaCk在進行模塊依賴分析的時候，代碼分割出來的代碼塊

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

20、怎么配置單頁應用？怎么配置多頁應用？

【僅供參考】

單頁應用可以理解為WebPaCk的標準模式，直接在entry中指定單頁應用的入

口即可，這里不再贅述

多頁應用的話，可以使用WebPaCk的AUIOWebPlUgin來完成簡單自動化的構(gòu)

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

是：

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

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

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

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

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

1、如何設置DNS緩存？

【僅供參考】

在瀏覽器地址欄中輸入URL以后，瀏覽器首先要查詢域名(hostname)對應服

務器的IP地址，一般需要耗費20~120ms的時間。

DNS查詢完成之前，瀏覽器無法識別服務器IP,因此不下載任何數(shù)據(jù)?；谛?/p>

能考慮，ISP運營商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會有相應

的DNS緩存機制。

（1）正IE緩存30min,可以通過注冊表中DnSCaCheTimeOUt項設置。

（2）FirefoX混存1min,通過network.dnsCacheEXPiration配置。

（3）在Chrome中通過依次單擊“設置”->“選項”-*“高級選項”，并勾選

“用預提取DNS提高網(wǎng)頁載入速度”選項來配置緩存時間。

2、如何優(yōu)化服務器端的接口？

【僅供參考】

具體方法如下。

（1）接口合并：如果一個頁面需要請求兩部分以上的數(shù)據(jù)接口，則建議合并成

一個以減少HTTP請求數(shù)。

（2）減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)。

（3）緩存數(shù)據(jù)：首次加載請求后，緩存數(shù)據(jù)；對于非首次請求，優(yōu)先使用上次

請求的數(shù)據(jù)，這樣可以提升非首次請求的響應速度。

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

【僅供參考】

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

（1）壓縮源碼和圖片（JaVaSCriPt采用混淆壓縮，CSS進行普通壓縮，JPG

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

PNG格式信息等）。

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

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

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

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

（5）開啟服務器端的GZiP壓縮（對文本資源非常有效）。

（6）使用CDN（對公開庫共享緩存）。

（7）延長靜態(tài)資源緩存時間。

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

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

4、如果一個頁面上有大量的圖片（大型電商網(wǎng)站），網(wǎng)頁加載很慢，可以用哪

些方法優(yōu)化這些圖片的加載，從而提升用戶體驗？

【僅供參考】

對于圖片懶加載，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區(qū)域

內(nèi)或者即將進入可視區(qū)域，優(yōu)先加載。

如果為幻燈片、相冊文件等，可以使用圖片預加載技術(shù)，對于當前展示圖片的

前一張圖片和后一張圖片優(yōu)先下載。

如果圖片為CSS圖片，可以使用CSSSprite>SVGsprite.Iconfont、

Base64等技術(shù)。

如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮得特別小

的縮略圖，以提高用戶體驗。

如果圖片展示區(qū)域小于圖片的真實大小，則應在服務器端根據(jù)業(yè)務需要先行進

行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。

5、如何優(yōu)化服務器端？

【僅供參考】

具體方法如下。

（1）啟用GZiP壓縮。

（2）延長資源緩存時間，合理設置資源的過期時間，對于一些長期不更新的靜

態(tài)資源過期時間設置得長一些。

（3）減少Cookie頭信息的大小，頭信息越大，資源傳輸速度越慢。

（4）圖片或者CSS、JaVaSCriPt文件均可使用CDN來加速。

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

【僅供參考】

主要分成兩部分:渲染引擎（IayOUtengineer或RenderingEngine）和JS引

擎。

渲染引擎：負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加

入CSS等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器

的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有

網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內(nèi)容的應用程序都

需要內(nèi)核。

JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)

核就傾向于只指渲染引擎。

常見內(nèi)核

Trident內(nèi)核：IE,MaxThon1TT,TheWorld,360,搜狗瀏覽器等。［又稱

MSHTML］

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

Presto內(nèi)核：OPera7及以上。［Opera內(nèi)核原為：Presto,現(xiàn)為：Blink;］

Webkit內(nèi)核：Safari,Chrome等。［Chrome的：Blink（WebKit的分支）］

7、你知道哪些優(yōu)化性能的方法?

【僅供參考】

具體方法如下。

（1）減少HTTP請求次數(shù)，控制CSSSprite.JavaScript與CSS源碼、圖片的

大小，使用網(wǎng)頁Gzip、CDN托管、data緩存、圖片服務器

（2）通過前端模板JaVaSCriPt和數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪

費，在前端用變量保存AjaX請求結(jié)果，每次操作本地變量時，不用請求，減少

請求次數(shù)。

（3）用innerhTML代替DOM操作,減少DoM操作次數(shù),優(yōu)化JaVaSCriPt性

能。

（4）當需要設置的樣式很多時，設置ClaSSName而不是直接操作Style0

（5）少用全局變量，緩存DOM節(jié)點查找的結(jié)果，減少I/O讀取操作

（6）避免使用CSS表達式，它又稱動態(tài)屬性，

（7）預加載圖片，將樣式表放在頂部，將腳本放在底部，加上時間戳。

（8）避免在頁面的主體布局中使用表，表要在其中的內(nèi)容完全下載之后才會顯

示出來，顯示的速度比DIV+CSS布局慢。

8、axios和fetch區(qū)別對比

【僅供參考】

axios是一個基于PrOmiSe用于瀏覽器和nodejs的HTTP客戶端，本質(zhì)上也

是對原生XHR的封裝，只不過它是PrOmiSe的實現(xiàn)版本，符合最新的ES規(guī)范，

它本身具有以下特征

從瀏覽器中創(chuàng)建XMLHttpRequest

支持PromiseAPI

客戶端支持防止CSRF

提供了一些并發(fā)請求的接口（重要，方便了很多的操作）

從node,js創(chuàng)建http請求

攔截請求和響應

轉(zhuǎn)換請求和響應數(shù)據(jù)

取消請求

自動轉(zhuǎn)換JSON數(shù)據(jù)

fetch優(yōu)勢：

語法簡潔，更加語義化

基于標準Promise實現(xiàn)，支持async/await

同構(gòu)方便，使用isomorphic-fetch

更加底層，提供的APl豐富（request,response）

脫離了XHR,是ES規(guī)范里新的實現(xiàn)方式

fetch存在問題

fetch是一個低層次的API,你可以把它考慮成原生的XHR,所以使用起來并不

是那么舒服，需要進行封裝。

fetch只對網(wǎng)絡請求報錯，對400,500都當做成功的請求，服務器返回400,

500錯誤碼時并不會reject,只有網(wǎng)絡錯誤這些導致請求不能完成時，fetch

才會被reject0

fetch默認不會帶COOkie,需要添加配置項：fetch（url,（credentials:

iinclude,｝）

fetch不支持abort,不支持超時控制，使用SetTimeoUl及PromiSe.reject的

實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行，造成了流量的浪費

fetch沒有辦法原生監(jiān)測請求的進度，而XHR可以

9、TCP傳輸?shù)娜挝帐?、四次揮手策略

【僅供參考】

三次握手：

為了準確無誤地吧數(shù)據(jù)送達目標處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)

議把數(shù)據(jù)包送出去后，TCP不會對傳送后的情況置之不理，他一定會向?qū)Ψ酱_

認是否送達，握手過程中使用TCP的標志：SYN和AeK

發(fā)送端首先發(fā)送一個帶SYN的標志的數(shù)據(jù)包給對方

接收端收到后，回傳一個帶有SYN/ACK標志的數(shù)據(jù)包以示傳達確認信