如何调试非常慢（客户端）的网站模板？答案

【问题标题】：How to debug a website template which is very slow (client side)?如何调试非常慢（客户端）的网站模板？
【发布时间】：2013-04-02 18:15:38
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：