HTML parsing

In the browser rendering engine, there is an HTML parser that converts the HTML byte stream into a DOM structure.

The HTML parser parses as much data as the network process loads (it doesn’t wait for the entire HTML document to load)

General process:

  1. The byte stream is converted into tokens through a word splitter
  2. Parse the token into a DOM node
  3. Add a DOM node to the DOM tree

What happens to JS and CSS when parsing HTML

Conclusion: JS is fully blocking, CSS is semi-blocking.

If a script tag or an external JS file is encountered, parsing of the DOM and loading of other resources will be blocked because JS scripts may modify the DOM structure.

If a CSS file is encountered, parsing of the DOM will not be blocked, but loading of JS will be blocked because the latest styles may be relied on in the JS script. It also blocks the rendering of the page, and the browser doesn’t show anything until the CSSOM tree is built, because pages without CSS are usually messy and unusable.

Browser preloading

While the script is executing, it is not safe to build the DOM. But we can still go ahead and parse the HTML and see what resources it needs. This is the pre-parsing that many browsers now support.

While the script is executing, it continues to parse the HTML, find the files, and download them in parallel in the background. When the script is finished, the files may have been downloaded and ready to use. While scripts can change THE HTML structure, resulting in some “predictive” waste, it’s not that common, and pre-parsing can lead to performance gains.

prefetch

It allows the browser to fetch resources and store them in the cache, telling the browser that a resource may be used in the future and that the browser will load them at idle time.

Classification of Prefetch:

  • DNS prefetch
  • Link prefetch
<link rel="prefetch" href="..." as="script">
Copy the code

Prerender: Very similar to Prefetch, optimizes resource loading to navigate to the next page. The difference is that prerender renders the entire page in the background.

<link rel="prerender" href="..." >

preload

Declare a resource to the browser that needs to be loaded ahead of time, and execute it as soon as the resource is actually needed.

<link rel="preload" href="..." as="style">or<script>
	const link = document.createElement('link');
  link.rel = "preload";
  link.href = '... ';
  link.as = 'style';
  document.head.appendChild(link);
</script>
Copy the code

The differences between the three

  • Differences between browser preparsing and preload

    Browser preparsing, which can only preload HTML declared resources. But the preload directive actually overcomes this limitation by allowing preloading of a resource defined in CSS and JavaScript and deciding when to apply the resource.

  • Difference between preload and prefetch

    Preload focuses on the current page and loads resources with higher priority. Prefetch focuses on the resources that will be loaded on the next page and loads at low priority.

Priorities of different resources

A resource has five priorities: Highest High Medium Low Lowest

In general, HTML/CSS takes the highest priority, followed by font font resources, and then image resources (present in viewport > not present in viewport).

  • For prefetch resources, the priority is Lowest, Lowest by default
  • For preloaded resources, the priority can be specified by as or type (such as passas="style"Specifies, even if the resource is not a style file)
  • Requests without AS are treated as asynchronous requests

Use case

  • Preload font files using preload
  • Preload the content of the second screen in onLoad so that users can scroll to see the content of the second screen faster
  • Analyze the links on the page and load the resources of the next hop page using Prefetch
  • Predict user behavior, such as on a product list page. If the user hovers over an item for more than a period of time, preload the resources needed for the product details page

The resources

Optimize your application with Preload/Prefetch

What are Preload, Prefetch and Preconnect?