一位客户购买了一个网站模板并希望我使用它。但是,无论出于何种原因,模板都非常慢并且会使浏览器挂起/变慢,尤其是在向下滚动时。
问题在于客户端代码(javascript、flash、图像或 CSS),而不是服务器端。
如何调试此站点以尝试确定导致模板变慢的确切原因?
我尝试添加/删除内容,但似乎没有帮助,所以我认为它可能与 css 相关联
一位客户购买了一个网站模板并希望我使用它。但是,无论出于何种原因,模板都非常慢并且会使浏览器挂起/变慢,尤其是在向下滚动时。
问题在于客户端代码(javascript、flash、图像或 CSS),而不是服务器端。
如何调试此站点以尝试确定导致模板变慢的确切原因?
我尝试添加/删除内容,但似乎没有帮助,所以我认为它可能与 css 相关联
使用现代浏览器,按 F-12,清除缓存,打开 NETWORK 面板并重新加载页面。这将为您提供资源列表、文件大小以及传输和加载所需的时间。
通常的嫌疑人:包含 UI 元素的超过 100K 的图像。我有一个朋友制作了一个 2500 像素宽的横幅,但在 CSS 中将其调整为 960 宽。它仍然使用相同的 350K PNG 文件。
除了浏览器开发工具或 Firebug 等中的网络面板外,还可以尝试使用 YSlow 和类似的插件来分析您的页面。
问题可能与 javascript 滚动事件有关。
例如,在 jQuery 中,$(window).scroll(); 中的任何内容;窗口移动的每个像素都被执行。
示例:http ://codepen.io/coulbourne/pen/omKql
如果有滚动功能,请尝试去抖动
检查背景。是图像吗?这可能是您的问题的原因之一。
其他经常被遗忘的细节是调整图像大小需要时间(不是太多,但它是一些东西)。在将它们放入 HTML 代码之前,请尝试自行调整它们的大小。
这两个技巧可以做的比你想象的要多!(如果有帮助,请告诉我!)