YAOHAIXIAO.COM

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

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

Rss

Home » Frontend » Performance » 前端性能优化:Make favicon small and cacheable

前端性能优化:Make favicon small and cacheable

今天要介绍的最后一个YSlow前端性能优化规则是:Make favicon small and cacheable(让 Favicon 文件尽量的小且缓存它)。

favicon.ico 是什么?

YSlow 文档简单的介绍了一下:

The favicon.ico is an image that stays in the root of your server.

favicon.ico是放置在网站服务器根目录下的一个图片文件,它通常都是网站的16X16像素的LOGO图案。在浏览器其中显示的位置是这里:

favicon.icn 介绍

在我们打开网站的时候,favicon.ico 就是一个特别醒目的站点标识,当我们将网站收藏起来的时候,这个图片就会在搜藏栏(书签栏)显示出来,favicon 应该也是由此得名的。记住这个ICO格式文件只能叫做favicon.ico。

我们在页面的HTML代码中是这样这是favicon.ico文件的:

<!DOCTYPE html>
<htm lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>YAOHAIXIAO.COM</title>
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />	
</head>
<body>
</body>
</html>

favicon.ico 对性能的影响

其实,在我刚开始接触WEB开发的时候,我根本就不知道还有一个 favicon.ico 文件,也不知道它应该放在哪里,要如何设置,也就更谈不上对它会对前端性能产生影响是怎么回事了。看看YSlow的说明吧:

It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

原来,不管理你知不知道有 favicon.ico 文件的存在,浏览器在访问你的站点的时候都会去请求 favicon.ico 文件。如果你不知道它的存在,很可能浏览器就会得到一个 404状态的请求,而 YSlow 的前端性能优化规则里是有《Avoid HTTP 404 (Not Found) error》的规则的,所以 404 的结果是会影响前端性能的。

而IE浏览器中对 favicon.ico 文件的处理更特别,在加载一个页面的时候,首先会去请求 favicon.ico 文件,然后才会请求页面中其它的组件。这个时候的 404 的影响就更加“巨大”了。

Make favicon small and cacheable

既然我们现在已经知道了 favicon.ico 文件的存在,也了解了 favicon.ico 文件对前端性能的影响,我们现在就要按照 YSlow 的前端性能优化规则去处理了——Make favicon small and cacheable

Make favicon cacheable 很好理解,就是给.ico类型的文件设置 Expire Head。具体的设置方法大家参考《前端性能优化:Add Expires headers》。而 favicon.ico 的过期时间我们可以设置的尽可能的长一些,因为 favicon.ico 在网站建立之后,机会就不会改变了。

Make favicon small 多大的尺寸才算是 small 呢? YSlow 给出的建议是小于1K。

So to mitigate the drawbacks of having a favicon.ico make sure:

  • It’s small, preferably under 1K.
  • Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it).
    You can probably safely set the Expires header a few months in the future.
    You can check the last modified date of your current favicon.ico to make an informed decision.

最后,YSlow 的文档中还为我们推荐了一款 .ico 文件的工具:Imagemagick

好了,到这里我就把YSlow关于前端性能优化的规则都介绍完毕了,除了关于 Use a Content Delivery Network (CDN) 的部分。因为 CDN 对于中小型点来说,基本上不会使用,而且国内的CDN的服务器提供商基本上也都不怎么靠谱。而联通到移动的网络联通也算是个巨大的技术难题,我们一时半会也决绝不了。

Anyway,希望大家把YSlow关于前端性能优化的规则运用到自己的项目中去,充分的优化站点的前端性能,提升用户体验,因为这是最为一个合格的前端工程师的职责!

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

« »

发表评论

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

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

(Spamcheck Enabled)