What happens when I press ENTER to the page display? Plot

The picture is the information in Baidu Console.log.

Note

The level is limited, hope to criticize correct.

Objective

From the beginning to do uikoo9.com, always want to how to optimize, version has been in the iteration,

Now finally a little embryonic, and recently began to think how to make a page the fastest display in front of the user,

Think of the front-end of the numerous framework, in the end how to combine just good, write up good, build up good, show up fast,

And do not talk about Jquery,bootstrap, Angularjs,vuejs,reactjs,expressjs (Nodejs), Requirejs,seajs, and so how to combine just good?

Traced back to the beginning of thinking, a lot of big companies, an interview problem, from the press ENTER key, to the page to show, exactly what went through?

What happened?

What happened from pressing ENTER to the page display?

1. Press ENTER

2. The browser resolves the domain name to IP (omit details, Hosts,dns)

3. The browser initiates an HTTP request to the server via IP (omitting complex procedures and protocols)

4. The service side receives the request, processes the business, queries the data, returns the page

5. The browser gets the page and parses it

6. Parse DOM structure, parse CSS, Parse JS, show after parsing, trigger domcontentloaded

7. Continue loading the page multimedia content, examples, record, trigger load

The 1-6-Step page has been shown, 7 loading the image.

Web Tuning Tools

There are many web tuning tools, such as Ali Test, webmaster tools, ETC.,

Today it's just a simple tool, a firebug network view, and Chrome has similar networks,

Firebug's network view is primarily about the process of loading a webpage, and the time-consuming of each request.

Speaking from a picture

As can be seen, the process of loading uikoo9.com is the process of multiple requests,

Parcel access domain request HTML, to parse DOM request Css,js, to request a picture,

is a separate request over and over again.

Request

A Web page is a request to the server,

Each js,css in the Web page is also a request,

So what are the steps of a request, see, divided into:

1. Blocking

2. Domain Name resolution

3. Establish a connection

4. Sending the request

5. Waiting for a response

6. Receiving data

Time-consuming comparisons

Can be seen,

1 more time consuming, explain the blocking: the browser avoids having to initiate too many connection requests to the same address at the same time. Easily be judged as a DDoS attack or a low-level crawler.

2-4 takes less time,

5-6 more Time consuming

How to optimize

1, doesn't seem to optimize

2.-4, find a good domain name resolver (dnspod) + Good CDN, this is relatively simple

5, waiting for response, in fact, is the service side do processing, query data, business computing, optimization can consider non-blocking IO, multi-threading, caching, SQL optimization and so on, this article skipped

6, receive the data, see below

Receive data optimization

Page data is nothing but js,css, pictures, multimedia and other static files, can do the optimization has:

1.js,css Compression (Dev-->min)

2. Picture compression, image merging (sprite)

3. Picture Individual CDN Server (seven Qiniu)

4. The service side compresses and caches the static files again

Let's see what happens.

Starting with the press of Enter, you start a journey of requests,

Each request is included (domain name resolution, establish connection, send request, wait for response, receive data),

From the domain name request in the first address bar, return the HTML DOM and parse it,

To request Js,css, pictures and other static files, are the request loop again and again.

HTML optimization

1. Use HTML5 thin label

2. Try putting CSS in the head, JS at the end of the body

3. Compressed HTML to reduce the size of HTML text

JS optimization

1. Reduce the size of JS by subdividing the module

So-called modularity, for example, you need to use Bootstrap,bootstrap has many components, such as 1.js,2.js, ... , 100.js

A page you only introduce 1-2.js

b page you only introduce 3-4.js

So that every page of JS is very small

2. Using the cache

The other direction is to introduce all the bootstrap, so that only the first time is slower,

Read the cache every time, later on the page faster

The pros and cons of the above two

CSS optimization

Similar to JS optimization, modularity, caching

Picture optimization

1. Font icon

Do not use the picture where you can use the font icon, see Iconfont

2. Sprite Chart

Have to use the picture, not often change the small icons put together, pressed into a sprite diagram

3. Compression

Under the premise of guaranteeing the display effect, the compression

Static file Optimization (JS,CSS, image)

1. Individual servers

Place static files on a separate server

2.cdn

Add CDN to a static file server

3. Server-side compression and caching

The server is compressing at once and caching

End,by uikoo9.com

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

What happens when I press ENTER to the page display? Plot