dom操作为什么这么慢

一、浏览器的组成

１.浏览器分为渲染引擎和JS引擎

  • 两个各司其职，互不干扰

  • 渲染引擎渲染页面，JS引擎执行JS代码

    二、跨线程通信

    １.document.body.appendChild(div1)

  • 当浏览器发现JS在body里加了一个div1对象

  • 浏览器就会通知渲染引擎在页面新增一个div元素
  • 新增的div元素所有属性都照抄div1对象

image.png

2.完整过程

  • 在div1放入页面之前

对div1所有的操作都属于JS线程内的操作

  • 在div1放入页面的时候

浏览器会发现JS的操作，然后通知页面渲染div1对应的元素

  • 把div1放入页面之后

对div1的操作都有可能使页面重新渲染

3.属性同步

http://js.jirengu.com/wodur/1/edit?html,js,output

  • 标准属性

对div1的标准属性的修改，会被浏览器同步到页面中，例如id\classNaame\title

  • data-*属性

跟标准属性一样

  • 非标准属性

对非标准属性的修改，则会停留在JS线程中，不会同步到页面里