Website front-end performance optimization: JavaScript and CSS

I have read an article written by the Yahoo team about website performance optimization. The article was written around 2010. Although it is a bit old, it is still very instructive in many aspects. Regarding the performance optimization of CSS, he mentioned the following points:

CSS performance optimization

1. Put the style sheet at the top

Placing the style sheet inside the <head /> of the document seems to speed up page downloads. This is because placing the style sheet in the <head /> will cause the page to load and display in steps.

Performance-focused front-end servers often want pages to load in an orderly manner. At the same time, we also hope that the browser will display the received content as much as possible. This is especially important for pages with more content and for users with slower connections. Returning visual feedback to the user, such as a progress pointer, has been well researched and documented. In our research, the HTML page is the process pointer. When the browser loads the file header, navigation bar, top logo, etc. in an orderly manner, it can serve as visual feedback for users waiting for the page to load. This improves the user experience overall.

The problem with putting the style sheet at the bottom of the document is that it will break the orderly rendering of the content in many browsers, including Internet Explorer. The browser suspends rendering to avoid redrawing page elements caused by style changes. The user is faced with a blank page.

The HTML specification clearly states that style sheets are to be placed in the <head /> section of the page: "Unlike <a />, <link /> can only appear in the <head /> section of a document, although it can be used multiple times." It's not worth trying whether it causes a white screen or unstyled content. The best solution is to load your style sheet in the <head /> of the document according to the HTML specification.

2. Avoid using CSS expressions

The problem with expressions is that they are evaluated more often than we think. Not only when the page is displayed and zoomed, but also when the page is scrolled or even when the mouse is moved, it needs to be recalculated. Adding a counter to a CSS expression can keep track of how often the expression is evaluated. Just moving the mouse around the page can easily reach more than 10,000 calculations.

One way to reduce the number of CSS expression calculations is to use a one-time expression that assigns the result to the specified style property when it is run for the first time and uses this property instead of the CSS expression. If style properties must be changed dynamically during the page lifecycle, using event handlers instead of CSS expressions is a viable approach. If you must use CSS expressions, remember that they are evaluated thousands of times and may have an impact on the performance of your page.

3. Use external JavaScript and CSS

Many performance rules are about how to handle external files. However, before you take these steps you might ask a more fundamental question: Should JavaScript and CSS be placed in external files or should they be placed within the page itself?

In practice, using external files can improve page speed because both JavaScript and CSS files can be cached in the browser. JavaScript and CSS embedded in HTML documents will be downloaded again along with the HTML document on each request. Although this reduces the number of HTTP requests, it increases the size of the HTML document. On the other hand, if JavaScript and CSS in external files are cached by the browser, the size of the HTML document can be reduced without increasing the number of HTTP requests.

The key point is that the frequency with which external JavaScript and CSS files are cached is related to the number of times the HTML document is requested. Although it is somewhat difficult, there are still some indicators that can measure it. If a user browses multiple pages on your site during a session, and the same scripts and stylesheets are reused across those pages, caching external files will have a greater benefit.

For home pages with a lot of traffic, there is a technique that can balance the reduction in HTTP requests brought by built-in code with the benefits of caching through the use of external files. One of them is to embed JavaScript and CSS in the homepage, but dynamically download external files after the page is downloaded. When these files are used in the subpages, they have already been cached in the browser.

4. Cut down on JavaScript and CSS

Minification refers to reducing file size by removing unnecessary characters from the code, thereby saving download time. When minifying code, all comments, unnecessary whitespace characters (spaces, newlines, tab indents), etc. should be removed. In JavaScript, the response time is saved because the size of the file that needs to be downloaded becomes smaller. The two most widely used tools for minifying JavaScript are JSMin and YUI Compressor. YUI Compressor can also be used to minify CSS. My previous article about front-end deployment, ant+YUI Compressor address is: http://www.haorooms.com/post/ant_yuicom There is also the use of ant in the gadget: http://www.haorooms.com/tools/ant_book/

Obfuscation is another method that can be used for source code optimization. This approach is more complex than simplification and is more prone to problems during the obfuscation process. In a survey of the top 10 websites in the United States, it was found that streamlining can reduce the original code size by 21%, while obfuscation can reach 25%. Although obfuscation can be better at shrinking code, minification is less risky for JavaScript.

In addition to minifying external script and stylesheet files, <script> and <style> code blocks can and should be minified as well. Even if you Gzip your scripts and stylesheets, minifying those files can still save more than 5% of space. As JavaScript and CSS increase in power and size, reducing code will be beneficial.

5. Use instead of @import

The previous best practice mentioned that CSS should be placed at the top to facilitate orderly loading and presentation.

In IE, @import at the bottom of the page has the same effect as using <link>, so it is best not to use it.

6. Avoid using filters

The IE-specific property AlphaImageLoader is used to correct the semi-transparent effect of PNG images displayed in versions below 7.0. The problem with this filter is that it stops rendering the content and freezes the browser while it loads the image. It is calculated once for each element (not just images), which increases memory usage, so its problems are multifaceted.

