以下文章是根據掘金小冊《前端效能優化原理與實踐》整理
《前端效能優化原理與實踐》
開銷在網頁開銷中都是占有比較高的開銷
當下減小開銷的做法是，對不同的應用場景的選擇不同格式的，來減少資源的開銷。
關鍵字：有失真壓縮、體積小、載入快、不支援透明
缺點：對線條感強的向量圖、logo不能進行很好的表示
png8（256種顏色）、png24（1600萬種顏色）
關鍵字：無失真壓縮、質量高、體積大、支援透明。
應用場景：logo
svg是檔案、檔案、檔案
svg缺點：渲染成本高、需要學習成本（可程式設計）
應用場景：放大不失真
base64 是一種用於傳輸 8bit 位元組碼的編碼方式，通過對進行 base64 編碼，我們可以直接將編碼結果寫入 html 或者寫入 css，從而減少 http 請求的次數。
特性：不需要去請求資料、瀏覽器可以進行渲染。
與 png 相比，webp 無損影象的尺寸縮小了 26％。在等效的 ssim 質量指數下，webp 有損影象比同類 jpeg 影象小 25-34％。 無損 webp 支援透明度（也稱為 alpha 通道），僅需 22％ 的額外位元組。對於有損 rgb 壓縮可接受的情況，有損 webp 也支援透明度，與 png 相比，通常提供 3 倍的檔案大小。
複製**
前端js效能優化（一）
多數瀏覽器使用單一程序來處理ui重新整理和js指令碼執行，因此同一時刻只能做一件事。因此，當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行，無論指令碼是內嵌的還是外鏈的。由於每乙個script標籤都會阻塞頁面渲染，所以減少頁面包含的script標籤數量有助於改善這一狀況。這不...
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...