《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>
```

<noscript>

可以包含任何可以出现在<body>中的HTML元素，<script>除外
当：
- 浏览器不支持脚本
- 浏览器对脚本的支持被关闭

满足其一时，<noscript>中的内容将被渲染

巴特西

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

<script>

<noscript>

最新文章

热门文章