zoukankan      html  css  js  c++  java
  • 如何写出高性能DOM?

    回流(Reflow)和重绘(Repaint)

    提高高性能DOM就不得不提到回流和重绘,那么什么是回流什么是重绘? 
    回流 
    对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的)来计算并根据计算结果将元素放到它该出现的位置,这个过程称为回流。

    重绘 
    当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为重绘。

    什么情况下会触发回流和重绘?

    DOM元素的添加、修改(内容)、删除(回流+重绘),仅修改DOM元素的字体颜色(只有重绘,因为不需要调整布局),回流一定触发重绘,但是重绘不一定触发回流。

    现在我们知道了触发重绘和回流的触发条件,那我们为什么要避免他们?为什么避免他们高性能DOM就能够写出来呢?

    如何避免触发回流和重绘

    Display的值会影响布局,从而影响整个页面元素的位子发生变化,所以会更改render树的结构,先将元素从document中删除,完成修改后再把元素放回原来的位置,如果需要创建多个DOM节点,可以使用documentFragment创建完后一次性的加入document

  • 相关阅读:
    node
    github
    [模块] pdf转图片-pdf2image
    python 15 自定义模块 随机数 时间模块
    python 14 装饰器
    python 13 内置函数II 匿名函数 闭包
    python 12 生成器 列表推导式 内置函数I
    python 11 函数名 迭代器
    python 10 形参角度 名称空间 加载顺序
    python 09 函数参数初识
  • 原文地址:https://www.cnblogs.com/lvshaonan/p/8616556.html
Copyright © 2011-2022 走看看