一.浏览器渲染原理

1、浏览器的渲染过程

步骤：

第一步：根据HTML构建HTML树（DOM）

第二步：根据css构建css树(CSSDOM)

第三步：将两棵树合并成一颗渲染树

第四步：Layout（文档流、盒模型、计算大小和位置）
第五步：Pain绘制（把边框颜色，文字颜色、阴影画出来）
第五步：Compose合成（根据层叠关系展示画面）

2、如何更新样式

**一般我们用js来更新样式 **

 div.style. background:'red' ;
 div.style.display='none'
 div.classList.add('red')
 div.remove()直接删除节点

这些方法有什么不同？

有三种不同的渲染方式

这个网站已经把所有属性全试过了属性测试

3、CSS 动画的两种做法（transition 和 animation）

transition

四个常用的功能

位移 translate
- translateX 在2D平面中水平方向上重新定位元素
- translateY 在2D平面中垂直方向上重新定位元素
- translateZ 沿着z轴在三维空间中重新定位元素
- translate3d 在三维空间中重新定位一个元素

可用于绝对定位元素的居中

 position: absolute；
 left: 50%;
 top: 50%;

缩放scale

旋转rotate

倾斜skew

2.1、transition过渡

作用补充中间帧

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

语法：

transition: all 1s ease-in-out 3s;

过渡方式有 linear|ease|ease-in|ease-out|ease-in-out; *

注意并不是所有属性都能过渡 display：none=>block没法过渡一般改成visiblity:hidden=>visible

扩展小知识：

display和visibility的区别： 1、display:none是切底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度0的效果，在文档中占位，浏览器会解析该元素. 2、使用visibility：hidden比display:none性能上要好；display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时是回流。所以页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

2.2使用animation

@keyframes完整语法 两种写法

缩写语法

animation：时长|过渡方式|延迟|次数|方向|填充次数|是否暂停|动画名
时长：1s或者1000ms
过渡方式：跟transition取值一样，如linear
方向：reverse|alternate|alternate-reverse
填充模式：forwards|backwards|both
是否暂停：paused|running
以上所有的属性

CSS 知识总结