前端性能优化总结

150 阅读1分钟

性能指标

  • LCP(Largest Contentful Paint): HHH

性能检测工具

  • performance
  • lighthouse
  • profiler

性能优化方案

长任务优化

什么是长任务

长任务会引发什么问题

如何优化长任务

资源优化

图片资源优化

资源queueing and stalled

queueing时间
stalled时间

stalled时间指的是tcp连接成功到真正传输数据的时间差,一般时间较长可能是发送数据后浏览器没有收到ack包,然后会等待一段时间重发,多次重发后确定tcp连接无效会重新三次握手建立tcp链接,多次重发的次数和操作系统相关,重发的时间间隔一般按指数增长。 如果出现stalled时间过长,一般情况下网络连接或服务端可能存在问题。另外脚本下载执行的过程中也会阻塞浏览器发起请求,因为浏览器是单线程的特性执行脚本的过程中浏览器停止网络请求处理。

参考:stalled时间分析与优化

浏览器单线程操作的设计策略是什么?
脚本执行的过程中可以操作页面dom结构,如果多线程可能会出现渲染和脚本执行冲突乱序导致开发预期之外的效果。
http1.0断链接,http1.1长链接,请求发送返回才会进行下一个请求

react

webpack

浏览器

js