1

一位客户购买了一个网站模板并希望我使用它。但是，无论出于何种原因，模板都非常慢并且会使浏览器挂起/变慢，尤其是在向下滚动时。

问题在于客户端代码（javascript、flash、图像或 CSS），而不是服务器端。

如何调试此站点以尝试确定导致模板变慢的确切原因？

我尝试添加/删除内容，但似乎没有帮助，所以我认为它可能与 css 相关联

4

4 回答 4

2

使用现代浏览器，按 F-12，清除缓存，打开 NETWORK 面板并重新加载页面。这将为您提供资源列表、文件大小以及传输和加载所需的时间。

通常的嫌疑人：包含 UI 元素的超过 100K 的图像。我有一个朋友制作了一个 2500 像素宽的横幅，但在 CSS 中将其调整为 960 宽。它仍然使用相同的 350K PNG 文件。

于 2013-04-02T18:22:19.133 回答
2

除了浏览器开发工具或 Firebug 等中的网络面板外，还可以尝试使用 YSlow 和类似的插件来分析您的页面。

于 2013-04-02T18:32:44.780 回答
1

问题可能与 javascript 滚动事件有关。

例如，在 jQuery 中，$(window).scroll(); 中的任何内容；窗口移动的每个像素都被执行。

示例：http ://codepen.io/coulbourne/pen/omKql

如果有滚动功能，请尝试去抖动

于 2013-04-02T18:28:07.800 回答
1

检查背景。是图像吗？这可能是您的问题的原因之一。

其他经常被遗忘的细节是调整图像大小需要时间（不是太多，但它是一些东西）。在将它们放入 HTML 代码之前，请尝试自行调整它们的大小。

这两个技巧可以做的比你想象的要多！（如果有帮助，请告诉我！）

于 2013-04-02T18:28:17.823 回答