JavaScript and CSS optimization improve site performance

In the first part and the second part, we introduced to improve the performance of the Web site page content and a few rules of the server, in addition, JavaScript and CSS are often used in our pages, the optimization of their site also improve the performance of important aspects:
Css:

1. Put the style sheet on top
2. Avoid using CSS expressions (Expression)
3. Using external JavaScript and CSS
4. Cut JavaScript and CSS
5. Replace @import with <link>
6. Avoid using filters

Javascript

1. Place the script at the bottom of the page
2. Using external JavaScript and CSS
3. Cut JavaScript and CSS
4. Eliminate duplicate scripts
5. Reduce DOM Access
6. Developing an intelligent event handler

17. Put the style sheet at the top

In studying the performance of Yahoo!, we found that putting the stylesheet inside the

Performance-oriented front-end servers tend to want the page to load in an orderly fashion. At the same time, we also want the browser to show what has been received as much as possible. This is especially important for pages with more content and for users with slower internet connections. Returning visual feedback to the user, such as the process pointer, has been well studied and formed a formal document. In our research, the HTML page is the process pointer. When the browser loads the file header, navigation bar, top logo and so on, it can be used as visual feedback for the users waiting for the page to load. This improves the user experience as a whole. Click here to view the content of the Web production tutorial channel

The problem with putting the stylesheet at the bottom of the document is that it aborts the orderly rendering of the content in many browsers, including Internet Explorer. The browser aborts rendering to avoid the redrawing of page elements caused by style changes. Users have to face a blank page.

The HTML specification makes it clear that the style sheet is to be placed within the CSS Expressions are a powerful (but dangerous) way to set CSS properties dynamically. Internet Explorer supports CSS expressions starting with the 5th version. In the following example, you can use a CSS expression to switch the background color once every one hours:

18, avoid the use of CSS expressions (Expression)

Background-color:expression (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00");

As shown above, JavaScript expressions are used in expression. CSS properties are set based on the results of the JavaScript expression's calculations. The expression method does not work in other browsers, so it is useful to set up individual Internet Explorer settings in a Cross-browser design.

The problem with an expression is that it is more computationally frequent than we think. Not only when the page is displayed and scaled, but when the page scrolls or even moves the mouse, it is recalculated. Add a counter to the CSS expression to track how often the expression is calculated. Moving the mouse around on the page can easily reach more than 10,000 times the amount of calculation.

A way to reduce the number of times a CSS expression is calculated is to use a one-time expression that assigns the result to the specified style property at the first run and replaces the CSS expression with this property. If the style attribute must change dynamically within the page cycle, it is a viable alternative to using the event handle instead of a CSS expression. If you must use CSS expressions, be sure to remember that they are counted thousands of times and may have an impact on the performance of your page.