客户端JavaScript-如何执行

客户端JavaScript程序有四部分：内联脚本、HTML事件处理程序、URL中的JavaScript、外联脚本；所有这些单独的代码共用同一个全局Window对象，它们可以看到相同的Document对象，且共享相同的全局函数和变量的集合：如果在一个脚本定义了新的全局属性，那么这个属性在脚本执行后对任意代码可见；（<iframe>内嵌的窗体有不同的全局对象）；

        客户端JavaScript程序执行分两个阶段：1、载入文档内容，当HTML解析器遇到<script>标签时，默认必须先执行脚本(除非指定延迟执行defer、异步执行async)，然后在进行文档的解析和渲染，注册事件处理程序；2、当文档载入完成，且所有脚本执行完毕，进入第二阶段，由事件驱动的异步执行阶段，这个阶段的第一个事件是load事件，指示文档已经载入完成并可以操作，load事件会触发onload事件；

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

        当浏览器遇到<script>标签时，先判断type属性是否可识别，之后按type属性指定的脚步语言来运行代码，若无法识别类型，则浏览器仅解析<script>标签，忽略其他所有属性，标签内的内容也不显示和执行，这意味着可以在<script>标签内部嵌入任意的文本数据到文档里，然后把它当做普通标签来读取text内容；

        当<script>标签使用src属性时，将下载并使用src指定的文件，即使type类型可识别，标签内的内容也将被忽略；可在标签内嵌入一些文本信息；

defer、async异步加载执行脚本：

        <script defer src='test.js'></script>指定延迟执行defer，表示解析文档和脚本下载可同时进行，但脚本的执行要在文档载入和解析完成并可以操作后，并在DOMContentLoaded 事件触发之前完成。多个defer延迟脚本按照加载顺序先后执行；

        <script async src='test.js'></script>指定异步执行async，表示解析文档和脚本下载可同时进行，但在脚本加载完成后先立即执行脚本，脚本执行完毕后再继续解析文档，执行顺序是先加载完毕先执行；

        从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析；

        可以在不支持async属性时通过动态创建<script>标签并把它插入到文档中来实现异步加载和执行src属性指定的脚本。

URL中的JavaScript：

        在URL后面跟一个JavaScript:协议限定符，指定URL内容为任意的会被JavaScript解释器运行的代码的字符串，它被当做单独的一行代码对待，语句之间分号隔开，代码执行的返回值将成为该URL的‘资源’，该资源将作为内容显示在新文档中，旧文档将被替换，可用void运算符让返回值为undefined，防止旧文档被替换，如：<a href="javascript:void window.open('about:blank');">打开</a>

事件处理程序：

        HTML中定义的事件处理程序的属性可以包含任意多条JavaScript语句，之间用逗号隔开，注释必须使用多行注释/* */，这些语句组成一个函数体，然后这个函数作为属性的值；

        响应一个事件需要：1、事件处理函数(事件监听器、回调函数)；2、注册这个函数，以在事件发生时调用它，可通过HTML属性完成注册，但不建议将代码和HTML混在一起，提倡分离，最简单的注册方法是将事件处理函数赋值给目标对象的属性；如：（代码里没有任何函数调用，事件触发是自动调用）

        window.onload = function(){...};  document.getElementById('btn1').onclick=function(){...};

        “冒泡”：有些事件的目标对象是文档元素，该元素没有处理事件，则事件将会在文档树里往上传递，这个过程就叫冒泡