浅谈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 相关文章推荐
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Vue父组件调用子组件事件方法
Feb 23 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php url路由入门实例
2014/04/23 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
javascript 函数式编程
2007/08/16 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
javascript判断office版本示例
2014/04/11 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
Python的randrange()方法使用教程
2015/05/15 Python
详解Python文本操作相关模块
2017/06/22 Python
python实现简易通讯录修改版
2018/03/13 Python
python字符串查找函数的用法详解
2019/07/08 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
企业治理工作自我评价
2013/09/26 职场文书
临床医学大学生求职信
2013/09/28 职场文书
2014信息公开实施方案
2014/02/22 职场文书
企业员工培训感言
2014/02/26 职场文书
谢师宴家长致辞
2015/07/27 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
解决vue中provide inject的响应式监听
2022/04/19 Vue.js