网络线程获取数据后会检查站点，若为恶意站点则会阻止访问，通过安全校验后ui线程创建渲染器进程来渲染页面，渲染器进程将html解析，构造dom,css或图片资源不会影响html解析，因为不影响dom生成。解析时遇到script标签，先运行js。解析完html后生成dom tree，之后解析css得到样式，若没有提供自定义css,则解析浏览器默认样式。之后主线程进行layout(布局)，生成一个layout tree，上面有相关节点大小和位置，但这个tree和dom tree并不是一一对应，设置display none的节点不会出现在layout tree上。z-index会影响节点绘制的层级关系，所以不能按dom结构绘制页面，这会导致错误渲染。应该根据layout tree来绘制。之后就是将像素点渲染出来，这也被称为栅格化。当改变dom节点位置或大小，会导致layout和绘制等流程重新计算，这就是重排。只改变节点颜色等属性时,只会重新进行绘制，这就叫重绘。重排和重绘都会占用主线程，布局绘制执行is都是在主线程执行的，这会导致动画卡顿。优化方法可以使用css动画transform opacity，这不占用主线程，只会在合成器线程与栅格线程中进行。
展开
avatar
avatar
avatar
赞过
3
相关推荐