js线程机制
2011-11-24 10:51
169 查看
前几日写了一篇文章,介绍了js阻塞页面加载的问题。当时是通过例子来验证的。今天,我介绍一下浏览器内核,从原理上介绍一下js阻塞页面加载的原因。
浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。
1. javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
2. GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
3. 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
由上文蓝色标注的文字可以知道,当浏览器在执行JS程序的时候,GUI渲染线程会被保存在一个队列中,直到JS程序执行完成。这样就造成了页面的渲染,就是所说的JS阻塞页面加载问题。
很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.
参考资料:
http://fed.renren.com/2010/01/247
http://www.phpv.net/html/1700.html
来源:http://hi.baidu.com/zhoumm1008/blog/item/51105a49000bd5eed62afc6d.html
浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。
1. javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。
2. GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
3. 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。
由上文蓝色标注的文字可以知道,当浏览器在执行JS程序的时候,GUI渲染线程会被保存在一个队列中,直到JS程序执行完成。这样就造成了页面的渲染,就是所说的JS阻塞页面加载问题。
很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.
参考资料:
http://fed.renren.com/2010/01/247
http://www.phpv.net/html/1700.html
来源:http://hi.baidu.com/zhoumm1008/blog/item/51105a49000bd5eed62afc6d.html
相关文章推荐
- 进程与线程。js是什么运行机制?node.js是什么运行机制?
- 浏览器进程/线程模型及JS运行机制
- 浅谈js运行机制(线程)
- JS内部事件机制之单线程原理
- js的线程机制
- 【javascript基础】js线程机制【转】
- 浅谈js运行机制(线程)
- 从setTimeout到浏览器线程机制 ,实现JS线程和UI同时执行的效果
- JS运行机制(线程)
- ACE线程管理机制-并发控制(4)
- 什么是.Net的异步机制(线程间通信) - step 5
- 线程的等待唤醒机制
- Node.js入门:文件查找机制
- MySQL系列:innodb源码分析之线程并发同步机制
- Android消息通信机制(子线程向主线程通信).txt
- (九)Java入门--多线程(4)线程通信--等待唤醒机制
- 一道 promise 亮灯问题的 思路演进 与 深坑 (JS异步机制) 分析
- JS 的线程、事件循环、任务队列简介
- Linux 线程实现机制分析
- JAVA RMI线程模型及内部实现机制