往年前端面試寶典

2/2往年前端面試寶典一、HTML/CSS篇1、什么是文檔的預(yù)解析？（瀏覽器解析過程）【僅供參考】

Webkit和Firefox都做了這個(gè)優(yōu)化，當(dāng)執(zhí)行JavaScript腳本時(shí)，另一個(gè)線程解析剩下的文檔，并加載后面需要通過網(wǎng)絡(luò)加載的資源。這種方式可以使資源并行加載從而使整體速度更快。需要注意的是，預(yù)解析并不改變DOM樹，它將這個(gè)工作留給主解析過程，自己只解析外部資源的引用，比如外部腳本、樣式表及圖片。2、應(yīng)用緩存中網(wǎng)絡(luò)命令的作用是什么？【僅供參考】

網(wǎng)絡(luò)命令描述不需要緩存的文件，例如以下代碼中“l(fā)ogin.php”始終都不應(yīng)該緩存或者離線訪問。

NETWORK

login.php3、如何顯示我們自己畫的一個(gè)彈框？【僅供參考】

可以用一個(gè)簡單的方法，在頁面上單擊一個(gè)按鈕，彈出一個(gè)彈框，而彈框也是自己寫的一個(gè)div。單擊前，先把彈框隱藏，onclick事件發(fā)生之后就會(huì)顯示出來4、請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別？【僅供參考】

cookie其實(shí)最開始是服務(wù)器端用于記錄用戶狀態(tài)的一種方式，由服務(wù)器設(shè)置，在客戶端存儲(chǔ)，然后每次發(fā)起同源請(qǐng)求時(shí)，發(fā)送給服務(wù)器端。cookie最多能存儲(chǔ)4k數(shù)據(jù)，它的生存時(shí)間由expires屬性指定，并且cookie只能被同源的頁面訪問共享。

sessionStorage是html5提供的一種瀏覽器本地存儲(chǔ)的方法，它借鑒了服務(wù)器端session的概念，代表的是一次會(huì)話中所保存的數(shù)據(jù)。它一般能夠存儲(chǔ)5M或者更大的數(shù)據(jù)，它在當(dāng)前窗口關(guān)閉后就失效了，并且sessionStorage只能被同一個(gè)窗口的同源頁面所訪問共享。

localStorage也是html5提供的一種瀏覽器本地存儲(chǔ)的方法，它一般也能夠存儲(chǔ)5M或者更大的數(shù)據(jù)。它和sessionStorage不同的是，除非手動(dòng)刪除它，否則它不會(huì)失效，并且localStorage也只能被同源頁面所訪問共享。

相關(guān)資料：

SessionStorage，LocalStorage，Cookie這三者都可以被用來在瀏覽器端存儲(chǔ)數(shù)據(jù)，而且都是字符串類型的鍵值對(duì)。區(qū)別在于前兩者屬于HTML5WebStorage，創(chuàng)建它們的目的便于客戶端存儲(chǔ)數(shù)據(jù)。而cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過加密）。cookie數(shù)據(jù)始終在同源（協(xié)議、主機(jī)、端口相同）的http請(qǐng)求中攜帶（即使不需要），會(huì)在瀏覽器和服務(wù)器間來回傳遞。

存儲(chǔ)大?。?/p>

1、cookie數(shù)據(jù)大小不能超過4k。

2、sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

有期時(shí)間：

1、localStorage存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)。

2、sessionStorage數(shù)據(jù)在頁面會(huì)話結(jié)束時(shí)會(huì)被清除。頁面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁面仍會(huì)保持原來的頁面會(huì)話。在新標(biāo)簽或窗口打開一個(gè)頁面時(shí)會(huì)在頂級(jí)瀏覽上下文中初始化一個(gè)新的會(huì)話。

3、cookie設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。

作用域：

1、sessionStorage只在同源的同窗口（或標(biāo)簽頁）中共享數(shù)據(jù)，也就是只在當(dāng)前會(huì)話中共享。

2、localStorage在所有同源窗口中都是共享的。

3、cookie在所有同源窗口中都是共享的。5、哪些瀏覽器支持HTML5？【僅供參考】

幾乎所有的瀏覽器（如Safari、Chrome、Firefox、Opera、IE）都支持HTML56、HTML5應(yīng)用程序緩存為應(yīng)用帶來什么優(yōu)勢？【僅供參考】

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

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

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

（3）減少服務(wù)器負(fù)載，讓瀏覽器將只下載服務(wù)器更新過的資源。7、Websql是HTML5的一個(gè)規(guī)范嗎？【僅供參考】

不是，許多人把它標(biāo)記為HTML5，但是它不是HTML5規(guī)范的一部分，這個(gè)規(guī)范是基于SQLite的8、Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?【僅供參考】

DOCTYPE是用來聲明文檔類型和DTD規(guī)范的。<!DOCTYPEhtml>聲明位于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)無法工作。9、cookie和session的區(qū)別是什么？【僅供參考】

區(qū)別如下：

（1）cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)存放在服務(wù)器上。

（2）cookie不是很安全，別人可以分析存放在本地的cookie并進(jìn)行cookie欺騙。考慮到安全問題應(yīng)當(dāng)使用session。

（3）session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多時(shí)，會(huì)占用較多服務(wù)器的資源。為了減輕服務(wù)器的負(fù)擔(dān)，應(yīng)當(dāng)使用cookie。

（4）單個(gè)cookie保存的數(shù)據(jù)不能超過4KB，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。

所以個(gè)人建議可以將登錄信息等重要信息存放在session中，其他信息（如果需要保留）可以存放在cookie中。10、HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？【僅供參考】

在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。

