Small summary of front-end optimization rules

(1) Minimize HTTP requests reduce HTTP requests

Minimize the number of images, CSS, Script, Flash, and so on, which can reduce the number of HTTP requests and thus reduce response time. Combine several JS, CSS files into a file, the page picture is written into CSS, and the page image is processed by CSS sprites technology.

(2) Make Ajax cacheable cache Ajax

In order to improve the response efficiency, the real-time response Ajax data is cached before the browser receives the new data.

(3) Post-load components delay loading component

When the page is initialized, load the necessary components first, and then load the other, Yui Get utility is a convenient way to include JS and CSS, Yui image loader can help to postpone loading the collapsed part of the picture.

(4) Preload components pre-loaded

When a user wants to access the next page, using preloaded page content (like, style sheets, and scripts) requested when the browser is idle can greatly improve access speed.

(5) Reduce the number of Dom Elements in the DOM element

Use labels reasonably and efficiently to structure pages, because complex page structures mean longer download and response times.

(6) Use a Content Delivery Network using CDN Technology

Content Delivery Network,cdn is made up of a series of Web servers dispersed across geographically diverse geographic locations that are specified primarily by the proximity of the user to the network, which improves the speed of website content transfer.

(7) Gzip Components gzip compression

Almost all browsers have the ability to unzip the gzip format, compressing the HTTP response with Gzip to reduce the file volume and save the HTTP response time, thereby increasing the user experience.

(8) using Get for AJAX requests Ajax request with Get method

The Get method interacts with the server only once (sending data), and the Post is two times (sending the header and then sending the data).

(9) Put stylesheets at the top CSS

Allow the browser to see the full style of the site as early as possible.

Make JavaScript and CSS External JS and css outside the chain

Because JavaScript and CSS files can generate caches in the browser, using external files in real-world applications can improve page speed.

Put Scripts at the Bottom put JS on the bottom

After the site has been rendered, the function settings, of course, these JS to your loading process does not affect the performance of the content.

Small summary of front-end optimization rules