网站优化之favicon.ico

本文于2015年底完成。


背景

某一天在办公室分析产品首页加载速度时,无意中从Chrome浏览器的调试窗口看到浏览器在请求一个名为favicon.ico文件,由于Web系统的根路径下不存在这个文件,Chrome仅报了404访问失败,但当时没有太关注。

直到后来在某一次版本上线结束后的下午,还是在分析产品首页的加载速度,突然发现浏览器加载favicon.ico文件时,Web服务器居然把整个首页重新返回了一次,拖累了首页的加载速度。

如是,摆在眼前有两个问题:

  • favicon.ico是何方神圣,为什么浏览器会要求加载这个文件?
  • IE11加载favicon.ico文件失败后,居然再次下发加载首页的请求,导致首页加载了两次?

为什么浏览器要访问favicon.ico?

favicon.ico是什么

从百度百科中,可以找到如下描述:

favicon.ico图标是网站的缩略标志,可以显示在浏览器标签、地址栏左边和收藏夹,是展示网站个性的缩略logo标志,也可以说是网站头像,如果要让网站看起来更专业、更美、更有个性,favicon.ico是必不可少的。

浏览器调用favicon的原理是首先在网页所在目录寻找favicon.ico文件,如果没有找到就去网站的根目录寻找。所以最简单的方法就是将制作好的favicon文件命名为favicon.ico然后上传到网站的根目录下。

从资料可以得出解决本问题的方法。

解决方法

在首页的<head>增加如下的代码:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

这时清理浏览器缓存,并强制浏览器不缓存数据,多次刷新页面,观察浏览器控制台监控到的HTTP请求,发现浏览器可以成功获取favicon.ico。Web服务器按照预想返回了图片,而不是首页页面。

这样就成功的消除了一次多余的页面返回动作。

没想明白的怪事

不过有件事情没有想明白。我使用WordPress 4.1在SAE上搭建的博客网站,在网站根目录下没有找到favicon.ico,但使用前述的测试手段来做验证时,居然没有观察到浏览器要求下载favicon.ico的请求。

为什么?

IE11加载favicon.ico文件失败后,为什么会再次下发加载首页的请求?

其实问题还有一个,为什么之前分析页面加载过程的时候,没有观察到首页被加载两次的现象。

使用IE11的调试工具仔细观察首页的刷新过程,发现其实不只是在访问favicon.ico失败时服务器返回首页,IE11在访问jquery.min.map文件失败时,服务器也会返回首页。

jquery.min.map又是什么鬼?

查阅jquery的官方资料,原来这是jquery 1.9版本的新特性。通常情况下,为了降低浏览器下载js文件的时延,我们在Web系统的生产环境里只会部署压缩版本的jquery.js。这没有什么问题,而且通常情况下都很好,但凡事总有例外。当客户投诉页面访问时出现js报错,而我们本地又无法重现问题,只好直接用浏览器来调试生产环境,问题就来了。压缩版本的jquery里,变量名、代码全部缩在一起,查看非常不方便,理解很困难。source maps就是解决这个问题的利器。jquery 1.9发布比较早,彼时只有Chrome支持source maps;现在已过去好多年,从IE11的表现看,应当也已实现了source maps的支持。

虽然知道了jquery.min.map是什么鬼,但对于定位问题本身并没有什么帮助。因为我还是不知道如何观察浏览器的行为。

分析问题的笨方法

最初想了很久不知如何下手,后来想代码里引用到首页的地方应该不多,干脆在相关的地方全打上断点,调试一下看看,说不定会有所发现。于是在代码里全局搜索首页的文件名,找出引用到首页的几处代码,在相关的Java代码中打上了断点。这时启动容器,用浏览器登录首页,打开浏览器的调试器,刷新页面,监控Java代码。

在几处正常的访问点上,代码表现正常,但在处理favicon.ico的下载请求时,服务器返回了重定向的消息。我精神一振,预感神秘的问题快要找到原因了。仔细查阅重定向操作相关的代码,外加几次调试,终于搞清楚了问题所在。原来系统的代码实现了对URL的访问控制,限定浏览器只能访问以.css.js.png.jsp.action为结尾URL,浏览器对其它形式URL的访问均会被重定向到首页。

代码分析到这里,问题就清楚了。

