CSS
SVG

Назначение приоритетов в сети

Internet Explorer 11 назначает приоритеты для сетевых запросов, чтобы вы могли быстрее начать использовать веб-страницу. Кроме того, разработчики могут изменить порядок загрузки ресурсов веб-страницы.

Назначение приоритетов для сетевых запросов

Здесь вы узнаете, как IE11 назначает приоритеты загрузки страниц и как отложить загрузку отдельных ресурсов.

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

Веб-страница может содержать ресурсы многих типов:

  1. корневой документ веб-страницы;
  2. таблицы стилей CSS;
  3. шрифты WOFF;
  4. библиотеки сценариев;
  5. изображения, загруженные с помощью обработчиков событий onload;
  6. синхронные запросы XMLHttpRequest (XHR);
  7. асинхронные запросы сценариев (например, indexedDB, рабочие веб-процессы, API файлов и др.);
  8. асинхронные запросы XHR;
  9. объекты HTML5 audio и video;
  10. элементы Microsoft ActiveX и другие элементы управления, загружаемые с помощью элемента object;
  11. отложенный сценарий JavaScript (defer="true").

В этом списке определены приоритеты каждого запроса по типам. Начиная с версии IE11 отдельные сетевые запросы получают приоритет в зависимости от типа, обычно в указанном порядке.

Для каждого ресурса может потребоваться несколько сетевых запросов. На уровне управления подключениями (TCP) в предыдущих версиях Internet Explorer все запросы обрабатывались одинаково, независимо от типа загружаемого ресурса или его контекста. Фоновые изображения и шрифты обрабатывались так же, как связанные таблицы стилей. Запросы с фоновых вкладок считались равнозначными запросам с вкладки переднего плана.

Начиная с IE11 отдельные сетевые запросы получают приоритет в зависимости от типа, обычно в представленном ниже порядке. Например, запрос от корневого документа веб-страницы имеет более высокий приоритет по сравнению с производными запросами JavaScript.

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

IE11 также назначает приоритеты с учетом контекста запросов:

  1. Запросы с веб-страницы на вкладке переднего плана
  2. Запросы от содержимого, загруженного в элементах iframe на вкладке переднего плана
  3. Запросы с веб-страниц на фоновых вкладках
  4. Запросы содержимого, готового к отображению

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

Задержка загрузки ресурсов

С помощью атрибута lazyload разработчики могут отложить загрузку отдельных ресурсов. Это позволяет максимально ускорить загрузку важного содержимого, а менее важные ресурсы можно загрузить позже. (Если нет конкуренции за подключение или ресурсов с высоким приоритетом, то ресурсы с низким приоритетом загружаются в обычном порядке.) В таком случае производительность веб-страницы по ощущениям пользователей возрастает, так как пользователи видят, что действия выполняются быстрее, особенно это заметно на сложных веб-страницах.

Эти элементы поддерживают атрибут lazyload:

Если для lazyload задано значение "true", то запросы на уровне подключений, требующие отображения этого элемента, обрабатываются после приоритетных запросов.

Пример использования lazyload:


<img src="example.jpg" lazyload="1" />

Справочник по API

lazyload

 

 

Показ:
© 2015 Microsoft