zoukankan      html  css  js  c++  java
  • reflow和repaint

      浏览器根据html节点生成一颗dom树,接着根据这个dom树和css生成另外一棵树:render tree。最后浏览器就根据render tree来渲染界面。

    dom树和render树的区别:

      前者包含了隐藏的元素(display=none),后者不包含。render树仅仅包含了需要被渲染的dom节点,包括visability=hidden,因为虽然不可视,但依然占据布局。

      回流(reflow)这个名词指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构、位置的过程。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘(回流必将引起重绘,而重绘不一定会引起回流)

    回流

    出现reflow的操作:

    1. 缩放浏览器
    2. 改变dom样式(修改style属性、class属性、增加CSS)
    3. 增删移动dom(display=none也会触发)
    4. 计算 offsetWidth 和 offsetHeight 属性

    减少回流次数:

    1. 使用DocumentFragment 或者将多个元素添加到一个display=none的元素中,添加完后再展示出来
    2. 将要动画的dom脱离文档流,设置为绝对定位或者固定定位
    3. 通过class来一次修改dom样式
    4. 不使用CSS表达式  

    重绘

      当一个元素的外观的可见性visibility发生改变的时候,重绘(repaint)也随之发生,但是不影响布局。

      类似的例子包括:outline, visibility,  background color,:hover

  • 相关阅读:
    7.21 高博教育 数组 内存
    【基础扎实】Python操作Excel三模块
    PAT 甲级 1012 The Best Rank
    PAT 甲级 1011  World Cup Betting
    PAT 甲级 1010 Radix
    链式线性表——实验及提升训练
    循环程序设计能力自测
    链表应用能力自测
    PAT 甲级 1009 Product of Polynomials
    1008 Elevator (20分)
  • 原文地址:https://www.cnblogs.com/hellohello/p/7535036.html
Copyright © 2011-2022 走看看