Make your website run fast

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/

<<:  vmware virtual machine ubuntu18.04 installation tutorial

>>:  Implementation of CSS Fantastic Border Animation Effect

Recommend

Detailed explanation of the download process of the mysql-connector-java.jar package

Download tutorial of mysql-connector-java.jar pac...

Summary of events that browsers can register

Html event list General Events: onClick HTML: Mous...

Complete steps to upgrade Nginx http to https

The difference between http and https is For some...

JS implements simple addition and subtraction of shopping cart effects

This article example shares the specific code of ...

How to install nginx in centos7

Install the required environment 1. gcc installat...

Analysis of the reasons why the index does not take effect when searching in the MySql range

1 Problem Description This article sorts the esta...

Solve the problem of MySql client exiting in seconds (my.ini not found)

Problem description (environment: windows7, MySql...

Docker installation and configuration image acceleration implementation

Table of contents Docker version Install Docker E...

Vue uses Baidu Maps to realize city positioning

This article shares the specific code of Vue usin...

CSS to achieve glowing text and a little bit of JS special effects

Implementation ideas: Use text-shadow in CSS to a...

Implementation of waterfall layout in uni-app project

GitHub address, you can star it if you like it Pl...

Application and implementation of data cache mechanism for small programs

Mini Program Data Cache Related Knowledge Data ca...

Sample code for implementing Alipay sandbox payment with Vue+SpringBoot

First, download a series of things from the Alipa...

Vue routing returns the operation method of restoring page status

Route parameters, route navigation guards: retain...

Discussion on the browsing design method of web page content

<br />For an article on a content page, if t...