DOM操作为什么慢

一言以蔽之，是因为DOM操纵是跨线程的

一、浏览器的组成

浏览器的核心是两部分：渲染引擎和 JavaScript 引擎

• 渲染引擎负责渲染页面，JS引擎负责执行JS代码
• 两个线程各司其职，只做自己的工作

那document.body.appendChild(div1)这句js是如何改变页面的？

答案是通过跨线程通信完成

二、跨线程通信

1. 当浏览器发现JS在Body里加了一个div1对象

2. 浏览器就会通知渲染引擎在页面里也增加一个div元素

3. 渲染引擎会开始渲染，新的div元素所有属性都照抄div1对象

具体过程可以用下图表示

三、插入新标签的完整过程

1. 在div1放入页面之前
   我们对div1的所有操作都只在JS线程里
2. 在div1 放入页面之时
   浏览器会发现JS的意图，并通知渲染线程在页面中渲染div1对应的元素
3. 在div1放入页面之后
   我们对div1的操作有可能会触发重新渲染，比如改属性, div1.id = 'newid', div1.title = 'new'

四、修改属性

我们在JS里修改了div1的属性，那渲染线程里的div1属性会自动同步吗？

如果修改的是标准属性，就会自动同步

如果想要修改自定义属性，又想要自动同步，就要把这个属性挂在dataset上

<div id="test" data-x='我是x属性'>

在js读取时就是test.dataset.x