聊天室软件源码前端性能优化，缓存角度的相关分析

在我们考虑提高聊天室软件源码页面渲染速度之前先来思考一个问题，一个页面的速度由什么决定而易见，这里主要包含两方面的影响因素。

1、资源传输时间（tcp链接时间和响应时间）
2、dom渲染时间

这两方面的耗时可以通过浏览器环境下通过window的内置对象window.performance拿到相关数据并计算得到

前端常见的优化方式

所以进行聊天室软件源码前端优化的方式，通常是针对围绕两个方面进行优化，即尽可能的减少资源传输时间和dom渲染时间。

以下是前端常见的三种优化方式：

1、服务器优化
2、减少传输体积-压缩和切片技术
3、合理利用缓存

展开来讲每一种优化方式都能对应跟多具体的行为，对于聊天室软件源码服务器优化，vue和react生态体系下都给出了较为成熟的解决方案。比如Vue提出的Nuxt.js和React提出的Next.js。

对于第二种方式，聊天室软件源码可以通过减少传输体积来达到优化的目的可以采用一下几种方法：

• 资源压缩（包括图片、字体库以及js脚本）
• Tree shaking技术：剔除无用代码
• 代码分离以及提取公共代码
• 懒加载
• 使用webp格式图片
• 在生产环境关闭source map
• …

缓存方式有哪些

1、cookies-缓存量，不安全
2、全局状态缓存-不持久, 占用内存
3、本地缓存-locaStorage,sessionStroage，持久化

对于聊天室软件源码本地缓存，我们需要知道locaStorage，sessionStroage有哪些区别：

• locaStorage，除非手动删除，不然会一直存在，
• sessionStroage，基于会话级别的缓存策略，页面会话关闭，则清除。

做一个缓存架构

这里我们基于聊天室软件源码请求发送实现一个缓存架构。在运用缓存进行性能优化时需要考虑的问题有：

• 缓存的量引起的压力，储存压力。
• 缓存的更新问题-如何在数据更新后保持最新数据。

基于这两点的考虑，在对数据进行缓存的时候，数据的变动越少越好。

解决跨域

1、webpack 代理转发：做了一个node中间层——只对开发环境有效
2、nginx代理或者手动做node中间层–成本太大
3、jsonp，适合静态页面和jquery–不适合vue
4、聊天室软件源码后端接口配置跨域资源共享(CORS)–简单高效

缓存思路:

第一次加载后，后续无需请求
热门商品放入localStroage,非热门的放到状态缓存里

这段代码中设计到大量的条件判断语句。总结起来缓存入口可以分为三类：

1、缓存
2、localStroage
3、发送请求，处理缓存逻辑

我们可以利用享元模式优化这一流程，享元模式是?种经典的结构型解决?案，?于优化重复、缓慢及数据共享效率较低的代码。它旨在通过与相关的对象共享尽可能多的数据来减少应?程序中内存的使?。

基于此，我们已经完成了一个缓存架构的实现，现在可以直接在聊天室软件源码中引入并使用这个缓存架构。
新建.vue文件