如何巧妙运用JavaScript中的延迟加载和预加载技术优化网页性能？

本文共计2392个文字，预计阅读时间需要10分钟。

延迟加载（懒加载）和预加载是常见的Web优化手段。

一、延迟加载（懒加载）原理：当真正需要数据时，才执行数据加载操作。

目的：避免不必要的资源加载，提高页面加载速度。

二、预加载原理：在用户可能需要数据之前，提前加载数据。

目的：减少用户等待时间，提高用户体验。

延迟加载（懒加载）和预加载是常用的 web 优化的手段。。

一、延迟加载（懒加载）

原理： 当在真正需要数据的时候，才真正执行数据加载操作。
目的： 延迟加载机制是为了避免一些无谓的性能开销而提出来的

实现延迟加载的几种方法

1. 让 js 最后加载

使用方法： 把 js 外部引入的文件放到页面底部
用途: 让 js 最后引入，从而加快页面加载速度
说明:
流览器之所以会采用同步模式，通常加载 js 文件或者放<script>标签都在结构最后面，也是因为它会阻止浏览器后续操作的原因，所以放在后面，当页面结构和样式全部渲染完成再执行 js，提升用户体验

2. defer 属性

使用方法： 为 <script>标签定义了 defer属性。
用途: 让脚本在执行时不会影响页面的构造。