HTML | 延迟属性

介绍

HTML的<script>元素用于在网页中插入或引用脚本文件。当浏览器遇到<script>标签时，它会立即停止HTML的解析，然后加载和执行脚本文件。这可能会导致页面加载速度变慢，因为脚本文件的下载和执行需要时间。

defer属性是HTML中<script>元素的一个属性，用于指示浏览器在解析完整个HTML文档之后再执行脚本。这样可以避免脚本文件的阻塞效应，提高页面的加载性能。

语法

defer属性可以用在具有src属性的<script>元素中，也可以用在没有src属性的脚本中。

<script src="script.js" defer></script>

或者

<script defer>
  // 脚本代码
</script>

工作原理

当浏览器遇到带有defer属性的<script>标签时，会将其标记为延迟脚本（deferred script）。浏览器会继续解析HTML，并在DOM构建完成之后再执行延迟脚本。延迟脚本的执行顺序与它们在HTML文档中的出现顺序一致。

延迟脚本的执行时机是在DOMContentLoaded事件之前。这意味着延迟脚本可以访问完整的DOM树，但在浏览器完全加载并渲染页面之前执行。这使得延迟脚本可以不阻塞页面的加载和渲染，提高页面性能。

使用场景

延迟脚本适用于那些不需要立即执行的脚本，特别是与DOM操作有关的脚本文件。下面是一些适合使用defer属性的情况：

1. 对整个网页或大部分内容实施操作的全局脚本。
2. 与页面行为相关的事件处理程序。
3. 将脚本文件放在页面底部时，使用defer属性可以确保脚本在页面加载完成后再执行。

需要注意的是，defer属性仅适用于外部脚本文件（拥有src属性的脚本）。对于内联脚本（没有src属性）来说，即使添加了defer属性也不会起作用。

兼容性

defer属性兼容性良好，适用于大多数现代浏览器，包括Chrome、Firefox、Safari和Edge。尽管如此，在一些旧版本的浏览器中，可能存在一些不一致的行为。

总结

defer属性能够改善网页的加载性能，通过延迟脚本的执行，避免了脚本阻塞页面的问题。在合适的情况下，推荐使用defer属性来加载脚本文件。