用HTML5构建高性能视差网站

本文介绍了一种时尚的网站设计方法，以及如何由浅入深的通过HTML5和浏览器渲染机制来构建高性能的站点。文中多处涉及浏览器重绘和性能优化的原理，也是《Web滚动性能优化实战》的拓展和延续，难度上属于中级进阶，请在阅读前请先看看这篇文章。视差网站最近风靡一时，只需看看下面这些站点：如果你还不了解它们，它们其实就是页面的视觉结构随滚动变化的站点。正常情况下，页面上的元素按比例缩放、旋转或者移动到滚动的位置。我们视差效果的演示页面你喜不喜欢视差网站是一回事，但是我们能确定的是这绝对是一个性能黑洞。原因是当你滚动时，浏览器会试图对新内容出现的地方（根据滚动的方向）进行性能优化，总的来讲，在滚动中视觉上越