• home > webfront > browser > webkit >

    chrome对页面重绘和回流以及优化进行优化

    Author:[email protected] Date:

    回流与重绘,当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至

    页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。



    回流与重绘

    1. 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

    2. 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

    注意:回流必将引起重绘,而重绘不一定会引起回流。

    回流何时发生:

    当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流:

    1. 页面渲染初始化;

    2. 调整窗口大小(Resizing the window),浏览器窗口尺寸改变——resize事件发生时

    3. 增加或者移除样式表(Adding or removing a stylesheet)

    4. 元素位置改变、元素尺寸改变——width/height/padding/border/margin

    5. 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

    6. 改变字体(Changing the font)

    7. 激活 CSS 伪类,比如 :hover (IE 中为兄弟结点伪类的激活)(Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling))

    8. 操作 class 属性(Manipulating the class attribute)

    9. 脚本操作 DOM(A script manipulating the DOM),添加或者删除可见的DOM元素;

    10. 计算 offsetWidth 和 offsetHeight 属性(Calculating offsetWidth and offsetHeight)

    11. 设置 style 属性的值 (Setting a property of the style attribute)

    这么多,分类整理记忆下:

    js请求以下style信息时,触发回流(浏览器会立刻清空队列:)

    • clientWidth、clientHeight、clientTop、clientLeft

    • offsetWidth、offsetHeight、offsetTop、offsetLeft

    • scrollWidth、scrollHeight、scrollTop、scrollLeft

    • width、height

    • getComputedStyle()

    • getBoundingClientRect()

    css中如下属性,触发回流

    • width/height/padding/border/margin

    • font/line-height/font-weight/

    • postion/display/float/clear/

    js操作DOM,修改class属性,修改样式表,修改文档内容,修改元素计算样式

    让我们看看下面的代码是如何影响回流和重绘的:

    ar s = document.body.style;
    s.padding = "2px"; // 回流+重绘
    s.border = "1px solid red"; // 再一次 回流+重绘
    s.color = "blue"; // 再一次重绘
    s.backgroundColor = "#ccc"; // 再一次 重绘
    s.fontSize = "14px"; // 再一次 回流+重绘
    // 添加node,再一次 回流+重绘
    document.body.appendChild(document.createTextNode('abc!'));

    然而这些都是意淫:那么

    怎么监控重绘回流

    chorme 按下:f12,然后按下 esc……

    blob.png

    但是,我按了没有 readering

    那是你没有勾选啊,console 旁边有三点是不是,点击,然后勾选,rendering……

    以上5个选项的意思如下:

    1. Show paint rectangles 显示绘制矩形

    2. Show composited layer borders 显示层的组合边界(注:蓝色的栅格表示的是分块)

    3. Show FPS meter 显示FPS帧频

    4. Enable continuous page repainting 开启持续绘制模式 并 检测页面绘制时间

    5. Show potential scroll bottlenecks 显示潜在的滚动瓶颈。


    优化重绘回流

    CSS


    • 避免使用table布局。

    • 尽可能在DOM树的最末端改变class。

    • 避免设置多层内联样式。

    • 将动画效果应用到position属性为absolute或fixed的元素上。

    • 避免使用CSS表达式(例如:calc())。


    JavaScript


    • 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。

    • 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。

    • 也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

    • 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。

    • 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。基本原则就是,把动画元素用position:absolute踢出文档流,这样R&R就限制在了absolute元素的子节点。告诉浏览器,我这块结构跟其他的单独渲染,不要搅和全页面了。


    参看文章:

    回流与重绘:CSS性能让JavaScript变慢?





    转载本站文章《chrome对页面重绘和回流以及优化进行优化》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/browser/webkit/2016_0506_7820.html