Question

我正在使用iCarousel处理这个旋转木马的事情。使用MooTools，它可以很好地处理一些图像。然而，当我添加了70张图片（每张约30k）时，它停止了工作。花了一些时间在iCarousel的代码中探索它看起来相当不错和稳定。所以这让我想到：脚本固有的问题（在overflow:hidden div内部动画div），MooTools，Ubuntu上的Firefox还是JavaScript无法处理太多？如果是这样，多少钱太多了？

我想这很难说，但是知道什么时候JavaScript会变得迟钝和无法使用，最好是在开始开发之前。

Answer 1

查看示例代码，我注意到这样的事情已经完成了：

 $("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});  
 $("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});  
 $("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});  
 $("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});  
 $("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});  
 $("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});  
 $("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)});

如果您有70个图像（因此我假设有70个缩略图），这将会将70个事件连接到DOM。这实际上不是必要的，很可能是您所观察到的“缓慢”行为的原因。我建议你阅读事件授权以及为什么这是一件好事。 :)如果你正在使用jQuery，这可以通过使用live函数轻松完成，我想mootools会有类似的东西。但是，如果没有，那么装配相当容易。我在过去here和here讨论了事件授权。

Answer 2

除了其他答案之外，我将从艰苦的经验中指出，与画布标签提供的直接绘图API相比，操纵浏览器中的dom元素来设置它们的动画真的很慢。不仅在javascript和dom之间的桥梁中，而且在每次更改某个属性时运行内容重排例程的浏览器中都会有很多开销。

有一些方法可以确保您的动画效果显示：在css中设置绝对值（从而将它们从文档流中取出，无需重排）并确保在代码中只触摸什么东西实际上需要改变。

可以操作dom文档片段，然后将其插入到dom中，这比操作屏幕上显示的dom的一部分要快得多。

还有那个事件处理其他人提到的东西。

Javascript缩放？是的，是的，它可以。浏览器DOM缩放？不，也许不是。也许未来的浏览器会更好。

Answer 3

Javascript，作为一种语言，可以很好地扩展。事实上，除了任何其他图灵完整的语言。

然而，Javascript最经常运行的环境，Web浏览器，是一个笨拙且不可预测的地方，您的代码可能必须运行在从运行在柬埔寨56K的IE6的奔腾III到四核的任何东西上运行Firefox 3.5的核心EE直接修补到OC-12。嵌入在浏览器中的Javascript解释器在速度上有很大的不同。

编写高性能Javascript实际上更多的是试图利用用户可能使用的浏览器的可预测优势，或者至少避免其已知的弱点。它是通过逐步渲染和加载页面来创建速度幻觉，并智能地使用AJAX来帮助响应。

可伸缩性无助于绑定运行Javascript的特定系统，而不仅仅是语言本身。

此外 - 你真的没有选择！ Javascript是一个标准，你应该期待很长一段时间，无论它有什么缺点。

btw - 你的例子中没有“缩放”的是你的带宽。无论Javascript有多快，下载2.1MB的图像都会降低轮播速度。

Answer 4

这取决于您使用的浏览器。 50行表单可以杀死Internet Explorer，同时可以在Opera或Firefox中使用。因此，scalling可能与浏览器有关。

Answer 5

与明确的事件和参数一行一行地进行它只是愚蠢的。你应该考虑重构一下。删除显式ID，您应该设置一些基于类的处理程序，或者至少，定位父ID并找到要附加到子项的图像，如下所示：

<div id="example_6_frame">
    <ul>
        <li><a href="#"><img src="images/ex6_1t.jpg" alt="thumbnail 1" /></a></li>
        <li><a href="#"><img src="images/ex6_2t.jpg" alt="thumbnail 2" /></a></li>
        <li><a href="#"><img src="images/ex6_3t.jpg" alt="thumbnail 3" /></a></li>
        <li><a href="#"><img src="images/ex6_4t.jpg" alt="thumbnail 4" /></a></li>
        <li><a href="#"><img src="images/ex6_5t.jpg" alt="thumbnail 5" /></a></li>
        <li><a href="#"><img src="images/ex6_6t.jpg" alt="thumbnail 6" /></a></li>
        <li><a href="#"><img src="images/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
    </ul>
</div>

js位......

$("example_6_frame").getElements("img").each(function(el, i) {
    el.addEvents({
        click: function(e) {
            ex6Carousel.goTo(i);
        } 
    }); 
});

这里也是一个mootools liveEvent实现，http://dev.k1der.net/dev/live-events-pour-moootools/ - 你可以很容易地适应上面的...

Element.implement({
    addLiveEvent: function(event, selector, fn){
        this.addEvent(event, function(e){
            var t = $(e.target);
            if (!t.match(selector)) return false;
            fn.apply(t, [e]);
        }.bindWithEvent(this, selector, fn));
    }
});

请记住，如果脚本使用mootools scroll.js查找并滚动到元素，则可能必须将特定ID保留在其中。话虽如此，这个iCarousel来自编写iMask的同一个人，所以它应该写得很好......

Answer 6

JavaScript通过XHR水平扩展。你所拥有的是一个不能很好扩展的特定应用程序。浏览器中有某些JavaScript部分可以减慢速度。在这种情况下，正在处理的事件数。

JavaScript的扩展程度如何？

6 个答案: