优化网站设计（五）：在顶部放置样式定义

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考

Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html

同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。

接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   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. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我将和大家讨论第五个原则: Put Stylesheets at Top ( 在顶部放置样式定义).

老实说，我一开始看到这条原则，感受并不太深, 不是说这个原则没有用,而是因为我一直都是这么做的。我一直认为样式定义理应就是放在顶部的. 想想看吧, 样式定义是包含了页面元素呈现所需要的格式定义, 既然如此, 我们如果需要用到它们的话, 当然应该在BODY加载之前就加载它们。

事实上，这一点毫无争议。HTML规范中都明确地规定，样式定义（包括直接定义在文档中的，或者外部引用的样式表），应该放在HEAD里面，而不应该放在BODY里面（不管是BODY的顶部，中部，甚至是底部）。

这一条原则进一步对此做了解释，这对于我来说也是一个很有意思的收获。

1. 之所以放在顶部，是为了提供渐进式呈现（render progressively）页面的可能性。也就是说，可以一点一点地，由上而下地呈现内容。这个对于用户来说，能提供一种较好的用户体验。
2. 如果放在了底部，很多浏览器（尤其是IE浏览器）会阻止呈现任何内容，直到加载了这些样式表。这是为什么呢？如果它在没有加载样式表之前呈现了那些内容，当然是可以的。但大家可以试想一下，等到它加载了样式表，它很可能需要重新呈现这些内容。所以，它们为了避免重复地呈现，就干脆什么都不做。取而代之的是，用户将看到空白如也的一个页面，然后等到全部加载完成了，再突然出现一大堆内容在他面前。

我不太相信真的有人会把样式表——Style sheet（或者内联的样式定义：inline Style ）真的定义在BODY的底部，所以这个原则我们就讨论到这里吧，如果你真的那么做了，请改正过来（毕竟这个也很容易），并且我很想知道你为什么那么做？有兴趣的话，告诉我一下吧