首页 >

浅谈JavaScript 的执行顺序【javascript】

web前端|js教程浅谈JavaScript 的执行顺序【javascript】
JavaScript,执行顺序
web前端-js教程
虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的。
源码小型考试题库,vscode 执行调试模式,ubuntu升级麒麟,jetty取代tomcat,sqlite数据库导入表,有验证码的网站如何爬虫,js php md5,河源seo网络推广价格,hml5网站源码下载,小鱼模板lzw
本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。
vb打印源码,vscode运行手机模拟器,有线 ubuntu连不上,tomcat怎样发布app,网络爬虫范例,hkd to php,怀化百度seo优化公司lzw
在 html 文档中的执行顺序
赛事数据 源码,vscode公众号开发,ubuntu系统框架,查看几个tomcat进程,sqlite3中备份删除,爬虫爬取的数据会实时更新嘛,mac php 版本升级,天津哪里有seo优化,电子政务系统网站建设的基本过程,ecshop 3.6 模板lzw
js代码执行顺序比较的形象,用户可以直观的感受这种执行顺序。但是,js代码的执行顺序是比较复杂的。有时候我们会把js代码写在html里面,而html文档在浏览器中解析的过程是这样:浏览器按照文档流从上到下逐步解析页面结构和信息。js代码作为嵌入的脚本也算做html文档的组成部分,因此,js代码在装载时的执行顺序也是根据脚本标签的出现来顺序来决定。(下面一个栗子)

  console.log("顶部脚本");    Document      console.log("头部脚本");        console.log("页面脚本");    console.log("底部脚本");
还有对于通过脚本标签的src属性导入的外部js文件脚本,它也将按照其语句出现的顺序来执行,而且执行过程是文档装载的一部分,不会因为是外部js文件而延期执行。

// 先加载 b.js 并且执行里面的代码// 然后在按顺序执行下面的代码  console.log(1);
预编译

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

变量提升

console.log(a); // undefinedvar a = 1;console.log(a); // 1
预解析函数

f(); // 1function f() {  console.log(1);};
详细:javascript变量声明提升(hoisting)

分块执行代码

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

  // 代码段1  var a = 1;  // 代码段2  function f() {    console.log(1);  };
因为js是按代码块来执行的。浏览器在解析html文档流的时候,如果遇到一个标签,则js会等到这个代码块都加载完之后再对代码进行预编译,然后在执行。执行完毕后,浏览器会继续解析西门的html文档流,同时js也准备好处理下一个代码块。

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

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

  window.onload = function(){ // 页面初始化事件处理函数    // 代码段1    console.log(a);    f();  }  // 代码段2  var a = 1;  function f() {    console.log(1);  };
还有为了安全起见,一般在页面初始化完毕之后才允许js代码执行,这样就可以避免一些网速对js执行的影响。同时,也避开了html文档流对js执行的限制。

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

1、先读入第一段代码块

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

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

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

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

6、结束


浅谈JavaScript 的执行顺序【javascript】
  • 浅谈Javascript 执行顺序
  • 浅谈Javascript 执行顺序 | 浅谈Javascript 执行顺序 ...

    浅谈JavaScript 的执行顺序【javascript】
  • Javascript代码在页面加载时的执行顺序介绍
  • Javascript代码在页面加载时的执行顺序介绍 | Javascript代码在页面加载时的执行顺序介绍 ...

    浅谈JavaScript 的执行顺序【javascript】
  • 多个$(document).ready()的执行顺序实例分析【jquery】
  • 多个$(document).ready()的执行顺序实例分析【jquery】 | 多个$(document).ready()的执行顺序实例分析【jquery】 ...