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

WeChat applet implements simple chat room

Optimizing JavaScript and CSS to improve website performance

WeChat applet implements simple chat room

Solution to garbled display of Linux SecureCRT

Vue implements the frame rate playback of the carousel

A brief discussion on three methods of asynchronous replication in MySQL 8.0

How to install tomcat in docker and deploy the Springboot project war package

Detailed explanation on how to deploy H5 games to nginx server

JavaScript Advanced Programming: Variables and Scope

MySQL database query performance optimization strategy

Summary of Form Design Techniques in Web Design

Docker container monitoring principle and cAdvisor installation and usage instructions

Recommend

Sample code for implementing radar chart with vue+antv

When the interviewer asked the difference between char and varchar in mysql

Details of the underlying data structure of MySQL indexes

In-depth interpretation of /etc/fstab file in Linux system

Master the CSS property display:flow-root declaration in one article

How InnoDB implements serialization isolation level

Detailed example of remotely connecting to Docker using TLS encrypted communication

MySQL 5.7.18 winx64 installation and configuration method graphic tutorial

Gojs implements ant line animation effect

Detailed explanation of the idea of achieving the point-earning effect with CSS animation

How to implement line breaks in textarea text input area

Detailed process of using Vscode combined with docker for development

Detailed explanation of Linux dynamic library generation and usage guide

Vue 2.0 Basics in Detail

JS implements Baidu search box