渲染 render

vue react render

浏览器渲染指的是html字符串 -渲染 --> 像素信息

当输入网址按下回车键，主要发生两部分 网络：拿HTML 渲染：将拿到的HTML进行渲染

网络进程：网络线程->消息队列->渲染进程：渲染主线程->HTML字符串->解析HTML->样式计算->布局->分层->绘制->分块->光栅化->画->像素信息

解析HTML - Parse HTML HTML字符串会产生两棵树（DOM树，CSSOM树）

JS操作DOM树（DOM树本质是Cpp形成的）

Document Object Model

CSS Object Model

<style>内部样式表
<link ...>外部样式表
<div style="">内联样式表
浏览器默认样式表

有多少个样式表，就有多少个分支 每个规则会生成个规则对象 规则对象有样式选择器

document.styleSheets[0].addRule('div','bode:2px solid #f40 !important')

HTML解析过程中遇到CSS 为了提高解析效率，浏览器会启动一个预解析器率先下载和解析CSS

渲染主线程遇到JS是必须暂停一切行为，等待下载执行完后才能继续 预解析线程可以分担一点下载JS的任务

样式计算 - Recalculate Style

CSS属性值的计算过程 层叠 继承

视觉格式化模型 盒模型 包含块

最终样式-计算后的样式 Computed Style 所以的CSS属性必须有值

布局 - Layout DOM树和Layout树不一定是一一对应的 布局树有几何信息

内容必须在行盒中

行盒和块盒不能相邻

分层 - Layer 堆叠上下文有关的属性

z-index、opacity、transform

will-change属性，可能变化，让元素单独形成一个层

绘制 - Paint 这里的绘制，是为每一层生成如何绘制的指令

canvas

绘制主线程的工作到此为止，剩余步骤交给其他线程完成

分块 - Tiling 分块会将每一层分为多个小的区域

合成线程:启动多个线程完成分块

从线程池拿取出多个线程完成工作

光栅化 光栅化是将每个块变成位图

优先处理靠近视口的块

此过程会用到GPU加速

画 - Draw 合成线程计算出每个位图在屏幕上的位置，交给GPU进行最终呈现 渲染进程（沙盒 与操作系统的硬件隔离）：渲染主线程，合成线程 quad（指引信息）交给GPU线程