css动画的几点问题？

Question

看了一篇文章http://blog.csdn.net/ClaireKe... 关于reflow和repaint的。

有几点疑惑：

1.浏览器机制里，刷新这个操作 肯定是会 reflow（回流）和repaint（重绘）的？

2.如果页面包含了css动画，诸如`div {

transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果}`

那么repaint是肯定的，页面有局部reflow的吗？

3.resize()会触发repaint把。。dom大小和位置都发生变化了。实际上我在拉窄屏幕的时候并没有reflow？

4.fixed的元素在页面上，实际页面被拉动，发生滚动的时候是否reflow？

Answer 1

首先，我是个菜鸟，看了你链接的文章，以及你的问题，我发布下自己的见解O(∩_∩)O哈哈~ 如有错，见谅哈
1.刷新这个操作，肯定是会 reflow（回流）和repaint（重绘）的，我认为是的，通过f12开发者工具Network观察，刷新会从新请求页面加载的css和js还有php的请求，其次内容较多的页面会发现刷新的时候，页面可能会有短暂空白期，这都是在reflow（回流）和repaint（重绘。
2.css 动画 如果是像鼠标hover时，页面中某div宽度从50px变成500px，这样就会影响div旁边的元素，这个时候会局部reflow，
3.如果是一个没有给固定宽度的导航栏，当resize()时，屏幕变窄，导航栏个别项目可能会被挤到下一行去，可能会发生reflow。
4.想不到 哈哈
我不明白的是，为什么页面滚动的时候会reflow（回流）或repaint（重绘）？？

Answer 2

页面滚动的时候：

不是所有的滚动都会引起重绘和回流，普通网页一进来就加载完了，也没什么动画的页面就不会重绘和回流。

Answer 3

我就不介绍重排和重绘了，重绘事实上很难避免，你只要更新了内容事实上就会触发重绘，但重排是必须要避免的。

如果没记错的话，使元素脱离文档流可以有效减少重排，所以fixed不会导致其他元素重排。

然后css的话尽量使用css3 transform 来操作，这样不会引起重排。
主要还是性能问题，需要看项目的忍耐度是多少。