Optimize performance [answers and questions]

[valentinwilliams]

Hi,

First, I want to thank you for this library, who is light and well working :)

I write this issue to share my result and to get feedback from other users to improve ou work :)

This week I had running some tests to optimize a webpage and I get some results and some questions :)

First result:

<script>
    $(document).ready(function(){
        $(window).scroll(function(){
            scrollissimo.knock();
        });
    });
</script>

can be replaced by

//https://jsfiddle.net/jonathansampson/m7G64/
        function throttle (callback, limit) {
            var wait = false;                  // Initially, we're not waiting
            return function () {               // We return a throttled function
                if (!wait) {                   // If we're not waiting
                    callback.call();           // Execute users function
                    wait = true;               // Prevent future invocations
                    setTimeout(function () {   // After a period of time
                        wait = false;          // And allow future invocations
                    }, limit);
                }
            }
        }
        window.addEventListener('scroll', throttle(() => {
            scrollissimo.knock();
        },80));

I gain 5-10 FPS with this change. (I tried a throttle function with a raF but it wasn't so efficiency)

second result:

I needed to round my values :

//$i function return document.getElementById
//h window.innerHeight
//r Math.round
//m is ratio that i used when i detect a trackpad

let t2_step3 = TweenLite.to($i('t2'), r(h * 1.3* m), {
         y: r(-0.5 * h),
});
scrollissimo.add(t2_step3, r(h * 3.7 * m), 25);

Third result:

will change!

Using will-change property is very efficient in CSS.

I need to do some other test because I wonder how efficient it can be to load will-change dynamically with javascript some wheel scroll before element appearing and delete it after :)

Now I have a question do you have another idea to improve performance?

I wonder if since 3 years there are new properties who can be better to use in JS to improve code speed :)

I have two currents issues ( IOS SAFARI ENGINE and TrackPad ).

Because of Safari render engine I have lag on every navigator on IOS Phone, and my only solution was to create a light version for IOS :/ (Animations work on a low-cost Android phone but lag on iPhone X :/ )

For trackpad, they produce many scroll events so animations are to fast :/ I need to do more test with a Mac trackpad to fix this. If you have idea?