DOM 性能案例研究

      我有一个有趣的问题想问你，你最后一次使用原生DOM API创建你的真实的项目是什么时候了，是的，你也许也不记得是什么时候了。你知道的，我们可以利用DOM API来和HTML做任何交互。 但是现在我们可以使用当下流行的UI框架以及库来搭建我们的UI，例如React，VUE，Angular。所以在不使用框架来将我们的代码编译成为HTML/CSS/JS的情况下，你大部分还是要基于DOM API来搭建我们的应用。照那样说，在大型应用中，我们借助于工具确实可以帮助我们创建顺畅的体验。毕竟，速度是我们研究的对象。

     你或许在某些地方听到过，直接操作真实的DOM是很消耗性能的，特别是当你使用姿势不动的时候，会造成严重的性能影响的。即使是毫秒级别的，对我们的网页的体验也很重要。如果你的UI不能顺畅的工作，不能达到60FPS这个基础要求，那么你的 页面将出现卡顿现象。所以让我们做一项研究，来探讨一些DOM优化技术。

     Layout

      Layout发生在你和浏览器交互操作DOM,CSS的所有过程中。这就意味着在这个过程，会重新渲染，重新计算元素的位置以及大小。但是如果你做大量这种操作会造成页面掉帧的现象。照这样说，