撩課-Web大前端天天5道面試題-Day39

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.js
 
5. 能夠將代碼切割成不一樣的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=0
 
    ETag: abcde
 
    Expires: Thu, 15 Apr 2018 20:00:00 GMT
 
    Pragma: private
 
    Last-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`的
屬性賦值來達到暴露模塊對象的目的。

複製代碼