【JS】【客户端】JavaScript程序的执行

客户端JavaScript程序的执行

客户端JavaScript程序没有严格的定义，可以说JavaScript程序是由Web页面中所包含的所有JavaScript代码和通过<script>标签的src属性引用的外部JavaScript代码组成。

所有这些单独的代码共用同一个全局Window对象，这意味着它们都可以看到相同的Document对象，可以共享相同的全局函数和变量的集合；如果一个脚本定义了新的全局变量或函数，那么这个变量或函数会在脚本执行之后对任意JavaScript代码可见。

JavaScript程序的执行有两个阶段：

• 第一阶段——载入文档内容，并执行<script>元素里的代码，脚本通常会按它们在文档里的出现顺序执行。所有脚本里的JavaScript代码都是从上往下，按照他在条件，循环以及其他控制语句中的出现顺序执行。

• 第二阶段——当文档载入完成后，并且所有脚本执行完成后，JavaScript执行就进入它的第二阶段，这个阶段是异步的，而且是由事件驱动的。在事件驱动阶段，Web浏览器调用事件处理程序函数，来响应异步发生的事件。调用事件处理程序通常是响应用户输入，网络活动，运行事件或JavaScript代码中的错误来触发。

事件驱动阶段里发生的第一个事件是 load 事件，指示文档已完全载入，并可以操作。JavaScript程序经常用这个事件来触发或发送消息。这个函数会在脚本事件驱动阶段开始时被load事件触发。正是这个onload事件会对文档进行操作，并做程序想做的任何事。

核心JavaScript和客户端JavaScript都有一个单线程执行模型。脚本和事件处理程序在同一时间只能执行一个，没有并发性。

同步，异步和延迟的脚本

事件驱动的JavaScript

事件都有名字，比如click,change,load,mouseover,keypress或readystatechange。指示发生的事件的通用类型。事件还有目标，它是一个对象，并且事件就是在它上面发生。当我们谈论事件的时候，必须同时指定事件类型和目标。

注册事件处理程序最简单的方法是把JavaScript函数赋值给目标对象的属性，例如：

window.onload = function(){...};function handleResponse(){... ...}request.onreadystatechange = handleResponse;

对于大部分浏览器中的大部分事件来说，会把一个对象传递给事件处理程序作为参数，哪个对象的属性提供了事件的详细信息。

如果需要为一个事件注册多个事件处理程序函数，或者如果想要写一个可以安全注册事件处理程序的代码模块，需要用到另一种事件处理程序注册技术：

大部分可以成为事件目标的对象都有一个叫做addEventListener（）的方法，允许注册多个监听器：

window.addEventListener("load", function(){...}, false);request.addEventListener("readystatechange", function(){...}, false);

客户端JavaScript线程模型

JavaScript语言核心并不包含任何线程机制，并且客户端JavaScript传统上也没有定义任何线程机制。

HTML5定义了一种称为后台线程的”Web Worker“，但是客户端JavaScript还像严格的单线程一样工作，甚至当可能并发执行的时候，客户端JavaScript也不会知晓是否真的有并行逻辑的执行。

客户端JavaScript时间线

• Web浏览器创建Document对象，并且开始解析Web页面，解析HTML元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段document.readystate属性的值是 loading
• 当HTML解析器遇到没有async和dref属性<script>元素时，它把这些元素添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。
• 当解析器遇到设置了async属性的<script>元素时，它开始下载脚本文件，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等他下载。
• 当文档完成解析，document.readystate属性变成 interactive
• 所有defer属性的脚本，会按它们在文档里的出现顺序执行。
• 浏览器在Document对象上触发DOMContentLoaded事件，这标志着程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。但要注意，这时可能还有异步脚本没有执行完成
• 这时，文档已经完全解析完成，但是浏览器可能还在等待其他内容载入，如图片。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，document.readyState属性变成”complete“，Web浏览器触发Window对象上的load事件
• 从此刻起，会调用异步事件，以异步响应用户输入事件，网络事件，计时器过期等