[[402532]]

本文轉(zhuǎn)載自微信公眾號「三分鐘學(xué)前端」，作者sisterAn。轉(zhuǎn)載本文請聯(lián)系三分鐘學(xué)前端公眾號。

作為前端工程師，性能優(yōu)化是最基礎(chǔ)、必備的內(nèi)容，也是最繁瑣的內(nèi)容，如何把這項工作做好喃?本系列開始進(jìn)入前端性能優(yōu)化與監(jiān)控的進(jìn)階，主要內(nèi)容包括但不僅限于：

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

幫助你從 0 到 1 構(gòu)建整個前端性能體系，今天先開個頭，如何認(rèn)識網(wǎng)站性能，下面正文開始??

如何認(rèn)識網(wǎng)站性能

一個大型網(wǎng)站的性能不僅僅依賴于前端性能，還有服務(wù)器性能，甚至數(shù)據(jù)庫性能

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

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

如何去定義 web 性能的好壞

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

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

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

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

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

• 增加打底圖
• 增加加載動畫
• 增加進(jìn)度條

等等

總結(jié)

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

參考：

前端性能優(yōu)化指南：https://juejin.cn/post/6844904150413606926