Question

我正在使用swipe.js（http://swipejs.com）为平板电脑和台式机构建HTML5杂志。

一切似乎都运行良好，在一个HTML页面中，我已经设置了彼此的全屏列表元素。整个杂志都是在一个静态的html文件中构建的。我可以通过在平板电脑上滑动以及使用桌面版的按钮来浏览页面（请参阅swipe.js主页上的示例，然后使用全屏幻灯片）。

页面彼此相邻放置，并具有屏幕尺寸。

[ |0||1||2| .. |i-1||i||i+1| .. |n| ]

使用translate3d（）css函数，在css3的帮助下完成了swipe.js转换。在这种情况下，使用硬件渲染。

在台式机（Chrome，Safari，FF），iPad1和（甚至更好的）iPad2上，这具有我想要的效果;平滑过渡。完善！但是，在iPad3上，页面第一次进入（通过转换）时似乎呈现“慢”。即使没有设置背景图像（只是颜色），转换页面的“渲染”也会被认为有点“慢”;页面是由'闪烁'块构建的。

假设：我的假设是（在阅读主题之后），这是因为浏览器只渲染屏幕内的元素，并且只会暂时刷新刷过的页面，然后清理缓存以控制内存管理。

我的问题：有没有办法控制屏幕外渲染和缓存，这样我就可以强制（预）渲染页面元素i-1，i + 1（并刷新所有缓存其他页面元素），以加快我的过渡渲染？

注意：在StackOverflow的几个主题中，提到了css3过渡的“闪烁”。我已经实现了建议的CSS技巧，但无法解决我的问题。

-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);

Answer 1

最后，解决方案是Swipejs的一个黑客，我在其中添加了一个方法'hideOthers（）'，将样式可见性设置为'hidden'，从硬件内存中卸载页面：

hideOthers: function(index) {
  var i = 0;
  var el;

  for( i in this.slides ) {
      el = this.slides[i];
      if ( el.tagName == 'LI' ) {
          // Show pages i-1, i and i+1
          if ( parseInt(i) == index
             || (parseInt(i) + 1) == index
             || (parseInt(i) - 1) == index
          ) {
              el.style.visibility = 'visible';
          }
          else {
              el.style.visibility = 'hidden';
          }
      }
   }
}

..并在'slide（）'方法

中添加了下面的触发器作为最后一行

// unload list elements from memory
var self = this;
setTimeout( function() { self.hideOthers(index); }, 100 );

只需要translate3d来切换硬件加速（如上面的问题所述）：

-webkit-transform:translate3d(0,0,0);

您可以找到结果（包括垂直滚动的iScroll）here。

Answer 2

关于用于触发硬件加速的webkit backface / translate3d道具，我已经读过iOS 6+中的这些道具与以前的版本完全不同，并且（更重要的是）硬件加速需要不仅可以应用于正在设置动画的元素，还可以应用于与其重叠/重叠的任何元素。

参考（不多）：http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

公平地说，这是相当轶事，我自己无法修复自己的闪烁问题 - 由于时间紧迫 - 但这可能是朝着正确方向发展的一点。

HTML5 swipe.js css3过渡;屏幕外渲染和页面元素的缓存

2 个答案: