性能优化

什么是性能优化

性能优化简单点说就是提高网站访问速度, 网站稳定性和交互体验.

具体的可以在以下几个方面衡量:

1.减少整体资源的加载时间.
2.加快首屏渲染
3.平滑交互和动画效果
4.感知表现加强
5.性能的测定

性能优化指标

各种指标的加载时间基本在1~5秒内都是较好的.

1. RAIL模型 使用 RAIL 模型衡量性能 (web.dev)
2. 基于用户体验(前两个重要)
   1. FCP: first-content-paint, 白屏时间 First Contentful Paint 首次内容绘制 (FCP) (web.dev)
   2. LCP: largest-content-paint, 最大内容区域绘制时间 Largest Contentful Paint 最大内容绘制 (LCP)
   3. FID(<300ms): first-input-delay, 首次输入延迟(js主线程忙, 不能响应操作, 如网页加载) First Input Delay 首次输入延迟 (FID) (web.dev)
   4. TTI: time-to-interact, 完全可交互时间(最后一个长任务结束后5s内主线程空闲)
   5. TBT(<600ms): total-block-time, 总阻塞时间
   6. CLS(<0.25ms最好不抖动): cumulative-layout-shift, 布局抖动
3. web-vital: LCP+FID+CLS. 简化版

性能优化测试工具

1. lighthouse: google开源的性能测试工具, 生成性能测试报告. 直接在chrome里面直接使用. 以本人网站bunkun.top为例子:

   1. 性能表现:

   

   2. 优化建议

   

   ​ 其他: 预加载所要请求的多源(图片). 降低服务器响应时间. 调整图片大小. 移除未使用的资源(js/css)

   3. 诊断结果

      多角度对得出的数据进行网站性能分析. 如静态资源的缓存策略. 降低js脚本执行时间, 文件压缩(影响分数很大)等

   4. 通过项: 符合要求的项.

2. Chrome devtools

   1. network面板
      1. 有无缓存测试
      2. 网路吞吐测试
      3. coverage: 监控网站代码运行覆盖率. 如果一个大文件代码执行率低, 那可能存在一些无用代码可以优化. 因此可以用这个可视化结果对文件进行拆分以减少文件大小从而减小FCP等指标.
   2. memory面板
      1. 内存泄漏测试
   3. performance面板
      1. 运行时性能测试: 测试动画流畅度, 交互效果

3. webpagetest: 专业网站测试工具.

性能优化

web的性能优化思路

1. 分析网站: 利用分析工具(如lighthouse生成报告)分析性能瓶颈, 从报告建议和问题入手 ; 从前端页面生命周期入手.
2. 提高加载速度: 主要针对FCP, LCP等优化, 检查文件压缩, 静态资源配置, 有无未使用资源等, 提高整体资源的加载速度直到符合要求.
3. 完善交互体验: 主要网站交互体验, 降低FID, TTI等时间, 优化动画效果, 预加载动画, 骨架屏等提高用户感知.

图片类型选择

图片的类型主要有位图和矢量图

• 位图: 以像素为单位的, 像素点的平面排布图.
• 矢量图: 记录元素的形状和绘制算法, 以矢量的形式绘制线面. 因此放大不会失真.

图片的压缩类型则包括

• 无压缩: BMP
• 有损压缩: jpg/jepg
• 无损压缩: png, gif

类型	说明	优点	缺点
GIF	8bit压缩256色彩; 适用色彩较少的图片.	支持动画/透明/体积较小	色彩少
JPEG/JPG	在照片的使用比较频繁的有损压缩图片格式	体积小/24位色彩/渐进式加载	不透明/有损
PNG	支持多种位深的格式, 适合网页各种图片	无损/透明, 半透明/色彩多	不支持动画/压缩量相对较小
WEBP	谷歌出品, 兼具jpg和png的特点	体积小/透明	支持差
SVG	使用XML定义语言	不失真/体积很小	渲染成本

前端该如何选择图片的格式

3. 最佳实践

• 性能评级工具（PageSpeed 或 YSlow）
• 合理设置 HTTP 缓存：Expires 与 Cache-control
• 静态资源打包，开启 Gzip 压缩（节省响应流量）
• CSS3 模拟图像，图标base64（降低请求数）
• 模块延迟(defer)加载/异步(async)加载
• Cookie 隔离（节省请求流量）
• localStorage（本地存储）
• 使用 CDN 加速（访问最近服务器）
• 启用 HTTP/2（多路复用，并行加载）
• 前端自动化（gulp/webpack）