js 原生跨页面通信_DOM操作是跨线程的你知道吗？

在JS世界里面浏览器有两个重要的功能，分为渲染引擎和JS引擎。渲染引擎专门负责渲染Html和css的，JS引擎是专门用来执行JS的。这两个引擎是在不同的线程里面，它们都自己做着自己的事情，互不打扰。

跨线程操作

各线程各司其职

JS引擎不能操作页面，只能操作JS，渲染引擎也是如此，不能操作JS，只能操作页面。两位元老都克克克克业业的在自己的岗位默默奋斗着，每天都是如此，一如既往。直到有一天一位黑袍少年在控制台当中输入了“document.body.appendChild(div1)”，就在这一瞬间，天气骤变、电闪雷鸣，乌云密布，方圆百里的能力汇聚一起，少年一身长袍无风自动，咣当！这一句JS的语句居然改变了页面！安道理来说是应该存在js内存当中的，为何此代码能够调用div展示到页面上面，黑袍少年究竟是如何做到的，这一切的一切都得从跨线程操作开始讲起....

跨线程通信

当浏览器发现JS向body里面添加了一个div1对象，这个时候浏览器就会把这个东西渲染到页面上。也就是说不是JS渲染的，是浏览器渲染的。当浏览器发现了多了一个div，这个时候浏览器就会通知渲染引擎在页面上也新增加一个div元素。新增的div元素所有属性都照抄div1对象。

• ​图示跨线程操作

图原来至饥人谷方方老师

• 在div1放入页面之前

​你对div所有的操作都是属于JS线程内的操作

• 把div1放入页面之时

浏览器发现JS的意图，就会通知渲染线程在页面中渲染div1对应的元素。

• ​把div1放入页面之后

你对div1的操作都有可能会出发查询渲染。

div1.id = 'newid' 可能会从新渲染，也有可能不会。

div1.title = 'new' 可能会从新渲染，也有可能不会。

如果连续对div1进行多次操作，浏览器可能会合并成一次操作，也可能不会。

属性同步

• 标准属性​

对div1的标准属性的修改，会被浏览器同步到页面当中，比如id、calssName、title等。

• data-*属性

这个属性和标准属性一样。

• 非标准属性

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

• 启示

如果你有自定义属性，又想被同步到页面中，请使用data- 作为前缀。

图原来至饥人谷方方老师

Property & Attribute

• ​property 属性

​JS线程中div1的所有属性，叫做div1的property

• ​attribute 也是属性

渲染引擎中div1对应标签的属性，叫做attribute

• ​区别

大部分的时候，同名的property和attribute值相等。但是如果不是标准的属性，那么它俩只会在一开始时候相等。但注意attribute只支持字符串。

而property只支持字符串、布尔等类型。

注意！本文章大量引用“饥人谷前端体系课程”。