关于客户端javascript的理解及事件浅析

1，核心JavaScript和客服端JavaScript都有一个单线程执行模型。脚本和事件处理程序在同一时间只能执行一个，没有并发性。这样保持了js编程的简单性。

2，document的定义：一些呈现静态信息的页面叫做文档。

穿插小知识1：

当文档还在载入时，还没有API可以用来遍历和操作文档的结构和内容。js影响文档内容的唯一方法是快速生成内容，其使用document.write()来完成上述任务。

穿插小知识2：

javascript程序执行的两个阶段：

a，载入文档内容，执行<script>元素里的代码（包括内联脚本和外部脚本）。脚本通常会按它们在文档里的出现顺序执行。所有脚本都是从上而下顺序执行。

b，当文档载入完成，并且所有脚本执行完成后，javascript执行进入第二个阶段。这个阶段是异步的，而且由事件驱动。web浏览器调用事件处理函数（由第一阶段里执行的脚本指定的HTML事件处理程序，或之前调用的事件处理程序来定义），来响应异步发生的事件。

3，客服端javascript线程模型（so important）

javascript并不包含任何线程机制，并且客服端就javascript也没有定义任何线程机制。单线程编程是为了让编程更加简单。编写代码时可以确保两个事件处理程序不会同一时刻运行，操作文档内容时，也不用担心会有其他线程试图修改文档。并且永远不必在写javascript时担心锁、死锁和竟态条件。

单线程执行意味着浏览器必须在脚本和事件处理程序执行时停止响应用户输入。这为javascript程序员带来了负担。它意味着javascript脚本和事件处理程序不能运行太长时间。如果一个脚本执行计算密集的任务，它将给文档载入带来延迟，而用户无法在脚本完成前看到文档内容。如果事件处理程序执行计算密集任务，浏览器可能变的无法响应，（因为单线程），可能会导致用户认为浏览器崩溃了。

4，客服端javascript的时间性

我们已经看到javascript程序从脚本执行阶段开始，然后切换到事件处理阶段我们看看这个timeline.

a,web浏览器创建Document对象，并且开始解析web页面，解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段document.readystate属性的值是“loading"。

b,当html解析器遇到没有async和defer属性的<script>元素时，它把这些元素添加到文档中，然后执行行内或外部脚本，这些脚本会同步执行，并且在脚本下载（如果需要）和执行时解析器会暂停。这样脚本就可以用document.write()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册事件处理程序，但它们可以遍历和操作文档树，因为在它们执行的时候已经存在了。这样，同步脚本可以看到它自己的<script>元素和它们之前的文档内容。

c，当解析器遇到设置了async属性的<script>元素时，它开始下载脚本文件，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素，并且可能或者干脆不可能范围其他的文档内容。

d，当文档完成解析，document.readyState属性变成"interactive"

e,所有defer（延迟）属性的脚本，会按它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树。。禁止用document.write().

f,浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动。但是要注意，这时可能异步脚本没有执行完成。

g，这时文档已经完全解析完成，但是浏览器可能还在等待其他内容载入。比如图片。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，document.readyState属性改变成"complete",web浏览器触发window对象的load事件。

h，从此刻起，会调用异步事件，以异步响应用户输入事件，网络事件，计时器过期等。

DOMContentLoaded事件在load事件之前触发，当前所有浏览器都支持这个事件，除了。