我的网站在ipad/iphone上非常落后，去掉了css效果；javascript

我正在构建一个包含大量CSS和一些javascript的网站，但是我在移动设备上的性能有很多问题，尤其是在ipad和iphone上

我尝试过关闭css中的框阴影、文本阴影、半径和渐变属性，以及关闭所有javascript，但仍然严重滞后。关闭javascript并不能显著提高性能，尽管关闭那些css属性确实有所帮助

更具体地说，当你尝试滚动并用手指松开时，滚动“粘住”在你松开的地方。在较小的屏幕上放大和滚动也很糟糕，尤其是在iphone或ipod上

我确实觉得有些事情我忽略了。有什么线索吗

---

[我删除了该站点，但我的回答更详细地显示了潜在的问题。缓慢的行为来自属性溢出：scroll]

运行YSlow！测试。它给了我一些有趣的观点

This page has 10 external Javascript scripts. Try combining them into one.
This page has 5 external stylesheets. Try combining them into one.

是我的问题

-webkit-overflow-scrolling: touch;

添加这一行使滚动变得平滑

起初我认为这是一个多个div相互叠加的问题，但后来我更彻底地研究了它，发现这个网站更详细地解释了iOS触摸行为：

比我想象的简单多了

编辑：
不是很快，现在我有一些元素的显示问题。再次研究发现：

这告诉我使用

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

在所有相关元素上。
当我在我的一些元素上使用它时，这种方法很有效，但它再次破坏了其他东西。现在当我向下滚动时，页面大约需要3秒钟！要加载以前不可见的内容

我想这总比什么都没有好，尽管感觉移动Safari是新的Internet Explorer
将尝试找到另一个修复

edit2:
我设法使它基本上正常工作。它仍然有一些显示问题（我的元素后面的主要背景仍然有2-3秒的加载问题），但至少我的其他元素可以立即看到

我所做的就是使用

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

在我最上面的一个（id#）元素上，而不是在文章中提到的所有相关元素上使用通用选择器*{}

---

为了向后兼容滚动行为，他们提到了一个polyfill，例如。

这是一个很好的建议，我不知道YSlow。然而，我并不关心初始页面加载。这是你在网站上的滞后行为。实际上，这种“把戏”会产生问题。我的javascript相关css现在都搞砸了…使用

-webkit转换：translate3d（0,0,0）

在所有相关元素上有助于修复奇怪的行为，更新了我的答案您是否尝试在元素为可见或隐藏的高级元素上应用

-webkit backface visibility

属性？这可能与

transform:translate3d

具有类似的效果，因为它可以强制GPU加速–具有不同的奇怪副作用；）

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