将样式表放在顶部——高性能网站建设指南规则5（读书笔记）

PS：以下内容仅仅为个人读书笔记，如有错漏，随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得！

背景

阅读《高性能网站建设指南》第五章，文章中，作者建议最好将CSS文件（样式表）放在文档顶部，即<head>标签之间。当然这是在一定的应用前提之下的——该样式表在页面呈现时可能并不需要，而是作用于由于用户与页面的交互行为而产生的动态标签。比方说你点击某个显示有“猛击我吧！！”的连接，然后页面弹出个DIV，用绿色字体和24px的字号大小显示的标准国骂来回敬你。样式定义下：

<style type="text/css">
　　color:green;
　　font-size:24px;
</style>

上述样式表在页面最初显示的时候并不需要，若将其放在<head>标签间只会延迟其他资源的下载，于是Yahoo！的工程师们就设想将其置于页面底部，最后进行加载。

 

实践证明，这种方法的确有助于提高页面的加载速度，但是可能导致页面白屏或者FOUC（无样式内容闪烁问题），关于白屏、无样式内容闪烁的理解可参考下面名词解释。下面是个人一点总结，分为IE浏览器下和firefox浏览器下：

 

一.　Firefox

  1. 样式表位于顶部：页面内容逐步呈现
  2. 样式表位于底部：
  • 　与页面呈现内容无关：页面内容逐步
  • 　呈现与页面呈现内容有关：出现无样式内容闪烁

二.　IE

  1. 样式表位于顶部：逐步加载
  2. 样式表位于底部：
  • 出现白屏：当重新加载页面、将页面设置为默认首页并打开、在新窗口中打开页面时出现
  • 出现FOUC：点击链接、键入URL、使用书签 打开页面时

部分名词解释：

白屏（blank white screen）：在浏览器和用户等待位于底部的样式表时，浏览器会延迟显示任何可视化组件，即所谓的白屏现象。

无样式内容闪烁（FOUC）：页面在样式表下载解析之前，组件就已经逐步加载显示，当样式表解析完成后，已经显示的组件就要用新的样式进行绘制，这就导致所 谓的无样式内容闪烁。

 

原因解释：

  1. 在Firefox浏览器里，无论是将样式表置于顶部还是底部，总是采用逐步呈现的方式来加载组件（component）。因此，若样式表不是最初页面呈现所必需的，则用户用户基本感觉不到有什么差别（当然加载时间是不一样的，最后会稍微再补充一下）；而当样式表为页面程序所必需的时候，则会出现无样式内容闪烁现象（不难想象那个过程）。
  2. 在Internet Explorer里，则稍微复杂一点。想象一下，如果现在页面组件已经加载显示完毕，但CSS样式表一秒后才慢悠悠地加载解析完毕（这种极端情况很少会出现，但的确有助于我们理解白屏出现原因），这个时候坐在计算机前的用户就会发现原先显示的页面所呈现的方式跟最初见到的不一样（也许正文字体颜色由黑色变成了红色，链接上面的下划线离奇消失了）。这种用户体验其实是很差的，为了防止这种情况的出现，IE浏览器会阻止页面的逐步呈现直至样式表加载解析完毕，然后页面所有内容同时涌上计算机屏幕。不过貌似这种白屏现象的用户体验更差其实（不知道是出于什么考虑采取了这种呈现方式）。不过出现白屏也是在具体情况下才会出现，上面已经总结了三点，这里不赘述。

 建议：

将样式表置于顶部<head>标签之间，虽然加载时间略微变长，但是可以避免出现白屏或者无样式内容闪烁现象。如果样式表最初页面内容呈现无关，则可以采取文档加载完毕后再动态加载（Post-Onload Download）的方式进行加载。（关于Post-Onload Download技术会在接下来的读书笔记里面进行解释）

 

PS：以上内容仅仅为个人读书笔记，如有错漏，随时欢迎指正。同时希望能有更多的前端爱好者们共同分享你们的心得！

posted @ 2010-10-14 15:42  程序猿小卡  阅读(1383)  评论(2)  编辑  收藏  举报