27-性能-svg2（在 SVG 上每一帧绘制 10000 个半径为 10 的小圆）.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>svg性能测试</title>
        <style>
            svg {
                border: 1px dashed #fa8072;
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
        <script>
            const root = document.querySelector("svg");

            const WIDTH = 500;
            const HEIGHT = 500;
            const COUNT = 10000;
            const RADIUS = 10;

            function randomColor() {
                return `hsl(${Math.random() * 360}, 100%, 50%)`;
            }

            function initCircles(count = COUNT) {
                for (let i = 0; i < count; i++) {
                    const circle = document.createElementNS(
                        "http://www.w3.org/2000/svg",
                        "circle"
                    );
                    root.appendChild(circle);
                }
                return [...root.querySelectorAll("circle")];
            }
            const circles = initCircles();

            function drawCircle(circle, radius = 10) {
                const x = Math.random() * WIDTH;
                const y = Math.random() * HEIGHT;
                const fillColor = randomColor();
                circle.setAttribute("cx", x);
                circle.setAttribute("cy", y);
                circle.setAttribute("r", radius);
                circle.setAttribute("fill", fillColor);
            }

            function draw() {
                for (let i = 0; i < COUNT; i++) {
                    drawCircle(circles[i], RADIUS);
                }
                requestAnimationFrame(draw);
            }

            draw();
        </script>
    </body>
</html>