Шаблон проектирования ленивой загрузки хорошо известен каждому инженеру-программисту и разработчику, и нам в Walla!News (крупнейшем новостном сайте Израиля) нужен был лучший механизм ленивой загрузки, чем тот, что мы нашли в сообществе открытого исходного кода.

Наиболее распространенной библиотекой отложенной загрузки является jquery_lazyload с более чем 5 тысячами звезд на Github, в современной веб-системе нам не нужен jQuery (отметьте это: http://youmightnotneedjquery.com), поэтому мы попытались создать лучшую отложенную загрузку. механизм загрузки.

Общий сценарий

Каждый раз, когда мы, инженеры-программисты, сталкиваемся с проблемой, мы пытаемся понять наихудший сценарий, на этот раз я попытался понять обычное использование редакционных веб-сайтов.

Пользователи обычно загружают вашу веб-страницу в ее начале и прокручивают вниз, я начал создавать стек элементов по их положению в дереве DOM, который содержит все элементы, которые должны быть загружены, единственный прослушиватель событий, который я реализовал, был на событии прокрутки , для каждого события прокрутки алгоритм был прост:

while (true)
    if (stack.peek().top + delta > scrollHeight)
        stack.pop().show();
    else
        break;

Причина, по которой я потратил много времени на предварительную обработку (вычисление вершины всех элементов), заключается в том, чтобы как можно быстрее определить, должен ли элемент отображаться в этой итерации.

Ведра

Когда я предложил попробовать это на реальных веб-сайтах, я понял, что положение элемента не совсем соответствует его положению в дереве DOM, поэтому я попробовал подход с сегментами.

bucket sort — это особый тип сортировки, я разделил веб-страницу на сегменты и в рамках предварительной обработки рассортировал элементы по сегментам. теперь в каждой итерации прослушивателя событий прокрутки код выглядит так:

while (true)
    if (bucketsStack.peek().top + delta > scrollHeight)
        bucketStack.pop().elements.forEach(el => el.show());
    else
        break;

при таком подходе мы свели к минимуму количество операций, которые нам нужно выполнить в каждом событии прокрутки, чтобы обеспечить максимально быструю прокрутку.

летний

В итоге я получил сверхтонкий механизм ленивой загрузки, который я назвал Snorlax, и да, мы встроили в него поддержку IE8.

Нам удалось уменьшить пропускную способность изображений в Walla!News на ~›10% (что означает большую экономию денег) по сравнению с jquery_lazyload, наши страницы работают быстрее, а прокрутка кажется более естественной.

Можете попробовать: https://wallacode.github.io/snorlax/