前端博客缓存机制

[eyasliu]

继上一篇文章 #2 ，使用github api搭建了一个博客，托管于github pages。这么做优点很显著，功能齐全，seo友好，issues页面也好看，github用户互动方便等等。但是，在某些方面收到了阻碍。

遇到的问题

• 接口偏慢，有部分网络还把github墙了
• 接口访问次数受限，对于普通的api请求限制为了每个ip每小时最多请求60次

解决方案

给网站加个缓存，把每次请求回来的数据存到浏览器，需要数据的时候从浏览器中拿。由于数据来源于缓存，速度回非常快

流程

当应用需要请求数据时，首先检查一下本地缓存中是否存在数据，如果存在则从缓存中获取，直接返回给应用，如果不存在，就先请求api，请求成功后先将数据存到缓存中，再从缓存中读取数据，返回给应用。这样，应用的数据统一都来自缓存，而api请求成功后，都统一存到缓存，这样统一流程更方便实现与维护。

缓存更新机制

考虑一下几个问题：

• 这是博客应用，而且github还有一个永远最新的备份。所以应用数据有所延时其实完全没关系
• 网站流量很小，页面请求不多
• 博客都是文章，文章都是字，读文章不会经常刷新页面

结论是： 每当进入首页的时候刷新列表，而且还是后台静默更新。进入文章详情后，更新文章的评论数据。 因为评论数据无法一次性全拿回来

流程图

实现方案

技术选型：

• lowdb：快速，简便，以lodash驱动的简易数据库
• localStorage：lowdb支持
• underscore-db：提供工具函数方便操作lowdb数据库

code

详见文件 post.js

未来展望

• localStorage 储存空间有限，如果能换成indexedDB的话就更好了，lowdb作者没有做indexedDB驱动，但是提供了一个开放api，或许可以自己写个驱动
• 接口请求每小时60次限制可使用github 开发者应用升级为5000次每小时，但是这需要一个后端服务

[zeusCore]

大块不常变的数据可以用js做本地数据缓存，设置输出js的接口缓存时间长一点即可