一次PC商城首屏優化的總結

最近花了一些時間對咱們公司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，是否是有種代碼是不一樣的，思想是同樣的感悟呢！

本文完