Нативная ленивая нагрузка для веб-платформы

Новая функция Chrome, получившая название «Blink LazyLoad», призвана значительно повысить производительность, откладывая нагрузку ниже-обратных изображений и сторонних </code> с. </p> <p> Цели этого смелого эксперимента состоят в том, чтобы улучшить общую скорость рендеринга контента, который появляется в окне просмотра пользователя (также известный как выше), а также уменьшить сетевые данные и использование памяти. ✨ </p> <div id="toc_container" class="toc_light_blue no_bullets"><p class="toc_title">Содержание статьи</p><ul class="toc_list"><li><a href="#-Kak-eto-budet-rabotat"><span class="toc_number toc_depth_1">1</span> ?? Как это будет работать? </a></li><li><a href="#-Realizatsiya-bezopasnoy-politiki-LazyLoad"><span class="toc_number toc_depth_1">2</span> ? Реализация безопасной политики LazyLoad </a></li><li><a href="#-Kak-naschet-obratnoy-sovmestimosti"><span class="toc_number toc_depth_1">3</span> ? Как насчет обратной совместимости? </a></li><li><a href="#-Vklyuchenie-LazyLoad"><span class="toc_number toc_depth_1">4</span> ? Включение LazyLoad </a></li><li><a href="#-Ssylki-i-materialy"><span class="toc_number toc_depth_1">5</span> ? Ссылки и материалы </a></li><li><a href="#-V-zaklyuchenie"><span class="toc_number toc_depth_1">6</span> ? В заключение </a></li><li><a href="#Svyazannye"><span class="toc_number toc_depth_1">7</span> Связанные </a></li></ul></div> <h3><span id="-Kak-eto-budet-rabotat"> ?? Как это будет работать? </span></h3> <p> Предполагается, что временная отсрочка менее важного контента резко улучшит общую воспринимаемую производительность. </p> <p> Если это предложение будет успешным, автоматическая оптимизация будет выполняться во время фазы загрузки страницы: </p> <ul> <li> Изображения и iFrames будут проанализированы для оценки важности. </li> <li> Если они считаются несущественными, они будут отложены или вообще не загружены: <ul> <li> Отложенные элементы будут загружаться только в том случае, если пользователь прокрутил область поблизости. </li> <li> Пустое изображение заполнителя будет использоваться до тех пор, пока изображение не будет извлечено. </li> </ul> </li> </ul> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'>  <div id="yandex_rtb_R-A-268541-2"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-268541-2", renderTo: "yandex_rtb_R-A-268541-2", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <p> Публичное предложение содержит несколько интересных деталей: </p> <ul> <li> LazyLoad состоит из двух разных механизмов: LazyImages и LazyFrames. </li> <li> Отложенные изображения и iFrames будут загружаться, когда пользователь прокручивается в пределах определенного количества пикселей. Количество пикселей будет варьироваться в зависимости от трех факторов: </li> <li> Как только браузер установит, что изображение расположено под сгибом, оно выдаст запрос диапазона, чтобы получить первые несколько байтов изображения, чтобы установить его размеры. Затем размеры будут использованы для создания заполнителя. </li> </ul> <p> Атрибут <code> lazyload </code> позволит авторам указывать, какие элементы должны или не должны быть ленивыми. Вот пример, который указывает, что это содержимое несущественно: </p> <pre rel="HTML"> <code class="language-html"> <iframe src="http://css-tricks.com/ads.html" lazyload="on">

Существует три варианта:

по — указывает на сильное предпочтение отсрочить выборку до тех пор, пока контент не будет просмотрен.
выкл. — немедленно получить этот ресурс, независимо от способности просмотра.
авто — Позвольте браузеру решить (имеет тот же эффект, что и вовсе не использовать атрибут lazyload ).

? Реализация безопасной политики LazyLoad

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

? Как насчет обратной совместимости?

На данный момент трудно сказать, могут ли эти оптимизации страниц вызвать проблемы совместимости для существующих сайтов.

Сторонние iFrames используются для большого количества целей, таких как реклама, аналитика или аутентификация. Откладывание или отсутствие загрузки критического iFrame (потому что пользователь никогда не прокручивает далеко) может иметь серьезные непредвиденные последствия. Страницы, которые полагаются на изображение или iFrame, загруженные и присутствующие, когда onLoad пожаров могут также столкнуться с серьезными проблемами.

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

? Включение LazyLoad

На момент написания статьи LazyLoad доступен только в Chrome Canary, за двумя обязательными флагами:

хром: // флаги / # включить-ленивым-изображения заряжания
хром: // флаги / # включить-ленивую-кадр загрузку

Флаги можно включить, перейдя к chrome: // flags в браузере Chrome.

? Ссылки и материалы

? В заключение

По мере того, как мы начинаем приветствовать следующего миллиарда пользователей в Интернете, мы с гордостью знаем, что мы только начинаем понимать сложность браузеров, возможности подключения и пользователей.

Нативная ленивая нагрузка для веб-платформы

? Реализация безопасной политики LazyLoad

? Как насчет обратной совместимости?

? Включение LazyLoad

? Ссылки и материалы

? В заключение

Связанные

Связанные записи

Поделитесь статьей!