JavaScript的运行机制

最新推荐文章于 2024-08-09 10:51:22 发布
最新推荐文章于 2024-08-09 10:51:22 发布
阅读量110 收藏
点赞数
文章标签： javascript java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhhhhhhhhhhhhc/article/details/130848641
版权
进程是CPU资源分配的最小单位，线程是CPU调度的最小单位。JavaScript是单线程，但通过事件循环(EventLoop)机制处理异步任务。浏览器采用多进程模型，每个Tab页对应一个渲染进程，其中包含多个线程如GUI渲染线程和JS引擎线程。NodeJS虽然也是单线程，但其事件循环机制处理宏任务和微任务的方式与浏览器不同，例如process.nextTick的优先级高于Promise。
摘要由CSDN通过智能技术生成

进程与线程

什么是进程

CPU是计算机的核心，承担所有的计算任务。
官网说法，进程是CPU资源分配的最小单位。
字面意思就是进行中的程序，我将它理解为一个可以独立运行且拥有自己的资源空间的任务程序，进程包括运行中的程序和程序所使用到的内存和系统资源。
CPU可以有很多进程，我们的电脑每打开一个软件就会产生一个或多个进程，为什么电脑运行的软件多就会卡，是因为CPU给每个进程分配资源空间，但是一个CPU一共就那么多资源，分出去越多，越卡，每个进程之间是相互独立的，CPU在运行一个进程时，其他的进程处于非运行状态，CPU使用 时间片轮转调度算法 来实现同时运行多个进程。

什么是线程

线程是CPU调度的最小单位。
线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行流，一个进程可以有多个线程。
一个进程中只有一个执行流称作单线程，即程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。
一个进程中有多个执行流称作多线程，即在一个程序中可以同时运行多个不同的线程来执行不同的任务， 也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

进程和线程的区别

进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。
一个进程由一个或多个线程组成，线程可以理解为是一个进程中代码的不同执行路线。
进程之间相互独立，但同一进程下的各个线程间共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。
调度和切换：线程上下文切换比进程上下文切换要快得多。

多进程和多线程

  • 多进程：多进程指的是在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如大家可以在网易云听歌的同时打开编辑器敲代码，编辑器和网易云的进程之间不会相互干扰；
  • 多线程：多线程是指程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务；

JS为什么是单线程

JS的单线程，与它的用途有关。
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
还有人说js还有Worker线程，对的，为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程是完 全受主线程控制的，而且不得操作DOM。
所以，这个标准并没有改变JavaScript是单线程的本质。

浏览器

拿Chrome来说，我们每打开一个Tab页就会产生一个进程。

浏览器包含哪些进程

  1. Browser进程
    a. 浏览器的主进程(负责协调、主控)，该进程只有一个；
    b. 负责浏览器界面显示，与用户交互。如前进，后退等；
    c. 负责各个页面的管理，创建和销毁其他进程；
    d. 将渲染(Renderer)进程得到的内存中的Bitmap(位图)，绘制到用户界面上；
    e. 网络资源的管理，下载等；
  2. 第三方插件进程
    a. 每种类型的插件对应一个进程，当使用该插件时才创建；
  3. GPU进程
    a. 该进程也只有一个，用于3D绘制等等；
  4. 渲染进程
    a. 即通常所说的浏览器内核(Renderer进程，内部是多线程)；
    b. 每个Tab页面都有一个渲染进程，互不影响；
    c. 主要作用为页面渲染，脚本执行，事件处理等；

为什么浏览器要多进程

假设浏览器是单进程，那么某个Tab页崩溃了，就影响了整个浏览器，体验有多差？同理如果插件崩溃了也会影响整个浏览器。
浏览器进程有很多，每个进程又有很多线程，都会占用内存

渲染进程

页面的渲染，JS的执行，事件的循环，都在渲染进程内执行，所以我们要重点了解渲染进程
渲染进程是多线程的，看渲染进程的一些常用较为主要的线程：

