Шаблон проектирования ленивой загрузки хорошо известен каждому инженеру-программисту и разработчику, и нам в 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/