Я использую Javascript и JQuery для создания сценария прокрутки параллакса, который управляет изображением вfigure использование элементаtransform:translate3dи на основании прочитанного мною (блог Пола Айриша и т. д.) мне сообщили, что лучшим решением для этой задачи является использованиеrequestAnimationFrame по причинам производительности.

Хотя я понимаю, как писать Javascript, я всегда нахожу себя неуверенным в том, как писатьхорошо Javascript. В частности, хотя приведенный ниже код работает правильно и без сбоев, я бы хотел решить несколько проблем, которые я вижу в Chrome Dev Tools.

$(document).ready(function() {
    function parallaxWrapper() {
        // Get the viewport dimensions
        var viewportDims = determineViewport();         
        var parallaxImages = [];
        var lastKnownScrollTop;

        // Foreach figure containing a parallax 
        $('figure.parallax').each(function() {
            // Save information about each parallax image
            var parallaxImage = {};
            parallaxImage.container = $(this);
            parallaxImage.containerHeight = $(this).height();
            // The image contained within the figure element
            parallaxImage.image = $(this).children('img.lazy');
            parallaxImage.offsetY = parallaxImage.container.offset().top;

            parallaxImages.push(parallaxImage);
        });

        $(window).on('scroll', function() {
            lastKnownScrollTop = $(window).scrollTop();
        });

        function animateParallaxImages() {
            $.each(parallaxImages, function(index, parallaxImage) {
                var speed = 3;
                var delta = ((lastKnownScrollTop + ((viewportDims.height - parallaxImage.containerHeight) / 2)) - parallaxImage.offsetY) / speed;
                parallaxImage.image.css({ 
                    'transform': 'translate3d(0,'+ delta +'px,0)'
                });
            });     
            window.requestAnimationFrame(animateParallaxImages);
        }
        animateParallaxImages();
    }

    parallaxWrapper();
});

Во-первых, когда я перехожу на вкладку «Временная шкала» в Chrome Dev Tools и начинаю запись, даже если на странице не выполняются никакие действия, количество наложений «записанные действия» продолжает расти со скоростью ~ 40 в секунду. ,

Во-вторых, почему «анимация запускается» выполняется каждые ~ 16 мсек, даже когда я не прокручиваю и не взаимодействую со страницей, как показано на рисунке ниже?

В-третьих, почему размер используемой кучи JS увеличивается, а я не взаимодействую со страницей? Как показано на рисунке ниже. Я удалил все другие сценарии, которые могут быть причиной этого.

Может кто-нибудь помочь мне с некоторыми указателями, чтобы исправить вышеупомянутые проблемы, и дать мне предложения о том, как я должен улучшить свой код?