Two or three sides _ page performance

Title: What are the ways to improve page performance?

(Not only the following five, there are other bases to add their own)

1. Merge resources to reduce HTTP requests

(And enable Gzip compression, they are actually a kind of content, is compressed resource merge, equivalent to the resource file smaller, this is a kind of)

2. Non-core code asynchronous loading == “what are the methods of asynchronous loading ==” What are the differences between these asynchronous loading

3. Use browser cache *== “what is the classification of cache ==” what is the principle of cache

(Using the browser cache is a very straightforward way to improve page performance. If you don’t use it, then your resource compression and other methods are not critical. The browser cache is the most important step you can take to improve page performance.)

4. Use the CDN *

(CDN to accelerate the resource is very fast, which belongs to the optimization of the network, for example we used in the web page n use js n used n CSS images, how to let customers use the fastest time to get the resource request to come over, in addition to the first step we said resource files smaller, transmission in the process of the smaller, the important use of CDN is also, Download files from the server, especially when the page is opened for the first time. The browser cache does not help. The CDN effect is very obvious in this case.

5. Pre-resolve DNS

<meta http-equiv=”x-dns-prefetch-control” content=”on”>

<link rel=”dns-prefetch” href=”//host_name_to_prefetch.com”>

(The following dnS-prefetch is DNS prefetch, which takes place between the browser entering the URL and the browser actually rendering. The first step is DNS prefetch. When multiple domain names are involved in your page, DNS prefetch is very obvious. How to pre-resolve DNS is to use this link statement. If your page starts with HTTPS, many browsers will disable DNS pre-resolution by default. If your page starts with HTTPS, many browsers will disable DNS pre-resolution by default. The first statement is to force the DNS pre-parsing to be turned on. This sentence will be used in the interview process. You will be surprised to learn that you can answer the link statement.

The following is a detailed explanation of 23:

Asynchronous loading:

1. Asynchronous loading mode

1. Dynamic script loading

Create a tag with document.createElement, and then load the tag into either the body or the head, dynamically loading it into the document

2.defer

Adding this property to a script when loading a JS is done asynchronously, as is async below.

For example <script SRC =”./a.js” charset=” utF-8 “defer></script>

3.async

2. The difference between asynchronous loading

1. Defer will be executed after the HTML has been parsed. If there are more than one, it will be executed in the order of loading

(Defer might load first, but it won’t be executed until the HTML has been parsed, which is why asynchronous loading is important; If you have two jS that both defer, they will be executed in the order you loaded them, and you can only do one thing at a time.

2. Async is executed immediately after loading. If there are more than one async, the execution order is independent of the loading order

(Note that when there are multiple scripts, the order of async execution is independent of the loading order.)

Browser cache :(normally asked in an interview)

1. Cache classification

(there is your resource files in the browser cache backup/copy, namely the online request for something such as a picture back cached in my local, on computer disk, browser next time a request is to directly read from the disk, and won’t go to request the image’s address, this is the cache)

1. Strong cache

(Before absolute or relative time, the browser does not communicate with the server, the browser does not ask the server, directly from the browser copy for the page)

When we request a file, the HTTP response header carries one or two things (depending on the server configuration). One is Expires, which is called an expiration time, which is a key-value, which is Expires, and which is Thu,21 Jan 2017 23:39:02 GMT, The time on the client may be different from the time on the server. The time on the client may be the time on the server to which the server is delivered. The time on the client may be different from the time on the server to which the server is delivered. So that’s why later we added a cache-control, also a key-value, key is cache-control, value is max-age=3600, value is relative time, whether your client and server have the same time or not, It ends up in the relative time of the client, which is 3600 hours seconds (s), which means that after I get the resource, I don’t ask the server again for 3600 seconds, and I get the cache directly from the browser for that time.

If both times are delivered on the server, which one shall prevail? Remember to use the latter (that’s the rule)

Expires

Expires:Thu,21 Jan 2017 23:39:02 GMT

Cache-Control

Cache-Control:max-age=3600

2. Negotiate cache

(The browser finds a local copy of the file, but is not sure whether to use it, and asks the server if the file is available and expired.)

There are four cases of a negotiated cache

Last-Modified If-Modified-Since

Last-modified is the Last time it was Modified. When I get the file, the browser will add last-Modified to the HTTP header of the file, Value Wed,26 Jan 2017 00:35:11 GMT, when the strong cache is invalid, the browser is not sure if the file has changed, it should carry the Last time you gave me which time, If-modified-since (Wed,26 Jan 2017 00:35:11 GMT) If- modified-since (Wed,26 Jan 2017 00:35:11 GMT) If-modified-since is what I brought to the server when I requested it (because the server is comparing it), so back and forth.

One drawback is that my modification time has changed, but my content has not changed, so using this method is also changed, because the content has not changed can be retrieved from the copy. The following Etag addresses this problem

Last-Modified:Wed,26 Jan 2017 00:35:11 GMT

Etag If-None-Match

This Etag can be understood as a hash value. When the server gives you the resource, it gives you an Etag value, and when the browser comes back to the server and asks if I can use the resource again, It adds an if-none-match value over HTTP and then a value (the same value as the original Etag sent by the server to the client). The advantage of Etag is that you can pull something out of the browser cache and use it if the modification time changes but the content remains the same.

When an interviewer asks you what HTTP headers are relevant to browser caching? (Tencent asked)

Expires, cache-control, last-Modified, if-Modified-since, Etag, if-none-match

Why is caching not covered in the HTTP protocol, because caching is intended to improve page performance

The interview is an hour to an hour and a half, and the interviewer will ask you based on your resume and your experience on the project, and if you do, the interviewer will most likely ask you what you do