YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Put CSS at top

前端性能优化:Put CSS at top

今天我们接着来介绍YSlow的前端优化规则:Put CSS at top(将CSS放到HTML文档顶部)。这个规则看似很简单,将CSS放到HTML文件的<HEAD>标签。那为什么要这样处理呢?

为什么 Put CSS at top

YSlow 的文档是怎么说的:

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. These browsers block rendering to avoid having to redraw elements of the page if their styles change. The user is stuck viewing a blank white page.

Yahoo 的工程师研究发现,将CSS放置在<HEAD>标签处(at the HTML document top)可以让Web页面呈现更快,页面可以被很顺畅的逐步解析。

同时,YSlow的文档也解释了将CSS放到HTML文档底部的问题:CSS放到页面底部,会阻止页面(从上至下)渐近的解析页面。

it prohibits progressive rendering in many browsers, including Internet Explorer.

这句话的确切意思是浏览器已经加载了整个HTML文档了,但如果将CSS放到页面底部,浏览器不会把已经加载的页面渲染显示出来,而到等到将CSS样式也解析了,然后才将这个页面渲染出来。在CSS加载并完全解析前,用户会看到一个“洁白的清新”的页面,这个用户体验是非常不好的,也是我们前端工程师要极力避免的。

如果样式表仍在加载,构建呈现(DOM)树就是一种浪,因为在所有样式表加载病解析完毕之前无需绘制任何东西。否则,在其准备好之前显示的内容会遇到FOCUS(Flash of Unstyled Content,无演示内容的闪烁)问题(David Hyatt 摘选至《High Performance Web Sites》)

David Hyatt 的研究更明确的指出了将CSS放到底部会遇到问题。浏览器为避免样式发生变化时重绘页面中的元素,浏览器会阻塞内容逐步呈现。所以,Put CSS at top 让浏览器能够很顺畅的解析页面是非常必要的。这里要明确,Put CSS at top 会加快页面的解析速度,而不能缩短页面各个组件的整个下载速度

测试DEMO(用firebug的networking测试一下页面的加载速度):Put CSS at topPut CSS at bottom

Top 多高才算高

也许你还想问一下:Put CSS at top,那么放到哪里才算TOP呢?其实并没有很严格的要求,规则很简单,CSS放在<HEAD>标签之间就行。当然,位置越高越好。直接给出实例代码吧:

<!DOCTYPE html>
<html>
    <head lang="zh-CN">
        <meta charset="utf-8" />
        <title>Put CSS at top</title>
        <meta name="keywords" content="Put CSS at top" />
        <meta name="description" content="Put CSS at top" />
        <link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
        <style type="text/css">
            .footer {
                margin: 0 auto;
                width: 960px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    </body>
</html>

注意,规则是 Put CSS at top。CSS 包括link标签加载的外部文件,也包括直接写在页面style标签中的内联CSS样式。都应该放在<HEAD>标签之间。W3C 的 HTML specification文档也明确指出了,<LINK>只能放在<HEAD>标签之间。

Put CSS at top 很容易做到,但是能给用户带来更好的用户体验,优化页面的解析速度,让完整的页面更快的呈现到用户面前。所以,在大家下次开发时请按照这个规则优化前端性能。

稍后要介绍的 Put JavaScript at bottom 正好相反。将JavaScript放到页面顶部也会阻止页面(从上至下)渐近的解析页面。期待哦!

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Put CSS at top

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)