页面无响应的原因是什么？答案

【问题标题】：What is the reason for page irresponsiveness?页面无响应的原因是什么？
【发布时间】：2011-04-05 10:10:59
【问题描述】：

我使用 JSF 2.0 开发了一个包含 1100 多行代码的网页。该页面还包含很多 PrimeFaces 组件。我还使用 JQuery 来显示和消失组件。

该网页在 Firefox 4.0 和 3.16 浏览器中具有响应性。但是，当我将该站点部署在具有 Firefox 3.05b 的服务器中时，在该页面中执行了一些涉及 Ajax 的操作后，该网页似乎反应迟缓且无响应。连页面都不能快速滚动。

这种迟缓的原因可能是什么？与浏览器的 JavaScript 处理引擎有关吗？需要一些建议来克服这个冻结的页面。谢谢。

更新：

这里是HTML Source 和JSF Source

【问题讨论】：

我们需要一些示例代码或 URL 来诊断此问题。 PS 那是 1100 行 JSF 代码吗？还是输出 1,100 行 HTML？
@sgunliffe 590 行 HTML 代码。我应该发布 JSF 代码还是 HTML 代码？
我想说 HTML 在这种情况下更有帮助（至少在开始时）。如果您认为该页面的 590 行可能有点多，您可以随时将其转储到 pastebin.com 并链接到它。
我想看看 jQuery，以及执行缓慢的特定代码示例。
@scunliffe 我已经发布了该页面的代码。请看。它在 patebin 中运行 645 行，而在我系统的浏览器中运行 590 行。充满了JavaScript。效率低吗？

标签： javascript firefox jsf-2 primefaces

【解决方案1】：

一些代码会很有用。

如果 HTML 文档很大，那么使用 jQuery 扫描/遍历 DOM 可能代价高昂。

jQuery 选择器按性能排名如下：

#Id
元素
.class、:pseudoclass 和 :custom

Class 和 PseudoClass 和 Custom 选择器比 ID 和 Element 选择器慢。可以通过将它们与其他选择器类型组合来减轻它们的性能缺陷，因此请尽可能这样做。

例子：

$(".oddRows");                   //Inefficient: scans DOM for all elements with oddrows class
$("tr.oddRows");                 //More efficient: Searches only <tr>s with oddrows class
$("#MyTable tr.oddRows");        //More efficient: searches descendents of #MyTable
$("#MyTable>tbody>tr.oddRows");  //Best: searches immediate children

在这些示例中，我们结合了 CSS 样式选择器以通过两种方式获得更好的性能：

Element.WithClass – 即搜索具有指定类名的元素
#Id 后裔 – 即在 Id 的后代中搜索。
#Id>儿童 – 即仅搜索直系子女

选择器性能的优化对于高效的 jQuery 至关重要。这必须是开发人员和代码审查人员的主要考虑因素。

重新编辑 FireFox 和 JavaScript 速度 有几篇文章表明 FF 的后续版本引入了性能增强：

3.1 - http://news.softpedia.com/news/Firefox-3-1-Gets-Major-JavaScript-Speed-Boost-92382.shtml

3.6。 http://hacks.mozilla.org/2010/01/javascript-speedups-in-firefox-3-6/

【讨论】：

你有没有注意到这个问题的特殊性。它在 FF 3.16 或更高版本上运行平稳，在较低版本上运行不响应。 FF 3.0 中的 JavaScript 处理能力是否低？我应该使用其他浏览器吗？
是的，我做到了。已编辑以包含记录 FF 后续版本中 JavaScript 性能改进的链接