javascript代码的运行原理

以下内容友情转载，方便自己以及各位网友查阅，原链接http://www.cnblogs.com/cynthiahuo/archive/2013/06/04/3117306.html。。。在此感谢博主。。。

1、js的作用

现在我们上网浏览的网页都有绚丽多彩的动态效果以及很强的可操作性，在此过程js可以说是功不可没。js是解释执行的客户端脚本语言，也就是读取一条语句执行一条语句，其主要目的是解决服务器端语言，为客户提供更流畅的浏览效果。

js嵌入HTML中，主要是实现一般的任务控制。

很多时候我们都知道js的作用，但是对于js执行的原理可能了解的不是那么详尽。为此转载一下内容，同大家共同学习。

2、js执行原理（含有js代码的HTML文件的运行原理）

1、客户端请求某个页面，即我们在浏览器的地址栏中输入请求的网址，如：http://xxx.xxx.com/index.html浏览器接收到网址之后，向远程web服务器发送请求报文。

2、web服务器响应请求，web服务器找到请求的页面“index.html”，并将整个页面包含javascript的脚本代码作为响应的内容，发送回客户端。

3、客户端浏览器解释执行带有js脚本的代码，客户端浏览器打开回应的网页文件"index.html"内容，从上往下逐行读取并显示其中的html或者脚本代码，根据解析完成的html标签完成响应的动作（如：如果遇到IMG、SRC等时，向服务器进一步请求相应的资源）。脚本是从服务器端下载到客户端，在客户端进行解释执行，即不占用服务器端的资源，因此通过客户端脚本，客户端分担了服务器的任务，大大的减轻了服务器的压力，从而间接的提升了服务器的性能。

4、当浏览器遇到第一个代码段，即第一个<script>标记的时候，浏览器会执行之间的javascript代码，具体的执行过程如下：

1）、读取第一个代码段的内容。

2）、词法分析：解释性语言没有贬义成二进制代码，但是要进入到运行阶段，都应该会经过词法分析、语法分析生成语法树。解释性语言在生成语法树后，就可以执行了，在这个过程中，有语法检查（比如括号是否匹配），发现无法生成语法树，则报错，结束整个代码块的解析。

3）、预解析：javascript在执行前会进行类似预解析的操作。首先会创建一个在当前执行环境下的活动对象，并将那些用var声明的变量、定义的函数设置为活动对象的属性，但是此时这些变相的复制都是undefined。

4）、解释执行阶段：遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到并且该执行环境的拥有者有prototype属性时，则会从prototype链中查找，否则将会按照作用域链查找。遇到var a=...这样的语句时会给相应的变量进行赋值。（变量的赋值实在解释执行阶段完成的）

5）、执行

5、检查是否有下一段代码？有就重复4步骤操作。

6、将最终结果显示在浏览器窗口中。

问题：

浏览许多网站的时候，浏览器会报javascript脚本错误，为什么javascript的函数还能运行？

其实它运行成功的是那些没有错误的javascript函数，javascript加载编译的时候，是以<script>遵守document加载html节点数形加载的，所以先加载的<script>是先运行的，但是在<script>标签里面，javascript遇到编译错误的代码行时就会报错跳出这段<script>，足以之前没有跳出<script>的时候加载的代码段因为已经加载到document里面，所以是可以运行的。