Where's the time?-Mobile Web first screen optimization practice

Where's the time?-Mobile Web first screen optimization practice

First screen time

Usability, one of the most important factors behind the user's use of your app;

Our PC access actually now the bandwidth is very good, hundred trillion light broadband, but on the mobile side is not the same, many users still use the traffic, GPRS. So, for the first screen time loading, the pressure is still pretty big;

What happened to our phone after we started an operation?

Here are the actions that occur before the data is returned, but as a front end, we don't seem to be able to move these things, and it's impossible to call the operator to help you customize a system.

This is what we're really going to do.-Rendering (WebKit)

To give you two optimization aspects, optimize the network and optimize rendering (high-performance JS, but many times we do not have the skills), in fact, optimize the network, we can improve for a few seconds, and optimize rendering, we are mostly millisecond, so network optimization is the focus, but sometimes we often can not move;

Optimization of Network layer

These steps, can be completed in 1 seconds, it is difficult, but when we make reasonable use of the cache and other technologies, it is still possible;

The above has a concept of RTT, employing words is a request round trip time

The following are the RTT times for some common networks

We can also use some common tools to test the network time-consuming;

Can see the parsing time of each JS, HTTP response time, TCP settling time

So what are we going to do?

We can start with the following aspects, which are classic usage scenarios, but we know we need to do this, but we should know why.

First, the first reduction in the number of requests? Why?

Request more, not to say will cause the background how much pressure, this is of course, on the one hand, from the RTT, each request will consume one RTT time, then the more request consumes the more RTT time;

For example, request a 5K css and a 200K picture, in addition to the request size is not the same, deep into the protocol, not the requested data one-time return of a package to you, because in order to prevent network congestion, there will be a window to limit the size of your package, so the proposed initial package control within 14k, is just the size of the TCP window.

Again, using the cache;

Then it is reasonable to arrange the order of requests, which requests must be loaded first, and which can be loaded later. How do we do that?

1. DNS Pre-parsing

2. Domain Name Convergence

Now that DNS resolution is time-consuming, each connection has to establish a link, then we can do so by reducing the domain address of Ajax to the backend and through the reverse proxy.

3. Link multiplexing

Because each time the number of links to establish 3 TCP handshake, through keep-alive, can ensure that the connection is not closed, the next request can send data directly, which can reduce the time of nearly 200ms, of course, will increase the memory consumption of some servers, to pre-expansion ; http2.0 has supported these features;

4. Resource Inline

In the first screen, some resources are decentralized development, in some simple pages, some content can be inline, or like some CSS page to wait until the HTML page parsing, then to parse the external CSS, can be done by packaging tools at the time of release;

5. Modular Development

The first point is on-demand loading, is the first screen display of things, which to load, which do not need to load, can be differentiated, and can be asynchronous to load, as a piece of the load, and not all loaded out of one step;

And then one is a rendering, here's an example; tab tabs below

We usually do this, we can first load some common things, and then through the route, to load the first screen can see the resources of the tab, which has the user interaction after the things can be loaded later;

But this will have a problem, sometimes our JS processing faster, but the CSS file processing faster, this will make the page is confusing, so you can use the asynchronous Packaging tool, CSS and JS packaged together

6. Server-Side rendering

A front-end separation of the project, through the AJAX request data, so that the rendering path of a page will pull very long, the page renders the HTML first, and then send the AJAX request in the rendering Js,js, wait until the data comes back to render, so no matter what kind of a minimum of 3 RTT request time; In the context of poor network environment, it is difficult to accept,

So we're back in the PHP era, and with server-side rendering, we can control the user and what's going to be packaged. You can know what data users need at once, plus the current NODEJS environment and react, which makes it possible to render something both in the front-end browser or in the server with string concatenation;

For example, in the infinite scrolling list, lazy loading of the picture, first do not assign the image to the SRC attribute, by inserting the DOM to calculate the visual area, in the visible area is assigned the value SRC, outside the visible area, to the scroll to deal with, will enter the visible area is assigned value;

7. Using the Cache

Resource Long cache: not by 304 to judge the cache, but by Max-age to do, through the MD5 naming files, and then through the automation of building tools to achieve;

Mainly talk about data-tier caching and data reuse;

Inspired by the client; The client will render the last cached data again, so the data cache design can be designed to

Before the data of the AJAX request is not back, use some of the configured false data, first put the pit stand, and then wait for the data on the line back, in the pit fill, so reduce the white screen time. This gives the user the feeling of faster, but not really fast, the interaction performance has really become better;

In some cases, not all of the data is loaded in, like stick and know, the display of some of the storage data, are with the ellipsis of the cached data, and so the user really point to open the post to load all the data. The data of each request is again overwritten with the original cache;

8. Offline Package

In fact, for some of the concurrency is relatively large, to the new year when the red envelope business, concurrency is a few billion. In this way, for some users who are often used, the offline package can be pushed to the past a few days ago, to download, through binary comparison, dynamic incremental update, without each download, so large concurrency, while downloading, bandwidth definitely explode, the server must explode.

9. What if I can't optimize it?

Turn chrysanthemum!!!

Where's the

time?-Mobile Web first screen optimization practice