问题原因

  • favicon.icojquery.min.map文件的结尾不在前述文件后缀范围之内,于是加载这两个文件的请求被服务器的代码重定向回了首页,因而IE11按照服务器的要求重新加载了首页。
  • 之前调试代码的时候,我并没有设置禁止IE11访问缓存;因此当IE11被服务器代码要求重新加载首页时,IE11发现首页已加载过,于是直接使用了缓存中的页面,这样我自然看不到第二次加载首页的请求了。

问题清楚了,解决的手段自然就有了。

解决方法

  • 找项目组的美工MM,参照产品的Logo制作了一个16*16的favicon.ico文件,上传到的WebRoot的根路径,这下favicon.ico文件就有了。
  • 修正代码,调整权限控制的部分,把.ico.min.map加入到免认证的列表里,避免浏览器访问这两类文件时被重定义向。这个问题的发生,完美的诠释了我同事的口头禅,诡异的问题通常都是愚蠢的错误引入的。

参考资料

在网上搜索到一些材料,对于问题的定位起到了很大的作用,这里记录下来。

  • 关于favicon.ico的两三事
  • jQuery 1.9 RC1 and Migrate RC1 Released

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/626236.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卡码网 16 set集合

判断集合成员 前言 之前我们讲到&#xff0c;哈希表的主要作用是判断给定的整数是否存在于给定的数据中, 哈希表常使用的数据结构有数组、set集合、map映射, 上节课我们学习了数组作为哈希表&#xff0c;这节课我们来学习set集合, 具体包括下列内容 set、unordered_set, mul…

Sqoop安全性:确保安全的数据传输

确保数据传输的安全性在大数据处理中至关重要。Sqoop作为一个用于数据传输的工具&#xff0c;也提供了多种安全性措施&#xff0c;以确保数据在传输过程中的机密性和完整性。本文将深入探讨Sqoop的安全性特性&#xff0c;提供详细的示例代码和全面的内容&#xff0c;以帮助大家…

基于WebFlux的websocket的分组和群发实现

一,分组发送 在WebFlux中实现分组发送数据和群发数据给所有客户端发送&#xff0c;可以借助Sinks.Many来管理消息流&#xff0c;并使用Flux进行订阅和发送消息。以下是一个示例代码&#xff0c;演示如何实现这两个功能&#xff1a; import org.springframework.stereotype.Co…

读元宇宙改变一切笔记09_硬件与互操作性(下)

1. 移动互联网的继承者 1.1. 要想让元宇宙成为现实&#xff0c;需要开发新的标准&#xff0c;创建新的基础设施&#xff0c;可能还需要对长期存在的TCP/IP协议进行彻底改革 1.1.1. 采用新的设备和硬件&#xff0c;甚至可能打破技术巨头、独立开发者和终端用户之间的权利平衡 …

Go+快速开始详细指南

Go快速开始 Go编程语言是为工程、STEM教育和数据科学设计的。 对于工程:用儿童能掌握的最简单的语言工作。对于STEM教育:学习一门可以在未来工作中使用的工程语言。对于数据科学:用同一种语言与工程师交流。 安装方法 现在&#xff0c;我们建议您从源代码安装Go。 注意:需…

CDMP认证与CDGA/CDGP的区别有哪些?

&#x1f451;CDMP是DAMA国际组织的全英文考试 &#x1f308;CDGA和CDGP是DAMA中国主导&#xff0c;考试为中文考试。需要在规定的时间内报名后&#xff0c;参加线下笔试考试。 &#x1f44d;CDGA、CDGP证书和英文版的CDMP证书都是国际通用的&#xff0c;是数据管理领域专业的职…

js等于操作符和全等操作符(== 和 ===)的区别,在什么情况下使用

在JavaScript中&#xff0c;&#xff08;等于操作符&#xff09;和&#xff08;全等操作符&#xff09;都是用来比较两个值是否相等的工具&#xff0c;但它们有一些重要的区别。 会尝试进行类型转换&#xff0c;然后再比较。这意味着它可能会将不同类型的值转换为相同类型&…

【教3妹学编程-算法题】3008. 找出数组中的美丽下标 II

3妹&#xff1a;呜呜&#xff0c;烦死了&#xff0c; 脸上长了一个痘 2哥 : 不要在意这些细节嘛&#xff0c;不用管它&#xff0c;过两天自然不就好了。 3妹&#xff1a;切&#xff0c;你不懂&#xff0c;影响这两天的心情哇。 2哥 : 我看你是不急着找工作了啊&#xff0c; 工作…

