雅虎前端优化总结的35 条前端性能优化军规第十七条:延迟加载。

问自己一个问题:

页面初始加载时哪些内容是绝对必需的?

不在答案之列的资源都可以延迟加载。比如:

  • 非首屏使用的数据、样式、脚本、图片等;
  • 用户交互时才会显示的内容。

遵循「渐进增强」理念开发的网站:JavaScript 用于增强用用户体验,但没有(不支持) JavaScript 也能正常工作,完全可以延迟加载 JavaScript。

将首屏以外的 HTML 放在不渲染的元素中,如隐藏的 <textarea>,或者 type 属性为非执行脚本的 <script> 标签中,减少初始渲染的 DOM 元素数量,提高速度。等首屏加载完成或者用户操作时,再去渲染剩余的页面内容。

另一个常见的做法是图片的延迟加载(懒加载),具体逻辑是当用户滚动页面看到内容时,再加载所需图片。这种操作在较多图片的网页中,可以节省大量带宽,页面渲染速度也会变快。

相关文章:

  • 2022-12-23
  • 2022-03-07
  • 2022-12-23
  • 2021-10-07
  • 2022-01-10
  • 2022-12-23
  • 2021-11-13
  • 2022-12-23
猜你喜欢
  • 2021-06-12
  • 2021-12-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-11
  • 2022-12-23
相关资源
相似解决方案