你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
kalasoo

提升掘金首页打开速度 0个回复 专栏 @ Javascript

kalasoo 发布于 1 年前

前两天团队的 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 下载地址:

具体的例子:

- 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 里面包含着在 activeinactive 下的图标。如:

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-lazyload="PATH_TO_IMAGE">

就 ok 啦!

等待第一条回复
登录后回复,如无账号,请使用邀请码注册