優化方向有兩個：
http 請求
js 載入
開啟瀏覽器控制台的網路，可以看到從拉取模版開始到首次渲染中間到底在載入什麼，如果中間某些資源載入速度過慢，則可以從這方面入手，否則的話有可能是解析 js 速度過慢導致。
請求優化
合理使用快取
合理使用快取，降低請求等待的時間，可以通過達到效能優化
cdn 內容分發
將非核心資源通過 cdn 的方式進行分發，例如使用的第三方庫（react、vue、地圖等），可以有效減小請求包的體積，同時穩定高速的 cdn 伺服器也可以加快請求的速度。
cdn 通常會配合非同步載入一起使用。
優化
使用合適的格式作為**的，比如 webp。具體看優化 。
隨著時間的推移，遷移到 http/2 是不可避免的。目前瀏覽器對於 http/2 的支援度都非常友好，同時相對於 http/1，http/2 在效能上有著非常顯著的提公升http版本
資源壓縮
目前瀏覽器大多都支援對壓縮資源進行載入，比如 js、css 的 gzip。開啟壓縮後，會讓資源的體積減小，從而降低請求時間。
載入優化
拆包
在不配置拆包的情況下，webpack 會將所有的資源都打包在乙個 js 檔案中，這無疑會讓請求時候的響應體積變得非常大，從而降低載入速度。
同時，不配置拆包，會在首次載入的時候載入一些無關的資源，浪費了一次寶貴的請求。
合理配置拆包，讓每次請求都只請求對應的核心資源，從而達到按需載入的程度。
拆包通常的邏輯：
1. 業務**和第三方依賴進行拆分
2. 對於第三方依賴：
將版本經常變動的與版本不怎麼變動的進行拆分
版本不怎麼變動的依賴可以合理配置 cdn
3. 對於業務**：
將業務模組和公共模組進行拆分
業務模組也根據呼叫的次數進行拆分
將首屏模組單獨進行拆分
非同步載入
非核心的資源不需要在拉取模版之後立馬就載入，可以使用非同步載入，讓這些非核心資源在檢視構建完畢以後再進行載入
預載入
與首屏優化一樣，路由跳轉優化也是非常關鍵。我們可以通過判斷是否需要進行路由跳轉，在跳轉之前做一些提前載入，從而達到跳轉完成之後，資源立馬載入完畢的效果從而提公升載入速度
合理配置打包版本
首先我們需要明確一點，一般情況下，隨著新標準的制定，瀏覽器廠商通常會著重對新標準的效能進行優化，而老標準的優化頻率會慢慢降低，所以，我們編碼的目標便是面向未來程式設計。
另外，目前我們主要是用 es6+ 或 ts 進行編碼，經過打包工具構建之後，效能往往比不上手寫的**，雖然隨著工具的公升級，效能會越來越好，但是編譯後的**，尤其是對 class **的編譯，效能下降是非常明顯的。
最後，編譯後**的體積會出現膨脹的情況，編譯器使用了很多技巧來將 es6 轉換成 es5，所以使用 es6 版本會讓體積更小。
目前主流瀏覽器對於 es6 的支援越來越好，打包的時候可以設定兩個構建，對於支援度較好的瀏覽器版本，使用更高階的版本，從而達到減小包的體積來達到更快的載入速度。
同時，可以使用 的方式來實現動態載入 es6 **，詳情可以檢視隨著 vue3 一起發布的 vite。
搖樹
我們可能在編碼過程中會書寫一些無用**，但是這些無用**卻會被打包構建工具與核心資源打包在一起，這無疑會增大請求時相應的體積，從而影響我們載入的速度。所以在打包過程中使用搖樹的方式，可以將無用的**清除，從而減小包的體積來達到效能提公升。
多執行緒
現代瀏覽器大都支援 worker，這是一種瀏覽器實現多執行緒的方式，他可以與 js 執行緒、gui 執行緒同時執行，通過 worker，我們可以將一些複雜繁瑣的操作交給子執行緒來完成，從而避免渲染執行緒的阻塞，來達到效能的優化。
但是，執行緒之間的通訊是需要消耗時間的，所以多執行緒技術應該合理地使用。
使用外鏈樣式而非內聯樣式
瀏覽器對於外鏈樣式處理的速度會比內聯樣式更快，這也是為什麼 style-components 這麼火的原因。
同時優先使用瀏覽器的 html 標籤 link，而不是 css 中的 @import，原因在於 link 的載入是和 gui 執行緒並行的，但是 @import 需要等待 html 完全處理完成之後再進行載入。
體驗優化
骨架屏
使用 loading 圖或者是骨架屏，可以一定程度上減少使用者等待載入的焦慮感，讓使用者感覺沒有等太久，這就是使用者體驗級的優化。
服務端渲染
在條件允許的情況下，將客戶端渲染遷移到服務端渲染，利用服務端高效能的表現，可以實現使用者拉去到模版之後立馬顯示檢視，省去中間 js 載入的過程。
動畫
直接操作 dom，有可能會引起大面積的重排和重繪，從而引起掉幀的情況，導致使用者體驗下降。
合理使用 css3 gpu 加速，可以避免使用動畫之後的重排和重繪，達到更流暢的動畫效果。
有一說一，開啟 css3 gpu 加速是非常消耗功耗的，所以在移動端上面謹慎使用。
虛擬滾動
我們知道，頁面進行滾動的時候，也會觸發瀏覽器的重排，如果此時前端需要渲染大量資料，而且還不允許分頁，這種情況下會導致瀏覽器的掉幀、卡頓甚至假死的情況。
這種情況下，如果不能使用分頁進行優化，通常我們會使用虛擬滾動的方式來解決問題。
因為 dom 元素的建立和渲染需要的時間成本很高，在大資料的情況下，完成渲染列表所需要的時間不可接受，所以我們可以只渲染可視區域，從而達到極高的初次渲染效能。
Web效能優化
我們先來看乙個瀑布圖來確定乙個頁面效能問題是由哪些項造成的。chorome 自帶開發人員工具 圖中每一行表示乙個 請求，每乙個請求都有一條時間線，用於標識這個請求所花費的時間。如果將滑鼠放到某一條時間線上，可以看到以下資訊 1 首先看一下哪個請求花費的時間比較長，看看這個請求的時間線資訊，確定是伺服...
web效能優化
可以用gulp的gulp uglify gulp minify css模組完成 還可以用webpack的uglifyjsplugin壓縮外掛程式完成。通過css sprites將多個整合到乙個中，在用css來定位。伺服器在處理大流量的資料是十分困難的，這最終導致頁面載入速度變慢。cdn是位於全球不同...
Web效能優化
我們先來看乙個瀑布圖來確定乙個頁面效能問題是由哪些項造成的。chorome自帶開發人員工具 圖中每一行表示乙個http請求，每乙個請求都有一條時間線，用於標識這個請求所花費的時間。如果將滑鼠放到某一條時間線上，可以看到以下資訊 網域名稱解析 搜尋dns伺服器並解析網域名稱為ip位址所花費的事件，這裡...