CSS知识小结

每天一遍HelloWorld
150 阅读4分钟

浏览器渲染页面的过程

1. 处理 HTML 标记并构建 DOM 树

DOM树描述了文档的内容。<html>元素是第一个标签也是文档树的根节点。树反映了不同标记之间的关系和层次结构。嵌套在其他标记中的标记是子节点。DOM节点的数量越多，构建DOM树所需的时间就越长。 DOM树.jpg

2. 处理 CSS 标记并构建 CSSOM 树

CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内: CSSOM树.png

3.将 DOM 与 CSSOM 合并成一个渲染树

DOM/CSSOM树本身并不能直接用于排版和渲染，浏览器还会生成另外一棵树：Render树 Render Tree.png 渲染树只包含了可见内容。头部（通常）不包含任何可见信息，因此不会被包含在渲染树种。如果有元素上有 display: none;，它本身和其后代都不会出现在渲染树中。

Render 树是衔接浏览器排版引擎和渲染引擎之间的桥梁，它是排版引擎的输出，渲染引擎的输入。此时的Render树上，已经包含了网页上所有可见元素的内容和位置信息，排版引擎会根据Render树的内容和结构，准确的计算出元素该在网页上的什么位置。到此，我们已经具备进入布局的一切准备条件

4.根据渲染树来布局，以计算每个节点的几何信息

第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。

布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。

布局最后的输出是一个“盒模型”：将所有相对测量值都转换成屏幕上的绝对像素。

5.将各个节点绘制到屏幕上

绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。浏览器需要非常快地完成这项工作。

绘制可以将布局树中的元素分解为多个层。将内容提升到GPU上的层（而不是CPU上的主线程）可以提高绘制和重新绘制性能。

层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用。

6.合成

当文档的各个部分以不同的层绘制，相互重叠时，必须进行合成，以确保它们以正确的顺序绘制到屏幕上，并正确显示内容。

CSS动画实现

1.transform

使用transfrom实现位移（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）

以上效果可以组合使用：transform: scale(0.5) translate(50%,50%);

但是注意不能分开写成：（分开会使上面的缩放效果消失，只剩位移）

transform: scale(0.5);
transform: translate(50%,50%);

2.transition

transition: 属性名 时长 过渡方式 延迟

transform一般都配合transition使用，实现过渡的动画效果。

  • transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔：transition: margin-right 4s, color 1s;
  • 用all可以代表所有属性:transition: all 2s;
  • 过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end |steps
  • 并不是所有属性都能过渡

3.animation

animation: 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

  • 时长：1s 或 100ms
  • 过渡方式：与transition相同
  • 次数：1、2、3或者infinite
  • 方向：revese | alternate | alternare-reverse
  • 填充模式：none | forwards | background | both
  • 是否暂停：pasued | running

举例如下：

#heart{
  margin: 100px;
  position: relative;
  display: inline-block;
  animation: heart 1.3s infinite alternate;
}

@keyframes heart{
  0%{
    transform: scale(1.0);
  }
  100%{
    transform: scale(1.6);
  }
}

问：使用animation后动画结束后会回到原点，如何使动画停在最后一帧呢？

答：添加一个forwards

#demo.start{
  animation: xxx 1.5s forwards;  /* 写上forwards之后最后一帧动画就不会回到原点 */
}
关键帧@keyframes

通过在动画序列中定义关键帧的样式来控制CSS动画序列中的中间步骤。它有两种写法：

1. from to

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }
  to {
    transform: translateX(100%);
  }
}

from等价于 0%。to 等价于 100%。

2. 百分比形式

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

例子中，top 属性分别出现在关键帧 0%、30% 和 100% 的中，而 left 属性分别出现在关键帧 0%、68%、72% 和 100% 中。

本文参考摘录了：1、渲染页面：浏览器的工作原理 2、渲染树构建、布局及绘制 3、浏览器的渲染过程 4、浏览器的渲染：过程与原理 5、@keyframes

avatar
文章
阅读
粉丝