Optimizing JavaScript and CSS to improve website performance

<br /> In the first and second parts, we introduced several rules for improving website performance, page content and server. In addition, JavaScript and CSS are also frequently used in our pages. Optimizing them is also an important aspect of improving website performance:
CSS:

Put the stylesheet at the top Avoid using CSS expressions Use external JavaScript and CSS Reduce JavaScript and CSS Use <link> instead of @import Avoid using filters
JavaScript

Place scripts at the bottom of the page Use external JavaScript and CSS Reduce JavaScript and CSS Remove duplicate scripts Reduce DOM access Develop smart event handlers 17. Put the style sheet at the top When studying Yahoo!'s performance, we found that putting the style sheet inside the document's <head /> seemed to speed up page downloads. This is because putting 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. Click here to view the web page creation tutorial channel content. The problem with placing the style sheet at the bottom of the document is that in many browsers, including Internet Explorer, this will stop the orderly rendering of the content. 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 document <head /> according to the HTML specification. CSS expressions are a powerful (but dangerous) way to dynamically set CSS properties. Internet Explorer has supported CSS expressions since version 5. In the following example, CSS expressions can be used to switch the background color every hour: 18. Avoid using CSS expressions

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
As shown above, a JavaScript expression is used in expression. CSS properties are set based on the results of evaluating a JavaScript expression. The expression method does not work in other browsers, so it is more useful to set it specifically for Internet Explorer in a cross-browser design.
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.

Previous Page 1 2 3 Next Page Read More

<<: IDEA2021 tomcat10 servlet newer version pitfalls

>>: A brief introduction to MySQL InnoDB ReplicaSet

The difference between html, xhtml and xml

Optimizing JavaScript and CSS to improve website performance

The difference between html, xhtml and xml

What is a MySQL index? Ask if you don't understand

css3 flex layout justify-content:space-between the last line is aligned to the left

How to query and update the same table in MySQL database at the same time

Comparison of storage engines supported by MySQL database

How to optimize images to improve website performance

How to set directory whitelist and IP whitelist in nginx

Designing the experience: What’s on the button

MySQL multi-table query detailed explanation

Design Theory: Textual Expression and Usability

Recommend

Detailed explanation of the process of installing msf on Linux system

Summary of flex layout compatibility issues

Detailed explanation of the solution to Tomcat's 404 error

Explanation of several ways to run Tomcat under Linux

js to realize a simple disc clock

Detailed explanation of how to dynamically set the browser title in Vue

HTML end tag issue and w3c standard

Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server

Detailed tutorial on how to modify the root password after forgetting it in MySQL 5.7

How to quickly delete all tables in MySQL without deleting the database

Design Theory: Ten Tips for Content Presentation

How to use Linux tr command

Several common methods for passing additional parameters when submitting a form

Basic usage examples of listeners in Vue

WeChat applet implementation anchor positioning function example