Как оптимизировать этот js (теперь загрузка ЦП превышает 40% при открытии страницы)

Question

У меня есть этот кусок JavaScript на моей странице, и он значительно загружает процессор. Есть ли способ оптимизировать код? (Я использую jQuery, поэтому решения jQuery будут в порядке)

function Particle() {

            this.particleContainerWidth = $('#particle-container').width() - 100;
            this.particleContainerHeight = $('#particle-container').height() - 100;

            this.path = 'img/';
            this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png'];

        //  Randomly Pick a Particle Model
            this.image = this.images[randomInt(this.images.length)];
            this.file = this.path + this.image;

        //  Create a Particle DOM
            this.element = document.createElement('img');

            this.speed().newPoint().display().newPoint().fly();
        };

        //  Generate Random Speed
        Particle.prototype.speed = function() {
            this.duration = (randomInt(10) + 5) * 1100;
            return this;
        };

        //  Generate a Random Position                               
        Particle.prototype.newPoint = function() {
            this.pointX = randomInt(this.particleContainerWidth);
            this.pointY = randomInt(this.particleContainerHeight);

            return this;
        };

        //  Display the Particle
        Particle.prototype.display = function() {
            $(this.element)
                .attr('src', this.file)
                .css('position', 'absolute')
                .css('top', this.pointY)
                .css('left', this.pointX);
            $('#particle-container').append(this.element);

            return this;
        };

        //  Animate Particle Movements
        Particle.prototype.fly = function() {
            var self = this;
            $(this.element).animate({
                "top": this.pointY,
                "left": this.pointX
            }, this.duration, 'linear', function(){
                self.speed().newPoint().fly();
            });
        };

        function randomInt(max) {
        //  Generate a random integer (0 <= randomInt < max)
            return Math.floor(Math.random() * max);
        }

       $(function(){

            $('body').append('<div id="particle-container"></div>');

            var total = 8;
            var particles = [];

            for (i = 0; i < total; i++){
                particles[i] = new Particle();
            }
        }); 

Answer 1

Вы думали о реализации этого с <canvas> версия? Конечно, он не будет работать в IE напрямую, и я не уверен, будет ли он быстрее или медленнее. Вы также можете попробовать это с Processing.

Answer 2

Это потребует много изменений и переписывания, но вы можете создать новую функцию замедления для jquery и опубликовать ее для анимации. Тогда каждая ваша частица будет однажды выпущена с помощью animate() с вашей функцией замедления, и эта функция должна быть основана на:

• случайный
• текущее время (новая дата ()) по модулю некоторого числа
• синглтон, содержащий отдельные направления

идеи:

Предполагая, что вы не хотите менять свой код, вы можете попытаться настроить частицы на полет с некоторым случайным таймаутом при первом запуске fly(). Это может изменить способ, которым это все выполнено. Не знаю, если это помогает или делает это медленнее, хотя;)

Второе - это качество. JQuery Animate делает это слишком гладко. Вы можете перемещать свои частицы вместо анимации и просто изменять расстояние для уменьшения и увеличения скорости и использовать setTimeout, чтобы заставить его двигаться в том же темпе, что и сейчас.

Answer 3

Вы не можете заставить JavaScript использовать меньше вашего процессора. Это определяется приоритетом исполняемого приложения в ядре ОС. Лучшее, на что вы можете надеяться - это сократить время выполнения.

Чтобы повысить эффективность выполнения, ограничьте использование прототипа и прекратите присваивать значения свойствам. Этот метод кодирования стал популярным, потому что он чрезвычайно чистый и легко читаемый, но его выполнение ужасно задом наперед.

Если вы способны кодировать, используя только переменные для присваивания, операторы для решений и циклы для циклов, выполнение вашего кода будет намного быстрее. Однако для этого потребуется написать больше кода, и это не будет так красиво.

Чтобы повысить производительность вывода, запишите все выходные сегменты в индекс массива и используйте только один метод соединения, когда все выходные данные созданы, и один метод innerHTML для вывода этого текста на страницу. Это уменьшит выполнение вывода до 4 раз.