Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to improve the performance of Web". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Why is web performance so important?

It's really important!

Sites that respond faster will give users a better experience. In theory, a good experience equals good user satisfaction. Faster, it also means that users can hopefully visit your site more quickly before they give up. There are many reasons for giving up: the page takes too long to load, users lose interest, browsers crash, and so on. Improving performance can reduce the abandonment rate and bring significant benefits to the website.

Runtime performance refers to the speed at which the web application responds to user input, such as clicking to delete images.

Factors affecting the performance of Web

Runtime performance is affected by many factors:

From the efficiency of the algorithm used to complete the specific function to the optimization method

From optimization or deficiency of interpreter and browser rendering engine to effective memory management and CPU utilization

The choice between synchronous and asynchronous design time can have an impact on performance.

Runtime performance is a more subjective feeling. Today, let's share the editor's tips on performance optimization from three angles.

Angle 1: when we enter a URL in the address bar of the browser, we open a new network thread, DNS parsing, TCP connection and HTTP request and response, which inevitably depend on the network environment, network delay, network instability and other factors. All we can do is to reduce network requests as much as possible in order to reduce the network consumption caused by network threads.

Angle 2: there are also some reasons for browsers. Mainstream browsers include IE, Chrome, Safari, Firefox, Opera and so on. Different browsers have different JS engine performance and different user experiences. For example, it is well known that kernels of IE8 and below perform poorly.

Angle 3: excluding the network, browsers and other external factors, the main impact on the performance of web is the page itself. As a developer, the part that performance optimization can control is the page, including page size, page structure, JS, CSS, and so on.

In view of the factors involved in the page loading process of the above three points, here are some simple discussions and optimization methods.

Tips for performance optimization

1. Reduce the number of HTTP requests:

1) Resource size is important, not only related to download time, but also because IPv4 and IPv6 protocols stipulate that the * value of an IP packet is 65535 bytes. An IP package is a request, so you can get an equation:

According to this formula, we can control the resources as small as possible. You can use automated build tools such as gulp to automatically merge JS files, compressed files, and pictures.

2) avoid redirection: redirection indicates that further action by the client is required to complete the request, and the request time will be extended. So you should use the most complete and direct address when typing URL, such as www.baidu.com instead of baidu.com.

3) use caching mechanism: there are database cache, server cache (reverse proxy and CDN cache), browser cache.

two。 Picture lazy load

If there are a lot of pictures on the page, you can use lazy loading. Only the images on the * screen are loaded, and the corresponding images are loaded when the user scrolls to access the following content. The method is to replace the picture with a very small placeholder map, download the placeholder map only once, store the src of the original picture in another attribute, and judge that when the picture is about to enter the visual area, the path will be assigned to src and the picture will be downloaded for display. Here is a simple example:

3. Code optimization

1) Page structure: CSS is placed at the top of HTML content, and JavaScript is placed at the bottom of HTML content. You can use preload to resolve the DNS of a resource in advance. Because browsers read content from top to bottom, the location where the resources are placed affects the access speed of the site. For example, if you put the script tag in front of the HTML content, the browser will first call the JavaScript interpreter to parse the JS, and then render the rest of the HTML content. For users, what they can see is the HTML content, so 1) doing so will lead to a delay in page usability. In addition, CSS decorates the page nodes, if the CSSOM is laid out before it is built, and when the CSSOM is built, if the CSS modifies the layout of the nodes, it will be rearranged, and the layout needs to be recalculated and drawn.

2) JavaScript optimization: for example, reduce the operation of DOM, reduce rearrangement and redrawing, reduce scope chain search, be careful to use eval function and so on. The optimization of JS code and (below) CSS mainly requires front-end developers to have a clear understanding of the principles of page rendering, basic knowledge and good programming habits.

3) CSS optimization: for example, reducing the use of wildcards'*', extracting common styles to enhance reusability, accurate selectors can reduce matching time, and moderate use of inline styles.

This is the end of "how to improve Web performance". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.