浏览器渲染原理

浏览器渲染过程：

步骤：

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

三棵树

三种不同的渲染方式

transform解析

四个常用功能

• 位移translate
• 缩放scale
• 旋转rotate
• 倾斜skew

注意点：

• 一般都需要配合transition过渡
• inline元素不支持transform,需要先变成Block
• 可做绝对定位的元素居中，如left:50%; top:50%; transform:translate(-50%,-50%);
• 组合使用：transform:scale(0.5) translate(-100%,-100%)；
• transform:none；取消所有

transition作用：补充中间帧

语法

transition:属性名 时长 过渡方式 延迟,如transition:left 200ms linear 可以用逗号分隔两个不同属性，如transition:left 200ms,top 400ms 可以用all代表所有属性,如transition:all 200m 过渡方式有ease|ease in|ease-out|ease-in-out|linear|step-start|step-end|steps(4, end)

并不是所有属性都能过渡

• display:none=>block没法过渡
• 一般改成visibility:hidden=>visible

animation解析

语法

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

• 时长：1s或者1000ms
• 过渡方式：跟transition 取值一样，如linear
• 次数：3或者infinite
• 方向:reverse|alternate|alternate-reverse
• 填充模式:none|forwards|backwards|both
• 是否暂停：paused |running
• 以上所有属性都有对应的单独属性 备注：让动画停在最后一帧，加个forwards

@keyframes的两种语法

• 一种语法from to
• 另一种百分数