This is the 29th day of my participation in Gwen Challenge

It’s not important to do what you love, it’s more important not to make me do what I hate.

(This quote comes from a recent Reddit thread called “Drunken Truth from Programmers.”)

After Cookie, continue to learn how to speed up your website.

CSS

Place the style sheet at the top

Placing the style sheet in the head section allows for gradual rendering of the page, allowing the browser to display portions of the content as quickly as possible. Like a progress bar, it improves the user experience. This is also part of the HTML specification.

When the style sheet is at the bottom, some browsers, such as Internet Explorer, prevent the page from rendering to avoid having to redraw as the style loads, so that the user only sees a blank white page when the page is not fully loaded.

Avoid using CSS-expression

What is CSS-Expression?

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

Examples include CSS with embedded javascript. A deprecated CSS property that is only supported in IE5 to IE7, IE8 is deprecated.

The main reason csS-expression is deprecated is that it is not only re-executed during page rendering and resizing, but also during page scrolling and mouse movement, causing serious performance problems.

This point understanding can, will not encounter this kind of circumstance commonly now.

use<link>Instead of@import

Using @import in IE is the same as using at the bottom of the page, which should be avoided as mentioned in the first article.

More on the differences between the two:

The following is a reference to a blog from Blogpark: www.cnblogs.com/my–sunshin…

  1. @importBelongs to the CSS rule, and<link>Belongs to an HTML tag.
  2. Loading order:<link>The imported CSS loads at the same time as the page;@importThe imported CSS is loaded only after the page has been loaded.
  3. @importCSS2.1 + syntax, requires browser IE5+;linkTags, as HTML elements, do not have compatibility issues.
  4. Can be inserted through JSlinkTag to change styles, while@importIs not supported.
  5. <link>The imported style weight is greater than@importIntroduced styles.

Avoid filters

It also seems to be an age-old question.

Avoid using IE CSS filter AlphaImageLoader.

This filter is pre-ie8 and is used to set the special effects style of background images.

Nuggets home PAGE CSS

We looked at the source code in Chrome to see the CSS on the nuggets homepage.

As shown in the figure:

There is a link tag in its . The use of @import was not found.

.<link data-n-head="ssr" rel="stylesheet" href="Https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/ionicons/2.0.1/css/ionicons.min.css~tplv-t2oaga2asx-image.ima ge"><link data-n-head="ssr" rel="stylesheet" href="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/asset/fw-icon/1.0.9/iconfont.css~tplv-t2oaga2asx-image.image">.Copy the code

  1. Tips for speeding up your website

  2. Suggestions for speeding up your Web site server part 1

  3. Server part 2: Suggestions for speeding up your Website

  4. Cookie tips for speeding up your Website