HTML5 swipe.js css3转换;页面元素的屏幕外呈现和缓存

Question

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

一切似乎都很好，在一个HTML页面中，我设置了相邻的全屏列表元素。整个杂志构建在一个静态html文件中。我可以在平板电脑上滑动页面，也可以使用桌面版的按钮（考虑一下swipe.js主页上的例子，然后使用全屏幻灯片）。

页面并排放置，具有屏幕的尺寸。

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

在css3的帮助下，使用translate3d（）css函数完成了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（）"，将样式可见性设置为"hided"，从而从硬件内存中卸载页面：

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）。

Answer 2

关于用于触发硬件加速的webkit backface/translate3d道具，我读到在iOS 6+中，这些道具的工作原理与以前的版本不太一样，而且（更重要的是）硬件加速不仅需要应用于正在动画化的元素，还需要应用于与之重叠的任何元素。

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

公平地说，这只是一个轶事，由于截止日期紧迫，我自己也无法解决自己的问题，但这可能是一个正确的方向。