前端性能优化

1 前端优化

说到前端优化,大部分人会回答减少合并资源、减少请求、数据缓存等优化手段;
部分人会说在DevTools下看看首屏时间,围绕首屏来优化;
少部分人会说,需要接入一个性能平台来看看现状,诊断一下;
极少数人会说从前端性能体系来系统考虑性能优化;

遇到什么性能问题? =》 围绕什么样的性能指标 =》 采取了哪些性能优化? =》 取得了什么样的结果?

比如有这样一个问题:
首页打开缓慢,可以通过性能监控平台直接判断当前性能数据有没有问题?是前端问题?后端问题?还是网络层?

性能优化:缓存请求、服务端响应优化、页面解析与处理、静态资源优化;

2 用例

用户进入列表页,在滑动过程中页面加载突然跳出一个弹窗;

3 性能指标

  • 加载(进入页面,页面内容载入过程)
  • 交互(是否回应及时)
    可以采用FID(First Input Delay,首次输入延迟)指标,指标必须尽量小于100ms;
    可以采用PSI(Perceptual Speed Index,视觉变化率,衡量标准是小于20%)
  • 视觉稳定性指标(CLS,cumulative layout shift,布局偏移量,指页面从一帧切换到另一帧时,视线中不稳定元素的偏移情况)
    依赖Google的Lighthouse做本地采集

目前性能优化到的关键指标是加载(白屏时间和首屏时间)

白屏时间:输入内容回车(包括刷新、跳转等方式)后到页面开始出现第一个字符的时间(包括DNS寻址、建立TCP连接、发送第一个请求,返回HTML文档,HTML文档解析完毕),标准时间:300ms;

白屏时间过长的原因:DNS查询时间长、建立TCP请求连接太慢,服务器处理请求速度太慢,客户端下载、解析、渲染时间太长,没有做Gzip压缩、缺乏本地离线化处理等等;

首屏时间:白屏时间 + 渲染时间
浏览器输入地址并回车后,到首屏内容渲染完毕的时间,这期间不需要滚动鼠标或者下拉页面,否则无效;

验证效率:

  1. 采用中位数做正态分布,看分位值统计;
    P50:把所有首屏时间排序得出排在第99位的首屏时间就是P50;
    P99;
  2. 秒开率:1s内打开用户的占比

首屏时间可以拆分为白屏时间,数据接口响应时间,图片加载资源等;
数据接口响应时间:可以直接从后端服务中获取,不需要前端重复计算;

4 从URL到页面渲染

4.1 本地缓存

可以让静态资源加载更快,当客户端发起一个请求时,静态资源可以直接从客户端获取,不需要再向服务器请求;

本地缓存有强缓存(expires和cache-control)和协商缓存(last-modified和etag);

4.2 DNS查询

让DNS查询走缓存,浏览器提供了DNS预获取的接口,可以在打开浏览器或者webView的同时就进行配置;

4.3 HTTP请求

请求阻塞:浏览器为保证访问速度,会默认对同一域名下的资源保持一定的连接数,请求过多就会进行阻塞;(一般限制6个)

当前页面需要用到哪些域名,最关键的首屏需要用到哪些域名;

域名散列:通过不同的域名,增加请求并行连接数;
将静态服务器地址pic.google.com,做成支持pic0-5的6个域名,每次请求随机选一个域名地址进行请求,因为有6个域名同时可用,最多可以并行36个连接;(使用http2.0不再需要这样做)

4.4 服务端数据处理

webServer接受到请求后,从数据存储层取到数据,再返回给前端的过程;
请求参数处理、权限校验;

服务端通过Gzip压缩,传输给浏览器端的文本类资源大小可以变为原来大小的1/3左右。资源下载速度就会快很多;

4.5 数据缓存

4.5.1 借助Service Worker的数据缓存

请求代理层,拦截和处理网络数据请求

4.5.2 借助本地存储的接口缓存

将数据存储到本地存储;下次请求,先从缓存拿;

4.5.3 CDN

在网络各处防止节点服务器;构造一个智能虚拟网络,将用户的请求导向离用户最近的服务节点上;

4.6 重定向

网站资源迁移到其他位置后,用户访问站点,程序自动将用户请求从一个页面转义到另外一个页面的过程。

  • 服务端302重定向;
  • meta标签实现重定向;
  • window.location实现的重定向;

浏览器收到重定向响应后,会根据响应中的Location头部信息自动发起一个新的请求到新的URL,这个过程可能需要再次进行DNS解析(如果新URL的域名未被缓存)。(重定向发生在DNS寻址之后)

4.7 页面解析

解析:将HTML解析成DOM树和CSSOM树的过程;
渲染:解析完成之后进行渲染:主线程计算DOM节点的最终样式,生成布局树,布局树会记录参与页面的节点和样式;
绘制:将各个节点绘制到屏幕上,绘制结果以层的方式保存;当文档中各个部分以不同的层绘制时,相互重叠时,就必须进行合成;

构建DOM树的瓶颈点:

  • HTML标签不满足web语义化,浏览器需要更多的时间解析DOM标签的含义;
  • DOM节点数量越多,构建DOM树的时间会变长;
  • 文档中遇到script标签,DOM构造过程会暂停,等待服务器请求脚本;(defer、async);

5 性能指标

白屏指标 FP:domLoading - navigationStart;
FPS(Frames Pre Second,每秒显示帧数):连续3帧不低于20FPS,且保持稳定;
可以利用window.requestAnimationFrame在1秒内执行60次,
页面加载用了x ms,这期间requestAnimationFrame执行了n次;FPS = 1000n/x;

6 性能优化

  • 懒加载:少加载点数据;

  • 缓存:强缓存+协商缓存;

  • 离线化:首页或者列表页不需要登录页面的场景,同时支持SEO功能;
    利用插件,将页面中需要离线化的路由缓存;

  • 并行化:
    http1.1:串行的文件传输和同域名的连接数限制(6个)
    http2.0:多路复用:二进制分帧,多路复用;

  • 19
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值