From 4d3b1c2c79113786e001e3bec551205cd34f818a Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 21 May 2021 00:42:40 +0000 Subject: [CRON] sync translated content --- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 22 +- .../web/html/preloading_content/index.html | 244 +++++++++++++++++++++ files/ru/web/html/preloading_content/index.html | 243 -------------------- 4 files changed, 256 insertions(+), 254 deletions(-) create mode 100644 files/ru/orphaned/web/html/preloading_content/index.html delete mode 100644 files/ru/web/html/preloading_content/index.html (limited to 'files/ru') diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 3a6f075d2d..41b95be137 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -621,6 +621,7 @@ /ru/docs/Web/HTML/Element/стиль /ru/docs/Web/HTML/Element/style /ru/docs/Web/HTML/Global_attributes/dropzone /ru/docs/orphaned/Web/HTML/Global_attributes/dropzone /ru/docs/Web/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /ru/docs/Glossary/speculative_parsing +/ru/docs/Web/HTML/Preloading_content /ru/docs/orphaned/Web/HTML/Preloading_content /ru/docs/Web/HTML/Использование_HTML5_audio_и_video /ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /ru/docs/Web/HTML/Общие_атрибуты /ru/docs/Web/HTML/Global_attributes /ru/docs/Web/HTML/Общие_атрибуты/accesskey /ru/docs/Web/HTML/Global_attributes/accesskey diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 443e8c8308..e39169b70b 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -16562,17 +16562,6 @@ "BychekRU" ] }, - "Web/HTML/Preloading_content": { - "modified": "2020-10-15T22:11:40.984Z", - "contributors": [ - "warsan", - "alexa.poruch", - "Ilya-Zhulin", - "akochemasov", - "Skolpov", - "isatalkin" - ] - }, "Web/HTML/Quirks_Mode_and_Standards_Mode": { "modified": "2019-03-23T22:44:29.253Z", "contributors": [ @@ -25723,6 +25712,17 @@ "Akh-rman" ] }, + "orphaned/Web/HTML/Preloading_content": { + "modified": "2020-10-15T22:11:40.984Z", + "contributors": [ + "warsan", + "alexa.poruch", + "Ilya-Zhulin", + "akochemasov", + "Skolpov", + "isatalkin" + ] + }, "orphaned/Web/JavaScript/Guide/Об_этом_руководстве": { "modified": "2019-03-24T00:13:23.720Z", "contributors": [ diff --git a/files/ru/orphaned/web/html/preloading_content/index.html b/files/ru/orphaned/web/html/preloading_content/index.html new file mode 100644 index 0000000000..001c2bb8ef --- /dev/null +++ b/files/ru/orphaned/web/html/preloading_content/index.html @@ -0,0 +1,244 @@ +--- +title: Предзагрузчик контента - rel="preload" +slug: orphaned/Web/HTML/Preloading_content +translation_of: Web/HTML/Preloading_content +original_slug: Web/HTML/Preloading_content +--- +

Значение preload атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

+ +

В этой статье приведено основное руководство про работе с <link rel="preload">.

+ +

Основы

+ +

Чаще всего вы используете простой <link> элемент, когда загружаете CSS файлы со стилем вашей страницы:

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Однако, здесь мы будем использовать значение preload для атрибута rel, которое превратит тег <link> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:

+ + + +

Простой пример может выглядеть так: (смотрите наш JS и CSS пример из источника, и живой пример):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример пред-загрузки JS и CSS</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>прыгающие шарики</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <link rel="stylesheet"> и <script> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:

+ + + +

preload имеет и другие преимущества. Использование атрибута as для указания типа содержимого пред-загрузки позволит браузеру:

+ + + +

Какие типы контента могут быть предзагружены?

+ +

Разного типа контент можно предзагрузить. Вот основные атрибуты значения as:

+ + + +
+

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

+
+ +

Включение MIME-типов

+ +

Элементы <link> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута type и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.

+ +

См. полный исходный код, (а также пример живой версии видео).

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример пред-загрузки видео</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p> Ваш браузер не поддерживает видео в формате HTML5.
+        Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p>
+  </video>
+</body>
+ +

В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавное/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.

+ +

Выборки из разных источников

+ +

Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <link>.

+ +

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

+ +

Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода есть на GitHub (также смотрите его вживую):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Примеры веб-шрифтов</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут crossorigin для решения проблемы CORS.

+ +

Including media

+ +

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

+ +

Давайте посмотрим на очень простой пример (см. его на GitHub - исходный код и живой пример):

+ +
<head>
+  <meta charset="utf-8">
+  <title>Пример адаптивной предзагрузки</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Мой сайт</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).

+ +

Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).

+ +

Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.

+ +

Скрипты и предзагрузки

+ +

Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Подразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.

+ +

Чтобы выполнить его, вы можете использовать следующую конструкцию:

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.

+ +

Другие механизмы предзагрузки ресурсов

+ +

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <link rel="preload">:

+ + + +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
+ +

Совместимость с браузером

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Смотрите также

+ + + +

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

diff --git a/files/ru/web/html/preloading_content/index.html b/files/ru/web/html/preloading_content/index.html deleted file mode 100644 index 1327fbe8f5..0000000000 --- a/files/ru/web/html/preloading_content/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Предзагрузчик контента - rel="preload" -slug: Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content ---- -

Значение preload атрибута {{htmlattrxref("rel", "link")}} в элементе {{htmlelement("link")}} позволяет вам запросить данные через {{htmlelement("head")}} вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

