浏览器渲染原理

• 根据HTML构建HTML（DOM）
• 根据CSS构建CSS树（CSSOM）
• 将两棵树合并成一颗渲染树（render tree）
• Layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制（把边框颜色、文字颜色、阴影等画出来）
• Composite合成（根据层叠关系展示画面）

如何更新样式

一般用JS更新样式

• 比如div.style.background='red'
• div.style.display='none'
• div.classList.add('xxx')
• div.remove()

有什么不同？

第一种，流程全走

• div.remove()会触发当前元素消失，根据文档流其它元素将再次layout,paint,composite

第二种，跳过layout

• 改变背景颜色，直接repaint和composite，不需要改变布局

第三种，跳过layout和paint，直接composite

• 改变transform，只需要composite

浏览 csstriggers.com/ 可查阅所有属性的渲染原理

---

transform和animation的使用

transform

四个常用功能

• 位移 translate
• 缩放 scale
• 旋转 rotate
• 倾斜 skew
• 一般都需要配合transition过渡，inline元素不支持transform，要先变成block

translate 移动

• translateX(长度或者百分比)
• translateY(长度或者百分比)
• translate(长度或者百分比，长度或者百分比[此处可省略]),百分比为相对自身的长度
• 一般配合position:absolute;left:50%;top:50%;translate(-50%,-50%)做绝对元素的居中

scale 缩放

• scaleX(数字)
• scaleY(数字)
• scale(数字，数字[]可省略)
• 用的比较少，容易出现模糊

rotate 顺时针旋转

• rotate(90deg) 与写rotateZ效果一样

• rotateX(90deg)

• rotateY(90deg)

• 一般用于360度制作loading

skew 倾斜

• skew(10deg,10deg)
• skewX(10deg)
• skewY(10deg)
• 可以结合多种组合，比如放大旋转移动

transition 过渡 补充中间帧

• 语法为：transition:属性名 时长 过渡方式 延迟transition:left 200ms linear 100ms;
• 可以用逗号分隔两个不同属性transition:left 200ms,right 200mms;
• 可以用all代表所有属性transition:all 1s;
• 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps 具体效果直接替换代码查看，并不是所有属性都能过渡
• display:none=>block没法过渡
• 一般改为visibility:hidden=>visible
• display和visible的区别 display改变的是文档流，visible改变的是视图效果，仍存在文档流中
• background和opacity可以过渡
• 过渡必须要有起始
• 中间有节点怎么处理 使用两次transform .a===>.b===>.c（包含.b）,如何知道到达中间点，用setTimeout或者监听transitioned事件

animation 添加关键帧 添加动画

@keyframs 完整语法

@keyframs xxx{
    from{
        transform:scale(1.0)
    }
    to{
        transform:scale(1.2)
    }
}
/*或者下面的百分比写法*/
@keyframs yyy{
    0%{
        transform:scale(1.0)
    }
    100%{
        transform:scale(1.2)
    }
}

animation

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

• 时长 1s或者100ms
• 过渡方式：与transition取值一样，如linear
• 次数：3或者infinite
• 方向：reverse|alternate|alternate-reverse
• 填充模式:none|forwards|backwards|both
• 是否暂停：pasued|running 单独属性为animationPlayState
• 以上所有属性都有单独的属性

通过两个案例来体验下效果，都能实现红心跳动效果,代码复制粘贴到编辑器即可运行

        /*transform的做法*/
        .center{
            height: 200px;
            width: 200px;
            transform:rotate(-45deg);
            background-color: red;
        }

        .leftRoll{
            position:absolute;
            height: 200px;
            width: 200px;
            bottom:100%;
            left: -100%;
            transform:rotate(45deg) translateX(150px);
            background-color: red;
            border-radius: 50% 0 0 50% ;
        }

        .rightRoll{
            height: 200px;
            width: 200px;
            position:absolute;
            bottom:100%;
            right: -100%;
            transform:rotate(45deg) translateY(150px);
            background-color: red;
            border-radius:50% 50% 0 0 ;
        }
        
        /*animation的做法*/
        .heartWrap:hover{
            transform:scale(1.2)
        }
        
        .animation{
            position:relative;
            display: inline-block;
            margin: 300px;
            transition:all 1s ease-in-out;
            animation:keepaliveHeart .5s linear infinite alternate ;
        }

        @keyframes keepaliveHeart {
            0%{
                transform:scale(1.0)
            }
            100%{
                transform:scale(1.2)
            }
        }
        
        <!--transition案例的html-->
        <div class="heartWrap">
            <div class="leftRoll"></div>
            <div class="rightRoll"></div>
            <div class="center"></div>
        </div>
        
        <!--animation案例的html-->
        <div class="animation">
            <div class="leftRoll"></div>
            <div class="rightRoll"></div>
            <div class="center"></div>
        </div>