前端博客缓存机制

@eyasliu 2016-05-10 13:03:45发表于 eyasliu/blog 前端

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

遇到的问题

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

解决方案

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

流程

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

缓存更新机制

考虑一下几个问题:

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

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

流程图

dataflow

实现方案

技术选型:

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

code

详见文件 post.js

未来展望

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