对于浏览器渲染的总结

93 阅读4分钟
进程:CPU分配资源的最小单位
线程:CPU调度的最小单位
进程:相当于一个工厂,系统分配的独立内存相当于工厂资源
线程:相当工人,一个工厂由多个工人组成,一个进程由一个或多个线程组成,即单线程和多线程
多个进程之间互相独立,当然也可以联系
一个进程下的多个线程互相协作完成任务,共享该进程下的内存资源
浏览器多进程
1.Brower进程:浏览器的主进程(负责协调、主控),只有一个,主要作用:
            负责浏览器界面显示,与用户交互,如前进、后退等
            负责各页面的管理,创建和销毁其他进程
            网络资源的下载管理等
2.第三方插件进程
3.GPU进程,最多一个
4.浏览器渲染进程(浏览器内核),默认每个tab页一个进程,互不影响。主要作用:
            页面渲染,脚本执行,事件处理等

浏览器渲染进程(多线程)

1.GUI渲染线程
    负责渲染浏览器界面,解析html,css,构建dom树和RenderObject树,布局和绘制等
    当界面需要重绘或某种操作引起回流时,该线程就会执行
    GUI渲染线程与js引擎线程是互斥的,当js引擎线程执行时,GUI渲染线程会被挂起,直到js引擎空闲时才会执行
    
2.JS引擎线程
    称为js内核,负责处理JavaScript脚本程序(v8引擎)
    js引擎一直在等待着任务队列中任务的到来,一个tab页进程中只有一个js引擎线程在处理程序
     
3.事件触发线程
    归属于浏览器而不是js引擎,用于控制事件循环
    当JS引擎执行异步任务时,该线程会将任务添加到对应事件线程中,事件触发时添加到对应的任务队列中
 
4.定时触发器线程
    用于setTimeoutsetInterval 定时器计数
    因为JS引擎是单线程的,如果处于阻塞线程状态会影响计时准确性的,所以通过触发器线程来计时,计时结束后添加到任务队列
    
5.异步http请求线程
    在XMLHttpRequest连接后请求浏览器开通一个新线程,而后将请求事件添加到任务队列,等待JS引擎执行

image-20220816134652827.png

JS为什么是单线程?

试想一下,js假如是多线程,一个线程要去操作一个DOM节点,另一个线程要去删除该DOM,浏览器应以那个线程为主
​
为了利用CPU多核计算的能力,提出了worker线程,允许JavaScript创建多个线程,但是子线程是完全受主线程控制的,且不能操作DOM,实质上,js还是单线程

js运行机制

js是单线程,主线程会先将所有任务分类,分为同步任务和异步任务
​
同步任务都在主线程(js引擎线程)上执行,会形成一个执行栈
主线程之外,事件触发线程管理着一个任务队列,任务队列存放着异步任务处理后的回调函数
当执行栈中的所有同步任务执行完毕后,js引擎会读取任务队列,将可执行的异步任务放入执行栈中进行执行
​
异步任务又分为宏任务和微任务
宏任务包括主线程任务、 setTimeoutsetInterval 等
微任务包括async awaitnew Promise().then()
宏任务中的setTimeout会先被定时器触发线程处理,只负责定时,在一定时间后将该任务交给事件触发线程,事件触发线程在将该任务存在宏任务队列中
微任务中的任务会被事件触发线程处理,存在微任务队列中
待主线程执行完执行栈中的任务后,会优先读取微任务队列中所有任务,并存在执行栈中进行处理,之后读取宏任务队列中一个任务放入栈中进行处理,完毕后再次读取微任务队列,重复以上动作,直到执行栈为空

在一个宏任务执行完毕后,会先读取微任务队列执行所有微任务,然后渲染页面,再次读取宏任务队列执行任务,一直重复

image-20220816180501125.png

js运行机制

image-20220816180232264.png

原文链接:

juejin.cn/post/684490…

juejin.cn/post/684490…