浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务( 二 ) _浏览器架构

每一个Tab就是要给单独的进程
由于每个Tab都有自己独立的Renderer进程，因此某一个Tab出问题不会影响其它Tab

缺点

Tab间内存不共享，不同进程内存包含相同内容

Chrome多进程架构实锤图

文章插图

前端最核心的渲染（Renderer）进程包含哪些线程？

文章插图

渲染进程主要包括4个线程：

主线程（Main thread）(下载资源、执行js、计算样式、进行布局、绘制合成)
光栅线程（Raster thread）
合成线程（Compositor thread）
工作线程（Worker thread）

渲染进程的主线程知识点：

下载资源：主线程可以通过Browser进程的network线程下载图片，css，js等渲染DOM需要的资源文件
执行JS：主线程在遇到<script>标签时，会下载并且执行js，执行js时，为了避免改变DOM的结构，解析html停止，js执行完成后继续解析HTML 。正是因为JS执行会阻塞UI渲染，而JS又是浏览器的一哥，因此浏览器常常被看做是单线程的。
计算样式：主线程会基于CSS选择器或者浏览器默认样式去进行样式计算，最终生成Computed Style
进行布局：主线程计算好样式以后，可以确定元素的位置信息以及盒模型信息，对元素进行布局
进行绘制：主线程根据先后顺序以及层级关系对元素进行渲染，通常会生成多个图层
最终合成：主线程将渲染后的多个frame（帧）合成，类似flash的帧动画和PS的图层

渲染进程的主线程细节可以查阅Chrome官方的博客：Inside look at modern web browser (part 3)和Rendering Performance
渲染进程的合成线程知识点：

浏览器滚动时，合成线程会创建一个新的合成帧发送给GPU
合成线程工作与主线程无关，不用等待样式计算或者JS的执行，因此合成线程相关的动画比涉及到主线程重新计算样式和js的动画更加流畅

下面来看下主线程、合成线程和光栅线程一起作用的过程1.主线程主要遍历布局树生成层树

文章插图

2.栅格线程栅格化磁贴到GPU

文章插图

3.合成线程将磁贴合成帧并通过IPC传递给Browser进程，显示在屏幕上

文章插图

图片引自Chrome官方博客：Inside look at modern web browser (part 3)
浅谈单线程jsjs引擎图

文章插图

什么是单线程js？如果仔细阅读过第一部分“谈谈浏览器架构”的话，这个答案其实已经非常显而易见了。在”前端最核心的渲染进程包含哪些线程？“这里我们提到了主线程（Main thread）(下载资源、执行js、计算样式、进行布局、绘制合成，注意其中的执行js，这里其实已经明确告诉了我们Chrome中JAVAScript运行的位置。
那么Chrome中JavaScript运行的位置在哪里呢？
渲染进程（Renderer Process）中的主线程（Main Thread）
单线程js属于浏览器的哪个进程？单线程的js -> 主线程（Main Thread）-> 渲染进程（Renderer Process）
js为什么要设计成单线程的？其实更为严谨的表述是：“浏览器中的js执行和UI渲染是在一个线程中顺序发生的。”
这是因为在渲染进程的主线程在解析HTML生成DOM树的过程中，如果此时执行JS，主线程会主动暂停解析HTML，先去执行JS，等JS解析完成后，再继续解析HTML 。
那么为什么要“主线程会主动暂停解析HTML，先去执行JS，再继续解析HTML呢”？
这是主线程在解析HTML生成DOM树的过程中会执行style，layout，render以及composite的操作，而JS可以操作DOM，CSSOM，会影响到主线程在解析HTML的最终渲染结果，最终页面的渲染结果将变得不可预见。
如果主线程一边解析HTML进行渲染，JS同时在操作DOM或者CSSOM，结果会分为以下情况：