Question

我知道它有点要问，但是如果不使用jQuery，可以使用以下内容吗？我现在用jQuery运行它，但它似乎呈现性能问题。如果你能帮助我，我将非常感激。我不是懒惰，只是不知道代码知识。我花了一些时间才能做到这一点。

 //
    // default speed ist the lowest valid scroll speed.
    //
    var default_speed = 1;
    //
    // speed increments defines the increase/decrease of the acceleration
    // between current scroll speed and data-scroll-speed
    //
    var speed_increment = 0.01;
    //
    // maximum scroll speed of the elements
    //
    var data_scroll_speed_a = 2; // #sloganenglish
    var data_scroll_speed_b = 5; // #image-ul
    //
    //
    //
    var increase_speed, decrease_speed, target_speed, current_speed, speed_increments;
    $(document).ready(function() {
        $(window).on('load resize scroll', function() {
            var WindowScrollTop = $(this).scrollTop(),
                Div_one_top = $('#image-ul').offset().top,
                Div_one_height = $('#image-ul').outerHeight(true),
                Window_height = $(this).outerHeight(true);
            if (WindowScrollTop + Window_height >= (Div_one_top + Div_one_height)) {
                $('#sloganenglish').attr('data-scroll-speed', data_scroll_speed_a).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_a * speed_increment);
                $('#image-ul').attr('data-scroll-speed', data_scroll_speed_b).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_b * speed_increment);
                increase_speed = true;
                decrease_speed = false;
            } else {
                $('#sloganenglish').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
                $('#image-ul').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
                decrease_speed = true;
                increase_speed = false;
            }
        }).scroll();
    });

Answer 1

我在代码中看不到任何性能问题，尽管可以进行一些优化。而且我不认为jQuery可能是问题所在。

首先要注意的是CSS访问。访问height属性非常昂贵，因为它会导致浏览器处理管道的许多渲染步骤，如CSS Triggers中所示。

您正在检索滚动事件中两个元素的高度，这意味着它们将被多次计算。真的有必要吗？

如果您的#image-ul元素没有改变其高度，也许您只能在事件之外计算一次。

在窗口高度的情况下，我相信它不会在滚动事件中发生变化。如何创建不同的处理程序，一个用于需要（重新）计算窗口高度的事件，另一个用于不需要该计算的事件？

另一个值得注意的一点是，你设置了数据当前滚动速度＆＃39;和数据速度增量＆＃39;属性始终具有相同的常量值。没有变化，没有未设置。真的有必要吗？

实际上，目前尚不清楚你在做什么。您的性能问题可能在其他地方。

慢滚动切换没有jQuery？

1 个答案: