如何调试非常慢（客户端）的网站模板？
Posted
技术标签:
【中文标题】如何调试非常慢（客户端）的网站模板？【英文标题】：How to debug a website template which is very slow (client side)? 【发布时间】：2013-04-02 18:15:38 【问题描述】：客户购买了网站模板并希望我使用它。但是，无论出于何种原因，模板都非常慢，并且会导致浏览器挂起/变慢，尤其是在向下滚动时。
问题在于客户端代码（javascript、flash、图像或 CSS），而不是服务器端。
如何调试此站点以尝试确定导致模板运行缓慢的确切原因？
我尝试添加/删除内容，但似乎没有帮助，所以我认为它可能与 css 相关
【问题讨论】：
似乎您可以提供更多详细信息（您尝试过的浏览器的特定版本，该网站上的内容是什么等）似乎与 CSS 相关的缓慢不寻常（有很多内容？） @user1766760 试过 google chrome & ff，是的，模板内容很重，我需要特别定位哪些内容造成的负载最大 【参考方案1】：使用现代浏览器，按 F-12，清除缓存，打开网络面板并重新加载页面。这将为您提供资源列表、文件大小以及传输和加载所需的时间。
通常的嫌疑人：包含 UI 元素的超过 100K 的图像。我让一个朋友制作了一个 2500 像素宽的横幅，但在 CSS 中将其调整为 960 宽。它仍然使用相同的 350K PNG 文件。
【讨论】：
发现问题！有一个从 CSS 链接的 1 MB 图像，现在删除它会使事情变得顺利。谢谢！【参考方案2】：除了浏览器开发工具或 Firebug 等中的网络面板外，还可以尝试使用 YSlow 和类似的插件来分析您的页面。
【讨论】：
【参考方案3】：问题可能与 javascript 滚动事件有关。
例如，在 jQuery 中，$(window).scroll(); 中的任何内容；窗口移动的每个像素都会执行。
示例：http://codepen.io/coulbourne/pen/omKql
如果有滚动功能，尝试去抖动
【讨论】：
【参考方案4】：检查背景。是图像吗？这可能是您的问题的原因之一。
另一个经常被遗忘的细节是调整图像大小需要时间（不是太多，但它是一些东西）。在将它们放入 html 代码之前，请尝试自行调整它们的大小。
这两个技巧可以做的比你想象的要多！ （如果有帮助，请告诉我！）
【讨论】：
以上是关于如何调试非常慢（客户端）的网站模板？的主要内容，如果未能解决你的问题，请参考以下文章