- -

В этой статье приведено основное руководство про работе с <link rel="preload">.

- -

Основы

- -

Чаще всего вы используете простой <link> элемент, когда загружаете CSS файлы со стилем вашей страницы:

- -
<link rel="stylesheet" href="styles/main.css">
- -

Однако, здесь мы будем использовать значение preload для атрибута rel, которое превратит тег <link> в предзагрузчик для любого ресурса, который мы пожелаем. Для этого необходимо будет указать:

- - - -

Простой пример может выглядеть так: (смотрите наш JS и CSS пример из источника, и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки JS и CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>прыгающие шарики</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Мы сделали предзагрузку наших файлов CSS и JavaScript, чтобы они стали доступны для рендеринга страницы сразу же, как это потребуется. Этот пример отчасти банален, поскольку браузер, вероятнее всего, обнаружит элементы <link rel="stylesheet"> и <script> в одном чанке (блоке) с основным HTML, но преимущества более явно проявятся, если далее по странице будут обнаружены более объёмные ресурсы. Это могут быть:

- - - -

preload имеет и другие преимущества. Использование атрибута as для указания типа содержимого пред-загрузки позволит браузеру:

- - - -

Какие типы контента могут быть предзагружены?

- -

Разного типа контент можно предзагрузить. Вот основные атрибуты значения as:

- - - -
-

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

-
- -

Включение MIME-типов

- -

Элементы <link> могут принимать атрибут {{htmlattrxref("type", "link")}}, содержащий MIME-тип ресурса целевого элемента. Это особенно полезно при пред-загрузке ресурсов. Браузер использует значение атрибута type и начнёт его загрузку, если поддержка ресурса определена, иначе проигнорирует его.

- -

См. полный исходный код, (а также пример живой версии видео).

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример пред-загрузки видео</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p> Ваш браузер не поддерживает видео в формате HTML5.
-        Взамен - <a href="sintel-short.mp4"> ссылка на видео </a>.</p>
-  </video>
-</body>
- -

В этом случае браузеры, поддерживающие MP4, будут пред-загружать и использовать MP4, что, как мы надеемся, сделает видеоплеер плавное/отзывчивее для пользователей. Браузеры, не поддерживающие MP4, могут загружать версию WebM, при этом не получая преимуществ пред-загрузки. Это показывает, как пред-загрузка контента может сочетаться с философией прогрессивного улучшения.

- -

Выборки из разных источников

- -

Если настройки CORS ваших сайтов правильные, вы можете успешно пред-загрузить ресурсы разных источников, установив атрибут {{htmlattrxref("crossorigin", "link")}} в элементе <link>.

- -

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

- -

Используем этот случай в качестве примера, во-первых, загрузка шрифтов - действительно хороший вариант использования пред-загрузки, а во-вторых, - это проще, чем настраивать пример запроса с перекрёстным источником. Полный пример исходного кода есть на GitHub (также смотрите его вживую):

- -
<head>
-  <meta charset="utf-8">
-  <title>Примеры веб-шрифтов</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Легко узреть, что мы не только предоставляем подсказки типа MIME в атрибутах типа, но также предоставляем атрибут crossorigin для решения проблемы CORS.

- -

Including media

- -

One nice feature of <link> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept media types or full-blown media queries, allowing you to do responsive preloading!

- -

Давайте посмотрим на очень простой пример (см. его на GitHub - исходный код и живой пример):

- -
<head>
-  <meta charset="utf-8">
-  <title>Пример адаптивной предзагрузки</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Мой сайт</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Вы видите, что мы включаем media-атрибуты в наши элементы <link> так, чтобы узкое изображение пред-загружалось на устройство пользователя с узким экраном, а более широкое - на устройство с более широким экраном. Чтобы изображение к заголовку было в зависимости от результата - мы используем {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (подробности см. в разделе Тест медиавыражений).

- -

Это увеличивает вероятность того, что шрифт будет доступен к моменту завершения рендеринга страницы, что сокращает количество проблем с FOUT (вспышка нестилизованного текста).

- -

Обратите внимание, что это не должно ограничиваться изображениями или даже файлами одного типа - думайте масштабно! Возможно, вы могли бы предварительно загрузить, а затем отобразить простую диаграмму SVG, если пользователь находится на узком экране, где пропускная способность и ЦП потенциально более ограничены, или предзагрузить сложный фрагмент JavaScript, а затем использовать его для рендеринга интерактивной 3D-модели, если ресурсы пользователя более многочисленны.

- -

Скрипты и предзагрузки

- -

Ещё одна полезная вещь в этих предзагрузках, это то, что вы можете выполнять их полностью со скриптами, если необходимо. Например, мы сейчас создаём  экземпляр {{domxref("HTMLLinkElement")}}, затем включим её в DOM:

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Подразумевается, что браузер загрузит JavaScript файл, но, пока не будет его применять.

- -

Чтобы выполнить его, вы можете использовать следующую конструкцию:

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Это полезно, когда вы хотите загрузить скрипт в кеш, но применять его только тогда, когда это необходимо.

- -

Другие механизмы предзагрузки ресурсов

- -

Существуют и другие функции предварительной загрузки, но ни одна из них не подходит так, как <link rel="preload">:

- - - -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Further details of preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Definition of rel=preload.
- -

Совместимость с браузером

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Смотрите также

- - - -

{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}

-- cgit v1.2.3-54-g00ecf