提高jQuery的性能，预压，动画和多少是太多？

Question

我读过所有类似的问题，但似乎都不适合我的问题，所以我决定在这里提出一个问题。

我在一个网站上有一个图片库页面。它管理着大约100张图片。效果很好。然而，我对TQM (全面质量管理)和开禅(从来没有完美，所以总是改进它)感兴趣。在这方面，我有一些问题：

1. 一个页面上有多少动画是太多的动画？如果用户在使用页面时没有延迟，这是否意味着动画可以保留？
2. 多少预加载是太多的预加载？当页面加载时，我使用javascript和jQuery缓存图像。它只缓存其中的一%，而其他的则在用户导航时加载。在客户端接收图像时，我应该考虑多少内存？是一次预装，还是在用户导航时预加载？如果没有滞后，我应该改变机制的工作方式吗？

很抱歉有很多没有代码的问题，但是这些问题都与这个系统的实现有关，在发布之前，这些问题对我的一些迭代都有很大的帮助。提前谢谢。

Answer 1

我认为这里的答案可能有些主观。

我想说的是，就动画而言--有两件事会阻止我添加更多东西--一种是，如果所有东西同时启动，它就会开始显得滞后/动荡(但想想用户--你可能有一台高端PC，配有现代化的硬件加速浏览器，但它们可能没有)。

然而，在这之前，我会看着页面，看看我发现它有多烦人--有太多的东西和动画，就像很多东西一样，你经常会发现少就是多。

对于第二个问题-缓存的明智之处。不要担心内存，因为客户端会处理这个问题，但是要担心页面加载速度。如果您的页面没有加载并准备在合理的时间内使用(几秒钟)，请考虑减少预加载，并执行更多的“按需”操作，因为这里的关键是用户体验。缓慢的网站就是未被阅读的网站。

Answer 2

这完全取决于你的目标平台和浏览器.

1. For jQuery动画、动画持续时间/迭代以及所涉及的属性将是动画数量以外的另一个因素。我会说:

- jQuery animation is ok for desktop for a fews of them, unless not much JS code occupying the JS thread - check the CPU usage. (short, non-looping, simple animation will not push the CPU too hard)
- jQuery animation is **not okay** for mobile platform, you should use CSS3 animation insteads

​

1. 避免了一次加载/预装过多的图像，因为使用CPU资源的网络连接和图像预加载将占用一定的内存。

(取决于您的映像和用户内存的大小-除非这是一台非常旧的机器或移动设备，或者是大图像，例如2048x1024，大多数现代桌面都可以。)

逐页预加载将是一种合理的方法。我的建议是小于10，特别是您有其他ajax请求，而且您可能没有火箭快速服务器，所以您的加载仍然是合理的。