The best way to avoid using AlphaImageLoader altogether is to use the PNG8 format instead, which works well in IE. If you really need to use AlphaImageLoader, please use the underscore_filter to disable it for users of IE7 and above.

JavaScript performance optimization

1. Place the script at the bottom of the page

The problem with the script is that it prevents the page from being downloaded in parallel. The HTTP/1.1 specification recommends that browsers download no more than two items per host name in parallel. If your images are hosted on multiple hostnames, you can download more than 2 files at the same time in each parallel download. But when downloading a script, the browser will not download other files at the same time, even if the host name is different.

In some cases it may not be easy to move the script to the bottom of the page. For example, if the script uses document.write to insert page content, it cannot be moved down. There may also be scope issues here. In many cases, we will encounter this problem.

An often used alternative is to use a delay script. The DEFER attribute indicates that the script does not contain document.write, which tells the browser to continue displaying. Unfortunately, Firefox does not support the DEFER attribute. In Internet Explorer, scripts may be delayed but the effect may not be as expected. If the script can be delayed, then it can be moved to the bottom of the page. This will make your page load faster.

2. Use external JavaScript and CSS

Same as above, it is written in css. I listed the CDN in my previous article, which can be called externally.

3. Cut down on JavaScript and CSS

Same as above, written in css

4. Eliminate duplicate scripts

Repeatedly referencing JavaScript files in the same page will affect the performance of the page. You might think this isn't a common occurrence. A survey of the top 10 websites in the United States showed that two of them had duplicate scripts. There are two main factors that contribute to the weird phenomenon of a script being referenced repeatedly: team size and number of scripts. If this is the case, duplicate scripts will cause unnecessary HTTP requests and useless JavaScript calculations, which will reduce website performance.

In Internet Explorer, unnecessary HTTP requests are made, but in Firefox, they are not. In Internet Explorer, if a script is referenced twice and it is not cacheable, it will generate two HTTP requests during the page load process. Even though scripts can be cached, additional HTTP requests are made when the user reloads the page.

Besides making extra HTTP requests, executing the script multiple times wastes time. Internet Explorer and Firefox both have the problem of re-evaluating JavaScript regardless of whether the script is cacheable or not.

One way to avoid accidentally referencing the same script twice is to reference the script in the template using the script management module. The most common way to reference a script in an HTML page is using the <script /> tag:

 <script type="text/javascript" src="menu_1.0.17.js"></script>

In PHP, you can create a method called insertScript instead:

 <?php insertScript("menu.js") ?>

To prevent multiple script references, this method should also use other mechanisms to process scripts, such as checking the directory to which they belong and adding a version number to the script file name for use in the Expire file header.

5. Reduce DOM access

Accessing DOM elements using JavaScript is slow, so in order to get more of the page, you should do the following:

Cache related elements that have been visited

Update nodes offline before adding them to the document tree

Avoid using JavaScript to modify page layout

6. Develop intelligent event handlers

Sometimes we may feel that the page is unresponsive because there are too many event handlers attached to the DOM tree elements and these event handlers are triggered frequently. That’s why using event delegation is a good approach. If you have 10 buttons in a div, you only need to attach the event handler once to the div, instead of adding a handler for each button. When events bubble up, you can capture the events and determine which event was sent.

You also don't have to wait for the onload event to occur in order to manipulate the DOM tree. All you need to do is wait for the element you want to access to appear in the tree structure. You also don't have to wait for all the images to load.

How to load JS and where to put JS

Blocking download of external JS

When downloading JS, all browsers will block all other activities, such as downloading other resources, presenting content, etc. Only after JS is downloaded, parsed, and executed will it start downloading other resources in parallel and presenting the content.

Some people may ask: Why can't JS be downloaded in parallel like CSS and images? Here we need to briefly introduce the principle of browser page construction. When the browser receives the HTML document from the server and converts the HTML into a DOM tree in the memory, if it finds that CSS or IMAGE is referenced on a node during the conversion process, it will send another request to request CSS or image, and then continue to perform the following conversion without waiting for the request to return. When the request returns, you only need to put the returned content into the corresponding position in the DOM tree. But when JS is referenced, the browser sends a js request and will wait for the return of the request. Because the browser needs a stable DOM tree structure, and there is a high possibility that there is code in JS that directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href to jump. In order to prevent JS from modifying the DOM tree, the browser needs to rebuild the DOM tree, so it will block other downloads and rendering.

Blocking download graph: The following figure is a time waterfall graph of accessing the blogjava homepage. It can be seen that the first two images are downloaded in parallel, while the following two JS are blocked for download (downloaded one by one).

Blocking downloads with embedded JS

Embedded JS refers to JS code written directly in the HTML document. As mentioned above, referencing external JS will block subsequent resource downloads and subsequent content presentation. How will embedded JS block it? See the following two codes:

 **Code 1:** 

