The bottom line is this

Mobile client:

Keep individual files smaller than 25KB packaged content as segmented multipart documentsCopy the code

Image:

Image optimization CSS Sprite do not place zoomed images in HTML using the small, cacheable Favicon.icoCopy the code

javascript:

Put scripts at the bottom of the page use external JavaScript and CSS to compress JS and CSS to remove duplicate scripts reduce DOM manipulation and use efficient event handlingCopy the code

css:

Do not put style sheets in head do not use CSS expressions do not use link instead of @import do not use filterCopy the code

Page content:

Reducing the number of HTTP requests reducing DSN queries Reducing redirects Using Ajax requests Lazy loading preloading reducing dom elements dividing content into different domain names Energizing reducing ifame use avoiding 404 errorsCopy the code

The server

Use CDN to add Expires and Cache-control response headers to enable GZIP configure eTAG to output buffers early ajax requests use the GET method to avoid image SRC being emptyCopy the code

cookie

Reduce cookie size static resources use cookie domain namesCopy the code

Here are some specific measures:

Minimize HTTP requests:

Every piece of content on a web page is an HTTP request, and too many requests make the response slow. So you can merge images, you can merge JavaScript, you can merge CSSCopy the code

Using CDN (Content Delivery Network)

Next to you, place a copy server with good performance and smooth links, so that you can get the content in the shortest distance and the fastest speed.Copy the code

Add the expire/cache-control header

If nginx returns an EXPIRE response header field when the browser sends the request. The local expiration time of a resource exists on the local. Cache-control is one of the common headers in the HTTP protocol that controls the caching mechanism of pages.Copy the code

Enable Gzip compression

Send the file to the server after compression, and then transfer, and then decompress the browser. Reduce the number of files in circulation by making them smaller.Copy the code

Place CSS at the top of the page

Layers of style sheets, subsequent CSS, and higher-level CSS can overlap previous ones. CSS at the end of the page prevents the sequential display of the content of the page to avoid the recurrence of white space or selection problems, improve browser rendering, need to put CSS at the front. This way, when the HTML is reloaded, the CSS is already loaded, so there will be no white space or selection errors during rendering.Copy the code

Place the script at the bottom of the page

For example, if you write a script in an endless loop and place it in front of the body instead of at the end of the loop, you can put the script in front of the body instead of at the end. Then the rest of the content doesn't show up.Copy the code

Avoid using expression in the CSS

CSS expression: CSS expression such as: width: calc(100%-100px); Page display and zooming, page scrolling, and mouse movement all cause CSS expression to recalculateCopy the code

Put JavaScript and CSS in external files

// Separate - "reduce file size; Improve reusability; Maintainability // Reduce the number of requests in the uninstall page; Improve page rendering speed such as common.css externally. If you don't visit the latter often just apply the style with a page written inside or script and style content is minimal.Copy the code

Reducing DNS queries

// When www.a.com is opened for the first time, there must be a mechanism to convert www.a.com to 10.96.14.1.1de and a DNS lookup to find the location of www.a.com. The browser will automatically cache, which can reduce DNS queries, but the cache time is long, if the address of www.a.com changes will not be detected. Single-domain or multi-domain modes can be used. Multi-domain: images at img.a.com, JS at js.a.com, others at www.a.comCopy the code

Compress JavaScript and CSS

So formatting, js and CSS into a lump. Remove unnecessary whitespace, formatting, and comment subtracting method names and parameter names.Copy the code

Avoid redirection

301 Moved pearmanently the user's requested page will be Moved to b.com, and the user will send a request to b.com 302 Found. But not in the original location, so the server responds with a new address. Increased round-trip times between browser and server. Added HTTP requestsCopy the code

Remove duplicate scripts

Avoid page content display errors due to repetitive codeCopy the code

Configuring Entity Labels

Etag = Entity Tag, which belongs to the HTTP protocol and is supported by Web services. When a browser requests a resource, if the Etag of the request field is the same as that of the server, the resource has not changed, and 304 not Modified is returned. Browsers use caching.Copy the code

Using Ajax caching

Batch load and partial update POST are executed each time and are not cached. Get is not executed twice at the same address and can be cachedCopy the code

Reduce DOM manipulation

Because DOM manipulation causes rearrangement and redrawing, and dom and JS are actually two files, each time a connection is established, dom manipulation is reduced as follows: - If you need to access the same DOM more than once in a local method, store a reference to it - querySelectorAll() instead of getElementByXX(). - Use less HTML collections (arrays of classes) as collection traversal is more expensive than true array traversal. - Use event delegates to reduce the number of event handlers.Copy the code

Reduce the rearrangement

- Avoid setting a lot of style attributes - implement the animation of the element, its position property is best set to absoulte or fixed, this will not affect the layout of other elements, this is mainly reflected in the trigger BFC mechanism - do not use table layout, Because one element in the table triggers reflow, the entire table triggers reflow. Table layout: Auto; Or the table - layout: flex;Copy the code

The DNS resolution beforehand

If a tag on a page that starts with HTTP is enabled by default, DNS pre-resolution is enabled. <meta HTTP =' x-DNC -prefetch-contorl'> Enable DNS prefetch <link rel=' dnS-prefetch '>Copy the code