zoukankan      html  css  js  c++  java
  • 回流(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

  • 相关阅读:
    微人事项目-mybatis-持久层
    通过外键连接多个表
    springioc
    Redis 消息中间件 ServiceStack.Redis 轻量级
    深度数据对接 链接服务器 数据传输
    sqlserver 抓取所有执行语句 SQL语句分析 死锁 抓取
    sqlserver 索引优化 CPU占用过高 执行分析 服务器检查
    sql server 远程备份 bak 删除
    冒泡排序
    多线程 异步 beginInvoke EndInvoke 使用
  • 原文地址:https://www.cnblogs.com/zhaojieln/p/4229228.html
Copyright © 2011-2022 走看看