Nuxt页面级缓存的实现


Posted in Javascript onMarch 09, 2020

虽然 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个请求,内存没有任何明显波动,优化效果显而易见。

到此这篇关于Nuxt页面级缓存的实现的文章就介绍到这了,更多相关Nuxt 页面级缓存内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
javascript中expression的用法整理
May 13 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 #Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
angular.bind使用心得
2015/10/26 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python实现微信小程序自动回复
2018/09/10 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
电力公司个人求职信范文
2014/02/04 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
工程质量保证书
2015/05/09 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
培训简讯范文
2015/07/20 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python