JS--DOM的跨线程通信

什么叫DOM的跨线程通信

浏览器中有JS引擎和渲染引擎，JS引擎只能操作JS，渲染引擎只能操作界面。

当浏览器发现JS在body里面添加了一个新的div对象，浏览器就会通知渲染引擎也在页面中添加一个新的div对象，而且渲染引擎添加的对象的所有属性都和JS新建的对象相同。

由于JS引擎和渲染引擎并非处在同一个线程下，所以上面浏览器的行为就相当于与跨线程让2个引擎实现通信，这就是跨线程通信。

插入一个新的标签的全过程

1. div1放入页面之前

   • 这部分的操作都在JS引擎中进行

2. 把div1放入页面时

   • 浏览器发现JS引擎的意图
   • 浏览器通知渲染引擎在页面中渲染一个对应div1的元素

3. div1放入页面后

   • 后续JS引擎还可能对div1有操作，这样这些对div1的操作有可能会引起渲染引擎的重新渲染。

   • 如果JS中连续对div1进行操作时，有时候浏览器会将这些连续的操作合并成1次操作，如下面的 transition过渡动画。

     test.classList.add('start')
     test.clientWidth // 这句话看似无用，实际会触发重新渲染，如果没有这行，连续的添加样式操作就被合并在一起，没有过渡动画的效果。
     test.classList.add('end')
     

属性同步

当我们对JS中的元素节点的属性进行操作修改时，有些属性会被同步到页面中，而有些则不会。

1. 标准属性会被同步
   • 如：id、class、title等
2. data- 属性会被同步
   • 如：data-x、data-haha等
3. 非标准的属性（自定义属性）不会被同步到页面上，只会停留在JS引擎中

所以如果想要同步自定义属性，请使用 data- 属性。

属性Property与Attribute

• property属性是在JS线程中元素对应的属性。
• attribute属性是在渲染引擎中元素对应的属性。
• 在创建新元素时，这两个属性大部分都相等。但是如果不是标准属性而是自定的属性，那么这些自定义的属性只有在一开始创建的时候相等。
• attribute属性只支持字符串类型。
• property属性还支持除了字符串以外的类型。