1.为什么使用虚拟DOM?
DOM操作太消耗浏览器计算资源,diff算法才有其存在的意义。
DOM操作为什么慢?
1.直观感受:在浏览器控制台,用for循环遍历div属性,会看到有很多属性输出。对于浏览器渲染引擎而言,一个HTML元素就是一个占用内存的数据结构,因此元素的属性越多理论上占用的内存越多,就越消耗性能。再从另外一个角度分析,页面渲染也是图形化的过程,玩游戏的朋友应该知道网络稍微不好,游戏页面就很卡,也就是说图形化是很消耗硬件资源的。
浏览器渲染:DOM操作会引起浏览器repaint和reflow。
如何减少DOM操作?
先隐藏需要操作的DOM:display:none
,再显示:display:block
。
离线操作DOM:我们先将元素脱离文档流,然后对元素进行操作,最后再把操作后的元素放回文档流。
可以cloneNode,将DOM操作变成纯粹的内存操作 createDocumentFragment
操作完成之后替换原来的DOM元素。如果是添加多个节点,将所有DOM节点都在内存中拼装完成之后再append到DOM中。
replaceChild appendChild
2.为什么用JavaScript模拟DOM结构?
因为JavaScript是图灵完备语言,图灵完备语言即支持无限循环等逻辑操作。换成一种思路,前端也就HTML、CSS、JavaScript三门编程语言,不用JavaScript,难道用CSS?HTML更不可能了,DOM本身就是HTML。