Make your website run fast

Does performance really matter?

Performance is important, and everyone knows that. Why do we still want to make slow websites and give users a bad experience? Oh, let's get to the point.

HTML

1. Avoid inline/embedded code:

1) Inline: define the style in the style attribute of the HTML tag and define the Javascript code in attributes such as onclick;
2) Embedded: Use the <style> tag to define the style in the page, and use the <script> tag to define the Javascript code;
3) Reference external files: Define the href attribute in the <style> tag to reference the CSS file, and define the src attribute in the <script> tag to import the Javascript file.

Although 1 and 2 reduce the number of http requests, they increase the size of HTML. Compared with 3, the overall size is much smaller, which is convenient for division of labor and maintenance.

2. Style on top, script on bottom:

 <html>
  <head>
      <meta charset="UTF-8">
      <title>Browser Diet</title>
      <!-- CSS -->
      <link rel="stylesheet" href="style.css" media="all">
  </head>
  <body>
     <a>hello</a>
     <!-- JS -->
     <script async src="script.js"></script>
  </body>
</html>

1) The style is in the head, and the page renders quickly, which makes the user feel that the page loads quickly. On the contrary, you will first see a messy page layout, which gives people a bad feeling.
2) Placing the script at the top will affect the rendering or parallel loading of the HTML, and the first screen is loaded, and users generally do not need to see the function, so it is better to place the script at the bottom. Try loading the script asynchronously with the async attribute:

3. Compress HTML

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

But for the browser, none of this matters. Because of this, it is very useful to minify your HTML via automated tools.

By removing extraneous whitespace, comments, and some unnecessary characters that are not relevant to the content structure, some bytes can be saved. Try using gzip compression.

4. Reduce DOM nodes

Use semantic tags instead of universal divs.

5. The impact of HTML writing on gzip compression rate

When writing tag attributes, it is best to keep multiple identical tag attribute values in the same order. Can make gzip compression faster.

CSS

1. Compress CSS

Compress CSS through automated tools, similar to compressing HTML. Learn to refine repetitive code.

2. Merge multiple css

It is generally merged through CDN merger or the company's merger tools to effectively reduce the number of HTTP requests.

3. Reasonable use of CSS expressions

Not everyone can use CSS expressions reasonably. So leave all the functions to javascript. cssWe are going to take a break.

IMAGES

1. Use CSS sprite

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

2. Use base64 image encoding to replace ordinary CSS sprite images

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 IE8 and above. The number of http requests can be reduced, but for HTML and CSS without gzip compression, it is not advisable to reduce the large files obtained by http requests.

3. Optimize images

The image format should be well controlled. When the image quality is ok, png, jpg, and gif formats can be used appropriately according to the situation. Generally, CSS sprites use PNG format, animated images use GIF format, and colorful advertising images use JPG format.

The image size should be controlled and the website can cache the images. Generally, an advertising image should be around 100k. If the image is too large, you can cut it into several pieces and splice them together.

A front-end CSS website stated that anyone who must use pictures for layout is playing rogue. As CSS3 becomes more popular, this sentence will become a motto.

4. "Progressive JPEG Analysis"

In summary, continuous jpg format is better for performance.

JAVASCRIPT

1. Asynchronous loading of files

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

When some third-party files become a problem to download or cause heavy page loading. We need to load these files asynchronously, async is a good way.

2. Storing the looped objects

Before use:

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

After use:

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

Loops consume a lot of performance. Storing the looped objects can reduce the need to perform object calculations in each loop.

3. Minimize reflow 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"),
    offsetTop = coored.offsetTop + 35;
    document.getElementById("ctgHotelTab").style.top = offetTop + "px";

When the layout of an element remains unchanged but the appearance changes, it causes a repaint.

When you set style.top, the browser needs to recalculate the layout. Every time we request offsetTop, the browser will recalculate the layout. Changing a layout will cause reflow.

4. Compress JavaScript

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

5. Merge multiple js files

It is generally merged through CDN merger or the company's merger tools to effectively reduce the number of HTTP requests.

6. Compared with native js and framework js, for loops, for is better than each.

Performance Testing Tools

The one I often use is YSLOW. The page speed is also good. Will give you some performance suggestions.

Summarize

Performance is important, no doubt about it. I am just sharing my work, for reference only. For more information, please visit: http://browserdiet.com/zh/