哪个省份做网站的多,遵义市建设厅网站,网络营销推广方式,松原新闻头条使用vue3进行项目开发#xff0c;前端框架使用jeecg-boot进行开发#xff0c;项目初期#xff0c;打包部署到生产环境#xff0c;无异常。某天#xff0c;进行前端项目打包部署到生产环境#xff0c;突然出现异常情况#xff0c;部署到线上环境#xff0c;初始进入系统…使用vue3进行项目开发前端框架使用jeecg-boot进行开发项目初期打包部署到生产环境无异常。某天进行前端项目打包部署到生产环境突然出现异常情况部署到线上环境初始进入系统页面卡顿大概一分钟左右但是本地开发环境正常无卡顿。 于是使用各种工具对系统进行分析浏览器任务管理器查看系统运行情况F12查看是否有接口长耗时等问题使用监控软件监控浏览器资源消耗情况linux文件句柄打开限制nginx配置等。
异常情况如下图所示 1、异常情况分析 a.接口异常可能情况分析 运用各种工具排查观察在开发者模式下F12查看请求耗时情况发现接口请求耗时无异常都在毫秒(ms)级别能做出响应但是接口response无响应返回值于是怀疑后端接口问题于是使用postman单独调用测试后端接口发现接口响应无异常于是排除后端服务问题。 在查看所有请求包括静态资源查看所有请求资源时发现部分静态资源处于pendding状态于是怀疑静态资源慢因此也拷贝该资源链接单独请求发现资源请求无异常也能在毫秒(ms)响应。于是排除静态资源问题。多次观察发现系统初次登录后进入后端管理页面需要加载大约1分钟左右时间请求资源链接178个但是每次刷新系统或者登录系统时发现请求资源链接58个左右时就会存在部分pendding状态的请求资源总是怀疑该部分资源请求缓慢但是对于pendding状态的请求资源单独浏览器访问也能在毫秒(ms)响应。于是排除网络及资源请求缓慢问题。
b.nginx配置分析 怀疑nginx配置问题导致于是检查nginx配置部署上线不使用缓存等仍不能有效解决。于是在本地部署NGINX并打包项目部署在本地进行排查分析发现和线上存在相同情况基本排除nginx问题。
c.缓存数据分析 通过第1点分析怀疑是因为业务逻辑处理导致系统处于卡顿没有进行异步操作导致主线程阻塞导致页面请求资源不能响应。于是想到可能是因为在系统登录后需要缓存后端数据字典及行政区划及机构数据导致由于该部分数据大约在1MB、1MB、2MB、2MB总共在6MB左右于是想到使用localStorage进行数据缓存时localStorage是属于单线程进行同步操作导致。于是查看相关资料localStorage能缓存数据是5MB没对该项进行仔细排查于是排除是该问题导致。 通过多种方式排查后发现还是不能有效找到导致加载缓慢原因于是又重新定位到缓存部分注释掉缓存逻辑代码发布到生产环境发现还是同样缓慢。于是就是排除缓存导致。有通过多种方式排查还是不能找到异常原因。又再次把异常情况定位到缓存进行排查还是注释掉缓存代码并清除浏览器缓存关闭浏览器重新登录系统并进入系统发现能正常进入系统经过多次测试正常最终才确认是缓存后端数据导致。
2、问题深入分析 虽然localStorage能存储大小5MB但是并比意味着数据存读取效率高因为使用localStorage还涉及到数据序列化等经过测试发现存1MB数据到localStorage大约需要10秒左右由于localStorage又是单线程同步操作并阻塞主线程导致浏览器不能正常加载资源因此导致初始进入系统页面卡顿大概一分钟左右情况。
3、缓存解决方案 由于缓存数据量较大因此经过分析最终使用indexedDB解决。
4、localforage解决方案 查阅文档发现indexedDB相关的API操作极为复杂对于开发使用极为不便因此想对indexedDB相关API进行封装。但是在查阅文档资料发现localforage已对indexedDB进行高度封装使用极其简易因此选择localforage对数据进行缓存。部分核心代码如下
//数据存取// 解决数据缓存卡顿问题const userStore useUserStore();const indexedDB localforage.createInstance({name: indexedDB,// 支持config所有配置// storeName: keyvaluepairs, // 仅接受字母数字和下划线});// 接口数据请求getSysDictionary().then((res) {if (res Object.keys(res).length 0) {// 数据缓存indexedDB.setItem(DB_DICT_DATA_KEY, res);}});// 数据读取indexedDB.getItem(DB_DICT_DATA_KEY).then((res) {userStore.dictItems res;});由于indexedDB相关API数据读写都是异步操作因此当需要进行同步访问时需要使用关键字await进行操作。诺调用方法不能使用async关键字即可能是通用方法封装或者涉及UI更新必须同步返回此事由于异步原因不能很好处理即便使用then或者promise也不便于处理那么解决思路是数据缓存到indexedDB时同时缓存数据到浏览器页面比如 useUserStore此时能解决异步导致需要UI更新问题。
5.相关大数据学习demo地址: https://github.com/carteryh/big-data
