Best front-end practices for speeding up websites

Time:2020-2-13

Front end engineers are often mentioned about website performance, how to make the website visit faster and so on. This paper makes a summary.

Minimize HTTP requests

More than 80% of the time users request to download web resources, including pictures, styles, scripts, flash, etc. when browsing web pages, reducing the number of download requests for these resources has become the key to speed up Web pages.
Of course, if the page is very simple and has few resources, the page request will be less naturally. If the page has a lot of content, how can we reduce the number of resource requests? Here are several ways:

  1. Merge static filesThe number of HTTP requests can be greatly reduced by merging all scripts and style files into one file. However, if the static files of each page are different, it will be troublesome to merge all the files together, so we need to balance the merging in the development process.

  2. CSS sprites, merge the background image used in CSS into a single image, and then use thebackground-positionTo locate the image block you want to use, you can reduce the number of image requests.

  3. Use data: URL scheme to write image data to HTML or CSS file. Although the size of HTML or CSS file is increased, it is necessary to reduce the number of HTTP requests if necessary.

Put CSS file in the header

When there is a lot of content on the page, we want to display it to the user correctly while loading it. You may want to put the CSS file at the bottom of the page, so that the user’s content can be displayed first, but this will cause a serious problem. The user first sees a page without style, and then flashes (page redraw) and redefines the style, which actually affects the user experience. And the best thing to do isFollow HTML specification, put the CSS file in the header of the document.

Put JS file at the bottom

The problem caused by JS script is that it blocks the browser’s parallel download. According to http / 1.1 specification, the number of resources under each domain name should not exceed two. When the browser downloads JS file, it will not download other resources, even if the resources are distributed in different domain names.

Avoid CSS expressions

If you want to set CSS properties dynamically, CSS expressions are particularly powerful. They are supported in ie5.0, but abandoned in ie8.0. For example, for the following styles, the background color will be defined every hour.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

You can see it thick,expressionMethod accepts a JS statement to set the CSS property value, which can only be recognized by ie, so it has a place in cross browser development (ie compatible).

But its problem is that it executes very frequently, when the web page is rendered, when the window is changed, even when the page is scrolling and the user moves the mouse!

The way to reduce the execution times of CSS expression is to set a clear value for CSS property after the page rendering is completed, or to listen for web events in JS, and then set CSS property value when the event is triggered. If you have to use CSS expressions, remember that it is likely to be executed thousands of times.

External CSS and JS files

The reason why the external CSS and JS files will make the page faster is that they can be cached by the browser, or they will download the CSS and JS code repeatedly every time they request the HTML document. Although inline CSS and JS can reduce the number of HTTP requests, they make the HTML document larger.

If the page is simple, JS and CSS are few, using inline code to reduce HTTP requests will make the page faster.

Compress static files

There are many compression tools on the market, such as jsmin, YUI compressor, GCC, pngcrush, etc. you can choose tools to compress static files according to business needs.

Get requests are preferred in AJAX

UseXMLHttpRequestWhen the object makes a post request, we find that it is actually completed in two steps. Now we send the request header information, and then send the request data. So it is better to use get request, only need to send a TCP packet (unless there is a lot of cookie data), and the data of get request can be cached. However, it should be noted that the URL length of get request in IE is limited to 2K bytes (refer to support. Microsoft. Com), so if the URL exceeds this length, only post request can be used.

Delayed loading

During the development process, consider whether this element or script is necessary for page initialization. If not, consider loading them later, such as the elements folded by default, the elements that need to be triggered by the user and the page elements after the first screen.

Preloading

Preloading seems to contradict the previous one, but it’s not. When the browser is idle, we can pre load the elements of the page that will be used later (such as: pictures, JS, CSS), and then the page will take priority to read from the cache when using these elements again. Preloading can be divided into two forms:

  1. Unconditional: once the page is loaded, it will download additional elements, which are not necessarily used on the page. For example, a background map is loaded on the Google homepage, which is prepared for the search results page.
  2. Conditional: This is based on the user’s behavior to make the next guess to load elements, for example, when you type text, you will download different elements according to the text.

