具有数千条路径/矩形的 RaphaelJS 的性能答案

【问题标题】：Performance of RaphaelJS with thousands of paths/rectangles具有数千条路径/矩形的 RaphaelJS 的性能
【发布时间】：2012-05-19 04:48:31
【问题描述】：

我真的只关心 Webkit，但总的来说，Raphael JS 在构建数千个矩形时是否有望表现出色？

此外，我需要能够处理每个矩形 (yipes) 上的事件。

我有一个可行的 C++ 解决方案，但我宁愿使用 RaphaelJS。

谢谢:)

【问题讨论】：

你必须使用 SVG 吗？画布可能会更快。
不，我不必使用 SVG。但我喜欢 RaphaelJS :)

标签： javascript webkit svg raphael

【解决方案1】：

我对 RaphaelJS 一无所知，但我可以用这段代码给你一个性能提示：

<!DOCTYPE html>

<html>
    <head>
        <meta charset = "utf-8">

        <title></title>

        <script>
            window.onload = function () {
                var rectangles = 5000;

                for (var i = 0; i < rectangles; i ++) {
                    var height = 50;
                    var width = 50;

                    var canvas = document.createElement ("canvas");
                        canvas.height = height;
                        canvas.style.margin = "15px";
                        canvas.width = width;

                    canvas.addEventListener ("click", function () {
                        alert ("You like to MOVE !");
                    }, false);

                    var ctx = canvas.getContext ("2d");

                    ctx.fillStyle = "silver";
                    ctx.fillRect (0, 0, width, height)

                    document.body.appendChild (canvas);
                }

                canvas = document.body.getElementsByTagName ("canvas");

                window.setInterval (function () {
                    for (var i = 0; i < canvas.length; i ++) {
                        canvas[i].style.margin = (Math.floor (Math.random () * 16)) + "px";
                    }
                }, 100);
            }
        </script>
    </head>

    <body></body>
</html>

5000 个矩形随“onclick”事件移动：

【讨论】：

【解决方案2】：

如果您想测试 Raphael JS 的性能，我已经发布了一个绘制 10,000 点的快速示例。测试渲染和清除时间。

http://jsfiddle.net/jaRhY/1049/

【讨论】：