<script> 标签

<script defer src="./xxxx.js" type="text/javascript"></script>
通常情况下,我们把 CSS 资源的导入放在页面头部,这样能保证 样式 和 DOM,同时渲染,提升用户体验。JS资源的导入放在页面的底部,应为JS通常是用来操作 DOM 的,需要等 DOM 渲染结束,好获取 DOM。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="xxxx.css" />
</head>

<body>
</body>

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

</html>

必选的属性

属性 描述
type MIME-type 指示脚本的 MIME 类型。

type 可能的值:

  • text/javascript
  • text/ecmascript
  • application/ecmascript
  • application/javascript
  • text/vbscript

可选的属性

属性 描述
async async 规定异步执行脚本(仅适用于外部脚本)。
charset charset 规定在外部脚本文件中使用的字符编码。
defer defer 规定是否对脚本执行进行延迟,直到页面加载为止。
language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。
src URL 规定外部脚本文件的 URL。
xml:space preserve 规定是否保留代码中的空白。

属性介绍

defer、async,常用的优化手段,这两个属性都使得 script 不会阻塞 DOM 的渲染。
页面加载的过程:文档解析(DOM 的渲染过程) -> 脚本加载 -> 脚本执行 -> DOMContentLoaded

defer

文档解析时,遇到设置了 defer 的脚本<script defer src="./xxxx.js" type="text/javascript"></script>,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析渲染完毕后。会等到所有的 defer 脚本加载完毕并按照顺序执行,执行完毕后会触发 DOMContentLoaded 事件。
使用场景:如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。

async

async 脚本<script async src="./xxxx.js" type="text/javascript"></script>,会在脚本加载完毕后立即执行。
由于是异步加载,加载的过程不会阻塞文档解析的过程(GUI渲染)。
但是加载完成后会立即执行,如果执行的时候GUI渲染还未完成,则会中断渲染,相应的JS执行完,GUI继续渲染。
也就是说 async 脚本的加载和执行可能比GUI渲染完成更早或者更晚。

async 脚本的加载过程不会影响GUI渲染,但是执行是可能会

async 的执行,并不会按着 script 在页面中的顺序来执行,而是谁先加载完谁执行。
async 脚本的加载不计入 DOMContentLoaded 事件统计。
使用场景:如果你的脚本并不关心页面中的 DOM 元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。

posted @ 2021-07-27 16:57  真的想不出来  阅读(40)  评论(0编辑  收藏  举报