浏览器渲染原理和性能优化的理解

什么叫渲染？
render==把html字符串转换为像素信息即为渲染

function render(html){
return pixels;
}

渲染发生在什么时候？
网络：获取字符串（html…） 网络进程—网络线程----获取
渲染：转为像素点

消息队列----渲染主线程----渲染任务

过程：HTML----解析—样式计算----布局----绘制----分块----光栅化–画-------像素信息

1.解析html（parse html）------两个树-----【DOM树，CSSOM树】

2.计算样式 computed style（css不会阻塞html，js会阻塞html，遇到解析js，先暂停解析html，解析js，因此阻塞了html解析）

3.布局（根据最终计算出来的样式进行布局—行盒 块盒）-----得到一个布局树

4.分层（提升效率）will-change：transform;

5.绘制（收到指令绘制，绘制什么样的点等等。类似canvas）

（渲染主线程到此结束）

6.分块（Tiling）将每一层分成不同的小区域（优先绘画视口显示的小区域-----由合成线程完成）

7.光栅化（将每个块变成位图）（优先视口的块光栅化，由GPU进程（多个线程）完成(比cpu功能更多)）

8.画（quad指引信息交给GPU进程-----由合成线程完成，根据位图形成像素点）

渲染进程（沙河安全，在浏览器中使用GPU，无法使用硬件）----渲染主线程----合成线程

transform不在主线程上 所以效率会很高

什么是reflow（重新排版）？

修改了dom，cssom几何信息的时候，需要重新计算样式的过程称为refolw。获取到几何信息后，立即执行reflow，解决性能问题。

什么是repaint？

根据分层信息得到重绘指令。如果分层变化，就会重新发送重绘的指令，进行重绘。

为什么transform效率高？

因为transform只影响最后一步draw，所以效率高，不会产生重新计算，重新绘画等过程。（滚动条也是）