原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制（不是存儲(chǔ)技術(shù)），通過這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁面展示。

如何使用：

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

<htmllang="en"manifest="index.manifest">

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

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

CACHE:表示需要離線存儲(chǔ)的資源列表，由于包含manifest文件的頁面將被自動(dòng)離線存儲(chǔ)，所以不需要把頁面自身也列出來。

NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會(huì)被離線存儲(chǔ)，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會(huì)被離線存儲(chǔ)，也就是說CACHE的優(yōu)先級(jí)更高。

FALLBACK:表示如果訪問第一個(gè)資源失敗，那么就使用第二個(gè)資源來替換他，比如上面這個(gè)文件表示的就是如果訪問根目錄下任何一個(gè)資源失敗了，那么就去訪問offline.html。

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

如何更新緩存：

1、更新manifest文件

2、通過javascript操作

3、清除瀏覽器緩存

注意事項(xiàng)：

1、瀏覽器對(duì)緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設(shè)置的限制是每個(gè)站點(diǎn)5MB）。

2、如果manifest文件，或者內(nèi)部列舉的某一個(gè)文件不能正常下載，整個(gè)更新過程都將失敗，瀏覽器繼續(xù)全部使用老的緩存。

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

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

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

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

7、當(dāng)manifest文件發(fā)生改變時(shí)，資源請(qǐng)求本身也會(huì)觸發(fā)更新。11、HTML5中的應(yīng)用緩存是什么？【僅供參考】

HTML5應(yīng)用緩存的最終目的是幫助用戶離線瀏覽頁面。換句話說，如果網(wǎng)絡(luò)連接不可用，打開的頁面就來自瀏覽器緩存，離線應(yīng)用緩存可以幫助用戶達(dá)到這個(gè)目的。

應(yīng)用緩存可以幫助用戶指定哪些文件需要緩存，哪些不需要12、應(yīng)用緩存中的回退是什么？【僅供參考】

應(yīng)用緩存中的回退會(huì)幫助你指定在服務(wù)器不可訪問時(shí)，顯示某文件。例如在下面的manifest文件中，如果用戶輸入了“/home”，同時(shí)服務(wù)器不可到達(dá)，“404htm”文件應(yīng)送達(dá)。

FALLBACK：

/home//404.html13、什么是HTML5？【僅供參考】

HTML5是最新的HTML標(biāo)準(zhǔn)，它的主要目標(biāo)是提供所有內(nèi)容，而不需要任何Flash、SilverLight等的額外插件，這些內(nèi)容來自動(dòng)畫、視頻、富GUI等

HTML5是萬維網(wǎng)聯(lián)盟（W3C）和網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組（WHATWG）合作輸出的。14、簡述一下你對(duì)HTML語義化的理解？【僅供參考】

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

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析；即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

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

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。15、理解BFC、IFC、GFC和FFC【僅供參考】

BFC（Blockformattingcontexts）：塊級(jí)格式上下文

如何創(chuàng)建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC布局規(guī)則：

1.內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

2.屬于同一個(gè)BFC的兩個(gè)相鄰的Box的margin會(huì)發(fā)生重疊

3.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此,文字環(huán)繞效果，設(shè)置float

4.BFC的區(qū)域不會(huì)與floatbox重疊。

5.計(jì)算BFC的高度，浮動(dòng)元素也參與計(jì)算

屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊,可以使用BFC的隔離特性來消除重疊

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響，因此，當(dāng)BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會(huì)通過變窄，而不與浮動(dòng)有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免margin重疊也是這樣的一個(gè)道理。

IFC（Inlineformattingcontexts）：內(nèi)聯(lián)格式上下文

GFC（GrideLayoutformattingcontexts）：網(wǎng)格布局格式化上下文

FFC（Flexformattingcontexts）:自適應(yīng)格式上下文16、無樣式內(nèi)容閃爍（FOUC）FlashofUnstyleContent**【僅供參考】

@import導(dǎo)入CSS文件會(huì)等到文檔加載完后再加載CSS樣式表。因此，在頁面DOM加載完成到CSS導(dǎo)入完成之間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的。

解決方法：使用link標(biāo)簽加載CSS樣式文件。因?yàn)閘ink是順序加載的，這樣頁面會(huì)等到CSS下載完之后再下載HTML文件，這樣先布局好，就不會(huì)出現(xiàn)FOUC問題。17、如何使英文單詞發(fā)生詞內(nèi)斷行？【僅供參考】

輸入word-wrap:break-word。18、如何控制單行顯示且顯示不下顯示...【僅供參考】

overflow:hidden;

text-overflow:ellipsis;

white-space:no-wrap;19、display:none;和visibility:hidden;的區(qū)別？【僅供參考】

兩個(gè)都可以隱藏元素，display:none不占用空間。visibility:hidden仍然占用空間20、精靈圖和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不支持;二、JS/ES6/TS篇1、對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)【僅供參考】

標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套

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

W3C標(biāo)準(zhǔn)使網(wǎng)站容易維護(hù)、有利于搜索引擎查找2、事件隊(duì)列（宏任務(wù)微任務(wù)）【僅供參考】

可以分為微任務(wù)（microtask）隊(duì)列和宏任務(wù)（macrotask）隊(duì)列。

微任務(wù)一般比宏任務(wù)先執(zhí)行，并且微任務(wù)隊(duì)列只有一個(gè)，宏任務(wù)隊(duì)列可能有多個(gè)。另外我們常見的點(diǎn)擊和鍵盤等事件也屬于宏任務(wù)。

下面我們看一下常見宏任務(wù)和常見微任務(wù)。

常見宏任務(wù)：

