DOM是跨线程操作的
浏览器分为渲染引擎和JS引擎
跨线程操作
各线程各司其职
- JS引擎不能操作页面，只能操作JS
- 渲染引擎不能操作JS，只能操作页面
- document.body.appendChild(div1)
- 这句JS是如何改变页面的
跨线程通信
- 当浏览器发现JS在body里面加了个div1对象
- 浏览器就会通知渲染引擎在页面里面也新增一个div元素
- 新增的div元素所有属性都照抄div对象
图示跨线程操作
时间浪费在中间
插入新标签的完整过程
在div1放入页面之前
- 对div1所有的操作都属于JS线程的操作
把div1放入页面之时
- 浏览器会发现JS的意图
- 就会通知渲染线程在页面中渲染div1对应的元素
把div1放入页面滞后于
- 对div1的操作都有可能触发重新渲染
- div1.id='newid'可能重新渲染，也可能不会（大多数重新）
- 新的id里面有css样式，那么要重新渲染
- div1.title='new' 可能会渲染也可能不会（大所数不重新）
- 如果连续对div1多次操作，浏览器可能会合并成一次操作，也可能不会
- 例：
start设置宽度，end设置一个宽度，想实现一个宽度变化的动画效果，但是没有动画，因为浏览器渲染引擎将这两个步骤合并了。
加上中间的过渡条件，当原有的代码执行的过程中要不断地反馈宽度，触发重新渲染，所以达成了动画效果
属性同步
标准属性
- 对div1的属性修改，会被浏览器同步到页面中
- 比如id,calsName,title等
data-XXX属性
- 同上
非标准属性
- 对非标准属性的修改，只会停留在JS线程中，不会同步到页面里
- 比如名为XXX的属性
小结
- 同步的属性只有标准属性（id,className,title等）和data-xxx
- 如果想要有自定义属性，并且又想同步到页面中，使用data- 作为前缀
