css动画

例子 将div左右移动

原理

每过段时间(用setInterval做到)

将div移动一小段距离

直到移动到目标点

注意性能

绿色表示重新绘制(repaint)了

css渲染过程依次包含布局，绘制，合成

其中布局和绘制有可能被省略

第2种方式

前端高手不用left做动画，用transform(变形)，性能会好很多

原理

transform:translateX(0=>300px)

直接修改会被合成，需要等一会修改

transition过渡属性可以自动脑补中间帧

注意性能

并没有repaint重新绘制

比改left性能好

使用transform让浏览器渲染次数变少了，性能好

浏览器渲染原理

查看浏览器渲染

开发者工具，选中任意一个tab,按esc键,勾选Paint flashing。

刷新页面，绿色出现的次数，就是浏览器渲染的次数

浏览器渲染过程

根据HTML构建HTML树(DOM)

根据CSS构建CSS树(CSSOM)

将两棵树合并成一颗渲染树

Layout布局(文档流，盒模型，计算大小和位置)

Paint绘制(把边框颜色，文字颜色，阴影等画出来)

Compose合成(根据层叠关系展示画面)

如何更新样式

一般用JS来更新样式

比如div.style.background=‘red’
比如div.style.display=‘none’
比如div.classList.add(‘red’)
加类比加样式更好！高手都是加类更快，新手才加style。工作中也是直接加类

比如div.remove()直接删掉节点

这些方法有什么不同吗？

用js更新样式有3种不同的渲染更新方式

第一种，全走