js运行机制

转载 2015年11月20日 13:08:12
代码块: JS中的代码块是指由<script>标签分割的代码段。JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享。
案例:2个代码块
<script type="text/javascript">
    console.log("这是代码块一");
</script>
 
<script type="text/javascript">
    console.log ("这是代码块二");
</script>
 
 
HTML页面中JS的加载原理: 在加载HTML页面的时候,当浏览器遇到内嵌的JS代码时会停止处理页面,先执行JS代码,然后再继续解析和渲染页面。同样的情况也发生在外链的JS文件中,浏览器必须先花时间下载外链文件中的代码,然后解析并执行它,在这个过程中,页面的渲染和用户互交完全被阻塞。由于现代浏览器都允许并行下载JS文件,因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载。
 
JavaScript的单线程:
JS语言的一大特点就是单线程,也就是说,同一个时间只能做一件事情。之所以是单线程,是因为与它的用途有关,作为浏览器脚本语言,JS的主要用途是与用户互动以及操作DOM。这决定了它只能是单线程,否则会带来复杂的同步问题。为了利用多核CPU的计算功能,HTML5提出了web worker标准,允许JS脚本创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,所以这个新标准并没有改变JS单线程的本质。
 
JavaScript的任务列队:
JS任务可以分为两种:一种是同步任务,另一种是异步任务。注意,只有主线程空了,才会去读取"任务队列",这就是JS的运行机制,这个过程会不断重复。
同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕了,才会执行后一个任务
异步任务:在主线程之外,还存在一个“任务列队”,异步任务就是不进入主线程,而是进入“任务列队”的任务,只有“任务列队”通知主线程,某个异步任务可以执行了并且同步任务执行完毕,该任务才会进入主线程执行。
 
Javascript的事件和回调函数:
"任务列队"是一个事件的列队,IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列",就是读取里面有哪些事件。"任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列",等待主线程读取。所谓"回调函数",就是那些会被主线程挂起的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。"任务队列"是个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。
 
定时器:
除了放置异步任务的事件,"任务队列"还可以放置定时事件,即指定某些代码在多少时间之后执行。定时器功能主要由setTimeout()和setInterval()这两个函数来完成,它们的内部运行机制完全一样,区别在于前者指定的代码是一次性执行,后者则为反复执行。以下主要讨论setTimeou()方法:
setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数     
console.log(1)
setTimeout(function (){
     console.log(2)
}, 1000);
console.log(3)
上面代码的执行结果是1=>3=>2,因为setTimeout()将第二行推迟到1000毫秒之后执行
 
如果将setTimeout()的第二个参数设为0,就表示当前代码执行完(执行栈清空)以后立即执行
setTimeout(function (){
     console.log(2)
}, 0);
console.log(3)
上面代码的执行结果是3=>2,因为只有在执行完第二行以后,系统才会去执行"任务队列"中的回调函数。总之,setTimeout(fn, 0)的含义是,指定某个任务在主线程最早的空闲时间执行,也就是说尽可能早的执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事情都处理完,才会得到执行。
 
需要注意的是,setTimeout()知识将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数,要是当前代码耗时很长,有可能要等很久,所以并没有办法保证回调函数一定会在setTimeout()指定的时间执行。

javascript运行机制之执行顺序详解

JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地...
  • czw2010
  • czw2010
  • 2014年01月19日 15:51
  • 36339

浅谈js运行机制(线程)

浅谈js运行机制(线程)
  • w2765006513
  • w2765006513
  • 2016年12月19日 16:41
  • 7961

ajax的原理和运行机制

关于ajax,是最近炒得非常火的一种技术,并且时下它也是非常流行。当然,它并不是什么新技术,而是在各种已有的技术和支持机制下的一个统一。在我的项目中,偶尔也会用到ajax,用来给用户一些无刷新的体验。...
  • fuxiaohui
  • fuxiaohui
  • 2015年04月07日 02:00
  • 2182

Node.js和PHP运行机制对比

为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么...
  • English0523
  • English0523
  • 2017年01月11日 10:23
  • 727

js学习笔记:理解new的运行机制

js学习笔记:理解new的运行机制本文参考博客JS核心系列:理解 new 的运行机制我们知道,javascript中的new运算符是用来实例化一个引用类型,从而在内存中分配一个实例对象。那么,当我们使...
  • zhudui
  • zhudui
  • 2017年05月03日 10:51
  • 128

浅析JS运行机制

从一个简单的问题谈起: alert(i); // ? var i = 1; 输出结果是undefined, 这种现象被称成“预解析”:JavaScript引擎会优先解析va...
  • yhawaii
  • yhawaii
  • 2012年01月31日 11:24
  • 10795

javascript运行机制之执行顺序详解 (js 重点基础)

JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地...
  • qq_23476319
  • qq_23476319
  • 2016年09月12日 23:17
  • 155

Node.js和PHP运行机制对比

为什么要用node.js它又有什么优势呢?一个新的技术被大家喜爱那么它就必然有它的优势,那么下面我们就来简单把它和php做一个对比 1 . Node.js 他用的是JavaScript引擎,那么...
  • tCDPYh6sA3
  • tCDPYh6sA3
  • 2017年03月10日 10:17
  • 120

【JS】JavaScript引擎的内部运行机制

学习理解javascript的内部运行机制
  • u010651186
  • u010651186
  • 2015年01月25日 23:37
  • 523

浅析JS运行机制

从一个简单的问题谈起: alert(i); // ? var i = 1; 输出结果:undefined。 这种现象的原因是程序的“预解析”:JavaScript引擎会优先解析var...
  • Cesar_xu
  • Cesar_xu
  • 2015年11月19日 15:57
  • 166
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js运行机制
举报原因:
原因补充:

(最多只允许输入30个字)