携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
<script>标签属性设置
无async和defer的<script>标签
- 立即加载脚本
- 会阻塞页面其他操作（暂停解析HTML）
- 脚本加载完成之后立即执行
- 当代码执行完毕后恢复解析
有async的<script>标签
代码用法：
<script>alert("hello world1")</script>
<script src="Eureka.js" async></script>
<script>alert("hello world2")</script>
<script>alert("hello world3")</script>
页面加载的过程&script脚本的输出顺序：
-
立即加载脚本
-
不阻塞页面其他操作（异步）
-
脚本加载完成之后
- 如果HTML未解析完，则暂停解析先让JS执行代码
- 如果HTML解析完，则JS立即执行代码
-
如果存在多个 async 的时候则不能保证执行顺序（谁先到执行谁）
有defer的<script>标签
代码用法：
<body>
<h1>Hello</h1>
<script defer type="text/javascript"src="/script2. js"></script>
<script defer type="text/javascript"src="/script1. js"></script>
<p>after script tags</p>
<script type="text/javascript">
window. addEventListener('DOMContentLoaded', function(){
console.1og('DOMContentLoaded')
})
</script>
</body>
页面加载的过程&script脚本的输出顺序：
- 立即加载脚本
- 不阻塞页面其他操作（异步）
- 加载完成之后JS不会立即执行
- html5会按文档中顺序执行
🤔 如果同时存在async,defer属性呢？
😁 则相当于只有 async
怎么使用
-
async：
- 脚本是模块化的，并且不依赖于任何脚本
- 你的脚本并不关心页面中的DOM元素
-
Defer：
- 脚本依赖于或者被另一个脚本所依赖
- 你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕）
-
不放置任何属性：
- 脚本很小，并且异步脚本依赖于它
charse代码字符集
😁字符集（Charset） ：是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> //charse代码字符集
<title>112233</tiiule>
</head>
<body>
</body>
</html>
参考资料：