setTimeout()

setInterval()

setImmediate()

常見微任務(wù)：

promise.then()、promise.catch()

newMutaionObserver()

process.nextTick()

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

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

微任務(wù)特征：沒有明確的異步任務(wù)需要執(zhí)行，只有回調(diào)；不需要其他異步線程支持。3、理解下面代碼的區(qū)別【僅供參考】

functionfoo(){//code}()

以function關(guān)鍵字開頭的語句會(huì)被解析為函數(shù)聲明，而函數(shù)聲明是不允許直接運(yùn)行的。只有當(dāng)解析器把這句話解析為函數(shù)表達(dá)式，才能夠直接運(yùn)行

(functionfoo(){//code..})()

運(yùn)算符開頭的表達(dá)式被立即執(zhí)行4、什么是標(biāo)識(shí)符？【僅供參考】

在JS中，可以自定義命名的東西都屬性標(biāo)識(shí)符；

比如變量名，函數(shù)名，參數(shù)名都是標(biāo)識(shí)符5、documen.write和innerHTML的區(qū)別？【僅供參考】

document.write只能重繪整個(gè)頁面

innerHTML可以重繪頁面的一部分6、JavaScript是單線程的，瀏覽器是多進(jìn)程的【僅供參考】

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

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

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

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

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

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

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

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

單線程JavaScript是因?yàn)楸苊釪OM渲染的沖突，webworker支持多線程，但是webworker不能訪問window對(duì)象，document對(duì)象等。7、[1,2,3].map(Math.pow)的結(jié)果是什么?【僅供參考】

請(qǐng)說出代碼的運(yùn)行結(jié)果，為什么？

結(jié)果時(shí)129

map()會(huì)根據(jù)提供提供的函數(shù)對(duì)指定序列(列表)做映射。

pow()方法返回x的y次方的值。

map(function(當(dāng)前元素的值value,下標(biāo)index));8、漸進(jìn)增強(qiáng)與優(yōu)雅降級(jí)【僅供參考】

漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)，達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí)：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。9、怎么降維數(shù)組[[1,2],[3,4]]-->[1,2,3,4]【僅供參考】

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

Atotype.concat.apply([],[[1,2],[3,4]]);10、原生對(duì)象和宿主對(duì)象【僅供參考】

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

宿主對(duì)象：由宿主環(huán)境決定，如果在瀏覽器運(yùn)行，會(huì)有window及其子對(duì)象document，location等，如果在node環(huán)境運(yùn)行，則有g(shù)lobla及其子對(duì)象11、eval是做什么的？【僅供參考】

eval的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行

應(yīng)該避免使用eval，不安全，非常耗性能（先解析成js語句，再執(zhí)行）

由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval('('+str+')');12、如何讓接口的所有屬性都可選？【僅供參考】

你可以使用partial映射類型輕松地將所有屬性設(shè)為可選。13、TypeScript的優(yōu)點(diǎn)【僅供參考】

1.Typescript能夠編譯出一個(gè)能在所有瀏覽器上運(yùn)行的JavaScript版本。

2.TypeScript總是在編譯時(shí)強(qiáng)調(diào)錯(cuò)誤，而JavaScript在運(yùn)行時(shí)指出錯(cuò)誤。

3.TypeScript支持強(qiáng)類型或靜態(tài)類型

4.它使用基于類的面向?qū)ο缶幊獭?/p>

5.它有助于代碼結(jié)構(gòu)。14、如何從TypeScript的子類調(diào)用基類構(gòu)造函數(shù)【僅供參考】

使用super()函數(shù)，從子類中調(diào)用父類或基類構(gòu)造函數(shù)15、TypeScript與JavaScript有什么不同【僅供參考】

1.TypeScript支持ES6

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

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

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

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

6.TypeScript支持模塊。

7.TypeScript在編譯時(shí)提供了錯(cuò)誤檢查功能。它將編譯代碼，如果發(fā)現(xiàn)任何錯(cuò)誤，它將在運(yùn)行腳本之前突出顯示這些錯(cuò)誤。16、TypeScript的缺點(diǎn)【僅供參考】

1.TypeScript需要很長時(shí)間來編譯代碼

2.要使用任何第三方庫，必須使用定義文件。并不是所有第三方庫都有可用的定義文件。

3.類型定義文件的質(zhì)量是一個(gè)問題，即如何確保定義是正確的?17、setTimeout、Promise、Async/Await的區(qū)別【僅供參考】

宏任務(wù)：全局執(zhí)行、setTimeout，定時(shí)器等等

微任務(wù)：Promise等

setTimeout的回調(diào)函數(shù)放到宏任務(wù)隊(duì)列里，等到執(zhí)行棧清空以后執(zhí)行;

Promise.then里的回調(diào)函數(shù)會(huì)放到相應(yīng)宏任務(wù)的微任務(wù)隊(duì)列里，等宏任務(wù)里面的同步代碼執(zhí)行完再執(zhí)行;

async函數(shù)表示函數(shù)里面可能會(huì)有異步方法，await后面跟一個(gè)表達(dá)式;

async方法執(zhí)行時(shí)，遇到await會(huì)立即執(zhí)行表達(dá)式，然后把表達(dá)式后面的代碼放到微任務(wù)隊(duì)列里，讓出執(zhí)行棧讓同步代碼先執(zhí)行;18、使用結(jié)構(gòu)賦值，實(shí)現(xiàn)兩個(gè)變量的值的交換【僅供參考】

leta=1;letb=2;

[a,b]=[b,a];19、ES6中數(shù)組新增了哪些方法①forEach()，用于遍歷數(shù)組，無返回值；【僅供參考】

