[[402532]]

本文轉載自微信公眾號「三分鐘學前端」，作者sisterAn。轉載本文請聯系三分鐘學前端公眾號。

作為前端工程師，性能優化是最基礎、必備的內容，也是最繁瑣的內容，如何把這項工作做好喃?本系列開始進入前端性能優化與監控的進階，主要內容包括但不僅限于：

• 如何認識網站性能
• 性能標準
• 如何衡量一個 Web 頁面的性能：性能指標
• 從頁面呈現過程看性能瓶頸
• 性能優化策略
  • 常見性能優化方案：35 條軍規[雅虎]、Web 開發最佳實踐手冊[谷歌]等
  • 如何優化加載性能
  • 如何優化渲染性能
  • 實踐：首屏秒開、白屏 300ms 和界面流暢優化技巧
• 性能實踐
  • 如何排查加載性能問題
  • 如何排查性能渲染問題
• 性能測試工具
• 性能采集與監控實踐
  • 性能采集：首屏、白屏卡頓等
  • 性能采集與上報 SDK
  • 從 0 到 1 搭建性能平臺
• 探索
  • 前端性能優化未來發展

幫助你從 0 到 1 構建整個前端性能體系，今天先開個頭，如何認識網站性能，下面正文開始??

如何認識網站性能

一個大型網站的性能不僅僅依賴于前端性能，還有服務器性能，甚至數據庫性能

所以，一個秒開流暢的網站依靠前后端人員的一起努力，本系列主要探討前端(web)性能，即頁面性能，頁面加載性能、用戶交互流暢度、滾動加載性能等

我們又該如何去定義 web 性能的好壞?

如何去定義 web 性能的好壞

定義 web 性能的好壞主要由兩方面：

• 一個客戶感知的性能(主觀性能)
• 一是開發人員度量的各類性能(客觀性能)

其中最重要的是客戶感知的性能，開發人員定義的各類性能指標就是為其服務，最終目的是為了讓客戶感知一個高效、流程的網站性能

 客觀性能我們可以通過一定是手段進行提升，如按需加載、添加 defer 或 async 、分包等，都能幫助我們提升網站的性能

但當客觀性能，我們通過技術手段很難去優化時，例如頁面加載文件很多、很大時，我們也可以通過一定的產品手段來達到用戶感知的性能優化(看起來沒那么慢)，例如：

• 增加打底圖
• 增加加載動畫
• 增加進度條

等等

總結

網站的性能好壞需要前后端人員的共同維護，本系列主要探討前端(web)性能。又???分為開發人員度量的性能(客觀)與用戶感知的性能(主觀)，當網站客觀性能難以優化時，我們可采用一些產品手段提供用戶的主觀性能，達到頁面可能沒那么快，讓用戶感知很快。

參考：

前端性能優化指南：https://juejin.cn/post/6844904150413606926