[前端]多线程在前端的应用——Javascript的线程

2024-05-22 18:34:08

JavaScript 是单线程、异步、非阻塞、解释型脚本语言。JavaScript 的设计就是为了处理浏览器网页的交互（DOM操作的处理、UI动画等），决定了它是一门单线程语言。如果有多个线程，它们同时在操作 DOM，那网页将会一团糟。

1.浏览器的渲染进程包含的线程

var a = 111;setTimeout(function() {console.log(222)
}, 2000)fetch(url)  // 假设该http请求花了3秒钟
.then(function() {console.log(333)
})dom.onclick = function() {  // 假设用户在4秒钟时点击了domconsole.log(444)
}console.log(555)// 结果
//555
//222
//333
//444

222,333,444在555之后被输出，也就是说计时器setTimeout、http请求fetch、事件触发器onclick并没有阻塞后面的代码。那，发生了什么？

其实，JavaScript 单线程指的是浏览器中负责解释和执行 JavaScript 代码的只有一个线程，即为 JS引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

JS引擎线程(主线程)
事件触发线程（onclick）
定时触发器线程（setTimeout）
异步http请求线程（fetch）
GUI渲染线程
EventLoop轮询处理线程

其中，1、2、4为常驻线程

2.消息队列（任务队列）

可以理解为一个静态的队列存储结构，非线程，只做存储，里面存的是一堆异步成功后的回调函数字符串，肯定是先成功的异步的回调函数在队列的前面，后成功的在后面。

注意：是异步成功后，才把其回调函数扔进队列中，而不是一开始就把所有异步的回调函数扔进队列。比如setTimeout 3秒后执行一个函数，那么这个函数是在3秒后才进队列的。

3.1中代码的执行流程如下

步骤1：

主线程只执行了var a = 111;和console.log(555)两行代码，其他的代码分别交给了其他三个线程，因为其他线程需要2、3、4秒钟才成功并回调，所以在2秒之前，主线程一直在空闲，不断的探查队列是否不为空。

此时主线程里其实已经是空的了（因为执行完那两行代码了）

步骤2：

2秒钟之后，setTimeout成功了

步骤3：

步骤4：

参照：https://juejin.im/post/5c2ec3b66fb9a049eb3c1012#comment

转载于:https://www.cnblogs.com/vickylinj/p/10907908.html

[前端]多线程在前端的应用——Javascript的线程相关推荐

前端开发面试题总结之——JAVASCRIPT（一）
___________________________________________________________________________________ 相关知识点数据类型.运算.对象 ...
前端开发面试题总结之——JAVASCRIPT.One
相关知识点数据类型.运算.对象.function.继承.闭包.作用域.原型链.事件.RegExp.JSON.Ajax.DOM.BOM.内存泄漏.跨域.异步加载.模板引擎.前端MVC.前端MVVM.路 ...
熟悉html css,编写HTML和CSS的前端开发中不一定熟悉JavaScript
原标题:编写HTML和CSS的前端开发中不一定熟悉JavaScript 作为前端开发人员,HTML.css.Java是必备的知识技能,但是现实工作工作中并非所有的前端都知道Java,根据外国一个网站的 ...
web 前端如何分享到instagram_好程序员web前端教程分享前端javascript练习题三
好程序员web前端教程分享前端javascript练习题三 cookie 一周内免登录样式代码: 姓名: 密码: 一周内免登陆 js功能代码: var input=document.getEleme ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...
HTML5期末大作业：旅行网站设计——开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
网页设计作业开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例
HTML5期末大作业:旅行网站设计--开心网旅游(11页) web前端期末大作业 html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电 ...
前端代码规范（阿里） --- Javascript
程序员写好看的代码,不亚于写一行好看的字好看的代码总是让人心旷神怡, 不好,不规范的代码,让人看了想说mmp, 那我们就来学习一下规范的代码怎么写的吧以下来自B站的学习视频:前端必备-阿里大厂前端 ...
前端学习总结：3、javascript基础
前端学习总结:3.javascript基础文章目录前端学习总结:3.javascript基础 1.概述 1.1 什么是JavaScript? 1.1.1 概念 1.1.2 作用 1.2 JavaS ...

最新文章

热门文章