浏览器中Javascript单线程分析

线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作。

但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTimeout延时处理、XHR的异步请求是如何实现的,

接下来我们将逐一分析。

首先需要肯定的是浏览器中Javascript确实是单线程执行的,不信我们可以看个例子。

<html>
<head></head>
<body>
<script>setTimeout(function(){    alert(1);},0)
while(true){
}
</script> <div></div> </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单线程就先分析到此,更多案例以后慢慢添加。

  

时间: 2024-12-20 16:49:25

浏览器中Javascript单线程分析的相关文章

浏览器中Javascript的加载和执行

在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏览器下载JS脚本的过程,执行时浏览器JS引擎解释执行的过程. 接下来先分析JS脚本加载的过程,加载方式可分为同步加载和异步加载. 同步加载即浏览器加载JS过程中停止对HTML元素的解析,保证JS执行的安全一致性,但如果JS中包含大量计算时,会导致阻塞页面的渲染.常见的JS加载是通过<script>

web浏览器中javascript

1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; // 找到head节点 var s = document.createElement("script"); // 创建一个script标签 s.src = url; // 设置一个src属性 head.appendChild(s); // 插入标签到head节点中}2.事件驱动javas

AMD:浏览器中的模块规范

为实现与Node.js相同方式的模块写法,大牛们做了很多努力.但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用script tag,script 默认的异步性导致很难实现与Node.js一模一样的模块格式.Modules/Wrappings 使得实现变为现实.虽然和Node.js的模块写法不完全一致,但也有很多相似之处,使得熟悉Node.js的程序员有一些亲切感.但Node.js终究是服务器端的JavaScript,没有必要把

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

浏览器客户端智能自动化:如何取得页面中JavaScript运行时动态生成的URL?

浏览器客户端智能自动化:如何取得页面中JavaScript运行时动态生成的URL? 需求 "页面智能拼接"指的是通过启发式查询DOM树,判断出"下一页"链接,取出其href属性.Chromium的官方插件DOM Distiller完成类似的工作,主要目的就是为了将多页点击流程变成单页的Ajax连续阅读体验. 问题是,现在有些网站为了阻止浏览器客户端这么做,将href属性设置为"#"(或javascript:void()),然后在其onclick事

Web浏览器中的JavaScript(一)

外部引入js脚本的优点: 1)  可以把大块的Js代码从html文件中删除,这有助于保持内容和行为的分离,从而简化html文件. 2)  如果多个Web页面公用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个html文件 3)  如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面--随后的页面可以从浏览器缓存检索它 4)  由于src属性的值可以使任意的url,因此来自一个Web服务器的JavaScript

浏览器中的JavaScript事件循环机制

浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中的顶部,执行完成之后就从栈的顶部移除该函数,直到栈内被清空. 同步任务.异步任务 JS单线程任务分为同步任务和异步任务.同步任务会在调用栈中按照顺序排队等待主线程执行,异步任务则会在异步有了结果之后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候,也就是栈内被清空的时候,被读取到栈中

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 JavaScript 的运行情况

1 概述 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 JavaScript 的运行情况,包括:执行覆盖率.执行行数.是否存在执行或语法错误等信息,当你对一个目标网页使用 Tracker,该网页的上方将加载进来一个 Tracker 导航栏. 不用安装,快速开始 也欢迎体验桌面客户端版 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 Ja