Condividi tramite

Network prioritization

  • Articolo

Internet Explorer 11 prioritizes network requests so you can start using a webpage more quickly. Developers can also influence the order that webpage resources are loaded.

Prioritizing network requests

Here, you’ll see how IE11 prioritizes page loading and how to delay individual resources so they load later.

While some webpages can be loaded with a single request, most require multiple requests, due to the items in the page. Images, stylesheets, and script libraries are loaded from separate requests from the one used to load the original webpage.

A webpage can contain many types of resources:

  1. The root document of the webpage
  2. CSS stylesheets
  3. WOFF fonts
  4. Script libraries
  5. Images loaded using onload event handlers
  6. Synchronous XMLHttpRequest (XHR) requests
  7. Asynchronous script requests (such as indexedDB, Web Workers, File API, and others)
  8. Asynchronous XHR requests
  9. HTML5 audio and video
  10. Microsoft ActiveX and other controls loaded using the object element
  11. Deferred JavaScript (defer="true")

This list prioritizes each request by type. Starting with IE11, individual network requests are prioritized by type, generally in this order.

Each resource can require multiple network requests. At the connection management (TCP) layer, earlier versions of Internet Explorer treated each request the same, regardless of the type of resource being loading or its context. Background images and fonts were treated the same as linked stylesheets. Requests from background tabs were likewise treated the same as requests from the foreground tab.

Starting with IE11 individual network requests are prioritized by type, generally in the order shown. For example, requests from the root document of a webpage have a higher priority than deferred JavaScript requests.

When the number of pending requests is greater than the number of available connections, requests are handled according to their priority. If there is a choice between optimized connections and non-optimized connections, high priority requests are given optimized connections before lower priority requests.

IE11 also prioritizes requests based on context of the request:

  1. Requests made by the webpage in the foreground tab
  2. Requests made by content loaded in iframe elements in the foreground tab
  3. Requests made by webpages in background tabs
  4. Requests for pre-rendered content

As you might expect, requests made from the foreground tab are given a higher priority than requests from background tabs.

Delaying resource loading

Developers can use the lazyload attribute to delay individual resources from loading. Doing so helps important content load as quickly as possible while less important resources may load later. (If there are no contested connections or higher priority resources, low priority resources load normally). This can improve the perceived performance of a webpage because the user sees things happening more quickly, especially with complex webpages.

These elements support the lazyload attribute:

When lazyload is set to "true", the connection levels requests required display the element are processed after higher priority requests.

Here's how to use lazyload:

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

API reference

lazyload