CSS学习总结

2021-07-12  本文已影响0人  AuraAura

浏览器的渲染机制

  1. 解析HTML字符串构建DOM树
  2. 解析CSS样式,产生CSSOM树
  3. 执行js脚本文件,js加载完成,通过DOM API 和 CSSOM API 来操作DOM树和CSSOM树
  4. 浏览器根据DOM树和CSSOM树构建渲染树(rendering tree),渲染树包括显示的节点和节点显示的样式信息,如果某个节点设置了样式 display: none,那么就不会在渲染树中显示,如果设置visibility:hidden渲染树中存在该节点,但不显示。
  5. 根据渲染树对每一个节点在页面上进行布局(文档流、盒模型、计算元素的大小和位置)。(reflow)
  6. 遍历渲染树,为每一个节点绘制(paint)对应的样式,比如边框的颜色、文字的颜色、阴影等(repaint)
    7.根据层叠关系显示到屏幕。

reflow和repaint

在第5步和第6步中,各个节点自身的盒模型,浏览器根据样式计算该节点元素该放置的位置,这个过程为reflow;当各个节点元素的位置、大小以及其他属性,例如颜色、字体大小等确定之后,浏览器将各个元素根据这些特性绘制页面,这个过程叫repaint。

CSS动画 (transition 和 animation)

transition 只能执行一次(必须有起始状态,比如从hover 到非hover)
animation 可多个状态 循环重复多次执行
transition: 属性名 时长 过渡方式 延迟

上一篇 下一篇

猜你喜欢

热点阅读