线程这个特性对于一门语言环境来说是尤其重要的，在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单线程分析的更多相关文章

  1. 浏览器中JavaScript执行原理

    本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而 ...

  2. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  3. 浏览器中“JavaScript解析器”工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...

  4. web浏览器中javascript

    1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...

  5. AMD：浏览器中的模块规范

    前面提到,为实现与Node.js相同方式的模块写法,大牛们做了很多努力. 但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用scri ...

  6. 第十一章：WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  7. JavaScript单线程和浏览器事件循环简述

    JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...

  8. 浏览器UI多线程及JavaScript单线程运行机制的理解

    在上一篇博客中,我对jQuery的队列(queue)机制和动画(animate)机制做了一个深入的解析,在animate的实现机制其核心是依靠queue来完成的,其中在jQuery的链式调用部分,之前 ...

  9. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

随机推荐

  1. DP(记忆化搜索) + AC自动机 LA 4126 Password Suspects

    题目传送门 题意:训练指南P250 分析:DFS记忆化搜索,范围或者说是图是已知的字串构成的自动机图,那么用 | (1 << i)表示包含第i个字串,如果长度为len,且st == (1 ...

  2. [转载]Robotium API 翻译（三）——判断测试结果的方法assert、is、search

    该文来源于:http://blog.csdn.net/dongmu1986   下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.asser ...

  3. git 学习笔记1--config & help

    1. config 配置用户名和邮箱: git config --global user.name 'pzdn2009' git config --global user.email 10502441 ...

  4. Codeforces 607B Zuma（区间DP）

    题目大概说,有n个颜色的宝石,可以消除是回文串的连续颜色序列,问最少要几下才能全部消除. 自然想到dp[i][j]表示序列i...j全部消除的最少操作数 有几种消除的方式都能通过枚举k(i<=k ...

  5. 【SQL】区分新来顾客和再访顾客

    -- 赋值 客户来访记录 SELECT m.* FROM (SELECT x.*, CASE WHEN x.ts > (SELECT MIN(a.ts) FROM USER.ps_afterre ...

  6. BZOJ2758 : [SCOI2012]Blinker的噩梦

    首先将包含关系建树. 方法是将每个图形拆成上半边和下半边,从左往右扫描线,用Splay从下到上维护扫描线上所有图形. 每次加入一个新的图形$x$的时候,看看它下方第一个图形$y$,如果$y$是上半边, ...

  7. BZOJ3868 : The only survival

    枚举每个点到$1$的距离,若$>k$则视为$k+1$,那么$d_1=1,d_n=k$. 对于$i$,如果$1\leq d_i\leq k$,则一定要存在一条边长度为$d_i-d_j$,且其他边长 ...

  8. 20145308刘昊阳 《Java程序设计》实验二 Java面向对象程序设计 实验报告

    20145308刘昊阳 <Java程序设计>实验二 Java面向对象程序设计 实验报告 实验名称 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面相对象三要素:封 ...

  9. 警惕自己，不断学习c++【转】

    每天早上起床看一遍,时刻警惕自己,每天至少要浏览http://www.cplusplus.com 1.把C++当成一门新的语言学习(和C没啥关系!真的.):2.看<Thinking In C++ ...

  10. ACM cigarettes

    cigarettes 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 Tom has many cigarettes. We hypothesized that he ...