這段時間狀態比較清閑，我想是時候以一個前端開發人員的態度來整理下自己的博客設置了，除了UI上的一些調整，考慮最多的就是怎麼優化我的這些個性化內容，讓博客的訪問速度的更快
很多博客都做了個性化的定義，我自己的也是。這個功能是博客園吸引我的優點之一，不過當初做個性化的時候，方法簡單粗暴，再加上又用到了一些多餘的東西，導致博客的體驗還不夠好，這段時間狀態比較清閑，我想是時候以一個前端開發人員的態度來整理下自己的博客設置了，除了UI上的一些調整，考慮最多的就是怎麼優化我的這些個性化內容，讓博客的訪問速度的更快。
1. 去掉多餘的東西
早在2013年大學畢業的時候就已經在博客園開博，但是直到去年10月份才開始好好寫東西，因為13年，14年的工作一直讓我懷疑編程這條道路的價值和意義，大部分時間都在躊躇，哪有興趣跟熱情折騰這些東西，幸好去年換了新工作，換了新崗位，遇到了一批很聊得來的朋友（因為不止於同事關係，所以我沒有用同事這個詞），我才找到了自己真正感興趣的工作方向，所以我想好好乾，把每一次的收貨都用博客記錄下來，一方面能夠幫到別人，更多的還是成就自己。當時首先做的事就是把博客弄得漂亮一點，把別人的博客用到的模板和自定義的內容都拿了過來，直接套在自己的博客身上，當時的感覺還是挺不錯的，畢竟第一個版本的效果已經到位了。後來寫過兩篇總結性的文章，發佈之後得到了不少推薦，虛榮心開始膨脹，關心起博客的訪問數據起來，於是就做了一些影響博客訪問速度的事情：
1）加cnzz給博客做頁面訪問統計，可以查看各個頁面每天的訪問情況；
2）加了訪客總數統計，在公告那顯示訪問量累計有多少；
3）加了git hub 的ribbon，鏈接到自己的git hub（好像這樣很流行？）。
這三件事情給博客帶來的問題是：
1）增加了請求數量；
2）由於訪客總數統計以及git hub的ribbon都請求的是國外的伺服器，不少網路環境經常載入不出來，嚴重影響了訪問體驗。
我解決這幾個問題的措施是：
1）去掉了cnzz和訪客統計的功能，我一直認為自己是個追求實在的人，這種東西顯然對自己的博客來說就是不實在的東西，應該去除；
2）git hub的ribbon我還想留著，畢竟git hub跟博客對於現在的個人發展而言，能起到的作用還是關鍵的，所以很有必要把它們關聯起來，git hub那邊也有一個設置主頁的地方，我把那個選項設置成了自己的博客地址，這樣不管是訪問博客還是git，都能看到另外一方的鏈接。考慮到ribbon的那個圖片載入不出來，我把圖片就先下載到本地了，然後插入到了一篇不會發表的博客中，這樣我就能用博客園提供的圖片地址來載入那個ribbon了。
經過這兩步，打開博客時，選項卡左邊轉圈的時間明顯減少了好多。
2. 自定義代碼優化
博客園的設置裡面，有四處設置可以添加自定義的代碼：
1）頁面定製css代碼
2）博客側邊欄公告
3）頁首Html代碼
4）頁腳Html代碼
這幾個地方可優化的措施有：
1）去掉多餘的代碼，比如註釋或者沒有用的代碼，因為我原先是從別人的博客裡面扒出來的設置，所以有很多沒用的代碼，當時為了快速弄出效果，就把沒用的東西註釋了一番，但是沒有去掉。這次我認真看了側邊欄公告，頁首和頁腳的html，把沒用的和註釋都去掉了，儘量減少請求的數據量；
2）合併css：原先把自定義的css，存成了cnblog.css這樣一個外部文件，然後上傳到博客的文件列表裡，通過頁首html裡面加一個link標簽來引入的。後來發現根本不需要這個link標簽來引入cnblog.css，只要把該文件內的所有css全部放在頁面定製css代碼里即可，博客園會把頁面定製的css都單獨存成一個css文件，然後通過以下標簽來訪問：
<link type="text/css" rel="stylesheet" href="/blog/customcss/131484.css?v=XvxsKe6Pwfa%2f7uCSJUiEJkSTnTI%3d"/>
你可以查看下自己的博客源代碼，就能看到類似的標簽。通過這一步，相比原先的博客減少了一個css的請求。
3）壓縮混淆代碼，這個就不多說了，網上有線上工具（http://tool.lu/）可以用。
3. 圖片優化
目前博客總共用到了6自定義需要的圖片（collect那個不是）：
分別是ribbon，body的背景，瘋狂動物城的海報，頭像，假等高佈局需要的背景圖以及返回頂部的背景圖。
針對這些圖片可優化的手段是：圖片壓縮和圖片合併。要是會點簡單的ps，這個工作做起來就很容易了，還好網上也有工具：http://alloyteam.github.io/gopng/
不過最後沒有選擇圖片合併，因為body的背景，瘋狂動物城的海報和假等高佈局需要的背景圖這三張圖不適合做合併，而且其它3張圖片合併之後的數據量大小比原來的大，所以綜合下來還是捨棄了做合併減少請求的想法。最後所有圖片都做了一下優化，減少了一些請求的數據量。
4. 總結
博客園的response都有加cache-control和e-tag，另外還開啟了gzip，這兩個東西對於web性能提升是有非常巨大作用的，這方面的內容在《瀏覽器緩存知識小結及應用》有詳細的介紹，所以即使不做上面那些工作，你的博客訪問起來也不會太慢。以上內容純屬自己作為一個前端開發工程師，把自己的博客當成自己的產品，做些應該做的事情而已。
謝謝閱讀：）
