启用 jQuery 的特定站点的 FireFox 性能问题答案

【问题标题】：FireFox performance problems with a particular jQuery enabled site启用 jQuery 的特定站点的 FireFox 性能问题
【发布时间】：2009-11-08 11:12:05
【问题描述】：

我使用 jQuery 构建了我的第一个站点，总体而言，结果非常好 - 在大多数浏览器中，就是这样。可以看到站点的测试环境here。

令我惊讶的是，它在 IE、Chrome、Safari 和 Opera 中运行良好 - 但在 FireFox 中却非常糟糕。我正在使用一个基本的幻灯片、一个手工编码的水平手风琴、一些小弹出框、各种小效果和 jQuery LightBox 插件。我的所有代码都可以查看here。

最大和最明显的 FireFox 问题是手风琴 - 当它滑动时，它相当平滑，但有吨的伪影。通过将隐藏的内容设置为display: none;，我实际上已经减少了视觉伪影。

如果我犯了一些菜鸟错误，请让我难堪并指出。我愿意接受任何建议，只要您不告诉我我必须更改功能 - 我的客户已经准备好这些，因为我的老板答应了他们（当然，在询问我是否可以实施它们之前）。

【问题讨论】：

你指的是什么样的工件？我在一台较旧的 PC（1.6Ghz Sempron、1 GB RAM、AGB 显卡）上使用 FF3，手风琴工作正常，虽然有点紧张，而且文本框超出了手风琴的边界。是这个意思吗？
我猜这是作者谈论的问题
如何使用 Firebug javascript profiler 来确定减速的原因？
@Pekka Gaiser：超出手风琴边框的文本框是主要问题。在我开始这个过程之前，情况要糟糕得多。你可以在这里看到：beyerhomes.com我已经取得了一些进展，但我还没有发布它，因为我需要客户的批准。 @molevna：是的，成功了。 @Eldimo：我见过它，但我还不知道如何使用它。让我帮我谷歌一下……

【解决方案1】：

似乎透明文本框（其移动导致了伪影，对吗？）完全在 IE 中它们各自的手风琴页面内，但它们与 FF 中的页面重叠。我不知道为什么会这样（而且现在没有时间查看代码）但也许在正确的位置“溢出：隐藏”已经足够了。

【讨论】：

透明框位于实际保存文本的框下方 - 因为我不能在所有浏览器中依赖 rgba 值，所以我不得不使用两个。谢谢，我会看看我可以在哪里调整一些溢出值。
他们是绝对定位的吗？那么可能就是这样。如果您尝试删除它们会发生什么？
@Pekka Gaiser：它们是绝对的......我按照你的建议做了。我使用快速选择器拉出彩色框，留下文本： $('.color_box').remove();它看起来仍然很糟糕。我用这个拉了 other div，.text_box ... $('.text_box').remove();突然间，文物不见了。现在我必须弄清楚为什么那个盒子会造成麻烦。感谢您的指导。
而且，最后还是溢出了。包含文本的 div 设置了溢出：自动，这让 FireFox 搞砸了。我现在只在一个 div 上设置了溢出，它恰好在最左边的面板 div 上，它不会移动，因此不会导致工件。非常感谢您的帮助 - 您的建议比 jQuery 讨论组更有帮助。

【解决方案2】：

第一个猜测 - <img> 标签中的 width 和 height。

这是与 JS 相关的许多扭曲的常见原因。

改用 CSS 属性（width 和 height (sic)）

附：将Options -Indexes 设置为dev server root 上的.htaccess

【讨论】：

这很有帮助 - 我有几张无宽度/无高度的图像散落在各处，其中许多是来回动画的。手风琴幻灯片动画更流畅。它仍然对移动的各种 div 做了一些奇怪的事情......但所有这些都有 z-indexes。也许是因为 z-index 的原因，FireFox 会在这些特定元素上出现故障。
我建议您在手风琴展开完成事件后考虑使用 AJAX 动态获取页面。这样你就可以从许多相关的麻烦中解脱出来。
这听起来像是处理网站多个部分的正确方法......太糟糕了，预算已经用完了。在我的下一个设计中，我会牢记这一点。
相反，在用户体验和页面渲染速度方面，强烈建议使用img 标签上的width 和height 属性。 stackoverflow.com/questions/1247685/…

【解决方案3】：

最后，它是多种事物的结合。手风琴内部溢出的 div 造成了很多麻烦和一些减速。一些没有尺寸的图像也会产生伪影和减速。感谢大家的帮助和cmets。

【讨论】：