zoukankan      html  css  js  c++  java
  • 限制通过DOM操作所引发回流的次数

    1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。

            2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
                1. 通过removeChild()或者replaceChild()实现真正意义上的删除。
                2. 设置该元素的display样式为“none”。
                修改操作完成后,将上面这个过程反转过来,建议使用第2种方式。

            3.CSS部分
                另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue";
                每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:
                1.使用更改className的方式替换style.xxx=xxx的方式。
                2.使用style.cssText = '';一次写入样式。
                3. 避免设置过多的行内样式
                4. 添加的结构外元素尽量设置它们的位置为fixed或absolute
                5. 避免使用表格来布局
                6. 避免在CSS中使用JavaScript expressions(IE only)

            4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。

            5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。转载这里:http://www.w3cgroup.com/article.asp?id=255

  • 相关阅读:
    用charles工具 mock数据(原创)
    css img图片和背景图片按容器大小自适应大小(居中裁切)
    js 实现图片上传
    Java基础之接口
    Java基础之字符串
    Java基础之常用API
    Java基础之面向对象
    Java基础之方法与流程控制
    Java基础之常量、变量、数据类型、运算符
    Java基础之JVM、JRE、JDK
  • 原文地址:https://www.cnblogs.com/0banana0/p/2073872.html
Copyright © 2011-2022 走看看