The problem 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?
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
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) If we want to optimize the load time, we need to think and summarize each of these steps, instead of moving a little bit east and a little bit west.
Page load time monitoring
Before we can optimize these parts, we need to know how to monitor how much time is spent on them.
You can get a lot of page-loading data. More commonly used are
DNS resolution time: domainLookupEnd – domainLookupStart
TCP connection establishment time: connectEnd – connectStart
ResponseStart – navigationStart
Dom render completion time: domContentLoadedEventEnd – navigationStart
Page onload time: loadEventEnd – navigationStart
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.
DNS query time can be optimized using HTTPDNS or DNS preloading, domain name convergence and other means.
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.