8.6 问题思考
最后我们思考一个问题,Virtual DOM
的重绘性能真的比单纯的innerHTML
要好吗,其实并不是这样的,作者的解释
innerHTML: render html string O(template size) +
重新创建所有DOM
元素O(DOM size)
Virtual DOM: render Virtual DOM + diff O(template size) +
必要的DOM
更新O(DOM change)
Virtual DOM render + diff
显然比渲染 html 字符串要慢,但是!它依然是纯 js 层面的计算,比起后面的DOM
操作来说,依然便宜了太多。可以看到,innerHTML
的总计算量不管是js
计算还是DOM
操作都是和整个界面的大小相关,但Virtual DOM
的计算量里面,只有js
计算和界面大小相关,DOM 操作是和数据的变动量相关的。