前端性能優化的方法有很多，本文主要介紹開發中比較常用的幾種優化手段
文件合並
網頁中的每一個外部文件的下載都會發送一個HTTP請求，常見的有css、js、img等。合並文件能有效的減少HTTP的請求，比較有效的做法是把公共庫文件合並到一個文件，因為這些文件基本不會變動，把不同頁面獨有的文件單獨合並，這樣修改起來方便。對於圖標ICON，可以使用字體圖標或雪碧圖技術
資源壓縮
前端構建工具可以很方便的壓縮HTML、CSS、JS、圖片等資源，在構建過程中，可以把無用的空格、注釋、無效字符等一並刪除。對於圖片資源，會舍棄一些相對無關緊要的色彩信息來減少資源大小
HTTP協議上的GZIP編碼是一種用來改進WEB應用程序性能的技術，需要WEB服務器安裝這一個功能。當有人來訪問這個服務器中的網站時，服務器中的這個功能就將網頁內容壓縮后傳輸到來訪的電腦瀏覽器中顯示出來（解碼過程是瀏覽器自動完成的）。一般對純文本內容可壓縮到原大小的40%
緩存
服務端可以設置Cache-Control或Expires強緩存，在緩存不過期的情況下，客戶端不向服務器發送請求。強緩存過期時，會使用Last-Modified或Etag這類協商緩存，向服務器發送請求，如果資源沒有變化，則服務器返回304響應，瀏覽器繼續從本地緩存加載資源；如果資源更新了，則服務器將更新后的資源發送到瀏覽器，並返回200響應
DNS預解析
當瀏覽器訪問一個域名的時候，需要解析一次DNS，獲得對應域名的ip地址。在解析過程中，按照瀏覽器緩存、系統緩存、路由器緩存、ISP(運營商)DNS緩存、根域名服務器、頂級域名服務器、主域名服務器的順序，逐步讀取緩存，直到拿到IP地址
DNS Prefetch，即DNS預解析就是根據瀏覽器定義的規則，提前解析之后可能會用到的域名，使解析結果緩存到系統緩存中，縮短DNS解析時間，來提高網站的訪問速度
DNS預解析的添加方法是在head 標簽里面寫上幾個link 標簽。解析的過程是並行的，不會堵塞頁面渲染
<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">
優化資源加載
資源位置
為了盡可能快地展示出頁面內容，資源盡量按照下面的順序加載
1、CSS文件放在head中，先外鏈，后本頁
2、JS文件放在body底部，先外鏈，后本頁
3、處理頁面布局的JS文件放在head中，如babel-polyfill.js文件、flexible.js文件
4、body中間盡量不寫style標簽和script標簽
加載時機
合理利用script標簽的defer和async屬性
defer: 異步加載，在HTML解析完成后執行(defer的實際效果與將代碼放在body底部類似)
async: 異步加載，加載完成后立即執行（如果有dom操作，這種放肆不適用）
默認情況下，dom渲染會等到script和style標簽資源加載完畢后執行（同步過程）。
如果js資源很大，並且使用了defer屬性，會出現頁面已渲染但是不可交互的情況，但這也比一直白屏要好很多。
按需加載
對於SPA應用，可以借助webpack實現按需加載，即根據路由來加載當前頁面需要的業務模塊。這種方式實際上是先把代碼在一些邏輯斷點處分離開，然后在一些代碼塊中完成某些操作后（比如監控到路由變化后），立即引用新的代碼塊
預加載（preload）和懶加載（lazyload）
preload讓瀏覽器提前加載指定資源，需要執行時再執行。lazyload剛好相反，它是需要資源時再加載。資源懶加載和資源預加載都是一種錯峰操作，在瀏覽器忙碌的時候不做操作，瀏覽器空間時，再加載資源，優化了網絡性能
DOM優化
緩存DOM
由於查詢DOM比較耗時，在同一個節點無需多次查詢的情況下，可以緩存DOM
var box = document.getElementById('box')
DOM元素離線更新
對DOM進行相關操作時，例innerHTML、appendChild等都可以使用Document Fragment對象進行離線操作，待元素“組裝”完成后再一次插入頁面，或者使用display:none 對元素隱藏，在元素“消失”后進行相關操作
事件代理
事件代理是指將事件監聽器注冊在父級元素上，由於子元素的事件會通過事件冒泡的方式向上傳播到父節點，因此，可以由父節點的監聽函數統一處理多個子元素的事件
防抖和節流
使用函數節流（throttle）或函數去抖（debounce），限制某一個方法的頻繁觸發
webpack優化
打包公共代碼
使用CommonsChunkPlugin插件，將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供后續使用。這會帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時再去加載一次這個文件
webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項 optimization.splitChunks 和 optimization.runtimeChunk
通過設置 optimization.splitChunks.chunks: "all" 來啟動默認的代碼分割配置項
動態導入和按需加載
webpack提供了兩種技術通過模塊的內聯函數調用來分離代碼，優先選擇的方式是，使用符合 ECMAScript 的 import() 語法。第二種，則是使用 webpack 特定的 require.ensure