GUI渲染线程
  1. 负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等；
    a. 解析html代码(HTML代码本质是字符串)转化为浏览器认识的节点，生成DOM树，也就是DOM Tree；
    b. 解析css，生成CSSOM(CSS规则树)；
    c. 把DOM Tree 和CSSOM结合，生成Rendering Tree(渲染树)；
  2. 当我们修改了一些元素的颜色或者背景色，页面就会重绘(Repaint)；
  3. 当我们修改元素的尺寸，页面就会回流(Reflow)；
  4. 当页面需要Repaing和Reflow时GUI线程执行，绘制页面；
  5. 回流(Reflow)比重绘(Repaint)的成本要高，我们要尽量避免Reflow和Repaint；
  6. GUI渲染线程与JS引擎线程是互斥的：
    a. 当JS引擎执行时GUI线程会被挂起(相当于被冻结了)；
    b. GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行；
JS引擎线程
  1. JS引擎线程就是JS内核，负责处理Javascript脚本程序(例如V8引擎)；
  2. JS引擎线程负责解析Javascript脚本，运行代码；
  3. JS引擎一直等待着任务队列中任务的到来，然后加以处理：
    a. 浏览器同时只能有一个JS引擎线程在运行JS程序，所以js是单线程运行的；
    b. 一个Tab页(renderer进程)中无论什么时候都只有一个JS线程在运行JS程序；
  4. GUI渲染线程与JS引擎线程是互斥的，js引擎线程会阻塞GUI渲染线程
    a. 就是我们常遇到的JS执行时间过长，造成页面的渲染不连贯，导致页面渲染加载阻塞(就是加载慢)；
    b. 例如浏览器渲染的时候遇到
事件触发线程
  1. 属于浏览器而不是JS引擎，用来控制事件循环，并且管理着一个事件队列(task queue)；
  2. 当js执行碰到事件绑定和一些异步操作(如setTimeOut，也可来自浏览器内核的其他线程，如鼠标点击、AJAX异步请求等)，会走事件触发线程将对应的事件添加到对应的线程中(比如定时器操作，便把定时器事件添加到定时器线程)，等异步事件有了结果，便把他们的回调操作添加到事件队列，等待js引擎线程空闲时来处理；
  3. 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；
  4. 因为JS是单线程，所以这些待处理队列中的事件都得排队等待JS引擎处理；
定时触发器线程
  1. setInterval与setTimeout所在线程；
  2. 浏览器定时计数器并不是由JavaScript引擎计数的(因为JavaScript引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确)；
  3. 通过单独线程来计时并触发定时(计时完毕后，添加到事件触发线程的事件队列中，等待JS引擎空闲后执行)，这个线程就是定时触发器线程，也叫定时器线程；
  4. W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms；
异步http请求线程
  1. 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求；
  2. 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中再由JavaScript引擎执行；
  3. 简单说就是当执行到一个http异步请求时，就把异步请求事件添加到异步请求线程，等收到响应(准确来说应该是http状态变化)，再把回调函数添加到事件队列，等待js引擎线程来执行；

事件循环(Event Loop)基础

JS分为同步任务和异步任务。同步任务都在主线程(这里的主线程就是JS引擎线程)上执行，会形成一个执行栈。
主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放一个事件回调。一旦执行栈中的所有同步任务执行完毕(也就是JS引擎线程空闲了)，系统就会读取任务队列，将可运行的异步任务(任务队列中的事件回调，只要任务队列中有事件回调，就说明可以执行)添加到执行栈中，开始执行
我们来看一段简单的代码：

let setTimeoutCallBack = function() {
  console.log('我是定时器回调');
};
let httpCallback = function() {
  console.log('我是http请求回调');
}

// 同步任务
console.log('我是同步任务1');

// 异步定时任务
setTimeout(setTimeoutCallBack,1000);

// 异步http请求任务
ajax.get('/info',httpCallback);

// 同步任务
console.log('我是同步任务2');

