Question

我一直在建立一个对图像和动画非常沉重的网站。它在Chrome中运行良好，但在其他浏览器中有点不稳定。只是想知道是否有人有任何想法加速表现而不影响艺术创意？

网站：http://www.benjaminbrooksguitar.com/guitarsite/

欢迎任何建议。

非常感谢本

Answer 1

至少，您肯定希望将图片大小调整为其查看大小。加载图像时，如果以36％显示宽度为1500像素，则无意义（对于带有text.png的#title元素）。您与其他图像有类似的问题。

您的页面加载速度更快，动画效果更好。

最后说明：我从未使用过航点，但如果你继续看到动画性能问题，我会建议使用另一个库，Greensock GSAP，这是非常好的（我已经使用过它了））。

Answer 2

以下是我个人尝试在自己的代码中实现的一些纯粹的理论增强功能。由于性能很难并且通常在应用程序的所有层上完成：缓存，服务器响应速度，代码中的不良做法，网络基础架构等等，请自行制定基准。

资源加载角度的性能：

图片

页面的总体大小非常大，不应超过最大1M（推荐值）。你可以使用索引的PNG而不是RGB的PNG，而对于普通的背景JPG ......你必须重做并剪切它们，因为单个图像有很多颜色，但结果将减少到25％，这将转化为更快加载时间。

正如lsubi建议的那样，您也可以使用响应图像解决方案。

源文件

建议将所有脚本放在页面的末尾，并在页面开头放置所有样式，关于浏览器如何加载资源的争论很长，为初学者研究Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?

如果你真的想要认真并赢得很短的时间，你可能希望＆＃34; uglify＆＃34; /＆＃34;最小化＆＃34;并合并您的脚本和您的CSS文件。

让我们不要忘记你可以制作css精灵而不是单独的图像（http://css-tricks.com/css-sprites/），也可以从那里获得一定数量。

可能会产生影响的一些调整：

我在你的代码中看到了以下内容，看起来你可以稍微优化一下。

$(".bg-01").addClass("animated2"), 
$(".bg-01b").addClass("animated3 bounceInUp"),
$("#tabcontainer").addClass("animated fadeInDown"),  
$("#infohelpcontainer").addClass("animated fadeInUp"),
$("#titlecon").addClass("animated4 fadeInUp"),
$("#guitarman").addClass("animated3 bounceInDown");

问题在于，在这些行中的每一行上，浏览器都被迫遍历DOM的节点。调整是在父元素上添加一个主类，它将从一次拍摄中为所有您想要的节点设置动画，例如：

$('#container').addClass('animated');

在CSS中：

.animated .bg-01 {
/* was initially in .animated2 CSS class */
}

.animated .animated3 {
/* was initially in animated3 and bounceInUp CSS classes */
}
/* ... */

图像密集型网站性能问题

2 个答案:

资源加载角度的性能：

图片

源文件

可能会产生影响的一些调整：