使用数千种动画元素提高CSS和JavaScript的性能

Question

I'm trying to build a night sky with thousands of blinking stars as a background for a simple game I want to make, but I'm getting a lot of performance problems. 我正在尝试用数千个闪烁的星星构建夜空，以此作为我想制作的一款简单游戏的背景，但是却遇到了很多性能问题。 I want to achieve it to move at a fluid 60fps but I'm very far from it. 我想让它以60fps的流畅速度移动，但距离它很远。

At first I though of using an svg container. 起初，我虽然使用了svg容器。 This is what I did: 这是我所做的：

<html>
    <head>
         <meta charset="utf-8"/>
         <style>
             @keyframes star_blink {
                 100% {opacity: 0;}
             }
         </style>
    </head>
    <body>
        <svg id="canvas" width="1000" height="1000" style="background:black" />
        <script>

        const svgns = "http://www.w3.org/2000/svg";

        var svg = document.getElementById("canvas");

        var create_star = () => {
            var star_element = document.createElementNS(svgns, "rect");
            star_element.setAttributeNS(null, "width", Math.random() < 0.85 ? 1 : 2);
            star_element.setAttributeNS(null, "height", Math.random() < 0.85 ? 1 : 2);
            star_element.setAttributeNS(null, "x", Math.random() * 1000);
            star_element.setAttributeNS(null, "y", Math.random() * 1000);
            var max_opacity = Math.random() * 0.8;
            var min_opacity = Math.random() * max_opacity;
            var transition_time = Math.random() * 10;
            while (transition_time < 0.5) {transition_time = Math.random() * 10;}
            star_element.setAttributeNS(null, "style", "stroke:white; fill:white; opacity: " + max_opacity + "; animation: star_blink " + transition_time + "s infinite alternate;");
            svg.appendChild(star_element)
        }

        for (var i=0; i<10000; i++) {
            create_star();
        }

        </script>

    </body>
</html>

Performance is really bad, I'm getting around 20fps, so is not acceptable is I want to add more objects moving on top of it. 性能真的很差，我达到了20fps，所以我不能在上面添加更多对象，这是不能接受的。

Then I thought of moving to use phaserjs: 然后我想到了使用phaserjs：

<html>
    <head>
         <meta charset="utf-8"/>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.1/phaser.js"></script>
         <script>
            var game = new Phaser.Game(1000, 1000, Phaser.WEBGL, 'phaser-example', { create: create, update: update });

            var stars = [];
            var planets = [];

            function random_rectangle_size() {
                var dice = Math.random();
                return dice < 0.7 ? 1 : dice < 0.9 ? 2 : dice < 0.98 ? 3 : 4;
            }

            class Star {
                constructor() {
                    this.blinking_time = Math.random() * 3000;
                    while(this.blinking_time < 500) {this.blinking_time = Math.random() * 3000}
                    this.posX = Math.random() * 1000
                    this.posY = Math.random() * 1000
                    this.graphics = game.add.graphics(this.posX, this.posY);
                    this.graphics.beginFill(0xFFFFFF, (Math.random() * 0.8 + 0.2) * 0.8);
                    this.graphics.drawRect(0, 0, random_rectangle_size(), random_rectangle_size());
                    this.graphics.endFill();

                    game.add.tween(this.graphics).to({alpha: Math.random() * 0.4}, this.blinking_time, Phaser.Easing.Linear.None, true, 0, -1, true)

                }
            }


            function create() {
                 for(var i=0; i<10000; i++) {
                     stars.push(new Star())
                 }
            }

            function update() {}

         </script>
    </head>
    <body>
    </body>
</html>

I get around 30fps there. 我在那里达到约30fps。 A little better but still very far away from my objective. 好一点，但离我的目标还很远。

Is it impossible to do what I want? 做我想做的事不可能吗？ How can I improve performance here? 如何在这里提高性能？ Should I abandon the idea of using javascript and the browser, and use a traditional game engine? 我是否应该放弃使用JavaScript和浏览器的想法，而使用传统的游戏引擎？

Answer 1

Posting answer mentioned in comments above, for future readers. 将以上评论中提到的答案发布给以后的读者。

Phaser v3 has a custom renderer compared to v2 which is built on Pixi. 相较于在Pixi上构建的v2，Phaser v3具有自定义渲染器。 As of version 3.12 the render pipeline for graphics was overhauled so that it is faster, and more efficient when rendering graphics, both individually, and when mixed with rendering sprites. 从版本3.12开始，对图形的渲染管道进行了大修，以便在单独渲染图形以及与渲染精灵混合时，更快，更高效。 Details can be found in the changelog for phaser v3.12 and also Phaser World issue 124 可以在Phaser v3.12的更新日志中以及Phaser World 第124期中找到详细信息

An example of rendering and tweening many graphics objects can be seen on the examples page here 可以在此处的示例页面上看到渲染和补间许多图形对象的示例。

使用数千种动画元素提高CSS和JavaScript的性能

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-10-09 11:17:34

使用数千种动画元素提高CSS和JavaScript的性能

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-10-09 11:17:34

解决方案1
2 已采纳 2018-10-09 11:17:34