浏览器渲染及动画

浏览器渲染原理:

  1. 浏览器在渲染页面之前会先构建DOM树和CSSDOM树。
  2. HTML会转换成文档对象模型DOMCSS会转换成CSS对象模型CSSDOM。它们两个是互相独立的数据结构。
  3. DOMCSSDOM组合在一起形成渲染树。
    1. 遍历DOM树节点
    2. 对每个DOM节点用合适的CSSDOM规则去匹配
    3. 计算出最终布局,样式
  4. 最后将它们合并到一起,渲染在页面中

浏览器渲染及动画_第1张图片

样式更新

浏览器将页面渲染好之后,后面是如何动态更新样式的:

  • 通过javascript动态更新
  • 根据选择器匹配对应的DOM,计算出style是布局还是样式,如下图所示:
    1. 如果是更改布局,是会依次触发
    2. 如果布局没有改动,只是更改了颜色之类的,layout将不会触发
    3. 如何既不改布局,也不改样式啥的,layoutpaint都不会触发,只会触发最后的composite部分,比如动画

浏览器渲染及动画_第2张图片

动画

CSS中使用动画,有两种属性可以实现,一种是transitionanimation,它俩的区别从名字中也可以看出来:

  • transition是过渡的意思,它只有开始帧和结束帧,中间的过程浏览器用你指定的属性自动完成,你无法自己控制
  • animation是动画的意思,它包含多个关键帧,通过控制帧,可以做出复杂的动画

参考文章:
Render-tree Construction, Layout, and Paint
Stick to Compositor-Only Properties and Manage Layer Count

你可能感兴趣的:(前端学习笔记,前端,css,浏览器)