Kasan Blog
浏览器渲染原理
浏览器渲染的过程主要包括以下五步：
-
浏览器将获取的HTML文档解析成DOM树。
-
处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
- 将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
-
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
- 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。
需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSOM。
CSS 动画的两种做法（transition 和 animation）
以上两种方法都是给已定位置的元素添加中间帧，来达到动画的效果。
比如我们要做一个100px的正方形，从左往右运动的动画
transition的做法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.a{
border:1px solid red;
height:100px;
width:100px;
margin:50px;
transition:1s;
}
.a:hover{
transform:translateX(300px);
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
通过代码可以看到，只需要设定前后的关键帧，通过transition的时长属性，控制动画运动时长，浏览器就会把中间的动画帧数自动补全。
transition的语法
- transition:时长过渡式延迟
- transition:left200ms linear
- 可以用逗号分隔两个不同属性
- transition:left 200mS，top 400ms
- 可以用all代表所有属性
- transition:all 200ms
-
过渡方式有：linear ease ease-in丨ease-out ease- in-outcubic-bezier丨Step．Start step-end丨steps，具体含义靠数学知识
animation的做法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#a{
border:1px solid red;
height:100px;
width:100px;
margin:50px;
animation: xxx 1s forwards;
}
@keyframes xxx{
0%{
transform:none;
}
100%{
transform:translateX(300px);
}
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
animation可以把一个动画通过百分数分为任意部分进行分段式的动画变化，只需要设定好关键帧，就可以很轻松完成动画的效果。
animation的语法
- animation的缩写语法
-
animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名 - 时长：1s或者1000ms
- 过渡方式：跟transition取值一样，如linear
- 次数：3或者2·4或者infinite（无限次数）
-
方向：reverse alternate alternate-reverse -
填充模式：none forwards丨backwards both - 是否暂停：paused running
- 以上所有属性都有对应的单独属性
方向：
- reverse：动画反方向运行
- alternate：交替运动，适合做载入动画
- alternate-reverse：先反方向过来，再做交替运动（没用）
次数：可以直接写数字表示次数 写 infinite 即无限次数
填充模式： 重点记住forwards就可以了，
- forwards就是指动画停在最后一帧就不动了
- backwards 没有用，解释就是把最后一帧复制回开始的第一帧，跟默认效果一样
- both：效果和forwards一样，想知道不同就百度
暂停模式： paused 暂停 running 开始
暂停动画 开始动画
可以配合js和按钮使用 暂停 和 开始的动画控制
时长和延迟 是 先时长 再延迟 ，浏览器会自动识别