浏览器原理
浏览器是如何渲染页面的？ 当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
整个渲染流程的阶段分为，分别是：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出，上个阶段的输出会成为下个阶段的输入，这样，整个渲染流程就形成了一套组织严密的生产流水线。
HTML解析
解析过程中遇到CSS解析CSS，遇到JS执行JS。为了提高解析效率，浏览器开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和外部的JS文件。
如果主线程解析遇到link位置，此时外部的CSS文件还没下载解析好，主线程不会等，继续解析后续的HTML。这是因为下载和解析CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML解析的根本原因。
如果主线程解析遇到script位置，就会停止解析HTML，转而等待JS文件下载好，并将全局代码解析执行完成后，才能继续解析HTML。这是因为JS代码的执行过程可能会修改当前的DOM树，所以DOM树的生成必须暂停。这就是JS会阻塞HTML解析的根本原因。
第一步完成后，会得到DOM树和CSSOM树，浏览器的默认样式、内部样式、外部样式、行内样式都会包含在CSSOM树中。
渲染的下一步是样式计算
主线程会遍历得到的DOM树，依次为树中的每个节点计算出他最终的样式，称为computed style。 在这过程中，很多预设值会变成绝对值，比如red变成rgb（255，0，0）；相对单位会变成绝对单位，比如em会变成px 这步完成后，会得到一颗带有样式的DOM树。
布局完后会得到布局树
布局阶段，会依次遍历DOM树的每个节点，计算每个节点的几何信息。例如节点的宽度，相对包含块的位置。 大部分布局树和DOM树不是一一对应的。 比如display：none的节点没有几何信息，不会生成布局树，为元素选择器，虽然DOM树中不存在这些为元素节点，但他们拥有几何信息，所以会生成布局树。还有匿名行盒，匿名块盒都会导致DOM树和布局树无法一一对应。
分层
主线程会使用一套复杂的策略 分层的好处在于，将来某一层改变后，仅会对该层进行后续处理，从而提升效率。 滚动条，堆叠上下文，transform，opcity等样式都会有或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。
绘制
主线程会为每个单独产生绘制指令集，用于描述这一层的内容该如何画出来。
分块
完成绘制后主线程将每个图层的绘制信息提交给合成线程，剩余的工作将由合成线程完成。
合成线程首先对每个图层进行分块，将其划分为更多的小区域。
他会从线程池中拿取多个线程来完成分块工作。
光栅化
合成线程会将块信息交给GPU进程，以极高的速度完成光栅化，GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。结果是一块一块的位图。
画
合成线程计算出每个位图在屏幕上的位置，交给GPU进行最终呈现。 合成线程拿到每个层，每个块的位图后，生成一个个指引信息，指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。变形发生在合成线程，与渲染主线程无关，这就是transform效率搞得本质原因。 合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。
事件循环
单线程是异步的产生原因 事件循环是异步的实现方式 1． 进程：程序运行需要他有专属的内存空间，可以把这块内存空间简单的理解为进程，每一个程序启动的时候至少有一个进程，进程之间是相互独立的，即使要通信，也要相互同意。 2． 线程：有了进程之后，可以运行程序的代码了。运行代码的人称之为线程，一个进程至少有一个线程，所以进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。 如果程序需要同时执行多块代码，主线程就会启动更多线程来执行代码，所以一个进程中可以包括多个线程。 3． 浏览器有哪些进程和线程 浏览器是一个多进程多线程的应用程序 为了避免相互影响，为了减少连环崩溃的几率，启动浏览器后，他会自动启动多个线程。 （浏览器进程，网络进程，渲染进程） 浏览器进程：用户交互，子进程管理，界面显示 网络进程：加载网络资源，内部会启动多个线程处理不同的网络任务 渲染进程：开启渲染主线程，主线程负责html，css,js代码 默认情况下每个标签页开启一个新的渲染进程，保证不同标签页之间不影响。 4.渲染进程如何工作？ 解析html 解析css 计算样式 布局 处理图层 每秒把画面画60次 执行全局JS代码 执行事件处理函数 执行计算器的回调函数
为什么渲染线程不适用于多个线程来处理工作？
事件循环：最开始，渲染主线程会进入一个无限循环（循环拿任务） 每一次循环会检查消息队列中是否有任务存在，有就拿第一个任务执行，执行完一个进入下一次循环，没有，就休眠。 其他所有线程可以随时向消息队列加任务，新任务加到队列末尾。添加新任务时，如果主线程是休眠状态，则会将其唤醒继续循环拿取任务。 异步？ 计时完成后需要执行的任务 seTimeout setInterval 网络通信完成之后需要执行的任务 XHR Fetch 用户操作后需要执行的任务 addEventListene 如果让渲染主线程等待任务的时机达到，就会导致主线程长期处于阻塞状态，从而导致浏览器卡死。
任务先进先出，但是消息队列有优先级 W3C解释 每个任务都有一个任务类型，同一类型的车任务必须在一个队列，不同类型的任务可以分属于不同的队列。在每次事件循环中，浏览器根据实际情况从不同的队列中取出任务执行 浏览器必须准备好一个微队列，微队列中的任务要比其他所有任务先执行。 渲染主线程 微队列，优先级最高（promise mutationObserver） Promise立即把一个函数添加到微队列 交互队列，优先级高 延时队列，优先级中