②filter()，過濾掉數(shù)組中不滿足條件的值；

③map()，遍歷數(shù)組，返回一個(gè)新數(shù)組；

④reduce()，讓數(shù)組的前后兩項(xiàng)進(jìn)行某種計(jì)算，然后返回其值。20、介紹下Set、Map的區(qū)別？【僅供參考】

應(yīng)用場景Set用于數(shù)據(jù)重組，Map用于數(shù)據(jù)儲(chǔ)存Set：

（1）成員不能重復(fù)

（2）只有鍵值沒有鍵名，類似數(shù)組

（3）可以遍歷，方法有add,delete,has

Map:

（1）本質(zhì)上是健值對(duì)的集合，類似集合

（2）可以遍歷，可以跟各種數(shù)據(jù)格式轉(zhuǎn)換三、Vue/React篇1、什么是高階組件？【僅供參考】

高階組件(HOC)是接受一個(gè)組件并返回一個(gè)新組件的函數(shù)。基本上，這是一個(gè)模式，是從React的組合特性中衍生出來的，稱其為純組件，因?yàn)樗鼈兛梢越邮苋魏蝿?dòng)態(tài)提供的子組件，但不會(huì)修改或復(fù)制輸入組件中的任何行為

HOC可以用于以下許多用例

代碼重用、邏輯和引導(dǎo)抽象

渲染劫持

state抽象和操作

props處理2、如何創(chuàng)建refs？【僅供參考】

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

通常將Refs分配給實(shí)例屬性，以便可以在整個(gè)組件中引用它們。3、React中key的重要性是什么？【僅供參考】

key用于識(shí)別唯一的VirtualDOM元素及其驅(qū)動(dòng)UI的相應(yīng)數(shù)據(jù)。它們通過回收DOM中當(dāng)前所有的元素來幫助React優(yōu)化渲染。這些key必須是唯一的數(shù)字或字符串，React只是重新排序元素而不是重新渲染它們。這可以提高應(yīng)用程序的性能4、React中的狀態(tài)是什么？它是如何使用的？【僅供參考】

狀態(tài)是React組件的核心，是數(shù)據(jù)的來源，必須盡可能簡單。基本上狀態(tài)是確定組件呈現(xiàn)和行為的對(duì)象。與props不同，它們是可變的，并創(chuàng)建動(dòng)態(tài)和交互式組件?？梢酝ㄟ^this.state()訪問它們5、解釋Reducer的作用【僅供參考】

Reducers是純函數(shù)，它規(guī)定應(yīng)用程序的狀態(tài)怎樣因響應(yīng)ACTION而改變。Reducers通過接受先前的狀態(tài)和action來工作，然后它返回一個(gè)新的狀態(tài)。它根據(jù)操作的類型確定需要執(zhí)行哪種更新，然后返回新的值。如果不需要完成任務(wù)，它會(huì)返回原來的狀態(tài)6、如何在ReactJS的Props上應(yīng)用驗(yàn)證？【僅供參考】

當(dāng)應(yīng)用程序在開發(fā)模式下運(yùn)行時(shí)，React將自動(dòng)檢查咱們?cè)诮M件上設(shè)置的所有props，以確保它們具有正確的數(shù)據(jù)類型。對(duì)于不正確的類型，開發(fā)模式下會(huì)在控制臺(tái)中生成警告消息，而在生產(chǎn)模式中由于性能影響而禁用它。強(qiáng)制的props用isRequired定義的。

下面是一組預(yù)定義的prop類型:

React.PropTypes.string

React.PropTypes.number

React.PropTypes.func

React.PropTypes.node

React.PropTypes.bool7、如何在Redux中定義Action【僅供參考】

React中的Action必須具有type屬性，該屬性指示正在執(zhí)行的ACTION的類型。必須將它們定義為字符串常量，并且還可以向其添加更多的屬性。在Redux中，action被名為ActionCreators的函數(shù)所創(chuàng)建8、什么是ReactContext?【僅供參考】

Context通過組件樹提供了一個(gè)傳遞數(shù)據(jù)的方法，從而避免了在每一個(gè)層級(jí)手動(dòng)的傳遞props屬性9、你對(duì)“單一事實(shí)來源”有什么理解？【僅供參考】

Redux使用“Store”將程序的整個(gè)狀態(tài)存儲(chǔ)在同一個(gè)地方。因此所有組件的狀態(tài)都存儲(chǔ)在Store中，并且它們從Store本身接收更新。單一狀態(tài)樹可以更容易地跟蹤隨時(shí)間的變化，并調(diào)試或檢查程序10、什么是純函數(shù)？【僅供參考】

純函數(shù)是不依賴并且不會(huì)在其作用域之外修改變量狀態(tài)的函數(shù)。本質(zhì)上，純函數(shù)始終在給定相同參數(shù)的情況下返回相同結(jié)果。11、類組件和函數(shù)組件之間的區(qū)別是什么？【僅供參考】

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

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

函數(shù)組件性能要高于類組件，因?yàn)轭惤M件使用要實(shí)例化，而函數(shù)組件直接執(zhí)行取返回結(jié)果即可，為了提高性能，盡量使用函數(shù)組件12、使用ReactHooks好處是啥？【僅供參考】

Hooks是React16.8中的新添加內(nèi)容。它們?cè)试S在不編寫類的情況下使用state和其他React特性。使用Hooks，可以從組件中提取有狀態(tài)邏輯，這樣就可以獨(dú)立地測試和重用它。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)-在這種情況下，咱們?cè)趕etCount函數(shù)內(nèi)部使用它可以做更多的事情，使用Hooks，能夠使咱們的代碼保持更多功能，還可以避免過多使用基于類的組件

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