Reduce DOM number

If a page is too complex, it means that the download time is longer, and JS can access the DOM more slowly. Reducing the DOM doesn’t mean removing content, but we can use more reasonable HTML tags. Still in useTableLayout? A pile of pagesDIVTags, maybe we have a better and more semantic layout method.

To know the DOM quantity of a page is simple, you only need one line of JS statement:

document.getElementsByTagName('*').length

Multi domain distribution

Using multiple domain names to distribute content can increase the number of browser parallel downloads. Because DNS resolution also takes time, generally 2-4 domain names are more appropriate. For example, you can put HTML, JSP, PHP and other document files on the domain name www.example.org, and static files on static1.example.or or static2.example.org.

Reduce iframe usage

Iframe allows HTML documents to be nested in another HTML document, so you need to know how they work if you want to use them better.

Iframe benefits:
*Delay loading advertising and other third-party content
*Provide safe sandbox
*Parallel download script

Iframe disadvantages:
*Expensive
*Prevent parent page from loading
*Non semantic

Reduce Cookie

Cookies are often used to authenticate or store personal information. They will be transmitted between the server and browser through HTTP header information. In order to reduce HTTP response time, it is necessary to reduce cookies. There are several ways to do this:

  1. Clear unnecessary cookies
  2. Minimize the length of cookie content
  3. Set cookies in the appropriate domain to ensure that other subdomains are not affected
  4. Set the expiration time of the appropriate cookie

For more information about cookies, please refer to when the cookies

Reduce DOM operations

The overhead of frequently using JS to operate DOM is very large. We can reduce this overhead in the following ways:
1. Cache the DOM elements obtained
2. Batch processing elements, updating to documents at one time
3. Try to avoid changing page layout with JS

Better event binding

When too many elements are bound to frequently triggered events, the page response will slow down, so we need to adoptEvent delegation。 If you don’t need to wait for all the pictures to download, you can use theDOMContentLoadedEvents to replaceonloadEvent.

Use link instead of @ import to introduce CSS

As mentioned before, to put the CSS file in the head tag, @ import is equivalent to putting the CSS file at the bottom of the page in ie, so it’s better not to use it like this.

Avoid using CSS image filters

At IE7,AlphaImageLoaderIt is used to solve the problem of PNG picture transparency. If the picture is set with this property, when it is downloading, it will block the browser rendering page, or even make the browser stuck. This problem is very serious.

Cacheable favicon.ico

Favicon.ico is a picture of the root directory of the website. Even if you don’t set it in HTML, the browser will send a request and bring information such as cookies.

To reduce the adverse effects of favicon.ico, you need to:
1. The file is small. It’s better to have it under 1K
2. Set the appropriate expires in the HTTP header

Avoid empty picture SRC

There are three forms of empty picture SRC attribute:
HTML

<img />

CSS

.class{background:url("")}

JS

var img = new Image();
img.src = "";

In this way, the requests sent by each browser are different, as follows:
*IE will send a request to the directory of the page;
*Safari and chrome will send a request to the current page itself;
*Firefox 3 and below, like Safari, makes requests to the current page itself;
*Firefox 4 and above and opera do not request;

This paperRough translationFrom http://developer.yahoo.com/performance/rules.html, it has been reduced and added a lot of understanding. If there is something wrong or inappropriate, please correct it.

Some knowledge points are just sketchy, such as the number of parallel downloads of static resources and the performance differences of @ import browsers. Please discuss them in detail in the comments.

Recommended Today

HTML5 / CSS3 knowledge summary

May you be treated gently by the whole world Add semantic tags Header: header label NAV: navigation tab Article: article content label Section: block level label Aside: sidebar label Footer: bottom label be careful: Semantic tags are mainly for search enginesCan be used in the interface many times, mainly suitable for mobile terminal developmentIn IE9, […]