2.1 <script> 标签
<script> 标签定义了 6 个属性：
| 属性 | 说明 |
|---|---|
async |
异步加载脚本，即加载脚本的同时加载页面其他内容。只对外部脚本有效。 |
charset |
忽略 |
defer |
延迟脚本执行，直到文档全部被解析和显示之后再执行脚本 |
language |
已废弃 |
src |
引用外部脚本 |
type |
MIME 类型，一般为 text/javascript 可以省略 |
注意：正常情况下，解释器需要将所有脚本解释完毕后，才会加载页面其他内容。
三种加载脚本的方式：
- 内嵌脚本
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
- 引用外部脚本
<script type="text/javascript" src="example.js"></script>
- 引用域外脚本，但是要注意安全：
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
2.1.1 标签位置
按照惯例，脚本都应该放在 <head> 元素中
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在 <head> 元素中引入外部脚本，必须要等脚本全部解析完成后才会解析页面其他内容，这样会导致页面出现卡顿和显示空白。为了避免这个问题，可以将脚本放在<body>的底部。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放置页面其他内容 -->
<!-- 最后引入脚本 -->
<script type=”text/javascript” src=”example1.js”></script>
<script type=”text/javascript” src=”example2.js”></script>
</body>
</html>
2.1.2 延迟脚本
使用 defer 属性后，脚本就会延迟到整个页面加载完毕后再执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer src=”example1.js”></script>
<script type=”text/javascript” defer src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
正常情况下，脚本是按照在页面中出现的顺序执行的；如果使用多个延迟脚本，多个脚本执行顺序并不确定，因此一个页面中最好只有一个 defer 脚本。
2.1.3 异步脚本
浏览器在加载异步脚本的同时也会加载文档内容，因此要确保脚本与页面内容之间、异步脚本之间不存在相互依赖。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” async src=”example1.js”></script>
<script type=”text/javascript” async src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
2.1.4 在 XHTML 中的用法
HTML5 已经成熟，该小节可以跳过
2.1.5 不推荐使用的语法
浏览器已经成熟，该小节可以跳过
2.2 嵌入代码与外部文件
尽可能使用外部脚本，使用外部脚本有更多地优点
2.3 文档模式
不同的文档模式下，浏览器有不同的解析行为。下面是几种文档模式。现在一般都使用 HTML 5 模式
<!-- HTML 4.01 严格 -->
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<!-- HTML 4.01 过渡 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!-- HTML 4.01 框架集 -->
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>
<!-- XHTML 1.0 严格 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!-- XHTML 1.0 过渡 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!-- XHTML 1.0 框架集 -->
<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
<!-- HTML5 -->
<!DOCTYPE html>
2.4 <noscript> 元素
如果浏览器不支持 Javascript ，将显示一条消息；如果浏览器支持，则什么也不做
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type=”text/javascript” defer=”defer” src=”example1.js”></script>
<script type=”text/javascript” defer=”defer” src=”example2.js”></script>
</head>
<body>
<noscript>
<p>浏览器不支持 Javascript</p>
</noscript>
</body>
</html>
网友评论
个人感觉，异步加载类似于多线程，都是通过并发来提高性能。
需要注意的是：不管什么语言或者框架，为了确保数据的可用性和正确性，异步或者并发肯定都有配套的同步机制，Javascript 应该是通过事件和回调函数来完成的