useState中修改的方法異步

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

可以自己定義Hooks的方法,方法內(nèi)部可以把邏輯返回13、vue中key值的作用【僅供參考】

需要使用key來給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)，找到正確的位置區(qū)插入新的節(jié)點(diǎn)

所以一句話，key的作用主要是為了高效的更新虛擬DOM14、v-cloak指令的作用【僅供參考】

用于防止閃屏，防止頁面出現(xiàn){{}}15、響應(yīng)式原理（變化偵測）【僅供參考】

使用發(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、由于無法偵測對(duì)象上新增/刪除屬性，所以提供$set和$deleteAPI5。16、v-on可以監(jiān)聽多個(gè)方法嗎？【僅供參考】

答案：肯定可以的。

解析：

<input

type="text"

:value="name"

@input="onInput"

@focus="onFocus"

@blur="onBlur"

/>17、談?wù)勀銓?duì)MVVM開發(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ù)改變時(shí)會(huì)觸發(fā)View層的刷新，View中由于用戶交互操作而改變的數(shù)據(jù)也會(huì)在Model中同步。

這種模式實(shí)現(xiàn)了Model和View的數(shù)據(jù)自動(dòng)同步，因此開發(fā)者只需要專注對(duì)數(shù)據(jù)的維護(hù)操作即可，而不需要自己操作dom。18、watch是什么，有什么用【僅供參考】

屬性監(jiān)聽

作用：當(dāng)需要一個(gè)數(shù)據(jù)改變,然后去做一些邏輯處理,則可以來使用屬性監(jiān)聽19、vue-router路由模式有幾種？【僅供參考】

vue-router有3種路由模式：hash、history、abstract，對(duì)應(yīng)的源碼如下所示：

switch(mode){

case'history':

this.history=newHTML5History(this,options.base)

break

case'hash':

this.history=newHashHistory(this,options.base,this.fallback)

break

case'abstract':

this.history=newAbstractHistory(this,options.base)

break

default:

if(process.env.NODE_ENV!=='production'){

assert(false,`invalidmode:${mode}`)

}

}

其中，3種路由模式的說明如下：

hash:使用URLhash值來作路由。支持所有瀏覽器，包括不支持HTML5HistoryApi的瀏覽器；

history:依賴HTML5HistoryAPI和服務(wù)器配置。具體可以查看HTML5History模式；

abstract:支持所有JavaScript運(yùn)行環(huán)境，如Node.js服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式.20、Object.defineProperty怎么用，三個(gè)參數(shù)？，有什么作用?。俊緝H供參考】

Object.defineProperty()方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回此對(duì)象。

obj：需要定義屬性的對(duì)象

prop：需要定義的屬性

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

value:"18",//設(shè)置默認(rèn)值（與get()互斥）

enumerable:true,//這一句控制屬性可以枚舉enumerable改為true就可以參與遍歷了默認(rèn)值false

writable:true,//該屬性是否可寫默認(rèn)值false（與set()互斥）

configurable:true,//該屬性是否可被刪除默認(rèn)值false

get//當(dāng)有人讀取prop的時(shí)候get函數(shù)就會(huì)調(diào)用,并且返回就是sss的值

set//當(dāng)有人修改prop的時(shí)候set函數(shù)就會(huì)調(diào)用,有個(gè)參數(shù)這個(gè)參數(shù)就是修改后的值四、Webpack/Rollup篇1、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è)組件支持的配置屬性。2、plugin的作用【僅供參考】

plugin是一個(gè)類，類中有一個(gè)apply()方法，主要用于Plugin的安裝，可以在其中監(jiān)聽一些來自編譯器發(fā)出的事件，在合適的時(shí)機(jī)做一些事情。3、你是如何提高webpack構(gòu)件速度的?【僅供參考】

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

通過externals配置來提取常用庫

利用DllPlugin和DllReferencePlugin預(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來剔除多余代碼4、lazyloading（模塊懶加載）【僅供參考】

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

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

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

import(/*webpackPrefetch:true/‘LoginModal’);

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

import(/webpackPreload:true*/‘ChartingLibrary’);5、怎么配置單頁應(yīng)用？怎么配置多頁應(yīng)用？【僅供參考】

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

多頁應(yīng)用的話，可以使用webpack的AutoWebPlugin來完成簡單自動(dòng)化的構(gòu)建，但是前提是項(xiàng)目的目錄結(jié)構(gòu)必須遵守他預(yù)設(shè)的規(guī)范。多頁應(yīng)用中要注意的是：

每個(gè)頁面都有公共的代碼，可以將這些代碼抽離出來，避免重復(fù)的加載。比如，每個(gè)頁面都引用了同一套css樣式表

隨著業(yè)務(wù)的不斷擴(kuò)展，頁面可能會(huì)不斷的追加，所以一定要讓入口的配置足夠靈活，避免每次添加新頁面還需要修改構(gòu)建配置6、什么是長緩存？在webpack中如何做到長緩存優(yōu)化？【僅供參考】

瀏覽器在用戶訪問頁面的時(shí)候，為了加快加載速度，會(huì)對(duì)用戶訪問的靜態(tài)資源進(jìn)行存儲(chǔ)，但是每一次代碼升級(jí)或者更新，都需要瀏覽器去下載新的代碼，最方便和最簡單的更新方式就是引入新的文件名稱。

在webpack中，可以在output給出輸出的文件制定chunkhash，并且分離經(jīng)常更新的代碼和框架代碼，通過NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不變。7、Loader機(jī)制的作用是什么？【僅供參考】

webpack默認(rèn)只能打包js文件，配置里的module.rules數(shù)組配置了一組規(guī)則，告訴Webpack在遇到哪些文件時(shí)使用哪些Loader去加載和轉(zhuǎn)換打包成js。

注意：

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

每一個(gè)Loader都可以通過URLquerystring的方式傳入?yún)?shù)，例如css-loader?minimize中的minimize告訴css-loader要開啟CSS壓縮。8、如何提高Webpack構(gòu)建速度【僅供參考】

