Web page optimization from "Press ENTER to page display"

The picture is the information in Baidu Console.log.

Note

Level is limited. Hope to criticize.

Objective

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

Now it's finally a little embryonic. Think about how to make a Web page the fastest exhibition today, the user's eyes,

Think of the front-end of a myriad of frameworks, exactly how the combination is good, write up good, build up good, show up fast,

And don't talk about jquery. Bootstrap. Angularjs Vuejs,reactjs. Expressjs (Nodejs). Requirejs,seajs and so on how to combine it well?

Starting from the beginning thinking, very many large companies of a question. After pressing the ENTER key, go to the Web page to show it. What the hell is going on?

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 server receives the request. Processing business, querying data, returning pages

5. The browser gets the page and parses it

6. Parsing DOM structure, parsing CSS, parsing JS, showing after parsing is complete, triggering domcontentloaded

7. Continue loading the page with multimedia content, compared to tablets. Record complete, trigger load

The 1-6-Step page has been shown. 7 Loading the picture.

Web Tuning Tools

There are a lot of web tuning tools, such as Ali. Webmaster Tools, ETC.,

Today just to say simple tools, firebug network view, Chrome also has similar networks,

Firebug's network view is mainly 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 the uikoo9.com is the process of multiple requests,

The parcel asks for the domain name 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 at a time.

Every js,css in a webpage is 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 comparison

can see that

1 more time-consuming, explain the blocking: the browser avoids the same address at the same time to initiate too many connection requests. Easy is judged to be 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 be able to optimize

2.-4, find a good domain name resolver (dnspod) + Good CDN. It's easier than that.

5, waiting for a response, in fact, is the server to do processing, query data, business computing, optimization can consider non-blocking IO, multi-threading, caching, SQL optimization and so on. This article skips

6. Receive data, see below

Receive data optimization

Page data is nothing but js,css, pictures. For static files such as multimedia, optimizations that can be made are:

1.js. CSS Compression (dev-->min)

2. Image compression. Picture merge (Sprite chart)

3. Picture alone Cdnserver (seven Qiniu)

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

Come and see what happens.

Start by pressing ENTER. Began a journey of requests,

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

Returns the HTML DOM from the domain name request in the most-started address bar and parses 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 to put the CSS in the head. JS put to the end of body

3. Compressed HTML to reduce the size of HTML text

JS optimization

1. Reduce the size of JS by subdividing the module

The so-called modularity, for example, you need to use Bootstrap,bootstrap has a lot of components, such as 1.js,2.js,.

。 , 100.js

A page you just introduced 1-2.js

b page you just introduced 3-4.js

So every page of JS is very small

2. Using the cache

Another direction is to introduce all bootstrap. This is only slow for the first time.

Read the cache every time, later on the page faster

The pros and cons of the above two

CSS optimization

Similar to the JS optimization. Modular, Cache

Picture optimization

1. Font icon

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

2. Sprite Chart

When you have to use a picture. Small icons that do not change frequently are put together and pressed into a sprite chart

3. Compression

Under the premise of guaranteeing the display effect. To compress

Static file Optimization (JS,CSS. Picture

1. Separate server

Place static files on a separate server

2.cdn

Add CDN to static file server

3. Server-side compression and caching

The server is compressing at once and caching

End,by uikoo9.com

Web page optimization from "Press ENTER to page display"