< div >
         < ul >
             < li > blogjava </ li >
             < li > CSDN </ li >
             < li > haorooms blog </ li >
             < li > ABC </ li >
             < li > AAA </ li >
         < ul >     
     </ div >
     < script type ="text/javascript" >
        // Loop for 5 seconds var n = Number( new Date());
     var n2 = Number( new Date());
    while ((n2 - n) < ( 6 * 1000 )){
       n2 = Number( new Date());
     }
     </ script >
   < div >
         < ul >
             < li > MSN </ li >
             < li > GOOGLE </ li >
             < li > YAHOO </ li >
         < ul >     
</ div >

After running, you will find that in code 1, the page is blank in the first 5 seconds, and the whole page is displayed after 5 seconds. In code 2, blogjava, csdn, etc. are displayed first in the first 5 seconds, and MSN is displayed 5 seconds later.

It can be seen that embedded JS will block the presentation of all content, while external JS will only block the display of subsequent content. Both methods will block the download of subsequent resources.

Embedding JS causes CSS to block loading

How can CSS block loading? CSS can be downloaded in parallel. Under what circumstances will it be blocked from loading? (In the test observation, CSS is blocked from loading under IE6. The following test is conducted under non-IE6):

Code 1 (for the sake of effect, a CSS from a foreign server is selected here):

 < html xmlns ="http://www.w3.org/1999/xhtml" >
         < head >
           < title > js test </ title >
           < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />  
           < link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css" />
         </ head >
         < body >
             < img src ="http://www.haorooms.com/images/logo.gif" />< br />
              <img src="http://www.haorooms.com/images/csdnindex_piclogo.gif" />
         </ body >
</ html >

Time waterfall chart:

Code 2 (only 1 empty embed JS is added):

 < head >
     < title > js test </ title >
     < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" />  
   < link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css" />
   < script type ="text/javascript" >
         function a(){}
   </ script >
</ head >
< body >
         < img src ="http://www.haorooms.com/images/logo.gif" />< br />
         <img src="http://www.haorooms.com/images/csdnindex_piclogo.gif" />
</ body >

Time waterfall chart:

From the time waterfall chart, we can see that in code 2, CSS and images are not downloaded in parallel. Instead, the download of the following two images starts after the CSS is downloaded. When the CSS is followed by embedded JS, the CSS will block the download of subsequent resources.

Some people may ask, why don’t we talk about the embedded JS blocking the subsequent resources, but say that CSS is blocked? Think about it, we are using an empty function now, and it only takes 1ms to parse this empty function, while the next two images will not start downloading until 1.3s after the CSS is downloaded. You can also try to embed JS before CSS, and there will be no blocking.

Root cause: Because the browser maintains the order of CSS and JS in HTML, the style sheet must be loaded and parsed before the embedded JS is executed. The embedded JS will block the subsequent resource loading, so the above CSS blocking download situation will occur.

Where should embedded JS be placed?

1. Put it at the bottom. Although it will block all presentations, it will not block resource downloads.
2. If you embed JS in the head, please put the embedded JS before CSS.
3. Use defer
4. Do not call functions that take a long time to run in embedded JS. If you must use it, you can use setTimeout to call it. I have written about settimeout in a previous article, please see: https://www.jb51.net/article/20741.htm

<<: Steps to deploy Spring Boot project using Docker

>>: Detailed explanation of the difference between var, let and const in JavaScript

More than 100 lines of code to implement react drag hooks

Website front-end performance optimization: JavaScript and CSS

More than 100 lines of code to implement react drag hooks

Two practical ways to enable proxy in React

Detailed tutorial on installing MYSQL under WINDOWS

Build a server virtual machine in VMware Workstation Pro (graphic tutorial)

The difference and usage of Ctrl+z, Ctrl+c and Ctrl+d in Linux commands

Answer the caching principle of keep-alive components from the perspective of source code

Web front-end development experience summary

MySQL table auto-increment id overflow fault review solution

New settings for text and fonts in CSS3

Solve the problem of qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in Qt under Ubuntu 18.04

Recommend

Nginx implements dynamic and static separation example explanation

The process of deploying and running countly-server in docker in win10

Detailed explanation of the practical record of solving network isolation through Nginx

The simplest MySQL data backup and restore tutorial in history (Part 1) (Part 35)

Summary of common commands for building ZooKeeper3.4 middleware under centos7

Detailed explanation of the difference between MySQL normal index and unique index

Use the Linux seq command to generate a sequence of numbers (recommended)

How to ensure the overall user experience

CentOS 7.5 deploys Varnish cache server function

How to implement JavaScript output of Fibonacci sequence

Analysis of the event loop mechanism of js

HTML mouse css control

JavaScript Interview: How to implement array flattening method

Analysis of the Poor Performance Caused by Large Offset of LIMIT in MySQL Query

Implementation of Nginx configuration https