提高掘金首页打开速度

前两天团队的 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 啦！