以上代码的执行过程：

  1. JS是按照顺序从上往下依次执行的，可以先理解为这段代码时的执行环境就是主线程，也就是也就是当前执行栈；
  2. 首先，执行console.log(‘我是同步任务1’)；
  3. 接着，执行到setTimeout时，会移交给定时器线程，通知定时器线程 1s 后将 setTimeoutCallBack 这个回调交给事件触发线程处理，在 1s 后事件触发线程会收到 setTimeoutCallBack 这个回调并把它加入到事件触发线程所管理的事件队列中等待执行；
  4. 接着，执行http请求，会移交给异步http请求线程发送网络请求，请求成功后将 httpCallback 这个回调交由事件触发线程处理，事件触发线程收到 httpCallback 这个回调后把它加入到事件触发线程所管理的事件队列中等待执行；
  5. 再接着执行console.log(‘我是同步任务2’)；
  6. 至此主线程执行栈中执行完毕，JS引擎线程已经空闲，开始向事件触发线程发起询问，询问事件触发线程的事件队列中是否有需要执行的回调函数，如果有将事件队列中的回调事件加入执行栈中，开始执行回调，如果事件队列中没有回调，JS引擎线程会一直发起询问，直到有为止；

可以发现：

  1. 定时触发线程只管理定时器且只关注定时不关心结果，定时结束就把回调扔给事件触发线程；
  2. 异步http请求线程只管理http请求同样不关心结果，请求结束把回调扔给事件触发线程；
  3. 事件触发线程只关心异步回调入事件队列；
  4. JS引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行；
  5. 反复执行，就是我们所谓的事件循环(Event Loop)；

在这里插入图片描述

  1. 执行栈开始顺序执行；
  2. 判断是否为同步，异步则进入异步线程，最终事件回调给事件触发线程的任务队列等待执行，同步继续执行；
  3. 执行栈空，询问任务队列中是否有事件回调；
  4. 任务队列中有事件回调则把回调加入执行栈末尾继续从第一步开始执行；
  5. 任务队列中没有事件回调则不停发起询问；

宏任务& 微任务

宏任务(macrotask)

在ECMAScript中，macrotask也被称为task。
我们可以将每次执行栈执行的代码当做是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)， 每一个宏任务会从头到尾执行完毕，不会执行其他。
由于JS引擎线程和GUI渲染线程是互斥的关系，浏览器为了能够使宏任务和DOM任务有序的进行，会在一个宏任务执行结果后，在下一个宏任务执行前，GUI渲染线程开始工作，对页面进行渲染：

宏任务 -> GUI渲染 -> 宏任务 -> ...

常见的宏任务：

  1. 主代码块；
  2. setTimeout；
  3. setInterval；
  4. setImmediate () -Node；
  5. requestAnimationFrame () -浏览器

微任务(microtask)

ES6新引入了Promise标准，同时浏览器实现上多了一个microtask微任务概念，在ECMAScript中，microtask也被称为jobs。
我们已经知道宏任务结束后，会执行渲染，然后执行下一个宏任务， 而微任务可以理解成在当前宏任务执行后立即执行的任务。
当一个宏任务执行完，会在渲染前，将执行期间所产生的所有微任务都执行完：

宏任务 -> 微任务 -> GUI渲染 -> 宏任务 -> ...

常见微任务

  1. process.nextTick () -Node；
  2. Promise.then()；
  3. catch；
  4. finally；
  5. Object.observe；
  6. MutationObserver；

区分宏任务&微任务

打开新的空白窗口，在console中输入以下代码

window.open();

document.body.style = 'background:black';
document.body.style = 'background:red';
document.body.style = 'background:blue';
document.body.style = 'background:pink';

背景直接渲染了粉红色，根据上文里讲浏览器会先执行完一个宏任务，再执行当前执行栈的所有微任务，然后移交GUI渲染，上面四行代码均属于同一次宏任务，全部执行完才会执行渲染，渲染时GUI线程会将所有UI改动优化合并，所以视觉上，只会看到页面变成粉红色。

document.body.style = 'background:blue';
setTimeout(()=>{
    document.body.style = 'background:black'
},200)

