JS 延迟加载是优化网站性能的一种方式。它允许我们选择何时启动 JS 脚本，以加快页面加载速度。下面是这个过程的完整攻略：
1. 正确引用 JS 文件
在 HTML 页面中，一定要使用正确的代码来引用 JS 文件。你需要确保代码中的文件路径正确。比如，如果 JS 文件在根目录下的 js 文件夹内，你需要像这样写：
<script src="js/app.js"></script>
2. 将 JS 代码放到 HTML 末尾
将 <script> 标签放在 <body> 标签的末尾可以提高页面加载速度。因为这样加载页面时会先展示 HTML 内容，然后再执行 JS 脚本，而不会因为加载 JS 脚本而拖慢页面。
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!-- Your page content before scripts -->
<script src="js/app.js"></script>
</body>
</html>
3. 使用异步 JS
在注入 JS 脚本的时候，可以使用 async 属性来提高页面加载速度。使用 async 属性，JS 文件的加载将在 HTML 文件加载时同时进行。这个选项适用于不需要等待 JS 文件加载完成的情况。
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!-- Your page content before scripts -->
<script src="js/app.js" async></script>
</body>
</html>
4. 使用延迟 JS
使用 defer 属性可以在整个 HTML 文件加载完毕后再加载 JS 文件。而与 async 属性不同的是，defer 属性确保代码的执行顺序与它们在 HTML 文件中的位置一致。这个选项适用于需要等待 JS 文件加载完成的情况。
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<!-- Your page content before scripts -->
<script src="js/app.js" defer></script>
</body>
</html>
示例
下面是两个基于上述攻略的实际示例：
示例一
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Here is some content</p>
<script src="js/app.js" defer></script>
</body>
</html>
在示例一中，我们将 <script> 标签放在了 <body> 标签的末尾，并使用了 defer 属性。
示例二
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Here is some content</p>
<script src="js/app.js" async></script>
</body>
</html>
在示例二中，我们将 <script> 标签放在了 <body> 标签的末尾，并使用了 async 属性。由于我们不需要等待 JS 文件加载完成才显示页面，所以我们使用了 async。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 延迟加载 改变JS的位置加快网页加载速度 - Python技术站
微信扫一扫 
支付宝扫一扫 