跨线程操作
* 各线程各司其职
- JS引擎不能操作页面，只能操作JS
- 渲染引擎不能操作JS，只能操作页面
- document.body.appendChild(div1)
- 这句JS是如何改变页面的？
* 跨线程通信
- 当浏览器发现JS在body里面加了个div1对象
- 浏览器就会通知渲染引擎在页面里面也新增一个div元素
- 新增的div元素所有属性都照抄div1对象
插入新标签的完整过程
- 在div1放入页面之前 你对div所有的操作都属于JS线程内的操作
- 把div1放入页面之时 浏览器会发现js的意图
就会通知渲染线程在页面中渲染div1对应的元素
- 把div1的操作都有可能会触发重新渲染 div1.id = 'newId'可能会重新渲染，也可能不会
div1.title = 'new'可能会重新渲染，也可能不会
如果你连续对div1多次操作，浏览器可能会合并成一次操作，也可能不会
test.clientWidth 这句话看似没有用但是实际上会触发渲染
属性同步：
- 标准属性 对div1的标准属性的修改，会被浏览器同步到页面中
比如id, className, title 等
- data-* 属性 同上
- 非标准属性 对非标准属性的修改，则只会停留在JS线程中
不会同步到页面里
比如x属性
- 启示： 如果你有自定义属性，又想被同步到页面中，请使用data-作为前缀
Property v.s. Attribute
* property属性
JS线程中div1的所有属性，叫做div1的property
* attribute也是属性
渲染引擎中的div1对应标签的属性，叫做attribute
区别：
- 大部分时候，同名的proyerty 和 attribute值相等
- 但如果不是标准属性，那么他俩只会在一开始的时候相等
- 但注意attribute只支持字符串
- 而property支持字符串，布尔等类型
