Performance of RaphaelJS with thousands of paths/r

2019-07-13 13:41发布

站内问答 / JavaScript
1633 2 4

I really only care about Webkit, but in general, is Raphael JS expected to perform well when building thousands of rectangles?

Additionally, I would need to be able to handle events on each of these rectangles (yipes).

I've got a C++ solution which works but I'd rather use RaphaelJS.

Thanks :)

2条回答
疯言疯语
2楼-- · 2019-07-13 14:02

If you would like to test out performance of Raphael JS I've posted a quick example of plotting 10,000 points. Tests render and clear times.

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

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
3楼-- · 2019-07-13 14:13

I don't know nothing about RaphaelJS but I can give you a performance hint with this code:

<!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 rectangles moving around with "onclick" event: enter image description here

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)