网站速度很慢......但只是在Chrome / Safari中

Question

我正在尝试在网络应用程序中找到一个错误，导致Chrome和Safari最多花费15秒来加载页面（Firefox和IE，没有问题）。我尝试使用Chrome的开发者工具来找出导致速度减慢的原因，但我无法理解哪些元素/脚本会降低页面速度。

这是一个带有自定义插件的joomla网站（由其他开发人员完成，而非我自己）...寻找帮助诊断问题。

网址为http://www.norfolktourism.ca/index.php?option=com_eventlist&view=eventlist&Itemid=70

Answer 1

我尝试在Chrome中禁用javascript加载页面，但它仍然超级慢。使用Chrome的开发人员工具，我看到25条消息显示“使用的XML自关闭标记语法。标记将不会关闭。”，后跟一个“[例外：TypeError：期望在instanceof检查中的函数，但得到TypeError：无法读取未定义的属性'ANY_TYPE'“。

似乎有很多自我关闭的div标签;虽然它不应该引起问题，但清理它们并不会有什么坏处。

Answer 2

我建议您尝试一些镀铬扩展程序：

• Firebug Lite：https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
• Speed Tracer：https://chrome.google.com/extensions/detail/ognampngfcbddbfemdapefohjiobgbdl

我认为firebug比默认chrome的开发者工具更好。速度跟踪器可以非常有用地跟踪占用太多时间的物品。

Answer 3

一些建议：

1. 保存背景图片以及以png格式在标题中显示的每张图片以减小其尺寸

2. 尝试启用gzip，因为html内容权重太多

3. 使用Chrome开发者实用程序分析在网页上完成的每个请求，以了解哪些内容很慢

<强>更新： 尝试删除addthis_widget.js脚本，它会加载大量资源，并添加一个可以减慢Chrome的隐藏iframe

Answer 4

如果没有向我们展示任何代码/脚本，我们就无法提供太多帮助。 我可以推荐的一件事是从一个面板开始并保持一个dding以确定其根本原因。

我的直觉告诉我它是图像加载器，因为这可能有一些JS错误。右上角删除它并尝试在chrome中加载页面。如果您注意到它的速度要快得多，那么您就知道这是您的问题。

Answer 5

您可以尝试使用DevTools时间轴来跟踪问题。

Timeline video guide

Other DevTools guides

录制视频后，时间轴界面中发生了一些变化。 例如，默认情况下折叠所有顶级事件。 但这个想法是一样的。

我可以看到它不是JavaScript的问题，而是布局重新计算。