JavaScript代码的运行原理

此文章是为了面试准备所做。

解析机制和预解析请参考 http://www.cnblogs.com/HPNiuYear/archive/2012/08/27/2657879.html

http://www.blogjava.net/JAVA-HE/archive/2010/10/09/334021.html

JS解析引擎 /article/1307637.html

JS是啥？
JavaScript是解释执行的客户端脚本语言，读取一个语句就执行一个运行的时候动态解析执行的。动态语言。
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

JS打哪里来的？
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

JS干嘛用？
嵌入HTML的文件之中。主要应用不是作为系统扩展，而是实现一般的任务控制

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等时，向服务器进一步请求相应资源。）脚本是从服务器端下载到客户端，然后在客户端进行的，即不占用服务器端的资源，因此通过客户端脚本，客户端分担了服务器的的任务，大大的减轻了服务器的压力，从而间接地提升了服务器的性能
    3.1 当浏览器遇到第一个代码段，即第一个<script> 标记的时候，浏览器会执行之间的javascript代码。
        3.1.1 读取第一个代码段的内容
        3.1.2 词法分析：解释性语言没有编译成二进制代码，但是要进入到运行阶段，都应该是会经过词法分析、语法分析生成语法树。解释性语言在生成语法树后，就可以执行了。（这个跟脚本引擎编译器有关）在这个过程中，有语法检查（比如括号是否匹配），发现无法生成语法树，则报错，结束整个代码块的解析。
        3.1.3 预解析
            3.1.3.2 javascript在执行前会进行类似“预解析”的操作：首先会创建一个在当前执行环境下的活动对象，并将那些用var 声明的变量、定义的函数设置为活动对象的属性，但是此时这些变量的赋值都是undefined。
            3.1.3.3 在javascript解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到‍而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = …这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）。
        3.1.4 执行
    3.2 检查是否还有下一段代码？有就继续，否则结束。
4. 将最终结果显示在浏览器窗口中。

例如：
//首先客户端发送请求：http://localhost:8080/index.html。实际上发送的数据是：step 1 - 2
GET /index.html HTTP/1.1
Accept: **
Referer: http://localhost:8080/index.html
Accept-Language: en,zh-cn;q=0.5
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (MSIE 7.0; MSIE 7.0; Windows NT 5.1; InfoPath.1)
Host: localhost:8080
Connection: Keep-Alive
//服务端把图片在发送给客户端。Step 3 - 4
//然后当他解析到新的特殊标签<img 的时候，再次发送请求：Step 5
GET /images/logo.gif HTTP/1.1
Accept: */*
Referer: http://localhost:8080/index.html
Accept-Language: en,zh-cn;q=0.5
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (MSIE 7.0; MSIE 7.0; Windows NT 5.1; InfoPath.1)
Host: localhost:8080
Connection: Keep-Alive
//服务端把图片在发送给客户端。step 5-6

JS 注意事项？
1 JavaScript是解释执行的客户端脚本语言，读取一个语句就执行一个。不需要经历编译和链接这些阶段，大都直接解释执行
2. 每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。
3 变量的调用，必须是前面已经声明，否则获取的变量值是undefined。
4 Javascript里面都是对象，必须有一种机制，将所有对象联系起来
5 以前的严格JS是以分号为语句的分隔符，但现在一些浏览器已经接受以换行符为分隔符（似乎是很多人喜欢用基于对象的编程了，而在JS中写对象的函数是需要加分号的，所以很多人都爱忘）。
6 JS本身只提供语法解析与少部分内部函数支持，其他的均由宿主支持。比如在网页JS中的window, document, navigator等对象，均是由浏览器提供基于其它语言的代码，这些代码通常被隐藏，但很大程度上决定了JS的运行效率。如果你有兴趣，打开Chrome，按F12，调处Console，然后输alert（注意没有()），你就会发现[native code]这个东西。

 

常见问题：
浏览许多网站的时候，浏览器都会报JavaScript脚本错误，为什么JavaScript的函数还能运行呢？
其实它运行成功的是那些没有错误的JavaScript函数而已，而且JavaScript加载编译的时候，是以<script>遵守document加载html节点树形加载的，所以是先加载的<Script>是会先运行的，但是在<script>标签里面，但JavaScript遇到编译错误的代码行的时候就会报错跳出这段<script>，所以之前没有跳出<script>的时候加载的代码段因为已经加载到document里面，所以是可以运行的：