DDR爱好者之家

Nuxt页面级缓存的实现
站长资源 2024/11/24 佚名
31 1538
DDR爱好者之家 Design By 杰米

虽然 Vue 的服务器端渲染 (SSR) 相当快速，但是由于需要为每次请求为了避免交叉请求状态污染，都创建一个新的根Vue实例，创建组件实例和虚拟 DOM 节点的开销，无法与纯基于字符串拼接的模板的性能相当。在 SSR 性能至关重要的情况下，明智地利用缓存策略，可以极大改善响应时间并减少服务器负载。同时还可以大大减少后端接口服务器的负载。

在 vue SSR指南 中，缓存有两种，分为页面级缓存和组件级缓存。本次讲的是页面缓存，如果内容不是用户特定的并且在相对较短时间内，页面内容不需要更新。我们就可以使用页面缓存。对于页面级缓存我们可以通过这段koa服务器的代码大概知道缓存的思路：

const microCache = LRU({
 max: 100,
 maxAge: 1000 // 重要提示：条目在 1 秒后过期。
})

const isCacheable = req => {
 // 实现逻辑为，检查请求是否是用户特定(user-specific)。
 // 只有非用户特定 (non-user-specific) 页面才会缓存
}

server.get('*', (req, res) => {
 const cacheable = isCacheable(req)
 if (cacheable) {
 const hit = microCache.get(req.url)
 if (hit) {
  return res.end(hit)
 }
 }

 renderer.renderToString((err, html) => {
 res.end(html)
 if (cacheable) {
  microCache.set(req.url, html)
 }
 })
})

流程图如下：

Nuxt页面级缓存的实现

上面的代码为vue的ssr渲染提供了方案，但是对于使用nuxt框架的同学而言，用脚手架初始化完，框架对于vue服务端渲染的res.end()函数做了高度封装，从下图nuxt在接收到请求后进行渲染的流程可以看出，nuxt主要是通过nuxtMiddleware调用renderRoute()来进行渲染的：

Nuxt页面级缓存的实现

那么我们是否可以通过重写renderRoute()这个api拦截其内部渲染逻辑，在渲染之前加上缓存呢？ nuxt-ssr-cache 插件已经这样做了。我们来看一下这个nuxt模块核心部分的源码：

const renderer = nuxt.renderer;
const renderRoute = renderer.renderRoute.bind(renderer);
renderer.renderRoute = function(route, context) {
 // hopefully cache reset is finished up to this point.
 tryStoreVersion(cache, currentVersion);

 const cacheKey = (config.cache.key || defaultCacheKeyBuilder)(route, context);
 if (!cacheKey) return renderRoute(route, context);

 function renderSetCache(){
  return renderRoute(route, context)
   .then(function(result) {
    if (!result.error) {
     cache.setAsync(cacheKey, serialize(result));
    }
    return result;
   });
 }

 return cache.getAsync(cacheKey)
  .then(function (cachedResult) {
   if (cachedResult) {
    return deserialize(cachedResult);
   }

   return renderSetCache();
  })
  .catch(renderSetCache);
};

在这段代码中，先保存了renderer原来的renderRoute代码，之后又重写了renderRoute代码，返回了一个通过cache缓存来获取缓存内容的逻辑。cache返回了一个promise，如果是resolve的，并且有缓存的内容，就直接返回缓存内容。如果没有缓存内容或者reject，就执行renderSetCache()。而renderSetCache()中，返回了原来最初的renderRoute()处理逻辑，同样如果renderRoute()返回的promise被resolve了，那么就通过cache的setAsync方法来进行缓存，之后返回渲染结果。

使用方法大家自行参考git中的readme文档，这里就不说了。

下面我们真正来仿真一下，看看这个模块的功效到底如何。我们通过ab命令

ab -n 4000 -c 50 -s 120 -r http://localhost:3000/

来进行压测：

第一种情况，没有添加页面缓存，大约持续请求了10秒钟，执行到3600个请求的时候，发生错误，不再继续请求了：

Nuxt页面级缓存的实现

我们来通过日志看下是什么错误：

Nuxt页面级缓存的实现

可以看到FATAL ERROR这一句，JavaScript heap out of memory。堆内存已经没有办法再进行分配，所以进程终止了。

我们在终止之前通过进程监视器可以看到node进程已经彪到了1.7GB的内存。

Nuxt页面级缓存的实现

第二种情况，我们添加了页面缓存，通过server端的日志，我们可以看出，只请求了一次后端的api数据接口，说明缓存已经成功拦截了页面请求。请求数据如下：

Nuxt页面级缓存的实现

在2秒钟之内，就顺利结束了4000个请求，内存没有任何明显波动，优化效果显而易见。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米