前端性能优化

GYhrfTba

前端从环境搭建, 打包工具配置, 框架选型, 业务编码, 一直到发布上线后的用户数据监控整个生产链上涉及到的方面很多, 为了提高开发体验和用户体验, 前端可以进行很方面的优化, 本结前端优化特指为了提高前端上线后的用户体验而进行页面性能优化这块, 就是让用户等的时间短,尽快的可以进行页面交互.用公式记录一下:
优化 = 性能优化 + ...
6 E9 p2 v" e; g* ]性能优化 = 用户体验 + ...
性能度量
* H( v; g; k6 A# @2 o) s! U有人做了下面一个表格
3 }, O) Y# Z. Q  [6 D: T用户体验描述
" N+ ^, Q9 X& }5 X* c8 C为了更好的用户体验, 我们从网页加载和渲染两个维度进行优化, 公式:
$ k/ z& V0 q3 s+ H4 p1 K) X用户体验 = 加载性能 + 渲染性能 + ...
3 m7 p8 i% K  H+ M性能监控
0 e! o# F4 V8 m' M性能监控是性能优化的第一步,至关重要,因为只有性能监控才能找到性能瓶颈,然后会对性的进行优化.
/ w4 E2 G8 {* U1 E4 S监控工具: Lighthouse
Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。
9 Y6 L; U, ?5 g, z: |/ e1 S: q, ZLighthouse 三种使用方法:
: V) i7 G& N0 D* _, }1. Chrome60及以上的开发者工具的audits面板还不是Lighthouse。
2. Chrome拓展程序
* J/ S2 a  T. H0 _- F+ i0 b3. 命令行工具 npm install -g lighthouse or yarn global add lighthouse
Lighthouse 原理:
关于前端性能指标，W3C 定义了强大的Performance API，其中又包括了 High Resolution Time 、 Frame Timing 、 Navigation Timing 、 Performance Timeline 、Resource Timing 、 User Timing 等诸多具体标准. User Timing 、Navigation Timing 以及 Resource Timing。截至到 2018 年中旬，各大主流浏览器均已完成了基础实现. 而 Lighthouse 主要使用设备Chrome浏览器新的API PerformanceObserver, PerformanceEntry, 以及 DOMHighResTimeStamp 等.
" P$ h6 {9 _' A& o& _) m" e
( k7 u# s3 F; y  e4 F- T性能优化
. j$ U  `/ l6 U9 m! Q分析监控数据,就可以针对性地对网页进行优化, 下面是具有普适性的参考优化点, 在平时的开发中应该多多注意
: H1 M8 ~) s2 |! C) E* Q6 H! f加载优化
% @% s& u8 y2 F9 T4 ?/ D; Z, j网页资源加载即客户端展示的所有数据加载, 包括 静态资源 及 动态数据
1. 静态资源
a) Js css img等合并压缩和雪碧图
b) cdn内容分发
7 l" X6 {4 _0 l$ n! H/ W8 }' Bc) 各种缓存(dns缓存,ip缓存, 服务器缓存, 客户端缓存)
+ e0 m4 v' B$ G* M, X/ I8 \  K1 Od) 内容分片
e) 协议(http2)
2. 业务数据
a) spa首屏直出(ssr或骨架屏或预渲染)
/ b" `4 t7 d7 `+ p, s/ Ub) 接口合并
渲染优化
8 n" E( A5 e5 S) L8 f% m网页渲染
1. 防止阻塞渲染
2. 减少重绘和回流
$ T/ W& v* z! S1 j5 f4 Y" }* y3. 提高代码质量
) ]  ?& ?8 Y+ T- @
. x  @3 r2 X5 b* j来源：https://www.toutiao.com/a6692409042528109064/
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！