浏览器多进程、js单线程问题

#浏览器多进程
首先、我们要明白线程与进程之间的关系，进程里面由一个或者多个线程（一般是多个）组成，进程可以理解为一个工厂，而线程可以理解为工厂的工人，进程之间的执行互相不影响
浏览器进程
1、Browser进程（浏览器主进程）
浏览器只存在一个，a、负责对页面进行管理，实现对进程的销毁和创建，b、网络资源的下载，c、浏览器显示、用户操作，如前进后退操作 e、将renderer进程从内存中得到的Bitmap绘制到界面上
2、GPU进程
浏览器最多一个，用于3d渲染
3、插件进程
每一类插件对应一个进程，仅在引入插件的时候创建
4、浏览器内核（重点）浏览器渲染进程–renderer进程
常驻的五个线程：js引擎线程、GUI渲染线程、事件触发线程、异步HTTP请求线程、计时器线程
**js引擎线程：**用于对js代码的编译和执行（单线程），区分一下，编译器用来进行语法分析和生成js代码的，作用域是负责确认当前执行的代码块对定义的这些标识符的访问权限的
**GUI渲染线程：**解析HTML、CSS，渲染界面，以及当界面需要回流（引发回流树）和重绘时，该线程也会执行（js的dom操作会引发回流、visibility会引发重绘等），尽量避免回流和重绘（避免对render树的操作）
渲染步骤：
1、解析html，构建dom树
2、解析css，构建css树
3、结合dom树和css树，合成render树
4、layout：根据render树，确定各个元素节点的尺寸、位置
5、根据render树，绘制页面像素信息
6、浏览器会将各层的信息发送给GPU，GPU会将各层合成，显示在屏幕上

渲染（服务器端渲染和客户端渲染）
区分：是否完成了HTML文件的拼接（背景：早期的互联网，由于只有简单的界面，页面都由服务器进行拼接，客户端拿到界面之后直接解析展示，而现在的互联网，每个网站都有成千上万个界面，复杂性要求下，后端对html文件的管理难度大，此时ajax兴起，前端拿到json数据之后，再在客户端上进行拼接<document.createElement()…就是客户端渲染>，然后展示在前端界面上，这就是所谓的客户端渲染）
服务器端渲染：
优点：
1.前端耗时少（前端不需要做渲染，直接显示）
2.不用占用客户端资源，尤其是移动端
3.有利于SEO（爬虫），由于后端有完整的html资源，所有有利于爬虫的爬取
4.后端生成html，效率高
缺点：
1.不遵循前后端分离原则
2.占用服务器资源
客户端渲染：
优点：
1.前后端分离
2.体验性好
缺点
1.不利于SEO，由于dom全由js生成，所以没有完整的html结构，爬虫难以爬取
2.客户端响应慢，需要js解析出html结构，再渲染
选择：根据业务场景进行服务器渲染和客户端渲染的选择
同构：前端框架来做服务端渲染

问题：
css的下载和解析会影响dom树的构建吗？
不会阻塞dom树的构建。css的下载是异步的，而css解析构建可以和dom树的构建一起执行，但是render树需要dom树和css树的合成，所以css的下载解析会影响render树构建的进度，从而阻塞渲染
**事件触发线程：**将事件监听放到事件队列的队尾，这些事件可以是鼠标点击、ajax请求成功后的回调函数、计时器计时完成后的回调函数
异步HTTP请求线程： XMLHttpRequest在连接后是通过浏览器重新开一个线程请求，在检测到状态变更后，就会判断是否有回调函数，若有，则事件触发线程将这个回调函数放到事件队列的队尾
计时触发器线程： setTimeout和setInterval所在线程，浏览器计时并非是js引擎去计时的，而是通过计时触发器线程去计时，计时完毕后，添加到事件队列中，等待js引擎空闲时处理
回流： 浏览器页面（dom）结构发生变化
重绘： 浏览器根据dom结构绘制页面样式