javascript - 解决 javascript/dom 渲染问题的更有效方法？

Question

提前为冗长的解释道歉。我觉得这个素描最好! :P

假设我有 10 个 div，它们绝对 (css) 定位在彼此之上。每个 div 包含几个透明的 png，它们也彼此叠加，共同形成一个视觉整体。我当时只显示 1 个 div，用户可以通过单击箭头或按钮切换到下一个 div。这个箭头/按钮包含一个标签，它告诉我下一个要显示的 div，所以通过 javascript 我隐藏了所有的 div，然后立即显示合适的 div。

为什么这在大多数浏览器中都很慢？有没有更好的方法来做这样的事情？ IE 和 Firefox 似乎可以相当快速和流畅地切换 div，而 Chrome 显示延迟。以下是 html 和 javascript 的概述:

HTML:

            <div id="div1" class="active generic">
                <img src="sample00.png" width="1000" height="564" class="a1" />
                <img src="sample01.png" width="1000" height="564" class="a2" />
                <img src="sample02.png" width="1000" height="564" class="a3" />
                <img src="sample03.png" width="1000" height="564" class="a4" />
                <img src="sample04.png" width="1000" height="564" class="a5" />
            </div>
            <div id="div2" class="generic">
                <img src="sample05.png" width="1000" height="564" class="a1" />
                <img src="sample06.png" width="1000" height="564" class="a2" />
                <img src="sample07.png" width="1000" height="564" class="a3" />
                <img src="sample08.png" width="1000" height="564" class="a4" />
                <img src="sample09.png" width="1000" height="564" class="a5" />
            </div>

等等……

Javascript:

a++;
var gen = $('.generic');
var div = $('#div' + a);
gen.hide().removeClass('activeFrame');
div.show().addClass('activeFrame');

任何人都无法提供更好的解决方案，这可能太模糊了。但是如果有人可以向我解释为什么这在某些浏览器/低端系统上会很慢以及我如何能够解决这个问题，我可以利用这些知识自己思考一些事情(或者接受它就是这样) .

Answer 1

互联网上有很多关于 jquery 性能技巧的文章。请阅读那些。下面是一些链接

http://www.smashingmagazine.com/learning-javascript-essentials-guidelines-tutorials/

http://www.artzstudio.com/2009/04/jquery-performance-rules/#harness-chaining

http://www.slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks

http://tomsbigbox.com/10-best-practises-for-jquery-beginners/