CSS知识总结DOM Tree :浏览器将HTML解析成树形的数据结构. CSS Rule Tree :浏览器将CSS解

一.浏览器渲染原理

概念解释:

DOM Tree :浏览器将HTML解析成树形的数据结构.
CSS Rule Tree :浏览器将CSS解析在树形的数据结构.
Render Tree :DOM和CSSOM(CSS Object Model:CSS对象模型)合并后生成Render Tree.
layout :有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS的定义以及他们的从属关系，从而去计算出每个节点的屏幕中的位置.
painting :按照算出来的规则，通过显卡，把内容画到屏幕上.
reflow(回流) :当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，称此为回退的过程，叫reflow.reflow会从< html >这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置。reflow几乎是无法避免的.
repaint(重绘) :改变某个元素的背景色，文字颜色，边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变.

渲染步骤:

1、浏览器遍历获取的HTML文档的文档节点，生成DOM树。当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2、处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。CSS解析可以与DOM解析同时进行，与script的执行互斥（Webkit内核浏览器只有在JS访问CSS时才会发生互斥）。

3、将DOM和CSSOM合并为渲染树(rendering tree) 将会被创建，代表一系列将被渲染的对象。浏览器会先从DOM树的根节点开始遍历每个可见节点，然后对每个可见节点找到适配的CSS样式规则并应用。PS：渲染树生成后，还是没有办法渲染到屏幕上，需要下一步layout处理！

4、渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout (文档流、盒模型、计算大小和位置)。我们常说的脱离文档流，其实就是脱离Render Tree。

5、通过调用渲染器的paint()方法将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting 。渲染树的绘制工作是由浏览器的UI后端组件完成的。

6、Compose合成（根据层叠关系展示画面）。

注：以上步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。

CSS动画的两种做法

1、transition 过渡

transition MDN

作用：补充中间帧。transition抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。

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

transition默认值为：all 0 ease 0;
属性名property:填写需要变化的css属性，如：width,line-height,font-size,color等，用all代表所有属性，分别设置不同属性时用逗号隔开;
时长duration:完成过渡效果需要的时间（2s或者2000ms）;
过渡方式timing-function:过渡方式MDN 完成效果的速度曲线（linear匀速、ease从慢到快再到慢、ease-in慢慢变快、ease-out慢慢变慢、ease-in-out先变快再到慢等等;
延迟timing-delay:动画效果的延迟触发时间（2s或者2000ms）。

↓↓PS：并不是所有属性都可以过渡！！！

display:none无法与transition共用!
元素淡入淡出效果示例(结合visibility和opacity) 参考

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

2、animation 动画

animation MDN

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

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

@keyframes 完整语法
@keyframes MDN
1、from to 示例

@keyframes 帧列表的名称 {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2、百分比示例

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