浅谈JavaScript 的执行顺序


Posted in Javascript onAugust 07, 2015

虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的。

本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。

在 html 文档中的执行顺序

js代码执行顺序比较的形象,用户可以直观的感受这种执行顺序。但是,js代码的执行顺序是比较复杂的。有时候我们会把js代码写在html里面,而html文档在浏览器中解析的过程是这样:浏览器按照文档流从上到下逐步解析页面结构和信息。js代码作为嵌入的脚本也算做html文档的组成部分,因此,js代码在装载时的执行顺序也是根据脚本标签<script>的出现来顺序来决定。(下面一个栗子)

<!DOCTYPE html>
<script>
  console.log("顶部脚本");
</script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    console.log("头部脚本");
  </script>
</head>
<body>
  <script>
    console.log("页面脚本");
  </script>
</body>
</html>
<script>
  console.log("底部脚本");
</script>

还有对于通过脚本标签<script>的src属性导入的外部js文件脚本,它也将按照其语句出现的顺序来执行,而且执行过程是文档装载的一部分,不会因为是外部js文件而延期执行。

// 先加载 b.js 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
  console.log(1);
</script>

预编译

当js引擎解析的时候,它会在预编译对所有声明的变量和函数进行处理。

变量提升

console.log(a); // undefined
var a = 1;
console.log(a); // 1

预解析函数

f(); // 1
function f() {
  console.log(1);
};

详细:javascript变量声明提升(hoisting)

分块执行代码

js是按块执行代码的,所谓代码块就是使用<script>标签分隔的代码段。(下面一个栗子)

<script>
  // 代码段1
  var a = 1;
</script>
<script>
  // 代码段2
  function f() {
    console.log(1);
  };
</script>

因为js是按代码块来执行的。浏览器在解析html文档流的时候,如果遇到一个<script>标签,则js会等到这个代码块都加载完之后再对代码进行预编译,然后在执行。执行完毕后,浏览器会继续解析西门的html文档流,同时js也准备好处理下一个代码块。

有个小坑,由于js是按块执行的,因此在一个js块中调用后面块声明的变量或者函数就会提示语法错误。但是不同块都属于一个全局作用域,也就是说,块之间的变量和函数是可以共享的。(下面一个栗子)

<script>
  // 代码段1
  console.log(a);
  f();
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

由于js是按块处理代码,同时又遵循html文档流的解析顺序,因此在上面的栗子中会看到语法错误。但是,在文档流加载完毕后再次访问就不会出现这种错误了。(下面一个栗子)

<script>
  window.onload = function(){ // 页面初始化事件处理函数
    // 代码段1
    console.log(a);
    f();
  }
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>

还有为了安全起见,一般在页面初始化完毕之后才允许js代码执行,这样就可以避免一些网速对js执行的影响。同时,也避开了html文档流对js执行的限制。

综上所述,javascript在执行时的步骤是:

1、先读入第一段代码块

2、对代码块进行语法分析,如果出现语法错误,直接执行第5步骤

3、对var变量和function定义的函数进行“预编译处理”(赋值式函数是不会进行预编译处理的)

4、执行代码块,有错则报错

5、如果还有下一段代码块,则读入下一段代码块,重复步骤2

6、结束

Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
javaScript基础详解
Jan 19 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
javascript封装 Cookie 应用接口
Aug 07 #Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 #Javascript
jQuery与getJson结合的用法实例
Aug 07 #Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
C++中的string类的用法小结
Aug 07 #Javascript
You might like
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
js+canvas实现纸牌游戏
2020/03/16 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
在python中实现对list求和及求积
2018/11/14 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python实现邮件自动发送
2019/08/10 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
初一生物教学反思
2014/01/18 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
旷课检讨书500字
2014/10/14 职场文书
六年级学生期末评语
2014/12/26 职场文书
2019入党申请书格式
2019/06/25 职场文书