What is straight out? What kind of performance optimization is it? This article will analyze it step by step with the process from entering the URL in the browser to displaying the final page, and will summarize the actual application practice in mobile QQ web.
Mode 1-Common Mode
From the user’s input of the URL to the display of the final page, this model can be simply divided into the following 5 parts
-
The user enters the url and starts to pull the static page
-
After the static page is loaded, parse the document tags and start to pull CSS (usually CSS is placed in the head)
-
Then pull the JS file (generally the JS file is placed at the end)
-
When the JS is loaded, it starts to execute the JS content, makes a request and gets the data
- Render data and resources to the page to get the final display effect
The specific flow chart is as follows
This form of processing should occupy the majority. However, it is easy to find that a problem is that the number of requests is large and the front and back dependencies are large. For example, the data request must be initiated when the JS is loaded and executed, and the user can display the final page after waiting for the data to come back. This strong dependency makes the first screen rendering time of the entire application much longer.
Mode 2-Data straight out
In mode 1, at point 1, when the user enters the url, the server will directly return html without any other processing, and request data from the server at point 4. Then, the same is requested to obtain from the server. If the requested data is placed on the server in the first point, and the obtained data is spliced into HTML and returned, then the data request time on the front-end page can be reduced. This is Mode 2-what the data does is straightforward, and the processing method is very simple
-
The user enters the url and requests the data required by the page before the server returns HTML
-
Splice the data to HTML and return it to the front end together (you can insert the script tag to add the data to the global variable, or put it in the data attribute of a tag, such as <body data-serverData ='{list:[1,2 ,3]}' >)
- In the front-end JS code, judge whether the data has been obtained on the server side, directly take the data to render the page, and no longer make data requests
It can be seen in the flow chart below that in this mode
Compared with mode 1, this mode reduces the time-consuming gap between the two modes to request data. How much is this gap?
Initiate an HTTP network request process
DNS解析（100~200ms可以缓存）
|
|
建立TCP链接 (三次握手100~200ms )
|
|
HTTP Request( 半个RTT )
|
|
HTTP Response( RTT 不确定优化空间 )
Note: RTT is the abbreviation of Round-trip time, which means the time it takes for a data packet to be sent to return.
HTTP requests are sent from the front and back ends. What is the gap?
From the above HTTP network request process, it can be seen that it takes time to establish a complete request return, especially when external network users make HTTP requests, due to the influence of network and other factors, the network connection and transmission will spend a lot of time. For data pull on the server side, even if it is the same HTTP request, because the backends are on the same intranet, the transmission is very efficient. This is the bulk of the source of the gap and the just need for optimization.
Mode 3-straight out (server rendering)
In mode 2, data requests that depend on the loading of the JS file to be initiated are moved to the server, and the data is returned along with the HTML. Then wait for the JS file to be loaded. JS combines the data provided by the server with HTML to generate the final page document.
Data requests can be placed on the server, and the combined processing of data and HTML can also be done on the server, thereby reducing the waiting time for loading JS files. This is the mode 3-straight out (server rendering), the main processing is as follows
-
Get the data on the server and combine the data with the page template, and render it into the final HTML on the server
- Return to the final HTML display
As can be seen from the figure below, the first screen display of the page no longer needs to wait for the JS file to come back, optimization reduces this time
Through the above mode, the time-consuming optimization of the 3rd and 4th points in the mode 1-common mode, can we continue to optimize?
In the case of a small page document, CSS can be inlined into HTML, which is an approach to optimize the amount of requests. Straight out is slightly different is that what needs to be considered is the size of the document finally rendered by the server, and within the scope, CSS files can also be inlined into HTML. In this case, the CSS acquisition time is optimized, as shown below
summary
Straight-out can optimize the common mode to one HTML request, speed up the rendering time of the first screen, use server-side rendering, and optimize the SEO problems that are difficult to overcome for front-end rendering. Regardless of whether it is simple data output or server-side rendering, the performance optimization of the page can be greatly improved. The following will explain from the actual application.
Take the direct data optimization of mobile QQ home-school group as an example
Due to the tight launch time of the project, a simple method of direct data output was used in the first optimization to optimize the first screen rendering time. The specific processing is the same as the mode 2 data direct output method. The difference is that the KOA-based Xuanwu direct output service developed by AlloyTeam is used as the middle layer between the front end and the server. The form is as follows
Using this middle-tier method, the front-end and back-end separation method can still be used in the project development process, and the page request is directed to this middle-tier service after the development is completed. The middle-tier service mainly does the above-mentioned mode 2-data straight out processing
-
Use front-end files and call the data pull interface prepared by the server
- Combine the data with the front-end file and return it to the request source
Since the middle-tier service and the specific server are deployed on the same intranet, their direct data interaction is very efficient, so as to achieve the optimization described in Mode 2-Data Direct Out.
On the other hand, as a middle-tier Xuanwu direct-out service through the company’s L5 load balancing service, it is perfectly compatible with the direct-out and non-direct-out versions, that is, when the direct-out service hangs up, the non-direct-out version can also be used smoothly to ensure basic users. Experience can also better support A/BTest.
Performance data
The simple data method has also ushered in a big performance improvement. Compared with the pre-optimized version, the mobile QQ home school group list page has an optimization of about 650ms, an increase of about 650ms. 35% performance.
to sum up
When the front and back ends are not separated, the method of using the back end to render the template is consistent with the effect of the straight-out solution described in the article. After the front and back ends are separated, this idea is downplayed. The development of Node allows more front ends to start doing back ends. Things, the straight-out approach has also been paid more and more attention.
The wheels of history are rolling forward, and the straight-out plan seems to have returned to the original point of server-side rendering, but it is actually spiraling upward on the basis of the previous. With more ability, you can have more thinking. I hope that the front-end will become more and more powerful. No, react-native also allows the front-end to start working on the client~
postscript
The mobile Q family school group uses the React + Redux + Webpack architecture. Since it is React, you must not ignore the React isomorphism (server-side rendering). I will summarize the specific practice of React isomorphism directly in another article. Click to view Web performance optimization server-side rendering React isomorphism straight out ( https://github.com/joeyguo/blog/issues/9 )
For the front-end routing mentioned at the beginning of the article, those interested in the implementation principle of routing can also click to view the front-end routing implementation and react-router source code analysis