1

在实现灯箱或图像滑块时，我通常的方法是将包含幻灯片的元素嵌套在具有 的固定宽度和高度元素中overflow:hidden;，如下所示。

CSS3滑块图

通过为边缘设置动画，我们可以流畅地移动幻灯片通过可见区域。

我最近一直在实现这样一个使用全屏幻灯片并针对 Retina 显示 iPad 的滑块。幻灯片不是图像，而是不同的 HTML 块，其中一些带有高分辨率的嵌入式媒体。该设备的性能是可以接受的，但绝对可以改进。

我的问题是，在尝试优化此类 Web 应用程序的客户端性能时，我应该考虑哪些因素？例如，我知道 CSS3 过渡被认为是硬件加速的结果。

有没有办法让 WebKit 更喜欢布局 DOM？

“延迟加载”不可见页面是否会产生真正的影响？如果是这样，是否值得积极删除已经被视为控制 DOM 大小的旧元素？

当前每张幻灯片都是异步加载的onLoad。一次向浏览器提供所有 HTML 是否会对性能产生影响（除了保存一些 HTTP 请求）？

如果您能提出任何提示或技巧，我将不胜感激！

4

1 回答 1

1

好的，这里有几件事要记住。

  1. 避免重绘。如果你可以使用变换和过渡，那就去做吧。因为浏览器知道你在做什么，它可以避免在不需要的时候重新绘制。几年前我写了这个： http: //css3.bradshawenterprises.com/sliding/，它解释了如何做到这一点。回退到使用 jQuery animate 是一种流行的选择。我在这里写了一个非常丑陋的方法来做到这一点：http: //css3.bradshawenterprises.com/legacy/，但你可能会考虑如何以更好的方式编写它，现在事情已经发生了一些变化。例如，jQuery 1.8 抽象掉了供应商前缀，避免了我很多丑陋的代码！

  2. transform: translate3d(0,0,0);尽可能使用 3D 变换，您可以通过在移动位上添加一个来作弊。这迫使它进入 Webkit 中的一个新层，这可以帮助某些版本的 webkit。

  3. 关于内存使用和 DOM 对象，请使用 Chrome 或 Safari 中的 Timeline Inspector 使用滑块记录自己，然后检查发生了什么。如果您可以访问 iOS 6.0，则可以在 Safari 中连接到设备以直接在设备上使用检查器。

  4. https://developer.apple.com/videos/wwdc/2012/?id=601是一个处理这类事情的视频，值得一看。如果您无法访问该页面，我相信您可以通过 iTunes U 获取视频，但也许这只是因为我也是开发人员......无论哪种方式，视频的标题都是“优化 UIWebViews 中的 Web 内容”和 iOS 上的网站”。

简而言之，测量、记录、分析和实验！

于 2012-07-27T14:56:50.257 回答