組件懶加載、路由懶加載、開啟gzip、公共的第三方包上cdn、配置include/exclude縮小Loader對(duì)文件的搜索范圍、配置cache緩存Loader對(duì)文件的編譯副本、配置resolve提高文件的搜索速度9、ExtractTextPlugin插件的作用【僅供參考】

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

對(duì)此你可以通過插件的filename屬性，告訴插件輸出的CSS文件名稱是通過[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名稱，[contenthash:8]代表根據(jù)文件內(nèi)容算出的8位hash值，還有很多配置選項(xiàng)可以在ExtractTextPlugin的主頁上查到。10、如何解決循環(huán)依賴問題【僅供參考】

Webpack中將require替換為webpack_require，會(huì)根據(jù)moduleId到installedModules找是否加載過，加載過則直接返回之前的export，不會(huì)重復(fù)加載。11、談?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)作。12、webpack的作用是什么，談?wù)勀銓?duì)它的理解？【僅供參考】

現(xiàn)在的前端網(wǎng)頁功能豐富，特別是SPA（singlepagewebapplication單頁應(yīng)用）技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決Scss，Less……新增樣式的擴(kuò)展寫法的編譯工作。

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

現(xiàn)在最流行的三個(gè)前端框架，可以說和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。

react.js+WebPack

vue.js+WebPack

AngluarJS+WebPack13、什么是bundle，什么是chunk，什么是module【僅供參考】

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

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

module：是開發(fā)中的單個(gè)模塊14、webpack的熱更新是如何做到的？說明其原理？【僅供參考】

1、在webpack的watch模式下，文件系統(tǒng)中某一個(gè)文件發(fā)生修改，webpack監(jiān)聽到文件變化，根據(jù)配置文件對(duì)模塊重新編譯打包，并將打包后的代碼通過簡單的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)ivereload。注意，這兒是瀏覽器刷新，和HMR是兩個(gè)概念

4、webpack-dev-server代碼的工作，該步驟主要是通過sockjs（webpack-dev-server的依賴）在瀏覽器端和服務(wù)端之間建立一個(gè)websocket長連接，將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)然如果僅僅是刷新瀏覽器，也就沒有后面那些步驟了。HotModuleReplacement.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ì)比，決定是否更新模塊，在決定更新模塊后，檢查模塊之間的依賴關(guān)系，更新模塊的同時(shí)更新模塊間的依賴引用。最后一步，當(dāng)HMR失敗后，回退到livereload操作，也就是進(jìn)行瀏覽器刷新來獲取最新打包代碼。15、HMR熱模塊更新【僅供參考】

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

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

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

if(module.hot){

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

//Dosomethingwiththeupdatedlibrarymodule…

});

}16、有哪些常見的Loader？他們是解決什么問題的？【僅供參考】

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

url-loader：和file-loader類似，但是能在文件很小的情況下以base64的方式把文件內(nèi)容注入到代碼中去

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

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

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

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

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

eslint-loader：通過ESLint檢查JavaScript代碼17、webpack是解決什么問題而生的?【僅供參考】

如果像以前開發(fā)時(shí)一個(gè)html文件可能會(huì)引用十幾個(gè)js文件,而且順序還不能亂，因?yàn)樗鼈兇嬖谝蕾囮P(guān)系，同時(shí)對(duì)于ES6+等新的語法，less,sass等CSS預(yù)處理都不能很好的解決……，此時(shí)就需要一個(gè)處理這些問題的工具。18、npm打包時(shí)需要注意哪些？如何利用webpack來更好的構(gòu)建？【僅供參考】

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

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

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

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

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

Npm模塊使用者的環(huán)境是不確定的，很有可能并不支持ES6，所以打包的最后結(jié)果應(yīng)該是采用ES5編寫的。并且如果ES5是經(jīng)過轉(zhuǎn)換的，請(qǐng)最好連同SourceMap一同上傳。

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

發(fā)布的模塊不能將依賴的模塊也一同打包，應(yīng)該讓用戶選擇性的去自行安裝。這樣可以避免模塊應(yīng)用者再次打包時(shí)出現(xiàn)底層模塊被重復(fù)打包的情況。

UI組件類的模塊應(yīng)該將依賴的其它資源文件，例如.css文件也需要包含在發(fā)布的模塊里。19、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文件中。20、sourceMap【僅供參考】

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

配置方式:

例如：devtool：‘source-map’

加不同前綴意義：

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

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

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

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

最佳實(shí)踐：

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

線上環(huán)境：cheap-mudole-source-map五、性能/瀏覽器/其他篇1、如何優(yōu)化腳本的執(zhí)行？【僅供參考】

腳本處理不當(dāng)會(huì)阻塞頁面加載、渲染，因此在使用時(shí)需注意。

（1）把CSS寫在頁面頭部，把JavaScript程序?qū)懺陧撁嫖膊炕虍惒讲僮髦小?/p>

（2）避免圖片和iFrame等的空src，空src會(huì)重新加載當(dāng)前頁面，影響速度和效率。

（3）盡量避免重設(shè)圖片大小。重設(shè)圖片大小是指在頁面、CSS、JavaScript文件等中多次重置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能

