知识总结（一）：
1. JavaScript简介
注：关于JavaScript的历史在本系列中不过于赘述，请读者自行查阅书籍。
一个完整的JavaScript实现由下图三部分组成：
它们分别是：
（1）核心（ECMAScript）：
ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。ECMA定义的只是这门语言的基础，而在此基础上可以构建更完善的脚本语言。Web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供了基本的ECMAScrpt实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如DOM，则利用ECMAScript的核心类型和语法提供更多的功能，以便实现针对环境的操作。其他宿主环境包括Node（一种服务端JavaScript平台）和Adobe Flash。
ECMAScript规定了这门语言的下列组成部分：
语法；
类型；
语句；
关键字；
保留字；
操作符；
对象；
ECMAScript就是对实现该标准规定的各个方面内容的语言的描述，JavaScript实现了ECMAScript。
（2）DOM（文档对象模型）：
文档对象模型DOM是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。
通过DOM创建的表示文档的树形图，开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API，开发人员可以轻松自如的删除、添加、替换或者修改任何节点。
（3）BOM（浏览器对象模型）：
BOM浏览器对象模型可以控制浏览器显示的页面以外的部分。从根本上讲，BOM只处理浏览器窗口和框架，但人们习惯上也把所有针对浏览器的JavaScript扩展算作BOM的一部分，下面列出一些这样的扩展：
弹出新浏览器窗口的功能；
移动、缩放和关闭浏览器窗口的功能；
提供浏览器详细信息的navigator对象；
提供浏览器所加载页面的详细信息的location对象；
提供用户显示器分辨率详细信息的screen对象；
对cookies的支持；
像XMLHttpRequest和IE的ActiveXObject这样的自定义对象。
对于以上三种JavaScript的组成，对初学者来说只需分别记住他们的作用，在后续的学习中逐步学习即可。
ECMAScript：提供核心语言功能。
DOM：提供访问和操作网页内容的方法和接口。
BOM：提供与浏览器交互的方法和接口。
2. 在HTML中使用JavaScript
向HTML中插入JavaScript的主要方法就是使用<script>元素。这个元素由Netscape（就是开发JavaScript语言的公司）创造并首先实现。后来，这个元素被加入道正式的HTML规范中。HTML5为<script>定义了以下6个属性：
async：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，这个属性很少有人使用。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。IE7以及更早版本对嵌入脚本也支持本属性。
language：已废弃。
src：可选。表示包含要执行代码的外部文件。
type：必选。表示编写代码使用的脚本语言的内容类型。不过，这个属性并不是必需的，如果没有指定，默认值认为text/JavaScript。
使用<script>元素的方式有两种：
（1）直接在页面中嵌入<script>代码：
顾名思义，只需像下面这样把JavaScript放到网页的任何地方都可以，但我们一般统一放到head标签中。
由<script>和</script>包含的代码块就是JavaScript代码，包含在<script></script>中的代码将被从上至下解释。
在使用<script>嵌入JavaScript代码时，要注意不能在代码中任何地方出现’</script>'字符串。，因为按照解析嵌入式代码的规则，当浏览器遇到其时，就会认为是结束script代码块的标签，可以通过转义字符\解决这个问题，例如alert("<\script>")。
<html>
<head>
<script>
alert('Hello, world');
</script>
</head>
<body>
...
</body>
</html>
（2）包含外部JavaScript文件：
这种方法是把JavaScript代码放到一个单独的.js文件中，然后再在HTML中通过<script src="…" ></script>引入这个文件，如下列代码：
<html>
<head>
<script src="/static/js/abc.js"></script>
</head>
<body>
...
</body>
</html>
在这个例子中/static/js/abc.js就会被加载到当前页面中。外部文件只需包含通常要放在开始的<script>之间的那些JavaScript代码就可以。与解析嵌入式JavaScript代码一样，在解析外部Js文件时，页面的处理也会暂时停止。
注意点：
1.<script>位置：在文档head中包含所有JavaScript文件，意味着必须等到全部的JavaScript代码都被下载解析和执行完成后才开始呈现页面内容，观感上会有延迟（其实Js会有缓存，这个影响也不是特别明显），所以可以把Js文件引用放在body元素中页面内容的最后面。所以结论应该是：在不影响Js文件运行的前提下，尽量往后放。
2.async和defer的解析过程以及使用：
async，浏览器先开始解析网页，解析过程中发现async标记的script文件，之后开始并行下载js文件和解析网页，当脚本下载完成浏览器停止解析网页开始执行脚本，执行后继续解析网页。标记为async的脚本按照他们下载的顺序执行，不保证按照他们的先后顺序执行，所以要确保标记为async的脚本没有互相依赖。
defer，浏览器开始解析网页，解析过程中发现defer标记的script文件，之后开始并行下载js文件和解析网页，网页全部解析完成后执行defer的js脚本。标记为defer的脚本按照他们在网页中出现的先后顺序执行。当脚本不需要立即运行时，在script标签中设置“defer”属性，这样可以做到性能的优化。
浏览器完整过程是先解析渲染HTML，当遇到脚本文件的时候则执行脚本文件，等待脚本文件执行完毕才继续解析html，因此会产生阻塞页面的情况，因此最好将脚本放在body底部，当浏览器遇到标有defer的时候则会下载该脚本，同是继续解析html，然后等到dom解析完毕之后才解析defer脚本，而如果遇到async脚本的时候同样是下载该脚本同是继续解析html，当anync下载完毕之后，而html尚未解析完毕，也会先解析async脚本，等待async脚本解析完毕之后才继续解析html。
async和defer的执行过程图如下：
两者之间的选择则是看脚本之间是否有依赖关系，有依赖的话应当要保证执行顺序，应当使用defer没有依赖的话使用async，同时使用的话defer失效。要注意的是两者都不应该使用document.write,这个导致整个页面被清除。
结论：
从实用角度来说，首先把所有脚本都丢到</body>之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证除了脚本之外的所有元素能以最快的速度得到加载和解析。
async和defer的最大区别在于下载完之后何时执行，defer更符合对脚本执行的要求。
就执行顺序来讲，defer的执行顺序是按他在文档中的顺序执行的，而async脚本加载完了就会执行，顺序是乱序的。
async对于应用脚本的用处不大，因为他执行顺序不固定，完全部考虑依赖，不过对于可以不依赖任何脚本或者不被任何脚本依赖的脚本来说比较合适。
3681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
