1.談?wù)勀銓?duì)webpack的看法?

WebPack?是一個(gè)模塊打包工具， 你可以使用WebPack管理你的模塊依賴， 并編繹輸出模塊們所需的靜態(tài)文件。 它能夠很好地管理、 打包Web開發(fā)中所用到的`HTML、javaScript、CSS 以及各種靜態(tài)文件（圖片、字體等）， 讓開發(fā)過程更加高效。 對(duì)于不同類型的資源，webpack 有對(duì)應(yīng)的模塊加載器。 webpack 模塊打包器會(huì)分析模塊間的依賴關(guān)系， 最后 生成了優(yōu)化且合并后的靜態(tài)資源。webpack的兩大特色： 1.code splitting（可以自動(dòng)完成）2.loader 可以處理各種類型的靜態(tài)文件，并且支持串聯(lián)操作webpack 是以commonJS的形式來書寫腳本滴，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。webpack具有requireJs和browserify的功能，但仍有很多自己的新特性： 1. 對(duì) CommonJS 、 AMD 、ES6的語法做了兼容2. 對(duì)js、css、圖片等資源文件都支持打包3. 串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對(duì)CoffeeScript、ES6的支持4. 有獨(dú)立的配置文件webpack.config.js5. 可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間6. 支持 SourceUrls 和 SourceMaps，易于調(diào)試7. 具有強(qiáng)大的Plugin接口，大多是內(nèi)部插件，使用起來比較靈活8.webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快復(fù)制代碼

2.什么是Etag？

當(dāng)發(fā)送一個(gè)服務(wù)器請(qǐng)求時(shí)， 瀏覽器首先會(huì)進(jìn)行緩存過期判斷。 瀏覽器根據(jù)緩存過期時(shí)間判斷緩存文件是否過期。情景一： 若沒有過期，則不向服務(wù)器發(fā)送請(qǐng)求， 直接使用緩存中的結(jié)果， 此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到?`200 OK`(from cache) ， 此時(shí)的情況就是完全使用緩存， 瀏覽器和服務(wù)器沒有任何交互的。情景二： 若已過期， 則向服務(wù)器發(fā)送請(qǐng)求， 此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間，和`Etag`然后，進(jìn)行資源更新判斷。 服務(wù)器根據(jù)瀏覽器傳過來的文件修改時(shí)間， 判斷自瀏覽器上一次請(qǐng)求之后， 文件是不是沒有被修改過； 根據(jù)`Etag`， 判斷文件內(nèi)容自上一次請(qǐng)求之后， 有沒有發(fā)生變化情形一： 若兩種判斷的結(jié)論都是文件沒有被修改過， 則服務(wù)器就不給瀏覽器發(fā)`index.html`的內(nèi)容了， 直接告訴它，文件沒有被修改過， 你用你那邊的緩存吧——?`304 Not Modified`， 此時(shí)瀏覽器就會(huì)從本地緩存中獲取`index.html`的內(nèi)容。 此時(shí)的情況叫協(xié)議緩存， 瀏覽器和服務(wù)器之間有一次請(qǐng)求交互。情形二： 若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒有通過， 則服務(wù)器會(huì)受理此次請(qǐng)求，之后的操作同①① 只有g(shù)et請(qǐng)求會(huì)被緩存，post請(qǐng)求不會(huì)Expires和Cache-Control`Expires`要求客戶端和服務(wù)端的時(shí)鐘嚴(yán)格同步。 `HTTP1.1`引入`Cache-Control`來克服Expires頭的限制。 如果max-age和Expires同時(shí)出現(xiàn)， 則max-age有更高的優(yōu)先級(jí)。Cache-Control: no-cache, private, max-age=0ETag: abcdeExpires: Thu, 15 Apr 2018 20:00:00 GMTPragma: privateLast-Modified: $now // RFC1123 format復(fù)制代碼

3.ETag應(yīng)用?

Etag由服務(wù)器端生成， 客戶端通過If-Match或者說If-None-Match這個(gè)條件判斷請(qǐng)求來驗(yàn)證資源是否修改。 常見的是使用If-None-Match。 請(qǐng)求一個(gè)文件的流程可能如下：====第一次請(qǐng)求=== 1.客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件；2.服務(wù)器處理請(qǐng)求， 返回文件內(nèi)容和一堆Header， 當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200====第二次請(qǐng)求=== 客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件， 注意這個(gè)時(shí)候客戶端同時(shí)發(fā)送一個(gè)If-None-Match頭， 這個(gè)頭的內(nèi)容就是第一次請(qǐng)求時(shí)服務(wù)器返回的 Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來的Etag和計(jì)算出來的Etag匹配， 因此If-None-Match為False， 不返回200，返回304，客戶端繼續(xù)使用本地緩存； 流程很簡單，問題是， 如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦? 答案是同時(shí)使用， 也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時(shí)間和Etag之后，服務(wù)器才能返回304.(不要陷入到底使用誰的問題怪圈)為什么使用Etag請(qǐng)求頭?Etag 主要為了解決 Last-Modified 無法解決的一些問題。復(fù)制代碼

4.關(guān)于Http 2.0 你知道多少？

HTTP/2引入了“服務(wù)端推（server push）”的概念， 它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中， 從而提高性能。HTTP/2提供更多的加密支持HTTP/2使用多路技術(shù)， 允許多個(gè)消息在一個(gè)連接上同時(shí)交差。它增加了頭壓縮（header compression）， 因此即使非常小的請(qǐng)求， 其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬。復(fù)制代碼

5.說說你對(duì)AMD和Commonjs的理解?

`CommonJS`是服務(wù)器端模塊的規(guī)范，nodejs采用了這個(gè)規(guī)范。 `CommonJS`規(guī)范加載模塊是同步的，也就是說， 只有加載完成，才能執(zhí)行后面的操作。 AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。`AMD`推薦的風(fēng)格通過返回一個(gè)對(duì)象做為模塊對(duì)象， `CommonJS`的風(fēng)格通過對(duì)`module.exports`或`exports`的 屬性賦值來達(dá)到暴露模塊對(duì)象的目的。復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的撩课-Web大前端每天5道面试题-Day39的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。