preload prefetch

preload-prefetch.html

http://prgssr.ru/development/tehniki-prefetchinga-dlya-uluchsheniya-proizvoditelnosti-sajtov.html
https://m.habr.com/ru/post/445264/

# ============ Типы префетча ================

1.
<link rel="dns-prefetch" href="//cdnjs.com/">

Эта техника уведомляет браузер, что на странице используются ресурсы с другого адреса 
и браузер может заранее преобразовать URL в IP-адрес. 
Можно использовать для cdn-сервисов, виджетов и пр. стороннего API


2.
<link rel="preconnect" href="http://css-tricks.com">

Этот метод очень похож на префетчинг DNS, но кроме разрешения DNS данный метод начинает TCP-соединение 
и согласование TLS при защищенном соединении.

3.
<link rel="prefetch" href="image.png">

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

4.
<link rel="subresource" href="styles.css">

LINK rel=subresource” предоставляет новый тип связи ссылок с отличной от LINK rel=prefetch семантикой. 
В то время как rel=prefetch задает приоритет для загрузки ресурсов для других страниц, 
rel=subresource дает раннюю загрузку ресурсов для текущей страницы.

Итак, если ресурс потребуется на текущей странице или же потребуется максимально скоро, 
лучше использовать subresource, а в остальных случаях prefetch.

5.
<link rel="prerender" href="http://css-tricks.com">

Это как открытие URL в скрытой вкладке — все ресурсы скачиваются, строится DOM, 
раскладывается макет страницы, применяются стили и исполняются скрипты. 
И если пользователь переходит по указанному адресу, страница открывается мгновенно. 
Google Search использует этот механизм уже несколько лет (Instant Pages). 
Microsoft реализовал пререндеринг в Bing в IE11.

6.
<link rel="preload" href="image.png">

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


http://prgssr.ru/development/dlya-chego-stoit-ispolzovat-predzagruzku.html

# ============  <link rel="preload"> ================

У предзагрузки есть атрибут as, позволяющий браузеру делать вещи, которые невозможны с префетчингом и субресурсом:
- Браузер может задать правильный приоритет ресурсов, в соответствии с которым они будут загружаться — не будет ни задержки важных ресурсов, ни упорного выкачивания второстепенных.
- Браузер может обеспечить соответствие ресурса директивам политики безопасности контента и не выходить на ненадежный сервер.
- Браузер может отправить соответствующие заголовки Accept на основе типа ресурса (например, image/webp при выборке изображений).
- Браузер знает тип ресурса и поэтому может определить, может ли он использоваться при последующих запросах к тому же ресурсу.
- Есть событие load

Загрузка “поздно-обнаруживаемых” ресурсов

<link rel="preload" as="font" type="font/woff2" crossorigin href="font.woff2">


Динамическая загрузка без запуска

<script>
    var link = document.createElement("link");
    link.href = "myscript.js";
    link.rel = "preload";
    link.as = "script";
    document.head.appendChild(link);
</script>

<script>
    var script = document.createElement("script");
    script.src = "myscript.js";
    document.body.appendChild(script);
</script>


Асинхронный загрузчик в разметке

<link rel="preload" as="style" href="async-style.css" onload="this.onload=null; this.rel='stylesheet'">

<link rel="preload" as="script" href="async-script.js"
onload="this.onload=null;
        var script = document.createElement('script');
        script.src = this.href;
        document.body.appendChild(script);">


Загрузка с медиа-запросом (пока не поддерживается)

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

Можно задать в HTTP-заголовках
Link: <thing_to_load.js>;rel="preload";as="script"
Link: <thing_to_load.woff2>;rel="preload";as="font";crossorigin

Проверка поддержки
<script>
    var DOMTokenListSupports = function(tokenList, token) {
    if (!tokenList || !tokenList.supports) {
        return;
    }
    try {
        return tokenList.supports(token);
    } catch (e) {
        if (e instanceof TypeError) {
            console.log("The DOMTokenList doesn't have a supported tokens list");
        } else {
            console.error("That shouldn't have happened");
        }
    }
    };

var linkSupportsPreload = DOMTokenListSupports(document.createElement("link").relList, "preload");
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}
</script>