版权声明:本文为博主原创文章,未经博主允许不得转载。

简单的代码:

    <script type="text/javascript" src="xxx.js"></script>
<script type="text/javascript">
var i = 10;
function say(msg){
alert(msg);
}
</script>
<script type="text/javascript">
j=100;
say("hello world");
</script>

上面代码段的运行顺序是:

step1. 读入第一个代码段 
step2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5 
step3. 创建(全局/函数)执行环境,变量对象创建和实例化、作用域分配,对var变量和function定义做”预解析”,属于声明阶段 
step4. 执行代码段(调用函数、进入eval时,都会创建新的执行环境),有错则报错(比如变量未定义) 
step5. 如果还有下一个代码段,则读入下一个代码段,重复step2 
step6. 结束


补充解释:

1、对于step1中的’代码段’指的是<script>... ...</script>标签中的内容,还包括外部引入的脚本文件,如<script src="xxx.js"></script>也被列是代码段的范畴。[每个<script>标签都提供一个被编译的且立即执行的编译单元,因为缺少链接器,javascript把它们一起抛入一个公共的全局名字空间中。–《javascript语言精粹》]

2、对于step3创建全局执行环境,并不是每一个代码段都要执行step3,实际上,一个页面只会创建一个全局执行环境,所以从step2重复,不包括step3。

3、对于step3,变量声明和函数声明都被提升到当前作用域的顶端,’预解析’过程中,所有变量被赋值为undefined值,函数被赋值为函数定义的字符串,并不会对函数体中的JS代码做特殊处理,只是将函数体JS代码的扫描结果保存在函数对象的内部属性上,在函数执行时再做进一步处理。

例如:弹出结果并不是处理计算后的值,而是a函数的定义的字符串

    <script type="text/javascript">
function a(){
var b =1;
var c= 2;
var d = b+c;
alert(b+c);
}
alert(a);
</script>

4、对于step3,创建函数执行环境,也就是创建函数的变量对象(活动对象),声明变量和函数,是在函数被调用时进行的,函数内部定义的变量和函数都保存在改变量对象中。

例如:

<script type="text/javascript">
function test(){
//未用var声明,a属于全局变量,如果未调用test就完成了声明,则全局环境可以访问到a变量
a = 2;
}
//alert(a);//Uncaught ReferenceError: a is not defined
//alert(window.a);//undefined,并不能说明全局变量中已经声明了a变量,[如果你尝试检索一个并不存在的成员元素的值,将返回一个undefined值。--《javascript语言精粹》]
test();
alert(a);//调用之后,则可以访问a变量
</script>

总结过程:下载、读入、语法分析、代码解析、执行

参考来源:http://www.cnblogs.com/fool/archive/2010/10/16/1853326.html

javascript脚本从载入浏览器到显示执行的过程解析的更多相关文章

  1. 一键帮你复制多个文件到多个机器——PowerShell小脚本(内附PS远程执行命令问题解析)

    作为一个后台程序猿,经常需要把一堆程序集(DLL)或者应用程序(EXE)复制到多个服务器上,实现程序的代码逻辑更新,用以测试新的功能或改动逻辑.这里给大家介绍一个自己实现的PowerShell脚本,方 ...

  2. 嵌入javascript脚本的位置

    JavaScript脚本可以放在HTML文档任何需要的位置.一般来说,可以在<head>与</head>.<body>与</body>标记对之间按需要放 ...

  3. 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

    在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...

  4. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  5. 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...

  6. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  7. 获取当前正在执行的Javascript脚本文件的路径

    获取当前JavaScript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录.下面这段脚本适用于所有浏览器来获取正在执行js文件的路径,但是该方法只适用于脚本加载过程中执行的情 ...

  8. javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...

  9. 各种浏览器开启JavaScript脚本方法

    各种浏览器开启JavaScript脚本方法 随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站 ...

随机推荐

  1. 使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中&lt;meta-data&gt;变量的值

    转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客 你也能够查看我的其它同类文章.也会让你有一定的 ...

  2. 记一次httpclient Connection reset问题定位

    问题:某业务系统在运行一段时间后,某个API一定概率偶现Connection reset现象. 问题定位: 首先想到的是要本地复现出这个问题,但一直复现不出来. 1.根据线上问题相关日志判断应该是有部 ...

  3. Create the Project

    https://docs.microsoft.com/en-us/aspnet/web-forms/overview/getting-started/getting-started-with-aspn ...

  4. Controller接口控制器

    1.Controller简介 Controller控制器,是MVC中的部分C,为什么是部分呢?因为此处的控制器主要负责功能处理部分: 1.收集.验证请求参数并绑定到命令对象: 2.将命令对象交给业务对 ...

  5. Flex之柱状图实例

    Flex之柱状图实例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns ...

  6. python jieba分词工具

    源码地址:https://github.com/fxsjy/jieba 演示地址:http://jiebademo.ap01.aws.af.cm/ 特点 1,支持三种分词模式: a,精确模式,试图将句 ...

  7. centos inotify-rsync配置

    安装 yum -y install inotify-tools yum install rsync innotify说明 inotify介绍-- 是一种强大的.细颗粒的.异步的文件系统监控机制,*&a ...

  8. Java Web学习总结(10)——Session详解

    摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术.本文将详细讨论session的工作机制并且对在Java ...

  9. UVa 10101 - Bangla Numbers

    题目:将数字数转化成数字加单词的表示形式输出. 分析:数论.简单题.直接分成两部分除10000000的商和余数,分别输出就可以. 说明:注意输入为数字0的情况,还有long long类型防止溢出. # ...

  10. Floodlight中 处理packetin消息的顺序(2)

         前面通过阅读代码知道了怎样推断各个模块处理某个消息的先后顺序.那么内部是怎样实现的呢?      每当一个模块表示对一个消息感兴趣的时候,就会调用IFloodlightProviderSer ...