[JS] ** Professional Javascript for Web Developers

教材阅读笔记，本书内容颇多，故只记录个人关心的重难点。

重复内容将直接附链接。

由三个不同的部分组成：

核心(ECMAScript) - 与 Web 浏览器没有依赖关系,不包含输入和输出定义
文档对象模型(DOM)
浏览器对象模型(BOM)

HTML 4.01 为<script> 定义了下列 6 个属性。

属性解析顺序：

在第一个 <script> 元素包含的代码解析完成后,

第二个 <script> 包含的代码才会被解析,

然后才是第三个、第四个...…

(0) 传统方式，不怎么好。

<!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>

(1) 需要加defer（不是淘气脚本）

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。

<!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>

　　<!-- 这里放内容 -->

</body>

</html>

异步脚本:

与defer类似，async只适用与外部脚本，并告诉浏览器立即下载文件，标记为async的脚本并不保证按照他们指定的先后顺序执行。如下代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="aaa.js"  async></script>
    <script src="bbb.js"  async></script>　　// 可能先执行
</head>
<body>
<div ></div>
</body>
</html>

(2) 转移到了body里，页面完整后再执行。

在解析包含的 JavaScript 代码之前,页面的内容将完全呈现在浏览器中。

而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

<!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>