面試之道之性能篇

網頁內容

• 減小 http 請求次數；
• 減小 DNS 查詢次數；
• 減小 iframe 數量；
• 減小 DOM 元素數量；
• 延遲加載；
• 提早加載；
• 滾動加載；
• 根據域名劃份內容；
• 避免頁面跳轉；
• 緩存 Ajax;

圖片

• css sprites，即雪碧圖，將多個圖標文件整合到一張圖片中（修改更新少的常駐型低色位的裝飾小圖）；
• base64，體積小複用率低的背景裝飾圖標；
• iconfont，純色圖標，上傳圖標 svg 生成對應字體文件, 好比阿里巴巴矢量圖標庫 ；
• 非純色圖一般用【2X】圖適配，可用：媒體查詢、srcset屬性、image-set屬性、腳本控制；
• 選擇正確的圖片格式，能使用 WebP 格式優先考慮，小圖使用 png，若是可使用 svg 代替，圖片使用 jpg;

css

• 將樣式表置頂；
• 避免 css 表達式；
• 用 link 代替 @import;
• 避免使用 Filters
• 建議使用類選擇器，訪問比較快；
• 不建議使用很長的base64；

javascript

• 將腳本置底，防止阻塞以減小對併發下載的影響，儘早刷新文檔的輸出；
• 使用外部 javascript 文件;
• 精簡 javascript;
• 去除重複腳本；
• 減小DOM訪問，儘可能緩存DOM；
• 使用智能事件處理；
• 避免使用eval和width；
• 充分利用事件委託；
• 減小 Repaint（重繪）和 Reflow（重排）最好經過批量更新元素減小重排次數，如設置類class統一更新樣式，在添加多個 li；
• 元素將會觸發屢次頁面重排的狀況下使用 DOM fargment 在內存中建立完整的 DOM 節點，而後再一次性添加到 DOM 中；

cookie

• 減小 Cookie 大小；
• 頁面內容使用無 cookie 域名；

服務器

• 使用 CDN（內容分發網絡）；
• 添加 Expires 或 Cache-control 報文頭；
• GZip 壓縮傳輸文件；
• 配置 ETags;
• 避免空的圖片 src;

webpack

主要從減小 Webpack 的打包時間和讓 Webpack 打出來的包更小入手。

• 優化 Loader 的文件搜索範圍，從 include 和 exclude 配置入手，配合文件緩存 loader: 'babel-loader?cacheDirectory=true'；
• HappyPack，將 Loader 的同步執行轉換爲並行的，充分利用系統資源來加快打包效率；
• DllPlugin，將特定的類庫提早打包而後引入；
• 代碼壓縮，通常使用 UglifyJS 來壓縮代碼，不過這是單線程的，可以使用 webpack-parallel-uglify-plugin 來並行運行 UglifyJS，從而提升效率;
• 按需加載，一個項目不免會存在幾十個頁面的路由，若是全部頁面的都打包進一個 js 文件（文件就會過大），加載第一個頁面就會耗費很長時間。實現按需加載，每一個頁面（路由）打包成一個文件。另外，對於一些庫文件也能夠打包成一個文件。
• Scope Hoisting，範圍提高，會分析出模塊之間的依賴關係，儘量的把打包出來的模塊合併到一個函數中去；
• Tree Shaking，（樹抖動，將一些要掉落的葉子或小樹杈抖落）刪除項目中未被引用的代碼；