首页  >  问答  >  正文

javascript - css动画的几点问题?

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

有几点疑惑:

1.浏览器机制里,刷新这个操作 肯定是会 reflow(回流)和repaint(重绘)的?

2.如果页面包含了css动画,诸如`p {

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

那么repaint是肯定的,页面有局部reflow的吗?

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

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

为情所困为情所困2735 天前647

全部回复(1)我来回复

  • 我想大声告诉你

    我想大声告诉你2017-05-18 10:51:05

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

    回复
    0
  • 取消回复