css动画的几点问题?

看了一篇文章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?

https://img1.mukewang.com/5c136a400001951411520632.jpg

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

ITMISS
浏览 537回答 1
1回答

12345678_0001

首先,我是个菜鸟,看了你链接的文章,以及你的问题,我发布下自己的见解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(重绘)??
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript