一、当浏览器的网络线程拿到html文档,会产生一个渲染任务,并将其传递给渲染主线程的消息队列 在事件循环机制下,渲染主线程取出消息队列中的渲染任务,开启渲染流程
1.解析html,完成dom树和css树
css不会阻塞html解析,由预解析器解析,遇到js代码会阻塞html解析(js有可能修改dom结构)
2.style样式计算,让dom里面的每一个样式得到最终样式
3.布局会得到布局树,大部分时候,dom树和布局树并非一一对应,比如display:none就不会出现在布局树里面,伪类元素在dom不存在,但是布局树有
4.布局会进行分层,主线程会使用一套复杂的策略对整个布局树进行分层,分层的好处就是将来在某一个层改变后,仅会对该层进行处理,从而提升效率,滚动条,z-index,transform,opacity等样式会影响分层的结果
5.绘制,分层之后会单独产生指令集,用于描述这一层的内容如何画出来
6.分块是交给多个线程同时进行
7.光栅化是将每个块变成位图,优先处理靠近视口的块(gpu进程完成)
8.画,把quad(指引信息)交给gpu进程
重排reflow
会重新计算layout树,修改宽高,margin等,
重绘repaint
重新绘制,修改颜色等
重排一定会导致重绘