《JavaScript高级程序设计》Chapter02 <script>元素

<script>

现代web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面

<!DOCTYPE html>
<html>
    <head>
        <title>Example Page</title>
    </head>
	<body>
    	<!--页面内容-->
        <script src="example1.js"></script>
        <script src="example2.js"></script>
    </body>
</html>

推迟执行——属性defer：浏览器立即下载并解析但延迟执行脚本，延迟到整个页面都解析完毕后再执行
- 仅对外部脚本文件有效
- HTML5规范要求他们按顺序执行（最好只包含一个这样的脚本）
异步执行——属性async：浏览器立即下载并解析脚本，之后可立即执行
- 仅对外部脚本文件有效
- 不一定会按在页面中嵌入的顺序执行
- 异步脚本不应该在加载期间修改DOM
动态加载脚本：向DOM动态添加script元素
```
let script = document.createElement('script');
script.src = 'hello.js';
script.async = false;
document.head.appendChild(script);
```
- 默认情况下以此形式创建的<script>元素为异步加载（相当于添加了async属性），但并不是所有浏览器都支持async属性；因此，可以明确其为同步加载【script.async = false;】
XHTML中的变化
- XHTML编写规则更加严格
  - 使用JavaScript必须指定type属性为"text/javascript"
  - html中的<script>标签内会应用特殊规则，而xhtml不会（script标签内的js中的'<'在xhtml中会被解释为一个标签的开始）
- 解决：将所有代码包含在一个CDATA块中
  - 在不支持CDATA的非XHTML兼容浏览器中不可行——CDATA标记使用JavaScript注释来抵消
```
<script type="text/javascript">
//<![CDATA[
	function compare(a,b){
		if(a<b) console.log("a is smaller");
		else if(a>b) console.log("b is smaller");
		else console.log("a is equals to b"),
	}
//]]>
</script>
```