Ich benutze Javascript und jQuery, um ein Parallaxen-Scroll-Skript zu erstellen, das ein Bild in einem @ manipulierfigure Element mittransform:translate3d und basierend auf der Lektüre, die ich gemacht habe (Paul Irishs Blog usw.), wurde mir mitgeteilt, dass die beste Lösung für diese Aufgabe die Verwendung von @ isrequestAnimationFrame aus Performancegründen.

bwohl ich verstehe, wie man Javascript schreibt, bin ich mir immer unsicher, wie man schreibgu Javascript. Insbesondere, während der folgende Code korrekt und reibungslos zu funktionieren scheint, möchte ich ein paar Probleme lösen, die ich in Chrome Dev Tools sehe.

$(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();
});

Zuerst steigt die Anzahl der aufgezeichneten Aktionen weiter an, wenn ich in den Chrome-Entwicklungstools auf die Registerkarte "Zeitleiste" gehe und mit der Aufzeichnung beginne, auch wenn auf der Seite keine Aktionen ausgeführt werden zweite

Zweitens, warum wird alle ~ 16ms ein "Animationsframe ausgelöst", auch wenn ich nicht scrolle oder mit der Seite interagiere, wie im Bild unten gezeigt?

Drittens, warum vergrößert sich der verwendete JS-Heap, ohne dass ich mit der Seite interagiere? Wie im Bild unten gezeigt. Ich habe alle anderen Skripte entfernt, die dies verursachen könnten.

Kann mir jemand mit einigen Hinweisen helfen, um die oben genannten Probleme zu beheben, und mir Vorschläge geben, wie ich meinen Code verbessern sollte?