Estoy usando Javascript y jQuery para crear un script de desplazamiento de paralaje que manipula una imagen en unfigure elemento utilizandotransform:translate3dy, según la lectura que hice (el blog de Paul Irish, etc.), me informaron que la mejor solución para esta tarea es utilizarrequestAnimationFrame por razones de rendimiento.

Aunque entiendo cómo escribir Javascript, siempre estoy inseguro de cómo escribirbueno Javascript En particular, aunque el siguiente código parece funcionar correctamente y sin problemas, me gustaría resolver algunos problemas que estoy viendo en 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();
});

En primer lugar, cuando me dirijo a la pestaña 'Línea de tiempo' en Chrome Dev Tools, y comienzo a grabar, incluso sin realizar acciones en la página, el recuento de superposición "acciones registradas" continúa aumentando, a una velocidad de aproximadamente ~ 40 por segundo .

En segundo lugar, ¿por qué se ejecuta un "marco de animación" cada ~ 16 ms, incluso cuando no me desplazo o interactúo con la página, como se muestra en la imagen a continuación?

En tercer lugar, ¿por qué aumenta el tamaño del montón JS usado sin que yo interactúe con la página? Como se muestra en la imagen a continuación. He eliminado todos los otros scripts que podrían estar causando esto.

¿Alguien puede ayudarme con algunos consejos para solucionar los problemas anteriores y darme sugerencias sobre cómo debo mejorar mi código?