js延迟加载的方式有哪些

前言： 在网页中，当页面中有大量的JavaScript代码需要加载时，可能会导致页面加载速度变慢，用户体验下降。为了优化网页加载速度，提高用户体验，可以使用延迟加载的方式。延迟加载是指在页面加载时先加载页面内容，再加载JavaScript代码，以达到在页面加载完成后再加载JavaScript代码的效果。下面将介绍一些常用的延迟加载方式。 1. 使用defer属性延迟加载脚本 defer属性可以用于script标签上，用来指定脚本的延迟加载。在使用defer属性后，浏览器会异步加载脚本，但会按照在页面中的先后顺序执行。也就是说，第一个带有defer属性的脚本会在DOM解析完成后执行，而后续的脚本则可以在页面完全加载完成后执行。以下是一个使用defer属性的示例代码：

使用defer属性延迟加载脚本

    
    
    

2. 使用async属性异步加载脚本 async属性也可以用于script标签上，用来指定脚本的异步加载。与defer属性不同的是，带有async属性的脚本加载和执行不会阻塞页面的加载。脚本会在加载完成后立即执行，而不会按照在页面中的先后顺序执行。以下是一个使用async属性的示例代码：

使用async属性异步加载脚本

    
    
    

3. 动态创建script标签延迟加载脚本 动态创建script标签是另一种常用的延迟加载脚本的方式。通过使用JavaScript代码在页面加载完成后再动态地创建script标签，并设置其src属性来加载脚本，可以达到延迟加载的效果。以下是一个使用动态创建script标签的示例代码：

动态创建script标签延迟加载脚本

    

4. Intersection Observer API实现按需加载 Intersection Observer API是一个现代浏览器提供的API，用于监听元素与视口交叉的状态。通过使用Intersection Observer API，可以实现按需加载，即在元素进入视口时再加载相应的JavaScript代码。以下是一个使用Intersection Observer API的示例代码：

Intersection Observer API实现按需加载

    

总结： 延迟加载是一种优化网页加载速度，提高用户体验的方法。常用的延迟加载方式有使用defer属性延迟加载脚本，使用async属性异步加载脚本，动态创建script标签延迟加载脚本以及使用Intersection Observer API实现按需加载。根据不同的需求和场景，可以选择合适的延迟加载方式来提升页面的性能和用户体验。