IP 网络分为接入网、城域网和骨干网

根据前述的IP 网络设计思想&#xff0c;结合算力网络对 正网络的需求分析&#xff0c;卫网络的具体实现可以从架构设计利网络技术两个方面进行总体设计。 首先从架构设计上考虑&#xff0c;架构应尽量简化&#xff0c;做到“以简应繁”。因此&#xff0c;整体网络架构不宜设计…

爬虫-8-数据存储-mysql

#mysql占空间最小吧&#xff0c;数据存储没问题吧 (//∇//)

【.net core】yisha框架,bootstrap-table组件增加固定列功能

需要引入 bootstrap-table-fixed-columns.css和bootstrap-table-fixed-columns.js文件 文件代码&#xff1a; bootstrap-table-fixed-columns.css样式文件代码 .fixed-table-header-columns, .fixed-table-body-columns {position: absolute;background-color: #fff;displa…

C++系统笔记教程----vscode远程连接ssh

C系统笔记教程 文章目录 C系统笔记教程前言开发环境配置总结 前言 开发环境配置 Ubuntu20.24VScode 如果没有linux系统&#xff0c;但是想用其编译&#xff0c;可以使用ssh远程连接。 首先进入vscode,打开远程连接窗口&#xff08;蓝色的小箭头这&#xff09; 选择连接到主机…

FFmpeg之AVFormat

文章目录 一、概述二、解封装流程三、重要结构体3.1、AVFormatContext3.2、AVInputFormat3.3、AVOutputFormat3.4、AVStream 四、重要函数分析4.1、avformat_alloc_context4.2、avformat_open_input4.2.1、init_input4.2.2、av_probe_input_format2 4.3、avformat_find_stream_…

Linux环境搭建FastDFS文件服务器(附带Nginx安装)

本文主要介绍在linux服务器如何搭建FastDFS文件服务器。大概分为9个步骤&#xff0c;由于内容较为繁琐。下面带你入坑&#xff01; 首先简单介绍一下FastDFS是淘宝资深架构师余庆老师主导开源的一个分布式文件系统&#xff0c;用C语言编写。适应与中小企业&#xff0c;对文件不…

设计 Pastebin.com

设计 Pastebin.com 设计 Bit.ly 是一个类似的问题&#xff0c;区别是 pastebin 需要存储的是 paste 的内容&#xff0c;而不是原始的未短化的 url. 怎么处理这个问题&#xff1f; 第一步&#xff1a;概述用例和约束 收集这个问题的需求和范畴。问相关问题来明确用例和约束&…

Github 2024-01-16 Python开源项目日报 Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-16统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目10HTML项目1 精心策划的Python资源列表 创建周期&#xff1a;3490 天开发语言&#xff1a;Python…

常用Java代码-Java中的Lambda表达式和函数式接口

Java中的Lambda表达式和函数式接口是Java 8中引入的一种新特性&#xff0c;允许编写简洁、可读性强的代码。Lambda表达式允许将简单的代码块作为参数传递给函数&#xff0c;而函数式接口则是一种只有一个抽象方法的接口&#xff0c;可以用于定义Lambda表达式。 下面是一个Lamb…

使用Python实现MySQL数据库表管理,有录播直播私教课视频教程

查看所有表格 from mysql.db_object import Databasedb Database(host"localhost", database"zdppy_mysql_demo", password"zhangdapeng520")# 查看所有表格 print(db.get_all_table())创建表格 from mysql.db_object import Databasedb Dat…

蓝桥杯备赛 | 洛谷做题打卡day3

蓝桥杯备赛 | 洛谷做题打卡day3 sort函数真的很厉害&#xff01; 文章目录 蓝桥杯备赛 | 洛谷做题打卡day3sort函数真的很厉害&#xff01;【深基9.例1】选举学生会题目描述输入格式输出格式样例 #1样例输入 #1 样例输出 #1 我的一些话 【深基9.例1】选举学生会 题目描述 学校…

MySQL深分页问题四种方案解析

mysql深分页问题&#xff1a; 这个问题在实际项目中很常见&#xff0c;当数据量大以后&#xff0c;分页会非常的慢&#xff08;几年前做过一个调度日志的分页查询&#xff0c;简直没法用&#xff09; 深分页为什么慢 前言&#xff1a;N个条件为索引&#xff0c;id为主键…