延迟加载简介
"延迟加载"（Lazy Loading）是一种优化网页性能的策略，其核心思想是推迟加载页面资源（如图片、JavaScript文件、样式表），以改善用户体验、降低服务器负担和提高页面加载速度。这一概念起源于互联网的早期，随着网页应用和互联网速度的不断发展，延迟加载变得更为重要。
JavaScript脚本延迟加载
JavaScript脚本的延迟加载是一种优化网页性能的技术，它允许页面在加载过程中继续渲染，而不必等待JavaScript文件的下载和执行。这可以提高用户体验，特别是在较慢的网络连接下。
以下是一些常见的JavaScript脚本延迟加载的方式：
- 使用
defer属性：
<script src="your-script.js" defer></script>
使用defer属性的脚本会在HTML解析完成后，但在DOMContentLoaded事件触发之前执行。这允许页面继续加载，同时保持脚本的执行顺序。通常，如果有多个defer脚本，它们会按照它们在文档中出现的顺序依次执行。
DOMContentLoaded事件
DOMContentLoaded事件是在浏览器解析HTML文档并构建文档对象模型（DOM）后触发的JavaScript事件。这个事件表示文档已经准备好被脚本操作，但不必等待其他资源（如样式表、图像等）的加载完成。当浏览器开始解析HTML文档时，它逐行解析文档并构建DOM树，然后继续解析和加载其他资源。在这个过程中，浏览器会在文档完全解析完成后触发
DOMContentLoaded事件，这意味着整个文档结构（DOM）已经可用，可以安全地操作DOM元素，而无需等待所有外部资源的加载。
DOMContentLoaded事件通常用于执行与DOM操作相关的JavaScript代码，以确保代码不会在文档尚未准备好的情况下运行，从而提高用户体验和避免潜在的问题。这与load事件不同，load事件是在整个页面及其所有资源（如图片、样式表、脚本）都加载完毕后触发的，包括外部资源的加载。
- 使用
async属性：
<script src="your-script.js" async></script>
使用async属性的脚本会在下载完成后立即执行，而不会阻止页面的渲染。这对于不需要按特定顺序执行的脚本很有用。请注意，多个async脚本的执行顺序可能不确定，因此谨慎使用。
- 动态加载脚本： 通过JavaScript代码动态创建
<script>元素并将其添加到页面中，以实现延迟加载。这允许你在需要时加载脚本(可以对文档的加载事件进行监听，当文档加载完成后再动态的创建)，而不是在页面加载时。
var script = document.createElement('script');
script.src = 'your-script.js';
document.body.appendChild(script);
-
使用
window.onload事件： 在window.onload事件中加载JavaScript文件，以确保页面和所有资源都已完全加载。这会导致脚本的延迟加载，但也会等待所有其他资源，包括图像和样式表。这可以确保脚本在一个完全就绪的环境中执行。 -
使用现代模块化加载器： 如果你使用模块化开发，可以使用现代模块加载器（如Webpack、RequireJS、SystemJS等）来按需加载模块。这允许你将JavaScript代码分为多个模块，并在需要时动态加载它们，从而实现更细粒度的延迟加载。
-
使用 setTimeout 延迟方法：设置一个定时器来延迟加载 js 脚本文件
-
让 JS 最后加载：将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
