网站优化之favicon.ico
本文于2015年底完成，發(fā)布在個人博客網(wǎng)站上。 考慮個人博客因某種原因無法修復，于是在博客園安家，之前發(fā)布的文章逐步搬遷過來。
背景
某一天在辦公室分析產(chǎn)品首頁加載速度時，無意中從Chrome瀏覽器的調(diào)試窗口看到瀏覽器在請求一個名為favicon.ico文件，由于Web系統(tǒng)的根路徑下不存在這個文件，Chrome僅報了404訪問失敗，但當時沒有太關(guān)注。
直到后來在某一次版本上線結(jié)束后的下午，還是在分析產(chǎn)品首頁的加載速度，突然發(fā)現(xiàn)瀏覽器加載favicon.ico文件時，Web服務器居然把整個首頁重新返回了一次，拖累了首頁的加載速度。
如是，擺在眼前有兩個問題：
-
favicon.ico是何方神圣，為什么瀏覽器會要求加載這個文件？ -
IE11加載favicon.ico文件失敗后，居然再次下發(fā)加載首頁的請求，導致首頁加載了兩次？
為什么瀏覽器要訪問favicon.ico？
favicon.ico是什么
從百度百科中，可以找到如下描述：
favicon.ico圖標是網(wǎng)站的縮略標志，可以顯示在瀏覽器標簽、地址欄左邊和收藏夾，是展示網(wǎng)站個性的縮略logo標志，也可以說是網(wǎng)站頭像，如果要讓網(wǎng)站看起來更專業(yè)、更美、更有個性，favicon.ico是必不可少的。
瀏覽器調(diào)用favicon的原理是首先在網(wǎng)頁所在目錄尋找favicon.ico文件，如果沒有找到就去網(wǎng)站的根目錄尋找。所以最簡單的方法就是將制作好的favicon文件命名為favicon.ico然后上傳到網(wǎng)站的根目錄下。
從資料可以得出解決本問題的方法。
解決方法
在首頁的<head>增加如下的代碼：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
這時清理瀏覽器緩存，并強制瀏覽器不緩存數(shù)據(jù)，多次刷新頁面，觀察瀏覽器控制臺監(jiān)控到的HTTP請求，發(fā)現(xiàn)瀏覽器可以成功獲取favicon.ico。Web服務器按照預想返回了圖片，而不是首頁頁面。
這樣就成功的消除了一次多余的頁面返回動作。
沒想明白的怪事
不過有件事情沒有想明白。我使用WordPress 4.1在SAE上搭建的博客網(wǎng)站，在網(wǎng)站根目錄下沒有找到favicon.ico，但使用前述的測試手段來做驗證時，居然沒有觀察到瀏覽器要求下載favicon.ico的請求。
為什么？
IE11加載favicon.ico文件失敗后，為什么會再次下發(fā)加載首頁的請求？
其實問題還有一個，為什么之前分析頁面加載過程的時候，沒有觀察到首頁被加載兩次的現(xiàn)象。
使用IE11的調(diào)試工具仔細觀察首頁的刷新過程，發(fā)現(xiàn)其實不只是在訪問favicon.ico失敗時服務器返回首頁，IE11在訪問jquery.min.map文件失敗時，服務器也會返回首頁。
jquery.min.map又是什么鬼？
查閱jquery的官方資料，原來這是jquery 1.9版本的新特性。通常情況下，為了降低瀏覽器下載js文件的時延，我們在Web系統(tǒng)的生產(chǎn)環(huán)境里只會部署壓縮版本的jquery.js。這沒有什么問題，而且通常情況下都很好，但凡事總有例外。當客戶投訴頁面訪問時出現(xiàn)js報錯，而我們本地又無法重現(xiàn)問題，只好直接用瀏覽器來調(diào)試生產(chǎn)環(huán)境，問題就來了。壓縮版本的jquery里，變量名、代碼全部縮在一起，查看非常不方便，理解很困難。source maps就是解決這個問題的利器。jquery 1.9發(fā)布比較早，彼時只有Chrome支持source maps；現(xiàn)在已過去好多年，從IE11的表現(xiàn)看，應當也已實現(xiàn)了source maps的支持。
雖然知道了jquery.min.map是什么鬼，但對于定位問題本身并沒有什么幫助。因為我還是不知道如何觀察瀏覽器的行為。
分析問題的笨方法
最初想了很久不知如何下手，后來想代碼里引用到首頁的地方應該不多，干脆在相關(guān)的地方全打上斷點，調(diào)試一下看看，說不定會有所發(fā)現(xiàn)。于是在代碼里全局搜索首頁的文件名，找出引用到首頁的幾處代碼，在相關(guān)的Java代碼中打上了斷點。這時啟動容器，用瀏覽器登錄首頁，打開瀏覽器的調(diào)試器，刷新頁面，監(jiān)控Java代碼。
在幾處正常的訪問點上，代碼表現(xiàn)正常，但在處理favicon.ico的下載請求時，服務器返回了重定向的消息。我精神一振，預感神秘的問題快要找到原因了。仔細查閱重定向操作相關(guān)的代碼，外加幾次調(diào)試，終于搞清楚了問題所在。原來系統(tǒng)的代碼實現(xiàn)了對URL的訪問控制，限定瀏覽器只能訪問以.css、.js、.png、.jsp、.action為結(jié)尾URL，瀏覽器對其它形式URL的訪問均會被重定向到首頁。
代碼分析到這里，問題就清楚了。
問題原因
-
favicon.ico和jquery.min.map文件的結(jié)尾不在前述文件后綴范圍之內(nèi)，于是加載這兩個文件的請求被服務器的代碼重定向回了首頁，因而IE11按照服務器的要求重新加載了首頁。 - 之前調(diào)試代碼的時候，我并沒有設(shè)置禁止
IE11訪問緩存；因此當IE11被服務器代碼要求重新加載首頁時，IE11發(fā)現(xiàn)首頁已加載過，于是直接使用了緩存中的頁面，這樣我自然看不到第二次加載首頁的請求了。
問題清楚了，解決的手段自然就有了。
解決方法
- 找項目組的美工MM，參照產(chǎn)品的Logo制作了一個16*16的
favicon.ico文件，上傳到的WebRoot的根路徑，這下favicon.ico文件就有了。 - 修正代碼，調(diào)整權(quán)限控制的部分，把
.ico和.min.map加入到免認證的列表里，避免瀏覽器訪問這兩類文件時被重定義向。這個問題的發(fā)生，完美的詮釋了我同事的口頭禪，詭異的問題通常都是愚蠢的錯誤引入的。
參考資料
在網(wǎng)上搜索到一些材料，對于問題的定位起到了很大的作用，這里記錄下來。
- 關(guān)于favicon.ico的兩三事
- jQuery 1.9 RC1 and Migrate RC1 Released
總結(jié)
以上是生活随笔為你收集整理的网站优化之favicon.ico的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于“小数据”的机器学习
- 下一篇： Numpy计算近邻表时间对比