美文网首页
减少回流(reflow)

减少回流(reflow)

作者: lmmy123 | 来源:发表于2017-10-24 14:38 被阅读12次

    回流(重排)——浏览器重新渲染部分或全部文档而重新计算文档中元素的位置

    指导方针:

    1.减少不必要的DOM深度

    2.精简css,去除没有用处的css

    3.涉及到动画,将元素absolute

    4.避免不必要的复杂的css选择符,尤其是使用子选择器

    什么会导致回流?

    1.调整窗口大小

    2.改变字体

    3.增加或者移除样式

    4.内容变化,比如用户在input框中输入文字

    5.激活css伪类,比如,:hover

    6.操作class属性

    7.脚本操作DOM

    8.计算offsetWidth和offsetHeight属性

    9.设置sytle属性的值


    重绘(repaint)——重新渲染

    结论:

    1,回流 必定引起 重绘

    2. 重绘可能会引起回流


    相关文章

      网友评论

          本文标题:减少回流(reflow)

          本文链接:https://www.haomeiwen.com/subject/avdtpxtx.html