1.談?wù)勀銓ebpack的看法?

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

2.什么是Etag？

當(dāng)發(fā)送一個服務(wù)器請求時， 瀏覽器首先會進行緩存過期判斷。 瀏覽器根據(jù)緩存過期時間判斷緩存文件是否過期。情景一： 若沒有過期，則不向服務(wù)器發(fā)送請求， 直接使用緩存中的結(jié)果， 此時我們在瀏覽器控制臺中可以看到?`200 OK`(from cache) ， 此時的情況就是完全使用緩存， 瀏覽器和服務(wù)器沒有任何交互的。情景二： 若已過期， 則向服務(wù)器發(fā)送請求， 此時請求中會帶上①中設(shè)置的文件修改時間，和`Etag`然后，進行資源更新判斷。 服務(wù)器根據(jù)瀏覽器傳過來的文件修改時間， 判斷自瀏覽器上一次請求之后， 文件是不是沒有被修改過； 根據(jù)`Etag`， 判斷文件內(nèi)容自上一次請求之后， 有沒有發(fā)生變化情形一： 若兩種判斷的結(jié)論都是文件沒有被修改過， 則服務(wù)器就不給瀏覽器發(fā)`index.html`的內(nèi)容了， 直接告訴它，文件沒有被修改過， 你用你那邊的緩存吧——?`304 Not Modified`， 此時瀏覽器就會從本地緩存中獲取`index.html`的內(nèi)容。 此時的情況叫協(xié)議緩存， 瀏覽器和服務(wù)器之間有一次請求交互。情形二： 若修改時間和文件內(nèi)容判斷有任意一個沒有通過， 則服務(wù)器會受理此次請求，之后的操作同①① 只有g(shù)et請求會被緩存，post請求不會Expires和Cache-Control`Expires`要求客戶端和服務(wù)端的時鐘嚴格同步。 `HTTP1.1`引入`Cache-Control`來克服Expires頭的限制。 如果max-age和Expires同時出現(xiàn)， 則max-age有更高的優(yōu)先級。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這個條件判斷請求來驗證資源是否修改。 常見的是使用If-None-Match。 請求一個文件的流程可能如下：====第一次請求=== 1.客戶端發(fā)起 HTTP GET 請求一個文件；2.服務(wù)器處理請求， 返回文件內(nèi)容和一堆Header， 當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200====第二次請求=== 客戶端發(fā)起 HTTP GET 請求一個文件， 注意這個時候客戶端同時發(fā)送一個If-None-Match頭， 這個頭的內(nèi)容就是第一次請求時服務(wù)器返回的 Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來的Etag和計算出來的Etag匹配， 因此If-None-Match為False， 不返回200，返回304，客戶端繼續(xù)使用本地緩存； 流程很簡單，問題是， 如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦? 答案是同時使用， 也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag之后，服務(wù)器才能返回304.(不要陷入到底使用誰的問題怪圈)為什么使用Etag請求頭?Etag 主要為了解決 Last-Modified 無法解決的一些問題。復(fù)制代碼

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

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

5.說說你對AMD和Commonjs的理解?

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

總結(jié)

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

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