zoukankan      html  css  js  c++  java
  • 为什么DOM操作会慢?

    不仅要避免去操作DOM,还要减少去访问DOM的次数。

    在浏览器中,DOM和JS的实现用的并不是同一个‘东西’,即不是在同一个地方,DOM和JS是两个独立的个体。

    把DOM和JavaScript各自想象成一个岛屿,它们之间用收费桥梁连接。
                                                                               --《高性能JavaScript》

     原因:

    (1)我们知道浏览器内核中有两个引擎,JS引擎渲染引擎,他们是彼此分开的,且每一次使用JS去操作DOM时,两个引擎之间会发生“跨界交流”,这个交互的过程是有性能开销的,访问的量大会造成明显的性能问题。

    (2)我们使用JS操作DOM时,当DOM节点被修改时,会触发渲染树的变化,从而触发重回或重排。

    减少DOM操作

    使用JS去给DOM分压----------DocumentFragment对象

    DocumentFragment接口表示一个没有父级文件的最小文档对象。它被当作一个轻量的Document使用,用于存储已排好版的或尚未打理好格式的XML。因为DocumentFragment
    不是真实DOM树的一部分,它的变化不会引起DOM树的重新渲染操作,且不会导致性能等问题。
    let container = document.getElementById('container')
    // 创建一个DOM Fragment对象作为容器
    let content = document.createDocumentFragment()
    for(let count=0;count<10000;count++){
      // span此时可以通过DOM API去创建
      let oSpan = document.createElement("span")
      oSpan.innerHTML = '我是一个小测试'
      // 像操作真实DOM一样操作DOM Fragment对象
      content.appendChild(oSpan)
    }
    // 内容处理好了,最后再触发真实DOM的更改
    container.appendChild(content)...
  • 相关阅读:
    表字段出现oracle sql语句关键字时
    使用decode函数
    PL/SQL DEVELOPER 使用小技巧
    Linux静态IP设置修改配置文件
    在idea上使用maven搭建ssm,数据库为mysql
    作业
    SQL 简单的生成xml
    使用CppUnit
    tinyXml的使用
    NSIS 使用技巧
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/10538113.html
Copyright © 2011-2022 走看看