Как использовать флаг `passive` для прослушивателей событий прикосновения и колеса мыши?

Аватар пользователя VasyOK VasyOK 6 мая в 16:51

Допинал один сайт до 92 по pagespeed, но все равно остались надписи красным. Например:

Чтобы повысить производительность при прокрутке страницы, используйте флаг `passive` для прослушивателей событий прикосновения и колеса мыши.
…advagg_js/js__E7A4Y….js:3:8808 (mysite.com)
…advagg_js/js__Zgokv….js:73:4366(mysite.com)

Что с этим делать? Как туда поставить флаг?

Комментарии

Аватар пользователя bsyomov bsyomov 6 мая в 18:10

Теоретически, надо отключать advagg, смотреть где именно рекомендуется, переписывать соответствующий JS.
Практически, надо понимать, что это всё только рекомендации, им совсем не обязательно следовать. Мало того, это общие рекомендации, не учитывающие специфику конкретного приложения, в определённых случаях, их выполнение может не приносить пользу, а даже вредить. Или не иметь смысла. Или результат выполнения может не стоить усилий.

В общем, надо понимать, что и зачем рекомендуют, и осознанно решать, а надо-ли оно вообще, а не тупо стремиться получить 100 попугаев любой ценой...

Аватар пользователя VasyOK VasyOK 6 мая в 20:34

Вот единственный скрипт, который на сайте от меня. Ему можно как-то задать флаг passive? Что это за флаг такой если не секрет.

(function($) {
    Drupal.behaviors.mythemeTheme = {
        attach: function(context, settings) {

            var $menu = $("#topbar");

            var
                acc = $(".acc-place"),              

            function accordion_behavior() {
                acc.accordion({
                    active: false,
                    collapsible: true,
                    heightStyle: "content",
                    header: ".acc-header"
                });
            }          

            function vertical_moove() {
                if ($(this).scrollTop() > 45) {
                    $menu.removeClass("default").addClass("fixed");
                } else {
                    $menu.removeClass("fixed").addClass("default");
                }

            }

            function horisontal_moove() {
                if ($(this).width() < 961) {
                    $menu.removeClass("desktop").addClass("mobile");
                    $(".logo, .contacts-place, .social").prependTo("#topbar .placer");

                } else {
                    $menu.removeClass("mobile").addClass("desktop");
                    $(".logo, .contacts-place, .social").prependTo("#preheader .placer");
                }
            }

            horisontal_moove();
            vertical_moove();
            accordion_behavior();

            $(window).resize(function() {
                horisontal_moove();
            });

            $(window).scroll(function() {
                vertical_moove();
            });

        }
    }
})(jQuery);

Аватар пользователя gun_dose gun_dose 6 мая в 21:35

В самой библиотеке jQuery используется непассивный обработчик скролла, так что всё тщетно))

Аватар пользователя VasyOK VasyOK 6 мая в 21:36

Что-то не особо понятно. У меня вроде бы всего 2 события в коде:

$(window).resize(function() {
                horisontal_moove();
            });

            $(window).scroll(function() {
                vertical_moove();
            });

Добавить им:

document.addEventListener('resize', resize, {passive: true});
document.addEventListener('scroll', scroll, {passive: true});

?
Или как?

Аватар пользователя gun_dose gun_dose 6 мая в 22:43
$(window).on('scroll', { passive: true }, function() {
    // твой код
  });

Довольно легко гуглится, между прочим.

Аватар пользователя VasyOK VasyOK 7 мая в 13:45

Заменил

 $(window).scroll(function() {
                vertical_moove();
            });

на

       $(window).on('scroll', { passive: true }, function() {
                vertical_moove();
            });

Отключил advagg.

Все равно пишет:
используйте флаг `passive` для прослушивателей событий прикосновения и колеса мыши.
Источник:
sites/all/modules/jquery_update/replace/jquery/3.1/jquery.min.js

Т.е. дело не в скриптах, которые пишу я, а в тех что использует jquery. Неужели ничего нельзя сделать?

Аватар пользователя gun_dose gun_dose 7 мая в 14:46

Я же писал об этом выше. Ты можешь вообще не использовать обработчики скролла, но из-за использования jQuery пэйджспид будет писать эту ошибку.

Аватар пользователя VasyOK VasyOK 7 мая в 16:19

Ну допустим я не буду использовать jQuery.
Все равно ж останутся: Слик, Колорбокс, Суперфиш. Они то от jQuery зависят...

Шо ж делать? Страдать!

Аватар пользователя gun_dose gun_dose 7 мая в 18:22
2

Не использовать ничего, что использует jQuery, потратить на это 100500 часов работы, добиться оценки 100 из 100, а потом в первый день заказчик поставит вебвизор и загонит все оценки в минуса Biggrin

Аватар пользователя VasyOK VasyOK 7 мая в 21:59

Заказчик поставил цель обогнать по пейджспиду конкурента. У конкурента 95 у нас 92.
Понял - пока "прослушивание событий" в далеких планах.

Аватар пользователя bsyomov bsyomov 12 мая в 12:52

Это совершенно бесполезная цель, и тебе как разработчику стоило бы объяснить заказчику почему, ну и самому понимать. Smile

Аватар пользователя bsyomov bsyomov 12 мая в 21:41

Без работы не останешься, и мнение о себе изменишь в лучшую сторону. Покажешь себя профи, а не "лишь бы заработать". И получишь потом более вкусные заказы - у нас отлично работает "сарафанное радио". Как-то так. Smile

Аватар пользователя VasyOK VasyOK 7 мая в 14:01

И еще одна неприятная особенность. Все такипосле замены
 $(window).scroll(function()
на
$(window).on('scroll', { passive: true }, function()
пейджспид проседает с 92 до 86

Аватар пользователя ivnish ivnish 7 мая в 14:03

Уверен, что из-за этого? Pagespeed постоянно дает разные результаты, потому что эти самые результаты зависят от многих факторов

Аватар пользователя VasyOK VasyOK 7 мая в 14:10

Уверен. По несколько раз проверял с разными вариацаями. Смена события скрола снижает на скорость на 3 - 6 баллов.