web性能

现在动辄几兆大小的页面加载量，让性能优化成了不可避免的热门话题。WEB 应用越流畅，用户体验就会越好，继而带来更多的访问量。这也就是说，我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DOM 元素是否都考虑到了在性能方面的影响。在说性能优化之前，我们有必要理清浏览器视觉绘制方面的两个术语： Repaint（重绘）：如果某些操作影响了 DOM 元素的可见性，但又没有影响布局，那么就会发生浏览器的重绘，比如opacity，background-color,visibility 和 outline 属性。由于浏览器必须检查 DOM 中所有节点的可见性——某些图层或许会置于重绘元素的图层下面，所以重绘是一个非常繁重的逻辑。 Reflow（回流）：回流是一个更具破坏性的操作，它会让浏览器重新计算所有元素的坐标位置和尺寸大小。往往由于一个元素的变化，继而引起其子元素、父元素以及相邻元素的变化。 不管用户或者应用本身是否正在执行某些逻辑，这两种操作都会阻塞浏览器进程。极端情况下，一个 CSS 效果会降低 JavaScript 的执行速度。下面是触发回流事件的几种情境： 添加、删除和修改可见的 DOM 元素 添加、删除和修改部分 CSS 样式，比如修改元素的宽度，会影响其相邻元素的布局位置 CSS3 动画和过渡效果 使用 offsetWidth 和 offsetHeight