跳到主要内容

Web 性能关乎到网站的快速加载，以及让缓慢过程看起来更快。

Web 性能是指网站内容在网页浏览器中的加载和渲染速度，以及对用户交互的响应。

  • 高性能可以提高网站的转化率（网站访问者执行某种测量或期望操作的比率）和用户留存。

一、提高 Web 性能​

Web 性能对网站或应用程序的客观度量和用户体验。

  • 较少总体负载时间：让文件尽可能的小，尽可能减少 HTTP 请求的次数，并采用巧妙的加载技术使文件更快可用
  • 尽快使网站可用：合理的顺序加载网站资源，以便用户能够更快的开始使用。在用户执行主要任务的同时，任何其它资源都可在后台继续加载。有时也会在实际需要时才加载资源（称为懒加载）
  • 流畅性和交互性：使用 CSS 动画而不是 JavaScript 制作动画，并尽量减少 DON 变化而引起重绘 UI 的次数
  • 性能测量：性能指标为
    • 首次绘制：第一次绘制运算开始的时间
    • 首次有内容绘制（FCP）：第一次重要渲染开始的时间
    • 首次有意义的绘制（FMP）：有用的内容
    • 重大内容绘制（LCP）
    • 速度指数
    • 可交互时间
  • 感知性能：是让用户感觉快，而不是网站实际又很快
    • 最小化初始加载
    • 防止内容跳转和其它重排
    • 避免文字文件延迟
    • 可交互元素是可交互的
    • 使任务启动器更具有交互性

一、 性能​

1. 过时的标签​

如 <center> 、 <font> 、<b> 等，需要使用 CSS 盒语义标签（如 <strong> 强调重要性）代替。

2. iframe​

  • 优点：嵌入独立页面
  • 缺点：阻塞主页面的加载、SEO 不友好、通信复杂

二、 优化​

1. <script> 标签的 async 和 defer​

  • 无属性：如果 <script> 不添加任何标签时，加载和执行会阻塞 HTML 解析。
  • async：加载不阻塞解析，加载完立即执行（顺序不确定）
  • defer：加载不阻塞解析，HTML 解析完后会按先后顺序执行（是个依赖 DOM 的脚本）