（4）圖片盡量避免使用DataURL。DataURL圖片沒有使用圖片的壓縮算法，文件會(huì)變大，并且要在解碼后再渲染，加載慢，耗時(shí)長。2、列舉你知道的Web性能優(yōu)化方法。【僅供參考】

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

（1）壓縮源碼和圖片（JavaScript采用混淆壓縮，CSS進(jìn)行普通壓縮，JPG圖片根據(jù)具體質(zhì)量壓縮為50%~70%，把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）延長靜態(tài)資源緩存時(shí)間。

（8）把CSS放在頁面頭部把JavaScript代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現(xiàn)長時(shí)間的空白）3、對(duì)MutationObserver的理解及應(yīng)用【僅供參考】

MutationObserver接口提供了監(jiān)視對(duì)DOM樹所做更改的能力。它被設(shè)計(jì)為舊的MutationEvents功能的替代品，該功能是DOM3Events規(guī)范的一部分。

disconnect()阻止MutationObserver實(shí)例繼續(xù)接收的通知，直到再次調(diào)用其observe()方法，該觀察者對(duì)象包含的回調(diào)函數(shù)都不會(huì)再被調(diào)用。

observe()配置MutationObserver在DOM更改匹配給定選項(xiàng)時(shí)，通過其回調(diào)函數(shù)開始接收通知。

takeRecords()從MutationObserver的通知隊(duì)列中刪除所有待處理的通知，并將它們返回到MutationRecord對(duì)象的新Array中。4、jQuery性能優(yōu)化如何做？【僅供參考】

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

（1）使用最新版本的jQuery類庫。

JQuery類庫每一個(gè)新的版本都會(huì)對(duì)上一個(gè)版本進(jìn)行Bug修復(fù)和一些優(yōu)化，同時(shí)也會(huì)包含一些創(chuàng)新，所以建議使用最新版本的jQuery類庫提高性能。不過需要注意的是，在更換版本之后，不要忘記測試代碼，畢竟有時(shí)候不是完全向后兼容的。

（2）使用合適的選擇器。

jQuery提供非常豐富的選擇器，選擇器是開發(fā)人員最常使用的功能，但是使用不同選擇器也會(huì)帶來性能問題。建議使用簡凖選擇器，如i選擇器、類選擇器，不要將i選擇器嵌套等。

（3）以數(shù)組方式使用jQuery對(duì)象。

使用jQuery選擇器獲取的結(jié)果是一個(gè)jQuery對(duì)象。然而，jQuery類庫會(huì)讓你感覺正在使用一個(gè)定義了索引和長度的數(shù)組。在性能方面，建議使用簡單的for或者while循環(huán)來處理，而不是$.each()，這樣能使代碼更快。

（4）每一個(gè)JavaScript事件（例如click、mouseover等）都會(huì)冒泡到父級(jí)節(jié)點(diǎn)。當(dāng)需要給多個(gè)元素綁定相同的回調(diào)函數(shù)時(shí)，建議使用事件委托模式。

（5）使用join()來拼接字符串。

使用join()拼接長字符串，而不要使用“+”拼接字符串，這有助于性能優(yōu)化，特別是處理長字符串的時(shí)候。

（6）合理利用HTML5中的data屬性。

HTML5中的data屬性有助于插入數(shù)據(jù)，特別是前、后端的數(shù)據(jù)交換；jQuery的data()方法能夠有效地利用HTML5的屬性來自動(dòng)獲取數(shù)據(jù)。5、談?wù)勀銓?duì)重構(gòu)的理解。【僅供參考】

網(wǎng)站重構(gòu)是指在不改變外部行為的前提下，簡化結(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ù)器的文件。6、如果一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），網(wǎng)頁加載很慢，可以用哪些方法優(yōu)化這些圖片的加載，從而提升用戶體驗(yàn)？【僅供參考】

對(duì)于圖片懶加載，可以為頁面添加一個(gè)滾動(dòng)條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進(jìn)入可視區(qū)域，優(yōu)先加載。

如果為幻燈片、相冊(cè)文件等，可以使用圖片預(yù)加載技術(shù)，對(duì)于當(dāng)前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。

如果圖片為CSS圖片，可以使用CSSSprite、SVGsprite、Iconfont、Base64等技術(shù)。

如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮得特別小的縮略圖，以提高用戶體驗(yàn)。

如果圖片展示區(qū)域小于圖片的真實(shí)大小，則應(yīng)在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。7、TCP傳輸?shù)娜挝帐帧⑺拇螕]手策略【僅供參考】

三次握手：

為了準(zhǔn)確無誤地吧數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送后的情況置之不理，他一定會(huì)向?qū)Ψ酱_認(rèn)是否送達(dá)，握手過程中使用TCP的標(biāo)志：SYN和ACK

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

接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息

最后，發(fā)送端再回傳一個(gè)帶ACK的標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束

如在握手過程中某個(gè)階段莫明中斷，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包

斷開一個(gè)TCP連接需要“四次揮手”

第一次揮手：主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來關(guān)注主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也即是主動(dòng)關(guān)閉方告誡被動(dòng)關(guān)閉方：我已經(jīng)不會(huì)再給你發(fā)數(shù)據(jù)了（在FIN包之前發(fā)送的數(shù)據(jù)，如果沒有收到對(duì)應(yīng)的ACK確認(rèn)報(bào)文，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù)）。但是，此時(shí)主動(dòng)關(guān)閉方還可以接受數(shù)據(jù)

第二次揮手：被動(dòng)關(guān)閉方收到FIN包后，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)收到序號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）

