2022-06-22 页面性能

页面性能

几个Metrics（指标）

• First Paint(FP)
  首次绘制，从白屏到第一个像素点绘制。
• First Contentful Paint（FCP）
  首次内容绘制，指示了网页首次绘制出内容，比如一个div块或者一个图像等非空白元素。
  js可以通过PerfomanceOberver对象监听first-contentful-paint，并将其记录
• Speed Index
  该指标指示了页面内容加载过程中的视觉显示速度
• Largest Contentful Paint（LCP）
  最大内容绘制，指示了网页中视口所见的最大块或者图像的渲染时间，相对于FCP
• Cumulative Layout Shift（CLS）
  交互布局漂移。指示了页面布局稳定性的指标，它量化了页面内容在视觉上的移动程度。
• Total Blocking Time
  总阻塞时间。指示了主线程被阻塞时阻止用户输入响应的总时间。它量化了负载能力。

优化前端数据加载性能的 9 个最佳实践

1. 压缩 (Minify) 代码
   缩小 HTML、CSS 和 JavaScript 能有效减少前端加载时间，因为它减少了需要从服务器请求的代码量,包括消除代码注释和格式、空白字符、未使用的代码、换行符等,

2. 减少 HTTP 请求
   一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程
   http 请求越多，相应的所需的花费时间就越多
   使用 CSS Sprites 这是减少服务器调用次数的最简单方法之一
   减少使用不可控的发出大量外部请求的第三方插件
   防止使用指向不存在的文件的无用链接
   还可以启用服务器端渲染(ssr)以加快应用程序的首屏加载

3. 删除不必要的自定义字体
   对于网站使用自定义字体时，我们需要在性能与美观中不断权衡与评估。加载字体文件真的很慢

4. 压缩文件
   通过使用合适的方法压缩文件，你可以轻松地对缩短文件加载时间
   Gzip 流行的数据压缩和解压方法，目前所有现代浏览器都支持。Gzip 在服务器端压缩站点的 HTML、CSS 和 JavaScript 包，然后将它们发送到浏览器，在客户端，它解压缩文件并交付内容
   Brotli 当前压缩比最高的工具

5. 优化图片
   使用 WebP 和 AVIF 等新图像格式，他们比 JPEG 和 PNG 等旧格式能提供更好的性能。
   业务允许的情况下，为低端浏览器提供低分辨率的图片

6. 延迟加载（懒加载）
   页面首先加载视窗内可见的内容，其他内容可以延后加载。比如图片占位懒加载，或者异步import模块等技术

7. 善用缓存和本地db
   如浏览器各种缓存，浏览器本地存储。CND加速。

8. 预加载
   在浏览器的空闲时间，预先加载后面可能用到的资源
   预加载用户接下来可能需要的资源以减少用户点击后的等待时间。预取主要有三种类型：链接预取(Link prefetching)、DNS 预取(DNS prefetch)、预呈现(prerender)

   • 链接预取
     链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。但是，链接预取仅适用于图像和 JavaScript 等可缓存资源
   • DNS 预取
     在尝试从某ip获取资源时，提前进行DNS服务器访问解析。主要针对网站内部有很多第三方连接的情况
   • 预渲染
     将某些用户接下来需要看到的内容，先预取并隐藏起来，做到事先不可见，浏览时可立刻呈现。

9. 使用 CDN （内容分发网络）
   将图片，音频，视频等文件，放到分发网络上。可以使用户更快的获取资源。CND节点会缓存用户访问过的资源且用户端会优先访问最近的CND节点。