2024年最新前端开发技术-剖析JavaScript单线程 原创_前端单线程(1),看完老板就给加薪了

img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!

由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新

需要这份系统化资料的朋友,可以戳这里获取

JavaScript单线程和多线程是很多小白同学入门的时候问到最多的问题,虽然官方给出过解释但对于新手来说并不友好,今天小千就来给大家介绍一下JavaScript的单线程。

一、 浏览器的进程和线程

浏览器的架构是多进程的,不同的浏览器采用不同的进程架构,这个没有统一的标准,以谷歌浏览器为例,他主要有四个进程,分别是顶层的Browser process,负责标签页网页呈现的Renderer Process,负责控制网页插件的Plugin Process和负责处理GPU的GPU Process。

每个进程都可以通过创建线程或者调用线程来完成任务。打个比方,进程就相当于一个 公司,线程就相当于公司的一个部门,一个公司可以只有一个部门也可以有多个部分,公司内部的资源是共享的。

二、浏览器的渲染进程

我们前端主要和Renderer Process打交道,在这个进程里面主要包含五个线程:

1、GUI渲染线程,用于解析html、css,构建DOM树和RenderObject树,布局和绘制等浏览器界面渲染任务|不能和JS引擎线程同时执行。

2、js引擎线程,也就是我们常说的js内核,用于解析、运行javascript代码,不能和GUI渲染线程同时执行。

3、事件触发线程,用于监听和触发事件,可以理解成由js引擎线程来执行事件绑定代码,然后另开事件触发线程用来监听事件的触发,触发以后把事件处理函数里面的代码交给js引擎线程来执行,但是js是单线程的,事件处理函数里面的代码会添加到待处理队列的末尾,也就是等js线程空闲以后才会执行。

4、定时触发器线程,就是经常使用的setInterval与setTimeout所使用的线程,可以理解成由js引擎线程来定义一个定时器,但是定时器的计数是另开单独线程来计时并触发定时,计时时间到了以后,把要执行的回调函数里面的代码添加到待处理队列的末尾,等待js线程空闲以后执行。

5、http请求线程,在我们使用XMLHttpRequest对象发送http请求的时候,是新开一个线程请求,检测到对象状态改变时,如果绑定了回调函数,异步线程就产生状态变更事件,将这个回调里面的代码添加到js线程末尾。

三、js引擎线程的单线程

1、分析下面代码执行过程,以定时器触发线程为例看不同线程和js线程的执行过程:

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值