操作真实DOM是“昂贵”,至于昂贵在哪里,我觉得是dom改变了,浏览器需要重绘,并且渲染是异步且占用js进程。并且真实dom实际会携带大量属性。

    image.png

    既然如此,就要尽量减少操作dom的次数和范围。

    vDom 就是用js来描述dom结构
    image.png

    当发生dom更改,就先对比vDom,找出最小更改(使用diff算法),然后再操作真实dom。

    Vue和react实际都用到了vDom。

    可以参考其中一种vDom的实现:snabbdom

    image.png