Shulou(Shulou.com)06/03 Report--

This article introduces how to improve the performance of your website in web. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Is performance really important?

Performance is very important, as we all know. Why do we have to make slow websites to give users a bad experience? Hehe, let's get to the point.

HTML

one。 Avoid inline / embedded code:

1) inline: define styles in the style attribute of the HTML tag and Javascript code in attributes such as onclick

2) embedded: use tags to define styles in pages and Javascript code using tags

3) referencing external files: define href attributes in tags to reference CSS files, and define src attributes in tags to introduce Javascript files.

Although the number of http requests is reduced, the size of html is increased, which is very small compared to the overall size of 3. It is convenient for division of labor and maintenance.

two。 The style is above and the script is below:

Browser Diet hello

1) the style is in head, and the page is rendered very quickly, which makes the user feel that the page loads very quickly. On the contrary, you will first see the disordered layout of the page, giving people a bad feeling.

2) the script will affect the rendering or parallel loading of html, and the first screen is loaded, so users generally do not need to see the function, so it is better to use the script below. Try to load the script's property asynchronously: async

three。 Compressed html

To keep the code readable, the best way is to add comments and use indentation in the code.

But for browsers, none of this is important. Because of this, it is very useful to compress your HTML through automated tools.

Some bytes can be saved by removing extra white space, comments, and unwanted characters that have nothing to do with the structure of the content. Try gzip compression.

four。 Reduce dom nodes

Replace the omnipotent div with semantic tags.

V. "the influence of html Writing on gzip Compression ratio"

When writing tag attributes, it is best to have multiple attribute values of the same tag in the same order. You can make gzip compression faster.

CSS

one。 Compressed css

Compress css through automated tools, the same as compressing html. Repetitive code learns to refine.

two。 Merge multiple css

It is common to merge through cdn merger or the company's merger tools to effectively reduce the number of http requests.

three。 Rational use of css expressions

Not everyone can use css expressions properly. So give all the functions to javascript. Css, we need to take a break.

IMAGES

one。 Use css sprite

Integrate the small layers in psd into one layer, and the layout is complete. The layout should be tight. For some pictures with rough edges, you can set the color of the edges. You can also set png-8 to png-24 (ie6 filter processing)

two。 Replacing ordinary css sprite pictures with base64 picture coding

Before use:

.img {background-image: url ('image.png');}

After use:

.img {background-image: url (_ 'data:image/png;base64,iVBORw0KGgo');}

Base64 image encoding is only for individual images, not css sprite images, and supports mainstream browsers and above ie8. It is possible to reduce the number of http requests, but for html,css without gzip compression, reducing the number of large files requested by http is not desirable.

three。 Optimize picture

The picture format should be well controlled. In the case of picture quality ok, the png,jpg,gif format should be used reasonably according to the situation. General css sprite uses png format, animated pictures use gif format, and colorful advertising pictures use jpg.

The size of the picture should be controlled, and the website can cache the picture. Generally speaking, an advertising picture should be about 100k. If the picture is too big, you can cut a picture into several pieces and splice it together.

A front-end css website declares that what must be laid out with pictures is hooliganism. With the popularity of css3, this sentence will become a motto.

IV. "Progressive JPEG Analysis"

In summary, the continuous jpg format is better for performance.

JAVASCRIPT

one。 Load files asynchronously

Var vst = document.createElement ('script'); vst.type =' text/javascript'; vst.async = true; vst.src = srcIndex; var s = document.getElementsByTagName ('script') [0]; s [XSS _ clean] .insertBefore (vst, s)

When some third-party files and other downloads become a problem, or cause the page to load. We just need to load these files asynchronously, and async is a good way.

two。 Store looping objects

Before use:

Var str = "nanananana"; for (var n = 0; n < str.length; nasty +) {}

After use:

Var str = "nanananana", strLgth = str.length; for (var n = 0; n < strLgth; nasty +) {}

The loop consumes a lot of performance, and the object of the loop is stored to reduce the need to calculate the object in each cycle.

three。 Minimize backflow and redraw

Before use:

Var coored = document.getElementById ("ctgHotelTab"); document.getElementById ("ctgHotelTab"). Style.top = coored.offsetTop + 35 + "px"

After use:

Var coored = document.getElementById ("ctgHotelTab"), offetTop = coored.offsetTop + 35; document.getElementById ("ctgHotelTab"). Style.top = offetTop + "px"

When the layout of an element remains the same and the appearance changes, it will cause repainting.

When you set up style.top, the browser needs to recalculate the layout. Every time we request offsetTop, we will make the browser recalculate the layout and change a layout, which will lead to backflow.

four。 Compressed javascript

Compress js through automated tools. Same as html and css.

five。 Merge multiple js files

It is common to merge through cdn merger or the company's merger tools to effectively reduce the number of http requests.

six。 Compared with the framework js, the source js is better than the each for loops.

Performance testing tool

I often use YSLOW. Page speed is also good. Will give you some performance advice.

So much for sharing about how to improve the performance of your website in web. I hope the above content can be helpful to everyone and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.