Common site performance Optimization tools

First, understand the Web?

HTML creation structure, CSS expression style, JS control behavior, three together to form a user visible actionable Web page.

However, the loading speed of different Web pages and the execution speed of users ' requests are very varied.

HTML resources, CSS Resources, JS resources, multimedia resources, data resources, and so on, will affect the loading speed and execution speed of the page.

But a good web page is not only simple and easy to understand, but also pleasing to the eye and content.

So the front-end programmers not only have to write code, but also to focus on site optimization and site security, more to ensure the user experience.

Second, what is the purpose of optimization?

1. From the user's perspective, optimization allows the page to load faster, respond more quickly to the user's actions, and provide a more user-friendly experience.
2. From a service provider perspective, optimization can reduce the number of page requests, or reduce the bandwidth of requests, can save considerable resources.
In short, proper optimization not only improves the user experience of the site, but also saves considerable resources.

Three, the performance optimization means

1. HTML Optimization Method

1) Minimize the number of IFRAME

2) Try not to scale the image in HTML (large pictures will be wasted bandwidth, try to use small pictures directly)
2. CSS Optimization method

1) Place the style stylesheet on top of head

2) Avoid using CSS expressions (expression)

3) Replace @import with <link>

4) Optimize CSS Spirite

5) Cut JavaScript and CSS (using grunt, gulp compression CSS)

3. JS Optimization method

1) Reduce the number of DOM elements

2) Place the script at the bottom of the page

3) Reduced DOM access

4) Asynchronous Request Callback

4. Website Optimization

1) Minimize the number of HTTP requests----(file merge, such as CSS Sprites, image Map)

CSS sprites is an effective way to reduce image requests. Put all the background images into a picture file, and then through the CSS Ackground-position properties to display the different parts of the picture;

2) file Compression package----purpose is to reduce the volume of file downloads

3) Use the cache----set the HTTP header cache related fields, do further optimization (the principle is very simple, can cache the more the better, can cache the longer the better. ）

4) Use CND (content distribution network) to host resources

Common site performance Optimization tools