WEB优化Favicon请求

标签： web 优化 favicon | 发表时间：2013-09-02 09:55 | 作者：
出处：http://www.iteye.com

关于Favicon

  • 总是被命名为favicon.ico
  • 默认存放在网站web根目录。我们常常看到这样的一个请求/favicon.ico
  • 它总是显示在浏览器地址栏,网址的左边
  • 当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即/favicon.ico
  • 可以通过在页面的<head>部分加入<link>元素来重新指定它的位置
    <link rel=”shortcut icon” href=http://www.cctv.com/favicon.ico />
  • ico格式可以是不同分辨率的图像，比如16×16, 32×32等。



 
上图从客户端和服务端监测，可以知道每次访问页面的时候，都会访问/favicon.ico，不管该文件存不存在（一些工具像httpwatch、firebug不会将/favicon.ico请求罗列出来）。如果/favicon.ico文件不存在，则响应404错误。图-1和图-2比较而言，图-1(404响应)反倒花费的时间更少，这是图-2需要传输favicon.ico文件，http 200响应比http 404响应更大。通常在这种情况，我们应该减少对/favicon.ico请求来达到整体优化效果。

优化Favicon

  • 确定文件/favicon.ico存在，不应该返回404错误。404错误意味着，每次访问浏览器都会重新请求一次/favicon.ico。我们应该减少这样的请求，将/favicon.ico缓存在客户端。减少不必要的http请求是web前端优化的一条重要准则
  • 设置Expires头，将/favicon.ico缓存在客户端。比如，Apache可以通过mod_expires增加这样的设置。缓存时间可以是一个月，甚至可以是一年。 
        <IfModule mod_expires.c>
      ExpiresActive On
      ExpiresByType image/ico "access plus 1 year"
      ExpiresByType image/icon "access plus 1 year"
    </IfModule>
  • 通过<link>更新缓存。/favicon.ico名字和位置总是固定死的，如果你需要更新缓存的话，可以通过<link>元素重新指定它的位置
  • 保持较小的图片大小。虽然ico格式文件支持不同的分辨率，但是我们推荐16×16大小，并且文件大小在1kb左右。


已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [web 优化 favicon] 推荐：

WEB优化Favicon请求

- - ITeye博客
总是被命名为favicon.ico. 我们常常看到这样的一个请求/favicon.ico. 它总是显示在浏览器地址栏,网址的左边. 当访问一个页面的时候，不管怎么样，浏览器都会请求这个文件，即/favicon.ico. 可以通过在页面的部分加入元素来重新指定它的位置. ico格式可以是不同分辨率的图像，比如16×16, 32×32等.

Google  的 favicon 缓存服务

- 小猫 - 我爱水煮鱼
在添加友情链接或者其他操作的时后需要应用其它网站的图标（favicon），如 iPad 网址导航，如果一个一个去找会非常麻烦，Google　提供了一个比较快速得到相应网站 favicon 的服务，使用下面的　URL　调用　GOOGLE　的　favicon　缓存，将后面的域名改成相应网址即可，没有favicon的网站会显示一个小地球.

Web前端优化

- - JavaScript - Web前端 - ITeye博客
优点：直接使用浏览器内存的缓存数据，减少网站后台压力，用户体验（速度）好. 缺点：对于时时变化的动态页面，这种情况就不能容忍了，因为每次访问的都是第一次访问的内容，这样即使所请求的页面已经变化了，用户也不可能知道，所以此场景必须要消除这种缓存的影响. 延迟加载，将资源延迟到需要的时候的加载，例如detail页面，相关产品推荐，当用户浏览更多的信息往下拉动滚动时，才进行加载，异步加载可以大幅减少对后端资源的使用，在需要的时候加载，是资源合理使用常用的方式，但是也带来一个问题，当往下拉才去加载，如果性能不够好，用户的体验其实是不好的，“菊花”转动的时间会比较长，同时异步加载对前端性能的作用也是非常明显的，渲染的节点数量大幅减少.

Web性能优化

- - SegmentFault 最新的文章
Web网站的性能细线在几个方面：. 通过分析浏览器的渲染原理、资源对渲染的影响，得出优化网站性能的办法. Chrome的 Timeline面板录制网页加载的过程，分析记录浏览器渲染过程中每个过程的耗时. 关闭Chrome扩展或者启用隐身模式. 根据使用场景，模拟真实的网络加载情况：. 2.2 Timeline工具的各个组成.

Web性能优化：prefetch, prerender

- - Harttle Land
本文从预加载的角度介绍如何优化页面载入和渲染的性能，在展开内容之前先了解一下浏览器显示页面的过程： 首先是DNS解析，然后建立TCP连接，接着下载HTML内容以及资源文件，最后才是整个页面的渲染. 图片来源： https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present?slide=id.gc03305a_0106.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

Web前端优化最佳实践

- Jimmy - 中文热文榜|最新
还有 Jason, Bixuan, 曦, 推荐，查看全部 8 个推荐. 博评 - Sting的网经发表于2010-08-08 08:41:10. Google的前端优化最佳实践 Yahoo的前端优化最佳实践. Web前端优化最佳实践之Content篇. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests).

web前端性能优化进阶路

- - 阿里巴巴（中国站）用户体验设计部博客
Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践. 可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化 黄金法则，以及大名鼎鼎的优化大师 Steve Souders. 本文并非一篇讨论性能优化技术方法的文章，而更多的是对中文站 搜索List页面持续两年多的前端性能优化实践的 思路总结.

Java Web 服务性能优化实践

- - 博客 - 伯乐在线
来源： IBM developerworks. 简介： 本文介绍如何提升 Java Web 服务性能，主要介绍了三种方法：一是采用 Web 服务的异步调用，二是引入 Web 服务批处理模式，三是压缩 SOAP 消息. 重点介绍在编程过程中如何使用异步 Web 服务以及异步调用和同步调用的差异点. 本文还示范了如何在项目中使用以上三种方法，以及各种方法所适合的应用场景.

centos7作为web服务器优化

- - 操作系统 - ITeye博客
centos7作为web服务器优化. 1、关闭firewalld：. systemctl stop firewalld.service #停止firewall. systemctl disable firewalld.service #禁止firewall开机启动. 2、安装iptables防火墙.