[TOC] ## CDN的優化 * **使用第三方的CDN服務：** 如果想要開源一些項目，可以使用第三方的CDN服務 * **使用CDN進行靜態資源的緩存：** 將自己網站的靜態資源放在CDN上，比如js、css、圖片等。可以將整個項目放在CDN上，完成一鍵部署。 * **直播傳送：** 直播本質上是使用流媒體進行傳送，CDN也是支持流媒體傳送的，所以直播完全可以使用CDN來提高訪問速度。CDN在處理流媒體的時候與處理普通靜態文件有所不同，普通文件如果在邊緣節點沒有找到的話，就會去上一層接著尋找，但是流媒體本身數據量就非常大，如果使用回源的方式，必然會帶來性能問題，所以流媒體一般采用的都是主動推送的方式來進行。 ## 懶加載 ### 懶加載的概念 * 懶加載也叫做延遲加載、按需加載，指的是在長網頁中延遲加載圖片數據，是一種較好的網頁性能優化的方式。在比較長的網頁或應用中，如果圖片很多，所有的圖片都被加載出來，而用戶只能看到可視窗口的那一部分圖片數據，這樣就浪費了性能。 * 如果使用圖片的懶加載就可以解決以上問題。在滾動屏幕之前，可視化區域之外的圖片不會進行加載，在滾動屏幕時才加載。這樣使得網頁的加載速度更快，減少了服務器的負載。懶加載適用于圖片較多，頁面列表較長（長列表）的場景中。 ### 懶加載與預加載的區別 這兩種方式都是提高網頁性能的方式，兩者主要區別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。 * **懶加載也叫延遲加載，指的是在長網頁中延遲加載圖片的時機，當用戶需要訪問時，再去加載**，這樣可以提高網站的首屏加載速度，提升用戶的體驗，并且可以減少服務器的壓力。它適用于圖片很多，頁面很長的電商網站的場景。懶加載的實現原理是，將頁面上的圖片的 src 屬性設置為空字符串，將圖片的真實路徑保存在一個自定義屬性中，當頁面滾動的時候，進行判斷，如果圖片進入頁面可視區域內，則從自定義屬性中取出真實路徑賦值給圖片的 src 屬性，以此來實現圖片的延遲加載。 * **預加載指的是將所需的資源提前請求加載到本地，這樣后面在需要用到時就直接從緩存取資源。**通過預加載能夠減少用戶的等待時間，提高用戶的體驗。我了解的預加載的最常用的方式是使用 js 中的 image 對象，通過為 image 對象來設置 scr 屬性，來實現圖片的預加載。 ## 回流與重繪 ### 減少回流與重繪的措施： * 操作DOM時，盡量在低層級的DOM節點進行操作 * 不要使用`table`布局， 一個小的改動可能會使整個`table`進行重新布局 * 使用CSS的表達式 * 不要頻繁操作元素的樣式，對于靜態頁面，可以修改類名，而不是樣式。 * 使用absolute或者fixed，使元素脫離文檔流，這樣他們發生變化就不會影響其他元素 * 避免頻繁操作DOM，可以創建一個文檔片段`documentFragment`，在它上面應用所有DOM操作，最后再把它添加到文檔中 * 將元素先設置`display: none`，操作結束后再把它顯示出來。因為在display屬性為none的元素上進行的 ### 如何優化動畫？ 對于如何優化動畫，我們知道，一般情況下，動畫需要頻繁的操作DOM，就就會導致頁面的性能問題，我們可以將動畫的`position`屬性設置為`absolute`或者`fixed`，將動畫脫離文檔流，這樣他的回流就不會影響到頁面了。 ## 節流與防抖 ### 對節流與防抖的理解 * 函數防抖是指在事件被觸發 n 秒后再執行回調，如果在這 n 秒內事件又被觸發，則重新計時。這可以使用在一些點擊請求的事件上，避免因為用戶的多次點擊向后端發送多次請求。 * 函數節流是指規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。節流可以使用在 scroll 函數的事件監聽上，通過事件節流來降低事件調用的頻率。 **防抖函數的應用場景：** * 按鈕提交場景：防?多次提交按鈕，只執?最后提交的?次 * 服務端驗證場景：表單驗證需要服務端配合，只執??段連續的輸?事件的最后?次，還有搜索聯想詞功能類似?存環境請?lodash.debounce **節流函數的****適?場景：** * 拖拽場景：固定時間內只執??次，防?超?頻次觸發位置變動 * 縮放場景：監控瀏覽器resize * 動畫場景：避免短時間內多次觸發動畫引起性能問題 ## 圖片優化 ### 如何對項目中的圖片進行優化？ 1. 不用圖片。很多時候會使用到很多修飾類圖片，其實這類修飾圖片完全可以用 CSS 去代替。 2. 對于移動端來說，屏幕寬度就那么點，完全沒有必要去加載原圖浪費帶寬。一般圖片都用 CDN 加載，可以計算出適配屏幕的寬度，然后去請求相應裁剪好的圖片。 3. 小圖使用 base64 格式 4. 將多個圖標文件整合到一張圖片中（雪碧圖） 5. 選擇正確的圖片格式： * 對于能夠顯示 WebP 格式的瀏覽器盡量使用 WebP 格式。因為 WebP 格式具有更好的圖像數據壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量，缺點就是兼容性并不好 * 小圖使用 PNG，其實對于大部分圖標這類圖片，完全可以使用 SVG 代替 * 照片使用 JPEG ## Webpack優化 ### 如何提?**webpack**的打包速度**?** #### 優化 Loader * 對于 Loader 來說，影響打包效率首當其沖必屬 Babel 了。因為 Babel 會將代碼轉為字符串生成 AST，然后對 AST 繼續進行轉變最后再生成新的代碼，項目越大，**轉換代碼越多，效率就越低**。當然了，這是可以優化的。 * 代碼壓縮 * 按需加載 ### .如何?**webpack**來優化前端性能？ ?webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運?快速?效。 * **壓縮代碼** ：刪除多余的代碼、注釋、簡化代碼的寫法等等?式。可以利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS?件， 利? cssnano （css-loader?minimize）來壓縮css * 利?CDN加速: 在構建過程中，將引?的靜態資源路徑修改為CDN上對應的路徑。可以利?webpack對于 output 參數和各loader的 publicPath 參數來修改資源路徑 * **Tree Shaking** : 將代碼中永遠不會?到的?段刪除掉。可以通過在啟動webpack時追加參數 \--optimize-minimize 來實現 * **Code Splitting:** 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器緩存 * **提取公共第三?庫** : SplitChunksPlugin插件來進?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動的公共代碼 ### 其他：如何提?**webpack**的構建速度？ 1. 多??情況下，使? CommonsChunkPlugin 來提取公共代碼 2. 通過 externals 配置來提取常?庫 3. 利? DllPlugin 和 DllReferencePlugin 預編譯資源模塊 通過 DllPlugin 來對那些我們引?但是絕對不會修改的npm包來進?預編譯，再通過 DllReferencePlugin 將預編譯的模塊加載進來。 4. 使? Happypack 實現多線程加速編譯 5. 使? webpack-uglify-parallel 來提升 uglifyPlugin 的壓縮速度。 原理上 webpack-uglify-parallel 采?了多核并?壓縮來提升壓縮速度 6. 使? Tree-shaking 和 Scope Hoisting 來剔除多余代碼