update

Wrote the updated article from the negative step of the beginning of the performance optimization, welcome to pay attention to browse, if you have a harvest, I hope you can star about my blog

background

After developing a good page, how to make the page run faster and better is an important indicator to distinguish the technical level and vision of a program ape. So when you’re in an interview, you’re always asked the question, how do you optimize performance?

If you are at this moment is the mind a blank, or like me before, or a rote past experience, a compression code, packaging code, Sprite, CDN, event agent, that means you are on the performance optimization is the lack of a whole system of the master, the performance optimization is only in the heard of a way to the stage is added to it. There is no way to optimize performance.

In the past week, I have accumulated some experience and thinking after crazy interview and information query. I would like to share it with you at this golden time of recruitment. I hope you can gain something from it. If you find something, please follow and star’s blog, Github

What is performance optimization

From the front end, performance optimization can be divided into two directions. From the user’s perspective, one is that the page loads quickly, the other is that the page is smooth to use. Therefore, the exploration of performance optimization can be divided into two directions: page loading time and page running efficiency

How long it takes from the time the browser opens to the time the page is rendered

Yes, this is a familiar question. Interviewers often ask what happens between the time the browser opens and the time the page is rendered. There are many answers to this question on the Internet, and I will not repeat them in detail. The main process is:

Browser resolution -> query cache -> DNS query -> establish a link -> server processing request -> server sends a response -> client received the page -> HTML-> Build a rendering tree -> Start to display content (white screen time)-> first screen content loading complete (first screen time)-> user interaction (DOMContentLoaded) )-> Complete (load)

Obviously, if we’re going to optimize load times, we need to think about each of these steps, summarize them, and avoid moving a little bit east and a little bit west.

Page load time monitoring

There is a good saying, If You Can’t Measure It, You Can’t Manage It. Before we can optimize these parts, we need to know how to monitor how much time is spent on them.

We recommend PerformanceTiming to get a lot of data related to page loading. More commonly used are

DNS resolution time: domainLookupEnd - domainLookupStart TCP connection establishment time: connectEnd - connectStart Blank screen time: DomContentLoadedEventEnd - navigationStart  loadEventEnd - navigationStartCopy the code

If you don’t use this API, you can start with the time the server renders back, or the time the SPA route jump leaves, and end with events like domContentLoaded, Load, etc. Or just go to Google Analytics. There are a lot of ways, I won’t go into detail.

Key points of server optimization

The backend can be optimized for caching, DNS query time, link time, request processing time, response time, etc.

I won’t go into caching.

DNS query time can be optimized using HTTPDNS or DNS preloading, domain name convergence and other means. I also wrote an article about DNS and CDN

The focus of establishing connections is on long connections and link reuse, keep-alive, long-polling, HTTP-straming, websocket or any other protocol you have written, or better yet, http2 directly. In order to optimize the link, the front end also needs to use CDN, Sprite map, code combination and other means for resources.

There are also many points that can be optimized for server processing requests. It is worth noting that when the mobile terminal accesses the PC page and needs to jump to the mobile terminal page, it should use the 302 redirect on the server side instead of the front-end redirect. Another option is to enable HSTS, which requires the browser to use HTTPS for subsequent access, reducing unnecessary HTTP redirects to HTTPS, and preventing SSL stripping attacks to improve security.

When the server sends a response, you can use transfer-encoding =chunked to return multiple responses. For details, check bigPipe. You can also reduce the size of cookies and so on.

Key points of front-end optimization

The front end can be optimized for white screen time, first screen event, interchangeable time, load completion time.

– To be continued

Blog post links to Web Performance Optimization (I), Github, welcome star and Follow, thank you!

If you have time, you can also read my article. “Should also help