Недавно Google Chrome Labs запустилаquicklink, чтобы реализовать предварительную выборку связанных ресурсов. Основываясь на представленных идеях реализации, в этой статье будет дополнительно рассмотрено, что могут сделать фронтенд-инженеры с точки зрения предварительной загрузки.
1. Что такое QuickLink?
QuickLink - это легкая библиотека инструментов, которая улучшает последующую скорость путем предварительной нагрузки ресурсов. Цель состоит в том, чтобы улучшить скорость загрузки последующих страниц, которые пользователи посещают во время процесса просмотра.
Когда мы говорим о оптимизации производительности, мы будем склонны сосредоточиться на текущем пользователе для доступа к этой странице, сжав размер ресурса, сократить ненужные ресурсы, ускорить аналитический способ расширения страницы для повышения скорости доступа пользователя; и QuickLink с другой идеей: я будет чувствовать себя очень гладким предварительно загруженным, чтобы помочь вам (получить) следующим, скорее всего, использовать ресурсы, фактически используемые для этого после ресурса (ссылка).
- Как предварительно загрузить указанный ресурс? (Предварительно загружаемый)
- Как определить, должен ли быть загружен ресурс? (предустановленная стратегия)
Давайте объединим исходный код быстрой ссылки, чтобы увидеть, как решить эти две проблемы.
Примечание: здесь и далее термины «предварительная загрузка»/«предварительная выборка» относятся к предварительной выборке.
2. Принцип реализации быстрой ссылки
2.1. Как предварительно загрузить указанный ресурс?
<link rel="prefetch" href="/my.little.script.js" as="script">
Следовательно, для данного URL-адреса его можно предварительно загрузить с помощью следующих четырех строк кода:
const link = document.createElement(`link`);
link.rel = `prefetch`;
link.href = url;
document.head.appendChild(link);
Однако мы должны столкнуться с проблемами совместимости. Подсказки ресурсов, то есть низкая версия мобильного терминала.
расстроить планы.既然如此,我们就需要一个类似 prefetch shim 的方式:在不支持 Resource Hints 的浏览器中,使用其他方式来预加载资源。对此,我们可以利用浏览器自身的缓存策略,“实实在在”预先请求这个资源,这也形成了一种资源的“预获取”。而最方便的就是通过 XHR:
const req = new XMLHttpRequest();
req.open(`GET`, url, req.withCredentials=true);
req.send();
Такой прокладки также завершен. Наконец, как я могу обнаружить, поддерживает ли браузер Prefetch?
мы можем пройтиlink
атрибута relList элементаsupport
метод проверки поддержки предварительной выборки:
const link = document.createElement('link');
link.relList || {}).supports && link.relList.supports('prefetch');
Комбинируя эти три части кода, формируется простой префетчер:Определите, поддерживать ли предварительную выборку в подсказках ресурсов, используйте ее, если она поддерживает, в противном случае отступите и используйте XHR для загрузки..
Стоит отметить, что между использованием подсказок ресурсов и использованием XHR для предварительной загрузки ресурсов есть некоторые важные различия.в проектеТакже были упомянуты некоторые из них (в основном различия в производительности и конфликты с поведением других браузеров). Еще момент, что выполнение предвыборки в Resource Hints полностью определяется браузером, в черновике есть очень очевидная фраза - пользовательский агентSHOULDпринести. Таким образом, не все предварительно загруженные ресурсы фактически не могут быть предварительно загружены. Напротив, подход XHR имеет более высокий «успех». ЭтоВарианты оптимизации производительности, реализованные Netflixтакже упоминается в.
Не по теме: Quicklink использует fetch API для загрузки высокоприоритетных ресурсов. Это связано с тем, что браузер установит приоритет для всех запросов, а запросы с высоким приоритетом будут выполняться первыми.
fetch
Высокий приоритет в Chrome, средний приоритет в Safari.
2.2 Как определить, нужно ли предзагружать ресурс?
Что касается способа предварительной загрузки ресурсов, то далее необходима стратегия предварительной загрузки.
На самом деле это вопрос мнения. Например, чтобы дать вам ссылку напрямуюhttps://my.test.com/somelink
, без какой-либо справочной информации, боюсь, вы совершенно не представляете, нужно ли вам предварительно загружать его. Так как же quicklink решает эту проблему? Другими словами, какую стратегию использует quicklink для предварительной загрузки?
quicklink использует более интуитивную стратегию: предварительно загружайте ресурсы только в окне просмотра. Это тоже легко понять, большинство загрузок ресурсов и переходов по страницам в интернете сопровождаются кликами пользователей, и если он не находится в поле вашего зрения, вы не сможете кликнуть. Это необходимое условие в какой-то степени.
Таким образом, проблема, которую мы должны решить, если мы судим, является ли ссылка в видимой области?
В прошлом, для такого рода проблемы, что мы сделали, было мониторироватьscroll
событие, а затем определить положение элемента, чтобы «узнать», вошел ли элемент в область просмотра. Традиционная библиотека ленивой загрузки изображенийlazysizeи т.д. также используют эту стратегию.
document.addEventListener('scroll', function () {
// ……判断元素位置
});
Примечание. В настоящее время lazysize также имеет реализацию, основанную на IntersectionObserver.
Конечно, особое внимание необходимо уделить производительности мониторинга прокрутки, например, используя перехват, избегая принудительной синхронной компоновки,passive: true
и т. д., чтобы облегчить проблемы с производительностью.
Но теперь у нас есть новое решение для реализации этой функции —IntersectionObserver
:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const link = entry.target;
// 预加载链接
}
});
});
// 对所有 a 标签添加观察者
Array.from(options.el.querySelectorAll('a'), link => {
observer.observe(link);
});
IntersectionObserver
IntersectionObserver
a
правильно
IntersectionObserver
IntersectionObserver
Введение Статьи.
Но, как показано ниже,IntersectionObserver
Проблемы совместимости, поэтому использование QuickLink нуждается в несоответствующем браузереpolyfill.
В настоящее время мы закончили принцип и простую реализацию двух основных частей быстрой ссылки (метод предварительной загрузки и стратегия предварительной загрузки). Вся быстрая ссылка очень лаконична, это в основном ядро быстрой ссылки. Все, что осталось, — это проверка параметров, дополнительные функции правил и т. д.
Не по теме: для дальнейшего обеспечения производительности в быстрой ссылке используется
requestIdleCallback
Страницы запросов в свободное времяa
Пометьте и установите наблюдатель. правильноrequestIdleCallback
Студенты, которые не знают, могут посмотретьЭта статья от Google.
3. Пока? Нет, мы можем больше
На этом реализация быстрой ссылки в основном завершена. Оглядываясь назад, можно сказать, что quicklink на самом деле дает нам представление о «предзагрузке» для достижения оптимизации производительности (грубо говоря, это похоже на обмен трафика на опыт). Я упоминал этот метод ранее, но его можно разделить на две части:
- Как предварительно загрузить определенный ресурс? (предварительно загруженный способ)
- Как определить, должен ли быть загружен ресурс? (предустановленная стратегия)
На самом деле, кажется, что это место состоит из двух частей. Например, как гарантировать, что prefetcher (предварительный загрузчик ресурсов) может быть выше, и текущее использование запасного плана в предварительно загруженном факте XHR не может быть кэшировано, ограничения ресурсов пострадали и так далее.
Кроме того, мы также можем поговорить об этом блоке здесь.
Поскольку quicklink — это легкая библиотека функций, связанных с бизнесом, поэтому она использует простую, но в некоторой степени эффективную стратегию: предварительно загруженные ссылки на ресурсы в поле зрения. Однако в реальном производстве мы сталкиваемся с более сложной средой, более сложным бизнесом, но нам потребуется более точное суждение о предварительной загрузке. Таким образом, мы можем отделиться от префетчера quicklink в качестве прелоадера и использовать собственную стратегию, реализованную частично, например:
-
Более точная предварительная загрузка в сочетании с журналами доступа и точечными записями. Например, мы можем судить о соотношении страниц B, C и D со страницы A по журналу доступа, записи управления и соотношении страниц B, C и D со страницы A, чтобы установить пороговое значение. превышен порог, считается, что пользователям, которые посещают страницу А, будет легче получить доступ к следующей, тем самым предварительно загружая ее.
-
NetflixКак описано на страницах Xuanguan / содержимое страницы входа в систему, оптимизировать загрузку, предварительно загруженный основной пакет (основной ресурс) и последующий мастер. Некоторые сайты, такие как Home, в основном статические, вы можете использовать собственный JavaScript плюс встроенный ключ CSS, чтобы ускорить загрузку, предварительно загрузить ряд основных ресурсов React, Vue и других пользователей для доступа раньше.
-
и т.п.
Вышеупомянутые сценарии являются лишь ориентиром. Я думаю, что будет больше и лучших сценариев, которые помогут нашим фронтенд-приложениям «взлететь». И мы можем использовать некоторые инструменты построения, платформы сбора и анализа данных для автоматического извлечения и внедрения стратегий, а также постоянно оптимизировать весь процесс и эффект предварительной загрузки.
напиши в конце
Предварительно загруженные, подсказки ресурсов и так давно. QuickLink, предлагая жизнеспособный вариант, вернул его на горизонты каждого, чтобы показать нам другую сторону оптимизации производительности. Я надеюсь, что вы понимаете QuickLink, но также имейте свои идеи и вдохновение.
Я считаю, что с эволюцией браузеров, стандарты продолжают развиваться, разработчики интерфейсов постоянно улучшают требования к производительности, чтобы наши продукты были красивее.
Что ж, этот выпуск «Roaming Github» уже здесь. В этой серии мы будем время от времени смотреть, общаться и узнавать об интересных проектах на github, не только для изучения некоторых технических моментов, но и для понимания технического мышления автора.Приглашаем к вниманию заинтересованных партнеров.