4

我正在使用iCarousel处理这个旋转木马。使用 MooTools 可以很好地处理一些图像。然而，当我添加 70 张图片（每张大约 30k）时，它就停止工作了。花了一些时间研究 iCarousel 的代码后，它看起来相当不错且稳定。所以这让我开始思考：问题是脚本（在 div 中为overflow:hiddendiv 设置动画）、MooTools、Ubuntu 上的 Firefox 还是 JavaScript 无法处理太多问题？如果是这样，多少才算太多？

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

4

6 回答 6

12

查看示例代码，我注意到正在执行以下操作：

 $("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 会有类似的东西。但是，如果没有，则安装起来相当容易。我过去在这里和这里讨论过事件委托。

于 2009-07-24T02:20:31.947 回答
4

除了其他答案之外，我将从艰苦的经验中指出，与 canvas 标签提供的直接绘图 API 相比，在浏览器中操作 dom 元素以对其进行动画处理确实非常慢。不仅在 javascript 和 dom 之间的桥梁中，而且在每次更改某些属性时运行内容重排例程的浏览器中都有很多开销。

有一些方法可以解决其中的一些问题，例如确保您的动画元素具有 display:absolute 设置在它们的 css 中（从而将它们从文档流中取出，消除了重排的需要）并确保在您的代码中您只在某些情况下触摸 dom实际上需要改变。

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

还有其他人提到的事件处理。

Javascript缩放？是的，是的，它可以。浏览器 DOM 缩放？不，也许不是。也许未来的浏览器会在这方面做得更好。

于 2009-07-24T03:24:19.060 回答
3

Javascript，作为一种语言，可以很好地扩展。事实上，与任何其他图灵完备语言一样。

但是，最常运行 Javascript 的环境（即 Web 浏览器）是一个笨重且不可预测的地方，您的代码可能必须在任何设备上运行，从在柬埔寨的 56K 上运行 IE6 的 Pentium III 到四核 EE运行 Firefox 3.5 直接修补到 OC-12。嵌入在浏览器中的 Javascript 解释器的速度截然不同。

编写高性能 Javascript 实际上更像是一个尝试利用用户可能使用的浏览器的可预测优势的过程，或者至少避免他们已知的弱点。它是关于通过逐步渲染和加载页面来创造速度的错觉，并智能地使用 AJAX 来提高响应能力。

可伸缩性与运行 Javascript 的特定系统无关，而不是语言本身。

此外——你真的别无选择！Javascript 是一种标准，无论它有什么缺点，你都应该期待它存在很长时间。

顺便说一句 - 在您的示例中没有“扩展”的是您的带宽。无论 Javascript 有多快，下载 2.1MB 的图像都会减慢轮播速度。

于 2009-07-24T02:28:18.143 回答
0

这很大程度上取决于您使用的浏览器。一个 50 行的表单可以杀死 Internet Explorer，同时在 Opera 或 Firefox 中非常有用。所以缩放可能非常依赖于浏览器。

于 2009-07-24T02:27:14.697 回答
0

用明确的事件和参数逐行做这件事是愚蠢的。您应该考虑对其进行一些重构。删除显式 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 的同一个人，所以它应该写得很好......

于 2009-07-26T21:17:31.843 回答
0

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

于 2009-07-26T21:31:50.300 回答