YAOHAIXIAO.COM

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

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

Rss

Home » Frontend » Performance » 前端性能优化:Make JavaScript and CSS external

前端性能优化:Make JavaScript and CSS external

今天要介绍的YSlow的前端性能优化规则是 Make JavaScript and CSS External(使用外部JavaScrpit和CSS文件)。那么,为什么要调用外部的JavaScriptCSS文件?

调用外部JavaScriptCSS文件的好处

这个问题我想是我们首先会问自己的,为什么要调用外部文件呢?有什么好处啊?

首先,我们前面介绍过了,我们可以为JavaScriptCSS文件设置 Expires headers,当用再次访问文件的时候,浏览器就可以读取缓存中的文件,减少页面请求,加快页面的加载速度。

其次,使用外部文件会有利于重复调用,如果其他页面也需要使用相同的样式或者交互效果,就可以很方便的调用独立的外部CSSJavaScript文件。其实,这样也更便于我们以后维护代码。

不过事情都是有两面性的,调用外部文件也是有弊端的。

调用外部JavaScriptCSS文件的弊端

调用外部的JavaScript文件和CSS文件,很明显的一个问题就是会增加额外的HTTP requests。在初次加载的时候是会带来额外的前端性能损失的。

而我们知道,将JavaScriptCSS代码直接写入到HTML页面代码中就会省去这些额外的HTTP requests。但是这么做,很明显会增加HTML代码的尺寸,也会影响加载速度。

看来不同的处理方式,都有各自的优点和缺点,那么我们应该如何取舍呢?

什么时候使用外部JavaScriptCSS文件

(个人的建议)原则上最好都应该采用调用独立外部文件的方式处理。虽然YSlow的文档这么说过:

The only exception where inlining is preferable is with home pages, such as Yahoo!’s front page and My Yahoo!. Home pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

YSlow的文档说,首页的代码可以采用inline的JavaScriptCSS代码,通常带来更好的访问速度。不过,实际的情况普通的站点通过inline处理带来的维护成本的上升你是无法接受的。所以一般你都应该 Make JavaScript and CSS External

顺便说一下,如果你细心,你会发现好几年前(大概是2006年吧)有很短一段时间YAHOO的首页把所有的CSS代码都使用inline的方式写到HTML文档中过。好像一些国内的门户网站也效仿过。不过现在大家基本都是以外部调用为主了。

使用inline处理方式的时候

(说明:本文中的inline CSS,JavaScript指的是在页面中使用STYLE和SCRIPT标签中内部调用代码,而不是指的嵌入到HTML标签中style属性调用的CSS内联代码和使用onclick等方式调用的JavaScript方法的内联处理方式。Why inline CSS and JavaScript code is such a bad thing)

不过,既然 inline处理方式既然存在,就有其合理性的。当所调用的 CSS 样式只属于某个特殊的页面时,我们就可以采用把这部分CSS代码用inline方式调用,JavaScript代码也是同样的情况。特殊的代码,在某个页面集中维护,这个还是可以接受的,也可以优化前端的性能。

置于你可能看到过小于多少大小的CSS或者JS代码适合写成inline方式的处理,我自己没有实践过,不好给出分析。不过即便是很小段的代码片段,如果是要反复调用的,还是最好集中整合到一个公用的外部文件中会更好一些。

进一步讨论

有没有更好的方式呢?其实,YSlow文档中也提及了一下:

One such technique is to inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages would reference the external files that should already be in the browser’s cache.

inline调用最基本的CSSJavaScript代码,然后再动态加载其余所有的外部文件,即可以保证控制好初始的页面请求数量,也可以享受到外部文件缓存带来的性能提升。这个是我们努力的目标,不过具体的维护成本我本人没有测试过。

另外,《Automatically Speed Up Your Site with mod_pagespeed for Apache》一文中这个Apache的mod_pagespeed模块可以帮助大家实现之前说的针对部分CSS和JS文件的inline处理:

The “Inline CSS” filter moves smaller external CSS files into the HTML file, to save HTTP requests. This filter inlines CSS files below a specified byte threshold.

The “Inline JavaScript” filter works similarly to the Inline CSS filter. It saves HTTP requests by inlining small external JavaScript files directly into the HTML file. This filter only inlines script below a specified byte size threshold, and only those scripts without both source and inline data, and on-domain JavaScripts.

当然,mod_pagespeed模块还有很多其他的强大的功能,都可以帮助大家实现优化前端性能。推荐大家尝试一下。

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

« »

发表评论

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

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

(Spamcheck Enabled)