defer
时间: 2023-09-20 10:12:03 浏览: 106
`defer` 是一个 HTML 脚本属性,它的作用是让浏览器延迟脚本的执行,直到文档加载完成后再执行。
在 HTML 中,可以使用 `defer` 属性来指定一个脚本需要延迟执行。当浏览器遇到带有 `defer` 属性的脚本时,不会立即执行,而是会在 HTML 文档解析完成后,DOMContentLoaded 事件被触发之前执行。这样可以确保脚本在文档加载完成后执行,避免了脚本执行时还没有完全加载完成的情况,提升了页面的加载性能和用户体验。
需要注意的是,`defer` 属性只在外部脚本(通过 src 属性引入的脚本)中有效,对于内联脚本(直接在 HTML 中使用 `<script>` 标签定义的脚本)无效。
以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>defer示例</title>
<script src="defer-script.js" defer></script>
</head>
<body>
<h1>这是一个页面</h1>
</body>
</html>
```
在这个示例中,我们在 HTML 的 head 部分中使用了一个带有 `defer` 属性的外部脚本,脚本文件为 `defer-script.js`。当浏览器解析到该脚本时,不会立即执行,而是会等待 HTML 文档解析完成后再执行该脚本。这样可以确保脚本在页面加载完成后才执行,避免了脚本执行时还没有完全加载完成的情况,提升了页面的加载性能和用户体验。
相关问题
script defer="defer"
`defer` 是一个 HTML 标签属性,用于告诉浏览器该脚本文件可以延迟执行,即在 HTML 文档解析完成后再执行,而不会阻塞 HTML 解析。
当浏览器遇到带有 `defer` 属性的 `<script>` 标签时,会在 HTML 解析过程中并行下载该脚本文件,但是不会阻塞 HTML 的解析和渲染过程。当 HTML 解析完成后,再按照顺序执行所有带有 `defer` 属性的脚本文件。同时,延迟执行的脚本文件也会在 DOMContentLoaded 事件触发前执行,这意味着它们可以访问和操作 DOM。
使用 `defer` 属性可以加快网页的加载速度,提高用户体验。但需要注意的是,`defer` 属性只适用于外部脚本文件,不适用于内联脚本(即在 HTML 中直接写入的脚本)。
示例代码:
```
<script src="example.js" defer="defer"></script>
```
在这个例子中,浏览器会异步下载 `example.js` 脚本文件,但是不会立即执行它。而是等到 HTML 解析完成后再执行。
script defer
如果使用defer属性,JS文件会在文档解析后再执行,而不是立即执行。如果使用async属性,则JS文件会在下载完成后立即执行,不会等待文档解析完成。
使用defer属性可以保证JS文件的执行在servlet之后,而使用async属性则无法保证执行顺序。
下面是使用defer属性的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Your Title</title>
<script src="your-script.js" defer></script>
</head>
<body>
<h1>Hello World!</h1>
<script>
// your JS code here
</script>
</body>
</html>
```
在这个示例代码中,先加载了your-script.js文件,但是该文件会在文档解析完成后再执行。而在JS代码中的逻辑会在文档解析完成后立即执行。这样就保证了JS先执行,然后Servlet再执行的顺序。
阅读全文