关于javascript运行机制

冰霜

要了解js运行机制,需要从浏览器说

浏览器是多进程的

每打开一个Tab页,就相当于创建了一个独立的浏览器进程

浏览器都包含哪些进程?

1.Browser进程:浏览器的主进程,只有一个(协调、主控)
2.插件进程
3.GPU进程
4.浏览器渲染进程(浏览器内核,页面渲染,脚本执行,事件处理等)

重点
我们前端开发主要关注 渲染进程(例如webkit)

渲染进程是多线程的

🚗GUI渲染线程
负责解析HTML,CSS ,构建DOM树和RenderObject树,布局,绘制
🚗JS引擎线程(例如v8)
JS引擎线程负责解析Javascript

✔GUI渲染线程与JS引擎线程是互斥的
(由于这个特点,若js执行事件太长,就会造成页面渲染不顺畅,造成页面渲染阻塞,显示器60hz刷新,16ms每帧.16ms内要运行完成js和渲染完成)

🚗事件触发线程
1.这个线程不是webkit的,它是属于浏览器平台,它是事件循环
eventloop的重要核心
2.如果事件符合触发条件,这个线程会把此对应任务加入事件队列(例如:鼠标点击,AJAX请求)
🚗定时触发器线程
1.setInterval与setTimeout所在线程
2.这2个计时器不是js引擎操作的
3.计时完毕,添加到事件队列中
🚗http请求线程
1.在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
2.XMLHttpRequest对象上的回调函数,在状态变化时候,被放入事件队列

从EventLoop说到JS的运行机制

1.javascript是单线程
2.javascript的运行分为同步任务异步任务
3.同步任务在js的主线程执行
3.事件触发线程 管理着 任务队列

🧧 异步任务有了结果,事件触发线程就在任务队列中放一个事件,主线程同步任务执行完毕后才去执行任务队列

宏任务和微任务

1.宏任务是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)

2.微任务是在当前同步任务执行结束后立即执行的任务

🧧 宏任务是定时触发器线程,http请求线程造的,宏任务是事件触发线程维护的.
🧧 微任务是S引擎线程操作的,微任务队列执行完成,才会去执行宏任务

下面这段来着MDN

之所以称之为 事件循环,是因为它经常按照类似如下的方式来被实现:

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

queue.waitForMessage() 会同步地等待消息到达(如果当前没有任何消息等待被处理)

疯狂循环运行,等待消息,去运行
这就是浏览器背后的事,搞不懂了

阅读 269
358 声望
20 粉丝
0 条评论
你知道吗?

358 声望
20 粉丝
文章目录
宣传栏