提高掘金首頁打開速度

前兩天團隊的 MrDream 開發了新版的 掘金 Welcome 頁面：

由於掘金在作一些推廣的活動，而且爲了接地氣更好地展現平臺裏的內容，所以首頁有了如上展現（你們也能夠反饋一下是否喜歡，有什麼地方能夠優化）。

和以前小清新的首頁不一樣：

新的頁面裏有了更多的數據和內容，從而能夠更好地展現掘金自己的活躍度和最熱門的文章。

可是，內容的增長無疑會加重數據、展現的爆炸，除了最基礎的 JS、CSS 打包壓縮，新版上線後首頁常有打開速度慢的狀況。所以，我在這裏作了幾個重要的優化，以提升頁面展現效率。

我分析了網站的狀況，把問題主要聚焦在：

1. 第一次 load HTML 太慢
2. 網站一開始的加載數據請求過多

（一）後臺數據緩存

首先，我更新了一個更好地服務器，✌️

網站首頁主要展現了每個分類下最熱的文章，這樣這些內容的刷新基本上都是能夠緩存的，所以用 Redis 作了緩存優化。

而，後面的滑動加載的內容則是由前端完成，減小了初次 HTML 太重的狀況。

（二）SVG 合併

網站裏有不少的圖標，如

而每個圖標又有灰、藍兩個夜色的圖標，前兩天看掘進裏的的文章 擁抱Web設計新趨勢：SVG Sprites實踐應用 剛和看到了用 SVG Symbols 來實現 Sprite 的方法。進而使用了一下，發現實在好用。

1. 將所須要的圖標，用 SVG Tool 合併，記得必定要定義好文件這與以後的 ID 有關
2. 加載合併的 .svg 文件到 HTML 裏
3. 經過 <svg><use xlink:href='#SYMBOL_ID'></use></svg> 語法調用

SVG Tool 下載地址：

• mac：jdc.jd.com/svg/svgtool…
• win32: jdc.jd.com/svg/svgtool…
• win64: jdc.jd.com/svg/svgtool…

具體的例子：

- each category in categories
    li
        svg.icon
            use.active(xlink:href='##{category.category}')
            use.inactive(xlink:href='##{category.category}_normal')
        span.aside-list-span #{category.name}複製代碼

這個是展現側邊的 categories 且每個 category 都有一個圖標 svg.icon 裏面包含着在 active 和 inactive 下的圖標。如：

svg.icon
    use.active(xlink:href='#android')
    use.inactive(xlink:href='#android_normal')複製代碼

分別表明了 Android 分頁是不是當前頁面。在 .svg 的文件裏則是：

• <symbol id="android">...</symbol>
• <symbol id="android_normal">...</symbol>

我一開始不知道怎麼實現 :hover 的效果，擔憂還要用 JavaScript 實現，而後，發現其實 SVG 圖片是自然支持 CSS 屬性的。如上：

li:hover, li:active, li.true {
    .active { display: inline-block; }
    .inactive { display: none; }
}
.active { display: none; }
.inactive { display: inline-block; }複製代碼

就能夠實現 :hover, :active 的效果了。

（三）圖片 Lazyload

因爲咱們的網頁用的前端框架是 Vue.js，所以使用了佳文開發的 vue-lazyload 來實現了列表裏圖片的異步加載：

import Vue from 'vue'
import lazyload from 'vue-lazyload'

Vue.use(lazyload, {
  error: 'dist/error.png',          // 當 error 的時候展現的圖片
  loading: 'dist/loading.gif'       // 當 loading 的時候展現的圖片
})複製代碼

而後代碼中之間用：

<img v-lazy="PATH_TO_IMAGE">複製代碼

就 ok 啦！