页面会先卡一下蓝色，再变成黑色背景。之所以会卡一下蓝色，是因为以上代码属于两次宏任务，第一次宏任务执行的代码是将背景变成蓝色，然后触发渲染，将页面变成蓝色，再触发第二次宏任务将背景变成黑色。

document.body.style = 'background:blue'
console.log(1);
Promise.resolve().then(()=>{
    console.log(2);
    document.body.style = 'background:pink'
});
console.log(3);

输出 1 3 2 , 是因为 promise 对象的 then 方法的回调函数是异步执行，所以 2 最后输出
页面的背景色直接变成粉色，没有经过蓝色的阶段，是因为，我们在宏任务中将背景设置为蓝色，但在进行渲染前执行了微任务， 在微任务中将背景变成了粉色，然后才执行的渲染。

注意点

  1. 浏览器会先执行一个宏任务，紧接着执行当前执行栈产生的微任务，再进行渲染，然后再执行下一个宏任务；
  2. 微任务和宏任务不在一个任务队列，不在一个任务队列：
    a. 例如setTimeout是一个宏任务，它的事件回调在宏任务队列，Promise.then()是一个微任务，它的事件回调在微任务队列，二者并不是一个任务队列；
    b. 以Chrome 为例，有关渲染的都是在渲染进程中执行，渲染进程中的任务（DOM树构建，js解析…等等）需要主线程执行的任务都会在主线程中执行，而浏览器维护了一套事件循环机制，主线程上的任务都会放到消息队列中执行，主线程会循环消息队列，并从头部取出任务进行执行，如果执行过程中产生其他任务需要主线程执行的，渲染进程中的其他线程会把该任务塞入到消息队列的尾部，消息队列中的任务都是宏任务；
    c. 微任务是如何产生的呢？当执行到script脚本的时候，js引擎会为全局创建一个执行上下文，在该执行上下文中维护了一个微任务队列，当遇到微任务，就会把微任务回调放在微队列中，当所有的js代码执行完毕，在退出全局上下文之前引擎会去检查该队列，有回调就执行，没有就退出执行上下文，这也就是为什么微任务要早于宏任务，也是大家常说的，每个宏任务都有一个微任务队列（由于定时器是浏览器的API，所以定时器是宏任务，在js中遇到定时器会也是放入到浏览器的队列中）；
    在这里插入图片描述
  3. 首先执行一个宏任务，执行结束后判断是否存在微任务；
  4. 有微任务先执行所有的微任务，再渲染，没有微任务则直接渲染；
  5. 然后再接着执行下一个宏任务；

完整的Event Loop

在这里插入图片描述

  1. 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为同步任务、异步任务两部分，同步任务会直接进入主线程依次执行，异步任务会再分为宏任务和微任务；
  2. 宏任务进入到Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
  3. 微任务也会进入到另一个Event Table中，并在里面注册回调函数，每当指定的事件完成时，Event Table会将这个函数移到Event Queue中；
  4. 当主线程内的任务执行完毕，主线程为空时，会检查微任务的Event Queue，如果有任务，就全部执行，如果没有就执行下一个宏任务；
  5. 上述过程会不断重复，这就是Event Loop；

Promise&async/aweait

Promise

new Promise(() => {}).then() 中，前面的 new Promise() 这一部分是一个构造函数，这是一个同步任务，后面的 .then() 才是一个异步微任务：

new Promise((resolve) => {
	console.log(1)
  resolve()
}).then(()=>{
	console.log(2)
})
console.log(3)
// 上面代码输出1 3 2

async/await 函数

async/await本质上还是基于Promise的一些封装，而Promise是属于微任务的一种
所以在使用await关键字与Promise.then效果类似，await 以前的代码，相当于与 new Promise 的同步代码，await 以后的代码相当于 Promise.then的异步

setTimeout(() => console.log(4))

async function test() {
  console.log(1)
  await Promise.resolve()
  console.log(3)
}

test()

console.log(2)
// 输出1 2 3 4

demo

function test() {
  console.log(1)
  setTimeout(function () { 	// timer1
    console.log(2)
  }, 1000)
}

