Optimize Website Design (5): Place style definitions on top

ArticleDirectory

• Preface
• Preparations
• Topics to be discussed in this article

Preface

The optimization of website design is a big topic. There are some general principles and some suggestions for different development platforms. This research has never been stopped, and I have shared this topic on different occasions.

As a general principle, Yahoo's team of engineers once provided 35 best practices. For this list, see

Best practices for speeding up your web site http://developer.yahoo.com/performance/rules.html

At the same time, they also released a corresponding test tool yslow http://developer.yahoo.com/yslow/

I strongly recommend that all website developers learn these best practices and apply them based on their actual projects.

In the next period, I will combine ASP. NET development platform, aiming at these Principles, provides some explanations and interpretations in the form of a series of articles to help you better understand these principles and use them better.

Preparations

Prepare the following development environment and tools to follow me for subsequent learning.

1. Google Chrome or Firefox, and install the yslow extension component. Please note that this component is provided by Yahoo, but there is no version for IE currently.
   1. Https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh

      Technorati tags: performance, web design, ASP. NET

   2. Https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. You should have some knowledge about the developer tools of these browsers. You can call up this tool by pressing F12.
2. VISAUL studio 2010 SP1 or later, Visual Studio 2012 is recommended
   1. Http://www.microsoft.com/visualstudio/eng/downloads
3. You need to have a good understanding of the basic development process and core technologies of ASP. NET. This series of articles is difficult to popularize basic knowledge.

Topics to be discussed in this article

This article will discuss the fifth principle: Put stylesheets at top (Place style definitions on top).

Honestly, when I first saw this principle, I didn't feel it too deeply. I didn't mean it was useless, but because I always did it. I always think that the style definition should be placed on the top. think about it. style definitions include the format definitions required for page element rendering. In this case, if we need them, we should load them before loading the body.

In fact, this is not controversial. The HTML specifications clearly stipulate that style definitions (including those directly defined in the document or externally referenced style sheets) should be placed in the head, it should not be placed in the body (whether it is the top, middle, or even bottom of the body ).

This principle further explains this, which is also an interesting achievement for me.

1. To provideProgressive rendering (render progressively)Page possibilities. That is to say, content can be presented from top to bottom at 1.1 points. This provides a better user experience for users.
2. If it is placed at the bottom, many browsers (especially ie browsers) will prevent rendering of any content until these style sheets are loaded. Why? If it presents the content before the style sheet is loaded, of course it works. But you can think about it. When it loads a style sheet, itProbablyThe content needs to be re-presented. Therefore, they simply do nothing to avoid repeated presentation. Instead, the user will see a blank page, such as a page, and then wait until all the loading is complete, and then suddenly a lot of content appears in front of him.

I don't really believe that some people will really define the style sheet-style sheet (or Inline style definition: inline style) at the bottom of the body, so we will discuss this principle here, if you do that, please correct it (after all, this is also very easy), and I would like to know why you did it? If you are interested, let me know.