script defer
时间: 2023-11-25 08:14:42 浏览: 28
如果使用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再执行的顺序。
相关问题
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 和 async 的应用场景
`defer` 和 `async` 都是用来控制在浏览器解析 HTML 文档时加载 JavaScript 文件的方式。
`defer` 属性用于延迟脚本的执行,直到文档解析完成。这意味着,当浏览器解析到带有 `defer` 属性的脚本标签时,它会继续解析 HTML,同时异步下载脚本文件。一旦 HTML 解析完成,浏览器会立即执行脚本文件。因此,`defer` 适用于需要在文档解析完成后才能执行的脚本。
```
<script defer src="deferred.js"></script>
```
`async` 属性用于异步加载脚本文件。当浏览器解析到带有 `async` 属性的脚本标签时,它会在后台异步下载脚本文件,同时继续解析 HTML。一旦下载完成,浏览器立即执行脚本文件,不管 HTML 是否解析完成。因此,`async` 适用于不依赖 HTML 解析的脚本。
```
<script async src="async.js"></script>
```
需要注意的是,虽然 `defer` 和 `async` 都可以异步加载脚本,但是它们的执行顺序是不同的。`defer` 保证脚本文件的执行顺序与它们在 HTML 中的顺序一致,而 `async` 则不保证脚本文件的执行顺序。因此,如果多个脚本文件之间有依赖关系,应该使用 `defer` 来确保它们的执行顺序。