前端中什么是懒加载

懒加载是一种在前端开发中用于优化网页性能的技术。它的核心思想是推迟加载网页中的某些资源，直到真正需要使用它们的时候才进行加载，主要应用于图片、脚本、样式表等资源。以下是懒加载的一些主要信息：

懒加载的作用

• 提升页面加载速度：减少首次加载时需要请求的资源数量和大小，使页面能够更快地呈现给用户，提高用户体验。特别是对于包含大量图片或其他大型资源的页面，懒加载可以显著减少初始加载时间，让用户更快看到页面的主要内容。
• 节省网络流量：对于用户可能不会浏览到的部分，不提前加载其相关资源，从而节省了用户的网络流量，尤其对于移动设备用户或网络环境较差的用户来说，这一点尤为重要。

实现方式

• 图片懒加载：通常使用 HTML 的loading属性，将其值设置为lazy，浏览器会自动实现图片的懒加载功能。当图片进入浏览器的可视区域时，才会发送请求加载图片资源。也可以通过 JavaScript 监听页面的滚动事件，结合Intersection Observer API来判断图片是否进入可视区域，进而动态加载图片。
• 脚本懒加载：对于非立即需要执行的脚本，可以使用defer或async属性。defer会在 HTML 解析完成后再执行脚本，async则会在脚本下载完成后立即执行，不会阻塞 HTML 的解析，但这两种方式并非严格意义上的懒加载。更精确的懒加载可以通过动态创建script元素，在需要时将其添加到页面中来实现。
• 样式表懒加载：可以通过 JavaScript 动态创建link元素，根据条件将样式表链接添加到页面中。例如，当用户切换主题或进入特定页面区域时，才加载相应的样式表。