效能優化需要從哪幾個方面入手？我們要先了解瀏覽器開啟網頁的過程。
瀏覽器對url進行dns解析
瀏覽器與伺服器進行tcp連線
瀏覽器發出http請求
伺服器返回http響應
瀏覽器進行頁面渲染
一 瀏覽器傳送http請求
1.減少請求次數
1.資源合併
---使用打包工具，使用webpack等工具，對js和css資源進行打包，避免js或css檔案過多。
---但也要考慮打包檔案過大的問題，需要再這之間進行綜合考慮。
---在spa中常用的實踐是，webpack提取出的公用檔案先載入，然後路由相關的檔案按需載入。減小入口檔案體積，常用的手段是路由懶載入，開啟 路由懶載入之後，待請求的頁面會單獨打包js檔案，使得入口檔案index.js變小，
2.合理利用快取
--- 強快取（200）本地快取是最快速的一種快取方式，只要資源還在快取有效期內，瀏覽器就會直接在本地讀取，不會請求服務端
--- 協商快取（304） 協商快取，顧名思義是經過瀏覽器與伺服器之間協商過之後，在決定是否讀取本地快取，如果伺服器通知瀏覽器可以讀取本 快取，會返回304狀態碼，並且協商過程很簡單，只會傳送頭資訊，不會傳送響應體。
2.縮小請求體積
1. 資源壓縮
--- gzip，傳輸的時候可以在伺服器端開啟gzip壓縮，可以有效減少傳輸檔案的大小，可以在響應頭content-encoding: gzip中看到。
--- **壓縮
--- 壓縮
2.選用正確的格式
png無損格式，壓縮率一般，支援透明背景，常用於透明或者icon等。
jpg有損格式，壓縮率較好，常用於複雜的大圖，不支援透明背景。
svg向量圖形，可程式設計。在各解析度下不失真，但是渲染複雜圖形較消耗效能。常用於簡單圖形。
webp
無損格式，相較於png和jpg來說，壓縮率更好，同時支援透明背景。唯一的缺點是相容性不好。可用於相容性好的瀏覽器，用jpg和png做回退機制。
1.減少響應時間
1.利用cdn
---cdn全稱content delivery network。它是依靠部署在各地區的邊緣伺服器，達到使用者就近獲取內容，降低網路擁塞，提高使用者訪問速度和命 中率的目的。它主要的關鍵技術是內容儲存和分發技術。
---cdn減少打包體積 使用 cdn 檔案來減少工程到打包體積
2.降低頁面初始渲染時間
1.伺服器渲染 ssr1.減少阻塞
2.減少渲染次數
1.避免回流與重繪
---回流又稱為重排，即通過某種手段改變了元素的位置大小等資訊，導致瀏覽器需要重新計算和渲染的過程。而重繪只是被改變了樣式如背景和顏色等
3.減少渲染節點數量
1. 懶載入
---對於一些不在使用者檢視內的元素，我們可以在展示的時候先不進行渲染，直到該元素出現在了檢視內再進行渲染。// 一張就是乙個
在沒有進入可視區域時，先不給
...
...
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...