第三次揮手：被動(dòng)關(guān)閉方發(fā)送一個(gè)FIN。用來關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動(dòng)關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會(huì)給你發(fā)送數(shù)據(jù)了

第四次揮手：主動(dòng)關(guān)閉方收到FIN后，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1，至此，完成四次揮手8、對(duì)package.json里面的dependencies,devDependencies,peerDependencies的理解？【僅供參考】

dependencies：

項(xiàng)目要跑起來必須依賴的包

devDependencies：

開發(fā)過程中用到的輔助包，比如插件，babel等

peerDependencies：

是用來防止多次引入相同的庫，如果在package1和package2中都加上dependencies的packageBase，那么package1和package2會(huì)再下載一遍packgeBase9、AST是什么【僅供參考】

在計(jì)算機(jī)科學(xué)中，抽象語法樹（AbstractSyntaxTree，AST），或簡稱語法樹（Syntaxtree），是源代碼語法結(jié)構(gòu)的一種抽象表示。它以樹狀的形式表現(xiàn)編程語言的語法結(jié)構(gòu)，樹上的每個(gè)節(jié)點(diǎn)都表示源代碼中的一種結(jié)構(gòu)。

babel-cli開始讀取我們的參數(shù)(源文件test1.js、輸出文件test1.babel.js、配置文件.babelrc)

babel-core根據(jù)babel-cli的參數(shù)開始編譯

BabelParser把我們傳入的源碼解析成ast對(duì)象

BabelTraverse（遍歷）模塊維護(hù)了整棵樹的狀態(tài)，并且負(fù)責(zé)替換、移除和添加節(jié)點(diǎn)(也就是結(jié)合我們傳入的插件把es6轉(zhuǎn)換成es5的一個(gè)過程)

BabelGenerator模塊是Babel的代碼生成器，它讀取AST并將其轉(zhuǎn)換為代碼和源碼映射（sourcemaps）。10、哪些方法可以提升網(wǎng)站前端性能？【僅供參考】

精靈圖合并，減少HTTP請(qǐng)求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態(tài)文件；使用localstorage緩存和mainfest應(yīng)用緩存。11、什么時(shí)候會(huì)出現(xiàn)資源訪問失敗？【僅供參考】

開發(fā)過程中，發(fā)現(xiàn)很多開發(fā)者沒有設(shè)置圖標(biāo)，而服務(wù)器端根目錄也沒有存放默認(rèn)的Favicon.ico，從而導(dǎo)致請(qǐng)求404出現(xiàn)。通常在App的webview里打開Favicon.ico，不會(huì)加載這個(gè)Favicon.ico，但是很多頁面能夠分享。

如果用戶在瀏覽器中打開Favicon.ico，就會(huì)調(diào)取失敗，一般盡量保證該圖標(biāo)默認(rèn)存在，文件盡可能小，并設(shè)置一個(gè)較長的緩存過期時(shí)間。另外，應(yīng)及時(shí)清理緩存過期導(dǎo)致岀現(xiàn)請(qǐng)求失敗的資源。12、針對(duì)JavaScript，如何優(yōu)化性能？【僅供參考】

具體方法如下。

（1）緩存DOM的選擇和計(jì)算。

（2）盡量使用事件委托模式，避免批量綁定事件。

（3）使用touchstart、touchend代替click。

（4）合理使用requestAnimationFrame動(dòng)畫代替setTimeOut。

（5）適當(dāng)使用canvas動(dòng)畫。

（6）盡量避免在高頻事件（如TouchMove、Scroll事件）中修改視圖，這會(huì)導(dǎo)致多次渲染。13、如何設(shè)置DNS緩存？【僅供參考】

在瀏覽器地址欄中輸入U(xiǎn)RL以后，瀏覽器首先要查詢域名（hostname）對(duì)應(yīng)服務(wù)器的IP地址，一般需要耗費(fèi)20~120ms的時(shí)間。

DNS查詢完成之前，瀏覽器無法識(shí)別服務(wù)器IP，因此不下載任何數(shù)據(jù)。基于性能考慮，ISP運(yùn)營商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會(huì)有相應(yīng)的DNS緩存機(jī)制。

（1）正IE緩存30min，可以通過注冊(cè)表中DnsCacheTimeout項(xiàng)設(shè)置。

（2）Firefox混存1min，通過network.dnsCacheExpiration配置。

（3）在Chrome中通過依次單擊“設(shè)置”→“選項(xiàng)”→“高級(jí)選項(xiàng)”，并勾選“用預(yù)提取DNS提高網(wǎng)頁載入速度”選項(xiàng)來配置緩存時(shí)間。14、描述瀏覽器的渲染過程？，DOM樹和渲染樹的區(qū)別？【僅供參考】

瀏覽器的渲染過程：

解析HTML構(gòu)建DOM(DOM樹)，并行請(qǐng)求css/image/js

CSS文件下載完成，開始構(gòu)建CSSOM(CSS樹)

CSSOM構(gòu)建結(jié)束后和DOM一起生成RenderTree(渲染樹)

布局(Layout)：計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置

顯示(Painting)：通過顯卡把頁面畫到屏幕上

DOM樹和渲染樹的區(qū)別：

DOM樹與HTML標(biāo)簽一一對(duì)應(yīng)，包括head和隱藏元素

渲染樹不包括head和隱藏元素，大段文本的每一個(gè)行都是獨(dú)立節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有對(duì)應(yīng)的css屬性15、node是單線程，為什么能處理高并發(fā)【僅供參考】

每個(gè)Node.js進(jìn)程只有一個(gè)主線程在執(zhí)行程序代碼，形成一個(gè)執(zhí)行棧（executioncontextsta