test();

setTimeout(function () { 		// timer2
  console.log(3)
})

new Promise(function (resolve) {
  console.log(4)
  setTimeout(function () { 	// timer3
    console.log(5)
  }, 100)
  resolve()
}).then(function () {
  setTimeout(function () { 	// timer4
    console.log(6)
  }, 0)
  console.log(7)
})

console.log(8)

// 输出1，4，8，7，3，6，5，2
  1. JS是顺序从上而下执行；
  2. 执行到test()，test方法为同步，直接执行console.log(1)打印1；
  3. test方法中setTimeout为异步宏任务，回调我们把它记做timer1放入宏任务队列；
  4. test方法下面有一个setTimeout为异步宏任务，回调我们把它记做timer2放入宏任务队列；
  5. 执行promise，new Promise是同步任务，直接执行，打印4；
  6. new Promise里面的setTimeout是异步宏任务，回调我们记做timer3放到宏任务队列；
  7. Promise.then是微任务，放到微任务队列；
  8. console.log(8)是同步任务，直接执行，打印8；
  9. 主线程任务执行完毕，检查微任务队列中有Promise.then；
  10. 开始执行微任务，发现有setTimeout是异步宏任务，记做timer4放到宏任务队列；
  11. 微任务队列中的console.log(7)是同步任务，直接执行，打印7；
  12. 微任务执行完毕，第一次循环结束；
  13. 检查宏任务队列，里面有timer1、timer2、timer3、timer4，四个定时器宏任务，按照定时器延迟时间得到可以执行的顺序，即Event Queue：timer2、timer4、timer3、timer1，依次拿出放入执行栈末尾执行；
  14. 执行timer2，console.log(3)为同步任务，直接执行，打印3；
  15. 检查没有微任务，第二次Event Loop结束；
  16. 执行timer4，console.log(6)为同步任务，直接执行，打印6；
  17. 检查没有微任务，第三次Event Loop结束；
  18. 执行timer3，console.log(5)同步任务，直接执行，打印5；
  19. 检查没有微任务，第四次Event Loop结束；
  20. 执行timer1，console.log(2)同步任务，直接执行，打印2；
  21. 检查没有微任务，也没有宏任务，第五次Event Loop结束；

NodeJS中的运行机制

虽然NodeJS中的JavaScript运行环境也是V8，也是单线程，但是，还是有一些与浏览器中的表现是不一样的。
其实nodejs与浏览器的区别，就是nodejs的宏任务分好几种类型，而这好几种又有不同的任务队列，而不同的任务队列又有顺序区别，而微任务是穿插在每一种宏任务之间的。
在node环境下，process.nextTick的优先级高于Promise，可以简单理解为在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。
在这里插入图片描述
NodeJS的Event Loop：

  1. Node会先执行所有类型为 timers 的 MacroTask，然后执行所有的 MicroTask(NextTick例外)；
  2. 进入 poll 阶段，执行几乎所有 MacroTask，然后执行所有的 MicroTask；
  3. 再执行所有类型为 check 的 MacroTask，然后执行所有的 MicroTask；
  4. 再执行所有类型为 close callbacks 的 MacroTask，然后执行所有的 MicroTask；
  5. 至此，完成一个 Tick，回到 timers 阶段，重复执行；
