今年7月末将rss reader初版发布，实现了我很早就想做的事情：做一个自己想要的rss阅读器，在今天看来，这个项目和最初的想法是一致的，保持了简单。
在最新的v1.5版本中，提升了页面的加载速度，优化了seo（但愿有），下面分享一下为什么要做以及我是怎么做的。
项目开源之后，就开始在各个社交平台进行推广，得到了一些反馈，最不能忍的是“为什么我打开网站是空白的？”，这对用户的体验来说是致命的，分析了一下有一下几个问题
- 网站部署在国外机器。ping的时延保持在170多以上，是先天的问题，只能减少加载的数据。
- vue初始化完成，还需要从后端获取数据，这期间页面是空白状态，没有给用户友好的提示，比如“数据正在加载中”。
- 页面需要的静态文件js、css等占用空间较大，由于外部cdn具有不稳定性，将其下载到本地使用，网络传输耗时较久，且未设置缓存时间
- 爬虫不加载js，vue依赖js渲染数据，seo优化效果不好。
因此要解决德问题有两个：提升页面加载速度，优化seo。
添加数据加载中动画
在v1.3版本中，加入了“数据加载中”的动画，白屏的时间有效的缩短了，但是动画展示的时间又变的比较长，这个体验仍然不好。
下图是chrome的Performance进行测试结果图，在第4秒的时候真正的数据才展示到页面上，太慢。
【1】nginx添加静态文件gzip压缩
压缩比还是比较可观的，最高有十几倍。
在server或者http模块下添加下面的配置，gzip on代表开启压缩，gzip_types代表有哪些文件需要进行压缩。
1
2
|
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
|
【2】nginx开启静态文件缓存
静态文件开启12小时缓存
1
2
3
4
5
|
location /static {
expires 12h;
add_header Cache-Control "public";
proxy_pass http://localhost:8080/static;
}
|
至此完成了nginx相关的优化，提升网络传输过程中的效率。
【3】使用模版引擎“预渲染”
这个预渲染可能和传统意义上的预渲染不太一样，使用模版引擎的好处是，可以直接将后端数据在模版中使用，通过for循环将前端组件展开以及数据填充，这样当vue加载好之后（甚至未加载好），可以很快的把数据展示在用户眼前，由于使用的是同一套style样式，对用户来说几乎是没有感知的。
通过showSEOFlag变量控制模版引擎生成数据的展示，当websocket建立连接后，开始接收数据时，就将showSEOFlag置false，此时将完全切换到了从data获取数据渲染，页面会有些许的波动。
在这一部分里，在增加了网页静态数据seo数据的同时，也增加了网站的加载速度
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<< range $index, $feed :=.RssDataList >>
<el-col v-if="showSEOFlag" :xs="24" :sm="12" :md="8" :lg="6" :key="index" class="feed-col">
<el-card class="box-card">
<div slot="header" class="card-header">
<span>
<< $feed.Title >>
</span>
</div>
<el-scrollbar style="height: 300px;">
<< range $i, $item :=$feed.Items >>
<el-list key="<< $i >>">
<el-list-item>
<div class="list-item-title">
<span>
<< inc $i >>.
</span>
<el-link href="<< $item.Link >>" target="_blank" title="<< $item.Title >>">
<< $item.Title >>
</el-link>
</div>
</el-list-item>
</el-list>
<< end >>
</el-scrollbar>
<div slot="footer" class="card-footer" style="height: 10px;">
<time class="time">
<< $feed.Custom.lastupdate >>
</time>
</div>
</el-card>
</el-col>
<< end>>
<el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(feed, index) in feeds" :key="indeclass="feed-col">
<el-card class="box-card">
<div slot="header" class="card-header">
<span>{{ feed.title }}</span>
</div>
<el-scrollbar style="height: 300px;">
<el-list v-for="(item, i) in feed.items" :key="i">
<el-list-item>
<div class="list-item-title">
<span>{{ i+1 }}. </span>
<el-link :href="item.link" target="_blank" :title="item.title">{{ item.title }}</el-link>
</div>
</el-list-item>
</el-list>
</el-scrollbar>
<div slot="footer" class="card-footer" style="height: 10px;">
<time class="time">{{ feed.custom.lastupdate }}</time>
</div>
</el-card>
</el-col>
|
最终效果
现在，用户用1秒就可以看到已经渲染完成的数据，在此之前是4秒多，提升了4倍左右。