最近花了一些時間對我們公司PC端首頁首屏做了一次優化。下面是最終優化後的載入速度（禁止谷歌瀏覽器快取情況下）
本胖還記得之前掘金熱門推薦了一篇名為 效能優化只有3步，你瞭解嗎，裡面總結了3種方法，本胖感覺很好哈。第一種就是關鍵資源位元組數，第二種是關鍵資源連線數，3.關鍵渲染路徑。
本胖對我們商城首頁做了一個初步分析。這次的優化首先從關鍵資源位元組數+關鍵資源連線數入手，將原來首頁首屏的資源由之前的85個請求減少到40個，將原來的首屏資源大小由2.3M減小到800k。最終將domcontentloaded時間減少到平均400ms以及將Load時間減少到平均600ms，初步達到了首頁秒開的效果（當然和淘寶天貓還是有很大差距的）。下面本胖就從4個方面來詳細記錄一下這次的優化步驟，敬以此文，做一個總結。
1.輪播外掛懶載入
像這樣的商城首頁輪播圖，在天貓，淘寶，京東等最大的商城平臺那是一定會有的，我們商城也不例外。這裡的輪播外掛一開始是用自己用js封裝的。不過隨著運營需求的增加，可以從上圖看出目前已經有9個活動了，也就意味著一開始就會多請求並且渲染9張1920*450的大圖，做web前端的都知道這意味著什麼。那麼本胖首先想到的就是該如何讓後面這8張延遲載入。
用過swiper都知道，該外掛可以很輕鬆的配置圖片延遲載入，那麼是不是把自己的外掛去掉換上大名鼎鼎的swiper呢，那就是5分鐘的事情，時間少效果又有了，是不是很easy呢。
但是，如果你這樣做了，那麼好不容易遇到的提升自己的機會就這麼白白溜走了。
於是，本胖就想在本胖之前寫的外掛上面加上和swiper一樣的高大上的懶載入功能。
懶載入其實說到底就是初始化預設不顯示資源比如去掉img的src屬性，那麼該img就不會傳送請求了，也就做到了懶載入，然後在適當的時候在去請求img對應的資源就可以了。
我們就可以在渲染外掛裡圖片的時候將圖片路徑放在data-src(也可以其他不適src的自定義屬性)裡面，然後我們要做的就是在外掛程式碼裡面去控制什麼時候去請求圖片資源。我們來想一下，這樣的輪播當使用者點選左右或者下面的小圓點或者自動播放的時候就會請求新的圖片資源。那麼我們需要做的事情就是在這些事件中去將data-src改成src不就好了。不過對於第一張圖片我們是需要特殊處理的，一開始就讓他的data-src改成src就可。下面是程式碼片段截圖
A.首張圖片處理
B.延遲載入圖片處理
當使用者點選左右或者下面的小圓點或者自動播放的時候 這裡做一個說明，這3種事件都是呼叫了move方法，所以只要改一個地方就好了。
2.統計程式碼以及客服程式碼延遲載入
首頁一般都會有一些統計程式碼，這些程式碼不能沒有，但是也不需要首屏的時候就載入出來。
那麼就很簡單，我們只要把這些程式碼都放在onload事件裡面，然後利用settimeout這個很神奇的方法，設定一個時間比如2000ms，那麼在谷歌瀏覽器Network你會發現一開始先有N個資源請求，過大約2000ms會又出現M個請求（這些就是統計程式碼等輔助程式碼的請求），但是Load時間卻不會把這些輔助程式碼的請求載入時間計算進去。
這種方法，本胖可以做一個極限推斷，如果本胖把延遲時間改成無窮大，那麼不就是永遠不會對頁面首屏時間有影響了嗎，有類似想法的可以一起談論一下這方法哈。
3.合理使用字型圖示
首頁這一塊表面看有6個請求，其實是12個，滑鼠移入是不同的圖示。而且都是後臺運營可以配置的。這裡要說一下，其實像這裡的一級分類，一段時間內（至少一個月）都不會改變，而且每次改了前端這裡也要改對應的樣式才能填滿整個父容器。那麼這裡就不應該做成可配置的，而是要前端控制。
這時候，本胖就想到了用字型圖示來替換這些請求圖片。下面來介紹一下如何用字型圖示。
http://www.iconfont.cn/，這是阿里的字型圖示網站，做的很好。裡面有很多已經定義好的字型圖示，如果沒有滿意的，可以自己上傳svg然後就可以下載對應的字型圖示了。
本胖這次用的是字型圖示最原始的unicode應用方式。
unicode是字型在網頁端最原始的應用方式，有以下特點:
1.相容性最好，支援IE6+，以及所有現代瀏覽器
2.支援按字型的方法去動態調整字型大小，顏色等。
3.但是因為是字型，所以不支援多色。
unicode使用步驟如下：
第一步：拷貝專案下面生存的font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步：定義使用iconfont的樣式
.iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}
第三步：挑選相應圖示並獲取字型編碼
3
還有其他很多應用的方法，可以參考這裡 http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=code
4.除了首屏外下面的資源都延遲載入
先來看一下愛奇藝首頁載入，因為這次本胖採用的就是愛奇藝首頁載入的策略。
可以看到除了首屏外，下面的資源都是一開始顯示loading圖，當進入使用者視線的時候才去載入這一塊的整體資源，比如這裡面的html結構，圖片資源，js資源等，注意css是一開始統一載入的哦。這一點可以從下面的截圖中得到印證
這上面的data-block-url就是該頻道渲染好的結構地址。愛奇藝是採用inc的方式儲存資源的。
有沒有感覺這種載入方式和圖片懶載入很想呢，只不過是把圖片url快取頻道資源url，是不是有種程式碼是不同的，思想是一樣的感悟呢！
本文完