页面反应迟钝的原因是什么？

Question

我有一个开发的网页,有超过1100行代码,使用JSF 2.0.该页面还包含许多PrimeFaces组件.我也使用JQuery来显示和消失组件.

该网页在Firefox 4.0和3.16浏览器中响应.但是,当我在具有Firefox 3.05b的服务器中部署该站点时,在该页面中执行涉及Ajax的某些操作之后,所述网页似乎缓慢且无响应.甚至页面也无法快速滚动.

造成这种迟缓的原因是什么？是与浏览器的JavaScript处理引擎相关的东西吗？需要一些建议来克服这个冻结的页面.谢谢.

更新:

这是 HTML源代码和JSF源代码

Answer 1

一些代码很有用.

如果HTML文档很大,那么使用jQuery扫描/遍历DOM可能会很昂贵.

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

1. #ID
2. 元件
3. .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至关重要.这必须是开发人员和代码审查人员的主要考虑因素.

编辑Re 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/