1. 載入優化
1. 壓縮合併
2. **分割(code spliting)，可以基於路由或動態載入
3. 第三方模組放在cdn
4. 大模組非同步載入，例如: echarts，可以使用require.ensure，在載入成功後，在顯示對應圖表
5. 小模組適度合併，將一些零散的小模組合併一起載入，速度較快
6. 可以使用pefetch預載入，在分步場景中非常適合
2. 優化
1. 小圖使用雪碧圖，iconfont，base64內聯
2. 使用懶載入
3. webp代替其他格式
4. 一定要壓縮
5. 可以使用的img的srcset，根據不同解析度顯示不同尺寸，這樣既保證顯示效果，又能節省頻寬，提高載入速度
3. css優化
1. css寫在頭部
2. 避免css表示式
3. 移除空置的css規則
4. 避免行內style樣式
4. js優化
1. js寫在body底部
2. js用defer放在頭部，提前載入時間，又不阻塞dom解析
3. script標籤新增crossorigin，方便錯誤收集
5. 渲染優化
1. 儘量減少reflow和repaint
涉及到樣式，尺寸，節點增減的操作，都會觸發reflow和repaint。
1.1 用變數快取dom樣式，不要頻繁讀取
1.2 通過documentfragment或innerhtml批量操作dom
1.3 dom隱藏，或複製到記憶體中，類似virtual dom，進行修改，完成後再替換回去
1.4 動畫元素一定要absolute，脫離文件流，不影響其他元素。動畫不要用left，top等操作，要使用transform和opacity，同時開啟渲染層(will-change或translate3d(0,0,0))
1.5 動畫盡量用requestanimationframe，不要用定時器
1.6 移動端硬體加速，觸發gpu渲染，還是translate3d(0,0,0)
2. 盡量用css動畫代替js動畫，canvas動畫代替js動畫
3. 初始渲染，可以使用骨架屏或loading，提公升體驗
4. pwa，可以本地快取資源，提公升體驗
5. 頻繁觸發的事件，防抖、節流，例如：scroll，input等
6. 長列表，使用分頁或滾動載入，虛擬列表，移除屏外dom
6. 首屏優化
原則：顯示快，滾動流暢，懶載入，懶執行，漸進展現
1. **分離，將首屏不需要的**分離出去
2. 服務端渲染或預渲染，載入完html直接渲染，減少白屏時間
3. dns prefetch，使用dns-prefetch減少dns查詢時間，pc端網域名稱發散，移動端網域名稱收斂
4. 減少關鍵路徑css，可以將關鍵的css內聯，這樣可以減少載入和渲染時間
7. 打包優化
主要是webpack優化
8. vue優化
1. 路由懶載入元件
2. keep-alive快取元件，保持原顯示狀態
3. 列表項新增key，保證唯一
4. 列表項繫結事件，使用事件**(v-for)
5. v-if和v-for不要用在乙個標籤上，它會在每個項上進行v-if判斷
9. react優化
1. 路由元件懶載入，使用react-loadable
2. 類元件新增shouldcomponent或purecomponent
3. 函式元件新增react.memo
4. 列表項新增key，保證唯一
5. 函式元件使用hook優化，usememo，usecallback
10. seo優化
1. 新增各種meta資訊
2. 預渲染
3. 服務端渲染
前端效能優化
1.減少http請求次數 css sprites 在國內很多人叫css精靈，是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言，不高於200kb的單張的所需載入時間基本是...
前端效能優化
在開發好頁面後，如何讓頁面更好更快的執行 從前端的角度來看，效能可以分為兩個方向 從使用者角度來看，乙個是頁面載入的很快，另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...
前端效能優化
隨著現在 越來越酷炫，各種，資源庫，動畫等等用的越來越多，在使用者視覺和功能的提公升的同時，效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s，網民就會流失70 以上。這種說法我覺得不是很正確的，除非是非常重要 必須要使用的 否則超過5s我基本直接關了，體驗太差。所以，使用者 忍讓 是有極限...