🔙 previous site – page parsing and processing

On the last leg of the journey, we introduced the basic page parsing mechanism, which avoids unnecessary blocking and optimizes parsing performance by controlling resource loading order and script loading.

As mentioned in the previous section, in addition to parsing the PAGE DOM, the browser also makes a request for the static resources contained in the page, and when the request comes back, it executes or consumes the resources. Let’s look at this stage in detail.

First of all, from the macro to understand:

1. General principles

This section covers all kinds of common static resources: JavaScript scripts, CSS stylesheets, images, fonts, and so on. The optimization measures of different resources are both related and different. The focus and means of optimization will be introduced according to the dimensions of various resources.

But let’s start with some analysis of the global dimension. In fact, in general principle, the optimization ideas of all kinds of resources are generally similar, including but not limited to:

  • Cut down on unnecessary requests
  • Reduce package size
  • Reduce application resource consumption
  • Using the cache

In order to better understand where all kinds of optimization implementation strategies come from, let’s initially expand on the above ideas.

1.1. Reduce unnecessary requests

The core idea is to reduce the number of requests, because browsers have concurrent limits on same-origin requests (e.g., Chrome is 6), so under HTTP/1.1, too many requests can cause them to be queued. A typical scenario is some gallery type site where the page loads and requests dozens of images.

At the same time, the congestion control of TCP/IP also causes the transmission of TCP/IP to have the characteristics of slow start. The packet transmission rate is low when the connection is established and gradually increases. Therefore, sending too many “small” requests may not be a good practice either.

Reducing unnecessary requests can be divided into several dimensions:

  • For the content that does not need to be used, in fact, do not need to request, otherwise equivalent to doing useless work;
  • For content that can be lazily loaded, it is not necessary to load it now, but better to load it before it needs to be used.
  • For resources that can be merged, resource merging is also a method.

1.2. Reduce package size

Inclusion size also has a direct impact on performance. Obviously, at the same rate, the smaller the package, the lower the transmission time, and the better the overall page loading and rendering performance.

Common ways to reduce package size include:

  • Use compression techniques appropriate to current resources;
  • Avoid stuffing unneeded content into the response package.

1.3. Reduce application resource consumption

Most of the above focus on the efficiency of page resource loading, in fact, sometimes the browser to execute or use resources is expensive. For example, executing a CPU intensive computation in JavaScript, or performing frequent DOM operations, can make JavaScript execution a major performance problem. Although today’s engines such as V8 are fast, improper handling can still lead to a loss of performance.

In addition, things like CSS selector matching, image parsing and processing are CPU and memory intensive. These aren’t usually performance killers, but there are certain feature situations where knowing them can help.

1.4. Leverage caching

Do you remember where we started on this trip? That’s right, caching.

In the first leg of the journey, we introduced the multi-level caching strategy for browsers accessing a URL. Don’t forget that these static subresources are also network requests, and they can still take advantage of the full caching process described earlier. Caching can often be a very effective tool to help you solve performance problems.

Since caching was covered in detail on the first site, this section will only be added for resource types.

2. Performance optimization for various resources 🚀

The above principles can guide us to optimize all kinds of resources. Below, I will introduce the optimization points and optimization measures involved in detail in terms of resource types.

If you read this in one sitting, you may be tired. Why don’t you take a stretch, relax, and refresh yourself.

If you are ready, let’s go on 👇

  • JavaScript to optimize
  • CSS optimization
  • Image optimization
  • The font to optimize
  • Video optimization

“Performance Tuning” series

  1. Bring you a full grasp of front-end performance optimization 🚀
  2. How can caching be used to reduce remote requests?
  3. How can I speed up requests?
  4. How to speed up page parsing and processing?
  5. What is the general idea of static resource optimization? (this paper)
    1. How to optimize performance for JavaScript?
    2. How to optimize the PERFORMANCE of the CSS?
    3. Graphics are great, but they can also cause performance problems
    4. Do fonts also need performance optimization?
    5. How to optimize performance for video?
  6. How can you avoid performance problems at run time?
  7. How can preloading improve performance?
  8. The end of the

At present, all the content has been updated to ✨ fe-performance-Journey ✨ warehouse, and the content will be synchronized to the nuggets one after another. If you want to read the content as soon as possible, you can also go directly to the repository.