javascript脚本从载入浏览器到显示执行的过程解析
版权声明:本文为博主原创文章,未经博主允许不得转载。
简单的代码:
<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脚本从载入浏览器到显示执行的过程解析的更多相关文章
- 一键帮你复制多个文件到多个机器——PowerShell小脚本(内附PS远程执行命令问题解析)
作为一个后台程序猿,经常需要把一堆程序集(DLL)或者应用程序(EXE)复制到多个服务器上,实现程序的代码逻辑更新,用以测试新的功能或改动逻辑.这里给大家介绍一个自己实现的PowerShell脚本,方 ...
- 嵌入javascript脚本的位置
JavaScript脚本可以放在HTML文档任何需要的位置.一般来说,可以在<head>与</head>.<body>与</body>标记对之间按需要放 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- 获取当前正在执行的Javascript脚本文件的路径
获取当前JavaScript脚本文件的路径,在特定场景下可能需要,比如写模块加载器,或者进行日志记录.下面这段脚本适用于所有浏览器来获取正在执行js文件的路径,但是该方法只适用于脚本加载过程中执行的情 ...
- javascript脚本何时会被执行
javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执 ...
- 各种浏览器开启JavaScript脚本方法
各种浏览器开启JavaScript脚本方法 随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站 ...
随机推荐
- C++ 鼠标模拟程序
关于鼠标模拟程序应用不算少见.在游戏外挂或者一些操作频繁位置确定的程序上应用往往有奇效. 比較旧的API是mouse_event,本人一開始也用这个在搞,只是后来才看到新的API在操作上更加统一.稍作 ...
- Android程序猿自己动手制作.9.png图片
1:怎样制作9.png图片素材: 打开SDK工具文件夹下: draw9patch.zip 解压执行draw9patch.bat.有的直接搜索会有:draw9patch.bat. 双击执行后,例如以下 ...
- .Net 路由处理厉害了
通过设置路由,可以灵活的显示地址内容.它会自动转换为想要的控制器和方法中去. using System; using System.Collections.Generic; using System. ...
- 判断DataGridView滚动条是否滚动到当前已加载的数据行底部
private void dataGridView1_Scroll(object sender, ScrollEventArgs e) { if (e.ScrollOrientation == S ...
- How Hystrix Works?--官方
https://github.com/Netflix/Hystrix/wiki/How-it-Works Contents Flow Chart Circuit Breaker Isolation T ...
- 开源3D游戏引擎Irrlicht简介
Irrlicht简介 Irrlicht在国内也被叫做"鬼火"引擎,是一款用C++编写的开放源代码的高性能游戏引擎.而且是跨平台的,具有很好的移植性,Irrlicht支持OpenGl ...
- selenium与phantomjs简单结合
selenium工具安装 Windows安装pip install selenium Linux安装apt-get install selenium 查看selenium支持的浏览器from sele ...
- Linux下QQ的使用并手动设置QQ文件保存路径
一.背景&&目标 马化腾迟迟不肯做linux版本的QQ和微信,实在抠脚. 没有办法,要在linux上使用QQ,目前我找到最好的办法就是使用wine,然而wine这个杀千刀的又是个坑货, ...
- opengl绘制三维人物luweiqi
素材中有四个.bmp格式的纹理文件和一个.txt的模型参数文件 文件格式说明: 纹理文件数量 纹理文件1(字符串)//.bmp 纹理文件2(字符串) 纹理文件3(字符串) . . . 材质数量 amb ...
- WEB开发中一些常见的攻击方式及简单的防御方法
WEB开发中一些常见的攻击方式及简单的防御方法 转载:http://blog.csdn.net/seven__________7/article/details/70896913