1、渲染原理
根据HTMl构建HTML树（DOM）
根据CSS构建CSS树（CSSDOM）
将HTML和CSS两棵树合并为一颗渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画下）
Compose合成（根据层叠关系展示画面）
2、CSS性能优化
2.1、 了解：JS三种更新方式
JS/CSS>样式Style>布局Layout>绘制paint>合成Composite。div.remove(),其他元素relayout
JS>样式Style> 绘制paint>合成Composite。改变颜色，直接repaint+composite
JS>样式Style >合成Composite。改变transform，只需composite
2.2、经验：
前端高手不用left做动画，用transform变形
位移：translate
缩放：scale
旋转：rotate
倾斜：skew
transform:translateX(0->300px)会直接修改后等一会被合成
原理
性能：没有重新绘制，所以比left性能好
常用：
inline元素不支持translate，需要先变成block
2.3、 性能优化正题
无技术含量，Google写的文章
JS优化：requestAnimationFrame代替setTimeout或setInterval
CSS优化：使用will-change 或 translate
3、CSS 动画的两种做法（transition 和 animation）
3.1、 transition过渡
语法 transition:属性名 时长 过渡方式 延迟
例子 transition: margin-right 2s ease-in-out .5s;
3.2、 animation属性
语法：animation：动画名 | 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停；
例子：animation: .5s linear 1s infinite alternate slidein;
3.3、 实战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style>
*{
box-sizing:border-box;
}
#heart{
display: inline-block;
margin:100px;
position: relative;
animation: .6s heart infinite alternate-reverse;
}
@keyframes heart {
0%{
transform: scale(1);
}
100%{
transform: scale(1.2);
}
}
#heart.end{
display:none;
}
#heart.start{
display: inline-block;
}
#heart:hover{
transform: scale(1.2);
}
#heart>.left{
background: red;
width:50px;
height:50px;
position: absolute;
bottom:50px;
left:-50px;
border-radius:50% 0 0 50%;
transform:rotate(45deg) translateX(31px);
}
#heart>.right{
background: red;
width:50px;
height:50px;
position: absolute;
bottom:50px;
right:-50px;
border-radius:0 50% 50% 0;
transform:rotate(-45deg) translateX(-31px);
}
#heart>.bottom{
width:50px;
height:50px;
background: red;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
发表评论 取消回复