1.談談你對webpack的看法?

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

2.什么是Etag？

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

3.ETag應用?

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

4.關于Http 2.0 你知道多少？

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。