前端性能优化

• 性能优化目的
  1. 提高用户体验：优化前端性能可以减少网页的加载时间，提高用户的满意度和体验。
  2. 增加页面的访问量：网站的性能越好，越容易吸引用户，增加页面的访问量，提高网站的流量。
  3. 提高搜索引擎排名：搜索引擎对网站的性能和速度也有评价标准，页面加载速度越快，搜索引擎评价越高，从而提高网站的排名。
  4. 减少服务器压力：优化前端性能可以减少网络传输、请求次数等，从而减轻服务器的压力，提高整个应用程序的性能和稳定性。
  5. 节约成本：优化前端性能可以减少服务器的硬件配置和维护成本，优化前端性能可以减少服务器的硬件配置和维护成本，从而提高整个应用程序的经济效益
  6. 提高用户留存率：当用户在访问网站时，如果页面加载速度过慢，很容易让用户失去耐心离开网站。而优化前端性能可以提高用户留存率，让用户更乐意在网站上停留和消费。
• 2 - 5 - 8 原则
  • 2：页面的加载时间应该控制在 2 秒以内，这是用户能够接受的最长时间。
  • 5：页面的加载时间在 5 秒以内，用户对页面的加载速度的不满意度开始上升
  • 8：页面的加载时间超过 8 秒，用户的流失率将急剧增加，用户很可能会放弃访问该页面
• 加载性能指标：
  1. 页面加载时间（Page Load Time）：从用户点击链接或输入 URL 到页面完全加载所需时间。
  2. 首字节时间（Time to First Byte）：从用户请求页面到服务器返回第一个字节所需时间。
  3. DNS 解析时间（DNS Lookup Time）：域名解析所需时间。
  4. TCP 连接时间（TCP Connection Time）：与服务器建立 TCP 连接所需时间。
  5. SSL 加密时间（SSL Time）：如果使用 SSL 加密，建立安全连接所需时间。
  6. DOM 渲染时间（DOM Rendering Time）：从 HTML 文档解析成 DOM 树所需时间。
• 渲染性能指标：
  1. FPS（Frames per Second）：每秒钟渲染的帧数。
  2. CPU 占用率（CPU Utilization）：页面渲染时 CPU 的占用率。
  3. GPU 占用率（GPU Utilization）：页面渲染时 GPU 的占用率。
  4. 页面重排（Layout Shift）：页面元素的位置变化所引起的页面重绘。
  5. 避免强制同步布局（Avoid Forced Synchronous Layouts）：避免页面布局变化时强制进行同步布局。
  6. 前端代码性能：前端代码性能的好坏对页面性能有很大的影响，可以通过以下指标来评估：
  7. 代码压缩比（Code Compression Ratio）：压缩后的代码大小与未压缩的代码大小的比例。
  8. 代码体积（Code Size）：前端代码的大小。
  9. JavaScript 解析时间（JavaScript Parsing Time）：浏览器解析 JavaScript 代码所需时间。
  10. 静态资源优化（Optimize Static Assets）：包括 CSS、JavaScript、图片等静态资源的优化，如压缩、合并等。
  11. 用户体验：用户体验是评估页面性能的最终目标，可以通过以下指标来评估：
      1. 页面响应时间（Page Response Time）：用户在页面上交互后，页面响应所需时间。
      2. 页面交互速度（Page Interactivity Speed）：用户在页面上交互的响应速度。
      3. 错误率（Error Rate）：页面出现错误的比例。