• 回流(reflow)与重绘(repaint)


    “reflow和repaint是减缓JavaScript的三大主要原因之一”......

    回流(reflow)这个名词指的是网路浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。

    假如我使用JavaScript砍掉一个节点,这棵树为了不脱节,肯定要重新梳理一遍,将砍掉的那个断点重新结合起来又形成一颗完整的树,而这个结合梳理过程就是这里的reflow,所谓回流,就是由于某些原因(如修改),要将元素回过头来重新“流”一遍。

    导致回流的原因:

    1、调整窗口大小

    2、改变字体

    3、增加或者移除样式表

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

    5、激活CSS伪类,比如:hover(IE中为兄弟结点伪类的激活)

    6、操作class属性

    7、脚本操作DOM

    8、计算offsetWidth和offsetHeight属性

    9、设置style属性的值

    以下是一些简单的指导方针可以帮助你页面上的回流(reflow)减到最小:
    1、减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。如果想设定元素的样式,通过改变元素的class名(尽可能在DOM树的最末端)
    2、 精简css,去除没有用处的css
    3、 如果你想让复杂的表现发生改变,例如动画效果,那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
    4、 避免不必要的复杂的css选择符,尤其是使用子选择器,或消耗更多的CPU去做选择器匹配。5、避免设置多项内联样式

    6、避免使用table布局

    7、避免使用CSS的javascript表达式(仅IE浏览器)

    参考链接:《让网络更快一些——最小化浏览器中的回流》http://www.zhangxinxu.com/wordpress/?p=311

  • 相关阅读:
    前端chrome浏览器调试总结
    this指南——绑定了谁?
    轮播图终极版
    一个后台项目的总结
    h5 websocket 断开重新连接
    ios手机键盘拉起之后页面不会回退的问题
    promise 的串行执行
    js中对小数的计算
    对问卷项目的优化
    禁止eslint对指定代码检测
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4229228.html
Copyright © 2020-2023  润新知