前端性能優(yōu)化與監(jiān)控開篇：如何認(rèn)識網(wǎng)站性能

作為前端工程師，性能優(yōu)化是最基礎(chǔ)、必備的內(nèi)容，也是最繁瑣的內(nèi)容，如何把這項(xiàng)工作做好喃？本系列開始進(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ā)最佳實(shí)踐手冊[谷歌]等

• 如何優(yōu)化加載性能

• 如何優(yōu)化渲染性能

• 實(shí)踐：首屏秒開、白屏 300ms 和界面流暢優(yōu)化技巧

• 性能實(shí)踐

• 如何排查加載性能問題
• 如何排查性能渲染問題

• 性能測試工具

• 性能采集與監(jiān)控實(shí)踐

• 性能采集：首屏、白屏卡頓等
• 性能采集與上報 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