mengxiangjiaxinshui
关注
JS运行机制
没什么不得了的
05-09 1780
基础知识 1、js是单线程运行，同一时间只能做一件事情，这是因为js是浏览器脚本语言，用途是与用户互动进行DOM操作，单线程运行可以避免同时操作同一个DOM的矛盾问题，但同样会导致需要花费更多的运行时间 2、JS将任务分为同步任务与异步任务两类 同步任务：在主线程上排队进行的，按顺序执行 异步任务：不进入主线程，而进入事件列表执行，异步事件完成有结果后把结果回调函数放入“任务 队列”(taskqueue)，只有“任务队列”通知主线程某个异步任务可以执行了，该任务才会进入主线程执行 JS运
JS的运行机制
weixin_34014277的博客
11-20 56
代码块： JS中的代码块是指由<script>标签分割的代码段。JS是按照代码块来进行编译和执行的，代码块间相互独立(即就算代码块1出错，但不影响代码块2的加载和执行)，但变量和方法共享。 案例：2个代码块 <scripttype="text/javascript"> console.log("这是代码块一"); </script> &...
彻底理解JavaScript的运行原理
最新发布
qq_45730399的博客
08-09 993
v8引擎的执行原理、 内存管理和垃圾回收、 JavaScript代码执行中的概念、 GO、VO、AO、作用域链、 全局代码执行步骤、 函数执行步骤和闭包
JavaScript 运行机制详解：再谈Event Loop
Walter`s blog
11-30 425
单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM
JavaScript运行机制
songmumu博客
04-17 454
单线程： JavaScript是单线程的，什么是单线程，单线程就是在同一时刻只能执行一个任务，只有等到这个任务完成时才会执行下一个任务。 任务队列： 什么是任务队列：所有的任务无非就两种，要么是同步任务，要么是异步任务。 什么时候会开启异步任务：setTimeout()、setInterval()、Dom事件、es6中的 Promise。 执行顺序：同步任务优先执行，遇到异步任务时先挂起...
javascript运行机制1
08-08
JavaScript 运行机制 JavaScript 运行机制是指 JavaScript 代码在浏览器或 Node.js 环境中执行的过程。这个机制涉及到变量作用域、函数执行、上下文创建和垃圾回收等多个方面。 一、全局执行上下文 在 JavaScript...
JavaScript运行机制实例分析
11-20
JavaScript运行机制是编程中至关重要的概念，它决定了代码如何被解析、执行以及处理异步操作。本文将通过实例深入解析JavaScript的运行流程。 首先，JavaScript是单线程的，这意味着它按照顺序执行代码，一行接一行...
javascript运行机制之执行顺序理解
11-19
JavaScript的运行机制主要涉及到代码块、函数声明与赋值、预编译期和执行期等核心概念。首先，我们从代码块开始。 1. **代码块**：在JavaScript中，代码块通常指的是由`<script>`标签包裹的代码段。每个`<script>`...
JavaScript 执行机制
dashifu11111的博客
03-04 196
引言 javascript是按照语句出现的顺序执行的： 看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的， 所以我们认为的js是这样的： 然而实际上js是这样的： 依照js是按照语句出现的顺序执行这个理念，我自信的写下输出结果： //"定时器开始啦" //"马上执行for循环啦" /...
JS运行机制整理
mandy' blog
07-12 610
js加载时间线 1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。 2、遇到link外部css，创建线程加载，并继续解析文档。 3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本...
Javascript - 运行机制
The_c_D的博客
08-25 442
Javascript是单线程的，这一特性也是因为Javascript的初衷是操作DOM，产生用户交互，如果存在多线程，操作DOM就会产生同步问题，为了避免复杂性，Javascript被设计为单线程的。 但我们仍然看到了一些异步特性，例如：事件响应、ajax、计时器等。实际上，这些异步任务是在一个特殊的任务队列中等待主线程执行的，当主线程空闲就从任务队列中获取可以执行的任务进行处理。而像事
javascript的运行机制
简单是书的博客
11-24 564
在了解js的运行机制之前，我们先来了解几个重要的术语。(一)代码块js中的代码块是由< script >标签分割的代码块。如下图： js是按照代码块来进行编译和执行的，代码块之间相互独立，变量和方法可以共享。 代码块的编译是按照由上之下的顺序来进行编译和执行。如果var test = “我是代码块一变量”;放在 alert(str)；后面，代码块运行的时候因为前面已经出错不会运行到这个位置。
JavaScript运行机制详解：从疑惑到精通
- 作者分享写作动机，是因为自己曾对JavaScript运行机制感到困惑，尤其是在处理一个长期未得到完整解答的问题时，决定撰写这篇文章来填补知识空白。 - 提到网上的资源存在重复和缺乏深度的现象，希望通过自己的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值