浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作。
但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTimeout延时处理、XHR的异步请求是如何实现的,
接下来我们将逐一分析。
首先需要肯定的是浏览器中Javascript确实是单线程执行的,不信我们可以看个例子。
<html>
<head></head>
<body>
<script>
setTimeout(function(){
alert(1);
},0)
while(true){
//TODO
}
</script>
</body>
</html>
上面的例子中,while执行后,网页将永远无法呈现。而且setTimeout内的回调代码也不会执行。
这是为什么?从上我们得出的结论是setTimeout并不能真正实现异步,但延时又是如何实现的。
这就需要分析浏览器与Javascript解释引擎之间的关系。先给出结论,浏览器本身是多线程的,Javascript解释引擎是单线程的。
先说说浏览器有哪些线程,可以从其功能上分析,浏览器针对Javascript需要支持解释执行、响应事件、渲染UI、下载资源等。
可见,浏览器至少需要4个线程,我们着重分析跟Javascript有关的3个线程,解释器线程、交互线程、GUI线程。
下面我们给出一张图来描述三者之间的关系。
看完这张图后,先来介绍几个线程的作用。
JS解释器线程主要负责JS代码的解释和执行;交互线程主要负责捕获用户点击等事件,并将事件回调放入JS事件队列;
GUI线程主要负责HTML页面的渲染。三者之间存在一定联系,其中JS解释线程与GUI线程互斥,因为在执行JS代码时会阻塞页面渲染,防止页面数据不一致。
图中还存在一个JS回调队列,该队列是JS引擎的核心,内部存放JS逻辑片、UI事件回调、XHR回调等。
因为JS引擎是基于事件驱动,内部维持一个循环执行的任务,持续读取JS回调队列中的任务,当队列前一个执行完成后,便开始执行下一个回调任务。
理解上述几个线程后,再回头来看上面例子,即可理解。
当页面开始load时,首先将<script>代码片载入JS队列并开始执行,当执行完setTimeout后,将产生一个callback放入JS队列,然后执行while循环,此时循环无法退出,
后面的setTimeout callback也无法得到执行。这也就是为什么页面无法渲染,因为GUI线程与JS解释器线程互斥,并被阻塞。
关于浏览器中Javascript单线程就先分析到此,更多案例以后慢慢添加。
浏览器中Javascript单线程分析的更多相关文章
- 浏览器中JavaScript执行原理
本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 浏览器中“JavaScript解析器”工作原理
浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...
- web浏览器中javascript
1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...
- AMD:浏览器中的模块规范
前面提到,为实现与Node.js相同方式的模块写法,大牛们做了很多努力. 但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用scri ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- JavaScript单线程和浏览器事件循环简述
JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...
- 浏览器UI多线程及JavaScript单线程运行机制的理解
在上一篇博客中,我对jQuery的队列(queue)机制和动画(animate)机制做了一个深入的解析,在animate的实现机制其核心是依靠queue来完成的,其中在jQuery的链式调用部分,之前 ...
- JavaScript权威指南--WEB浏览器中的javascript
知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...
随机推荐
- AngularJs基础(一)
使用 angularjs首先在页面的<html>里添加一个模块写法: <html lang="en"ng-app="myApp"> my ...
- footer元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C#Excel的导入与导出
1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet:行:Row:单元格Cell. 2.NPOI是POI的C#版本,NPOI的行和列的index都是从0开始 ...
- JQuery validate验证 自定义
http://www.w3cschool.cc/jquery/jquery-plugin-validate.html http://blog.163.com/zhao_jinggui/blog/sta ...
- Android Fragment 生命周期及其API使用(建议使用自定义View替换Fragment)
我为什么不主张使用Fragment Fragment:( Fragment就相当于一个有生命周期的View,它的生命周期被所在的Activity的生命周期管理 ) 生命周期回调说明: onAttach ...
- topcoder SRM 618 DIV2 MovingRooksDiv2
一开始Y1,Y2两个参数看不懂,再看一遍题目后才知道,vector<int>索引代表是行数,值代表的是列 此题数据量不大,直接深度搜索即可 注意这里深度搜索的访问标识不是以前的索引和元素, ...
- CF 346B. Lucky Common Subsequence(DP+KMP)
这题确实很棒..又是无想法..其实是AC自动机+DP的感觉,但是只有一个串,用kmp就行了. dp[i][j][k],k代表前缀为virus[k]的状态,len表示其他所有状态串,处理出Ac[len] ...
- mvc2 To 4
asp.net mvc2新特性:1.区域,有利于分模块开发 2.数据注解和验证 3.View层强类型辅助方法 4.UI Templates 5.httppost,默认参数asp.net mvc3新特性 ...
- js-小效果-手风琴
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- POJ 1321 简单dfs
1.POJ 1321 棋盘问题 2.总结: 题意:给定棋盘上放k个棋子,要求同行同列都不重. #include<iostream> #include<cstring> #in ...