1、你在專案中如何進行 Webpack 優化?
答：
1. 縮小檔案搜尋範圍,配置比如resolve.modules,resolve.modules,resolve.mainFields,resolve.alias ,resolve.extensions ,module.noParse 配置
2. 使用DllPlugin 要給 Web 專案構建接入動態連結庫
3.HappyPack 就能讓 Webpack 做到這點，它把任務分解給多個子程式去併發的執行，子程式處理完後再把結果傳送給主程式
4.當 Webpack 有多個 JavaScript 檔案需要輸出和壓縮時，原本會使用 UglifyJS 去一個個挨著壓縮再輸出， 但是 ParallelUglifyPlugin 則會開啟多個子程式，把對多個檔案的壓縮工作分配給多個子程式去完成
5.可以監聽檔案的變化，當檔案發生變化後可以自動重新整理瀏覽器，從而提高開發效率。
6.(Hot Module Replacement)的技術可在不重新整理整個網頁的情況下做到超靈敏的實時預覽。 原理是當一個原始碼發生變化時，只重新編譯發生變化的模組，再用新輸出的模組替換掉瀏覽器中對應的老模組。
7.Tree Shaking 可以用來剔除 JavaScript 中用不上的死程式碼。它依賴靜態的 ES6 模組化語法，例如通過 import 和 export 匯入匯出
8.可以使用CommonsChunkPlugin 把多個頁面公共的程式碼抽離成單獨的檔案進行載入
9.Webpack 內建了強大的分割程式碼的功能去實現按需載入，可以用import實現路由按需載入。
10.Scope Hoisting 可以讓 Webpack 打包出來的程式碼檔案更小、執行的更快， 它又譯作 "作用域提升"
11.可以使用視覺化分析工具 Webpack Analyse等去分析輸出結果，從頁進行優化.
12. 對於 Webpack4，打包專案使用 production 模式，這樣會自動開啟程式碼壓縮
13.優化圖片，對於小圖可以使用 base64 的方式寫入檔案中
14. 給打包出來的檔名新增雜湊，實現瀏覽器快取檔案
複製程式碼2、請說一下ES6中 Generator 的實現原理?
答：Generator 實現 Generator 是 ES6 中新增的語法，和 Promise 一樣，都可以用來非同步程式設計
// 使用 * 表示這是一個 Generator 函式
// 內部可以通過 yield 暫停程式碼
// 通過呼叫 next 恢復執行
function* test() {
let a = 1 + 2;
yield 2;
yield 3;
}
let b = test();
console.log(b.next()); // > { value: 2, done: false }
console.log(b.next()); // > { value: 3, done: false }
console.log(b.next()); // > { value: undefined, done: true }
從以上程式碼可以發現，加上 * 的函式執行後擁有了 next 函式，也就是說函式執行後返回了一個物件。每次呼叫 next 函式可以繼續執行被暫停的程式碼。以下是 Generator 函式的簡單實現
// cb 也就是編譯過的 test 函式
複製程式碼function generator(cb) { return (function() { var object = { next: 0, stop: function() {} };
return {
next: function() {
var ret = cb(object);
if (ret === undefined) return { value: undefined, done: true };
return {
value: ret,
done: false
};
}
};
})();
}
// 如果你使用 babel 編譯後可以發現 test 函式變成了這樣
function test() {
var a;
return generator(function(_context) {
while (1) {
switch ((_context.prev = _context.next)) {
// 可以發現通過 yield 將程式碼分割成幾塊
// 每次執行 next 函式就執行一塊程式碼
// 並且表明下次需要執行哪塊程式碼
case 0:
a = 1 + 2;
_context.next = 4;
return 2;
case 4:
_context.next = 6;
return 3;
// 執行完畢
case 6:
case "end":
return _context.stop();
}
}
});
}
3、什麼是IFC?IFC的作用是什麼？
答：這個網站有所有完整的概念。
複製程式碼IFC BFC都屬於「視覺視覺化模型」 型」 www.ayqy.net/doc/css2-1/…
h
developer.mozilla.org/zh-CN/docs/… htt xt dondevi.github.io/css-visual-…
4、什麼是跨域？常用的跨域方式有哪些？
答：由於瀏覽器存在同源策略，請求的 Url 地址的協議、主機名、埠號必須完全相同，否則會產生跨域，同源策略的限制下 cookie 、loclstorage、dom、ajax、IndexDB 等都不允許跨域、form 表單不受同源策略限制 對跨域的理解有一個誤區，跨域不是請求沒有傳送出去或者伺服器接收到請求而沒有響應，正確的情況是請求發出，伺服器響應，由於響應和請求來自不同的域被瀏覽器攔截了。
跨域的方式有以下幾種：
1、jsonp：通過 script 的 src 屬性傳送請求，傳參必須含有 callback 回撥的名稱，伺服器返回函式的呼叫，接收到響應直接執行；
2、cors：通過服務端設定 Access-Control-Allow-Origin，通常在後端通過白名單設定許可權允許固定的域來訪問
3、window.postMessage：Hge：H5 API，訊息接收方通過 message 事件接收，事件物件 data 屬性代表接收的訊息，可以通過事件物件的 source 屬性 通過 通過 source.postMessage(“ge(“message”, ”, e.origin) 進行) 進行回覆
4、可以使用 使用 window.name 和 l 和 和 location.hash 在不同 在不同域的 iframe 頁面之間進行訊息傳遞
5、document.domain：如果域：如果域名之間是一二級域名的關係，可以將頁面的 面的 document.domain 設定為 設定為一級域名的後半部分，如：，如：baidu.com 實現跨 實現跨域
6、可以使用 websocket 進行跨域，websocek 的協議為 ws:// 或 wss:// 是實時通訊，不存在跨域問題。
7、伺服器與伺服器之間通訊不受瀏覽器同源策略限制，因此不存在跨域問題，可以使用 nginx 或 node 的 http-proxy-middleware 中介軟體實現作為代理伺服器幫助瀏覽器對請求進行轉發，完成與不同域的伺服器之間的通訊，webpack-dev-server 就是通過 http-proxy-middleware 實現的跨域
詳情請看：請看：www.pandashen.com/2018/06/11/…
6、請說說cookie，localStorage，sessionStorage，indexDB之間的區別的使用場景?
答：
7、寫一個函式find_missing(A, low, high)，給定一個範圍[low,high]，尋找一個陣列中缺失的元素。
答：本題考查對演算法複雜度的理解，簡單兩次迴圈或者filter/map等等巢狀迴圈，可以在O( (high -low) * A.length )複雜度完成，但是通過排序可以優化到O(nlgn)+O(high - low)。
function find_missing(A, low, high){
const B = A.filter(x => x >= low && x < high).sort((x,y) => x - y)
let j = 0
return [...Array(high - low )]
.map((_, i) => i+low)
.filter(x => B[j] !== x ? true : !!!++j)
}
複製程式碼8、講講輸入完網址按下回車，到看到網頁這個過程中發生了什麼？
答：
2. 瀏覽器解析URL解析出主機名
3. 瀏覽器將主機名轉換成伺服器ip地址（瀏覽器先查詢本地DNS快取列表 沒有的話 再向瀏覽器預設的DNS伺服器傳送查詢請求 同時快取）
4. 瀏覽器將埠號從URL中解析出來
5. 瀏覽器建立一條與目標Web伺服器的TCP連線（三次握手）
6. 瀏覽器向伺服器傳送一條HTTP請求報文
7. 伺服器向瀏覽器返回一條HTTP響應報文
8. 關閉連線 瀏覽器解析文件
9. 如果文件中有資源 重複6 7 8 動作 直至資源全部載入完畢
渲染的基本流程
1. HTML解析出DOM Tree
2. CSS解析出Style Rules
3. 將二者關聯生成Render Tree
4. Layout 根據Render Tree計算每個節點的資訊
5. Painting 根據計算好的資訊繪製整個頁面
複製程式碼9、今日面試題 談談你對前端資源下載效能優化的經驗和思考?