defer
是一个在 HTML 中很有用的属性。当你在 <script>
标签中加入这个属性,它会告诉浏览器:“请先加载页面的其余部分,等整个页面都加载好了,再运行这个脚本。”这和通常的 <script>
标签不同,后者会暂停页面的加载,直到脚本执行完毕。
适合哪些场景?
适用 defer
的场景:
- 对于那些不需要页面刚加载就立刻运行的脚本,比如统计网站数据或追踪广告的脚本。
- 如果你的脚本需要页面的其他部分或其他的脚本先加载好才能正常工作。
- 当你想要你的网页加载得更快时,因为
defer
可以让页面先显示出来,然后再慢慢加载和执行脚本。
操作步骤
很简单,只需要两步:
- 在你的
<script>
标签里加上defer
属性。
<script defer src="你的脚本地址.js"></script>
- 把这个带有
defer
的<script>
标签放到页面的底部。这样,它可以避免干扰页面的其他部分加载。
示例
下面是一个简单的例子,展示了如何使用 defer
:
<!DOCTYPE html>
<html>
<head>
<title>使用 defer 的例子</title>
</head>
<body>
<!-- 页面内容 -->
<script defer src="你的脚本地址.js"></script>
</body>
</html>
注意事项
defer
只对外部脚本有效,它不适用于直接写在<script>
标签里的代码。- 在一些老的网页标准(XHTML)中,可能需要写成
defer="defer"
。 - 用了
defer
,脚本的执行顺序可能不是你放入的顺序。如果你需要脚本按照特定顺序执行,需要考虑其他方法。