而http1.0是不提供persistentconnection（keep-alive）模式的，这样每次call都会建立一次新的连接，尤其是对于ssl的连接来说，这个开销就有点霸道了。h

网络排查案例课》Keeplive保活机制定时发送心跳探测包；对于心跳回复包有超时限制；要打开这个TCPKeep-alive特性，你需要使用setsockopt()系统调用，对已经创建的Socket进行配置，启用Keep-alive

最近在做api开发,http无状态是众所周知的,但是刚才突然想到了http的keep-alive模式,心里有些不解,于是找了些资料,挑选了比较容易理解的摘出来,和大家分享一下.一些词汇的基础概念:Http

VueRouter路由嵌套在使用vue开发中，可能会碰到使用多层级别的路由。比如：其中就包含了两个主要页面，首页，详情，但是首页的下面又包含了列表，喜欢，收藏，我的四个子路由。此时就需要配置子路由通过使用children：importVuefrom'vue'importAppfrom'./App.vue'importMyDetailfrom'./views/MyDetail.vue'importM

在做项目的时候，如果使用到了keep-alive来缓存动态组建的时候，我们需要在deactivated(){}方法中来实现跳转页面，初始化页面数据，就需要用到Object.assign(this.

解决方法利用vue的keep-alive和component实现可访问页面的展示。

一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有1.1和1.0之说，也就是所谓的keep-alive

Vue的组件：优化性能和缓存组件Vue.js是一款流行的JavaScript框架，用于构建现代化的前端应用程序。在Vue中，有一个强大的组件叫做，它用于缓存和重用组件，从而提高应用程序的性能。本文将深入介绍Vue的组件，解释它的作用和如何使用它。什么是组件？是Vue.js的内置组件，它用于缓存动态组件。在典型的Vue单页应用（SPA）中，切换路由或显示不同的页面时，组件通常会被销毁并重新渲染。这意

Http1.1的Keep-Alive机制和Http2.0的多路复用机制，在实现上都需要引入连接池来维护网络连接。OkHttp中连接池的实现——连接拦截器ConnectInterceptor。

已按需引入vant3UI组件库2.已引入flex布局公共样式封装3.支持rem适配,375和750设计稿4.支持多环境(开发测试生产环境)5.已完成axios封装6.已完成API请求统一管理7.已实现keep-alive

：请求行、请求头部、请求体GET/HTTP/1.1\r\nHost:114.55.40.20\r\nContent-Type:text/html;charset=utf8\r\nConnection:keep-alive

性能测试之网络测试一、网络知识二、判断带宽是否有问题1）查看本机带宽：1、ping目标服务器2、查看网卡三、网络调优实战：当接口报地址被占用/连接超时原因1：是源端口不够用解决方案：1、我们尝试去掉keep-alive

组件切换之笨办法、动态组件、动态组件之keep-alive、插槽(不具名、具名)1组件切换之笨办法2动态组件3动态组件之keep-alive4插槽4.1不具名插槽4.2具名插槽1组件切换之笨办法Title

实现方案日志内容的示例如下：{"req":{"headers":{"host":"x.x.x.x","connection":"keep-alive","x-forwarded-for":"x.x.x.x

最近有客户反映我们系统按条件查询完列表进入详情页后再返回列表页时页面没有展示他查询的那条数据，而是进入页面一贯会展示按无条件查询的数据，希望我们能对列表做查询缓存，那咱们就用keep-alive来实现一下

最终解决办法是：1、请求超时时间timeout5s->1s2、开启Keep-Alive。问题排查首先我们重启服务短暂解决了不可访问的问题，既然是线上问题，一定不能忽视，我们开始通过一些手段复现问题。

keep-alive作用，使用场景一.keep-alive的使用场景在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态

/goods.vue";exportdefault{data(){return{comType:"vSon",};},components:{vSon,vGoods,},};2、keep-alive缓存组件

/target:"http://user.jinfu.baohan.com/",changeOrigin:true,//是否启用跨域//解决mac代理超时问题headers:{Connection:"keep-alive

记录主元素computed:{elTable:function(){returndocument.getElementsByClassName('layout-content')[0]},},当引入keep-alive

keep-alive对组件进行缓存，节省性能。v-if和v-show看场景，自行选择减少

Http协议本身只有1.0和1.1，也就是所谓的Keep-alive，把多个Http请求合并为一个。二、Websocket是什么样的协议，具体有什

Http协议本身只有1.0和1.1，也就是所谓的Keep-alive，把多个Http请求合并为一个。WebSocket是HTML5中的协议，支持持

如果使用this.$destroy()会造成相应组件页面之后也不能keepAlive缓存，于是找到下面的方法。另外把监控路由离开事件的this.$destroy()写在Vue.mixin里，或者写在单独作为mixin引用的.vue文件里可以方便做统一配置。下面的this.$store.state.app.ifDestory和this.$store.commit('SET_COMPAGE_DESTO

二、使用demo1.tab页签中的使用2.模拟新闻页demo三、用keep-alive包裹，保持状态总结一、vue中的动态组件是什么？有什么用？动态组件指可以动态切换组件的显示和隐藏。

需求需要缓存这个出入记录，当tab切换时不重新加载，当刷新页面时，或把这个关闭在重新打开时重新加载如图：（我这里用的是芋道源码的前端框架)keep-alive1、include包含页面组件name的这些组件页面，会被缓存起来2、exclude除了这些name以外的页面组件，会被缓存起来3、没有include或者exclude属性，表示所有的路由组件都会被缓存起来exportdefault{name

什么是keepalive在Vue中，我们可以使用keep-alive包裹一个动态组件，从而缓存不活跃的实例，而不是直接销毁他们：这对于某些路由切换等场景非常好用，例如，如果我们需要实现一个列表页和详情页

http1.0和http1.1区别1.长连接：1.1默认开启长连接，1.0需要明确使用keep-alive参数来进行长连接；【长连接指的是TCP连接的时间的长短，长连接使得多个HTTP请求可以复用一个TCP

curl--no-buffer-is-H'Connection:keep-alive,Upgrade'-H'Upgrade:websocket'-v-H'Sec-WebSocket-Version:13

一、vue生命周期图Fromthenetwork二、activated+deactivated除此之外，简单介绍一下在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated

什么是keep-alive提到keep-alive大多数人都是又爱又恨啊爱是他能够缓存页面、用起来很是方便，恨是不能够区分处理遇到一些问题基础概念作用标签keep-alive可用于router-view

http1.0短连接，有有限的缓存机制，后期集成了长连接，也有连接并发数限制http1.1：在连接上（使用了tcp长连接，存在tcp连接池子,后面该功能http1.0也集成支持了），connection:keep-alive

相对于urllib3库，requests库拥有完全自动化Keep-alive和HTTP连接池的功能。requests库包含的特性如

（shouldComponentUpdate，React.memo，useMemo，useCallback）怎么避免Vue组件的重复渲染(v-once，keep-alive，避免频繁的修改Vue的data

释放连接一次连接只能请求一次资源HTTP长连接使用同一个TCP连接来发送和接收多个HTTP请求/应答，避免了连接建立和释放的开销长连接特点只要任意一端没有明确提出断开连接，则保持TCP连接状态使用HTTP的Keep-Alive

组件缓存keep-alive文章目录组件缓存keep-alive一、keep-alive是什么二、keep-alive优点三、问题四、解决方案五、代码示例六、回顾一下钩子七、总结一、keep-alive

app.vue在app.vue根组件判断一下需要缓存的组件router/index.js{path:'',//默认子路由，只能有1个name:'home',component:()=>import('@/views/home'),meta:{keepAlive:true}}views/home/components/article-list.vue在文章列表页加载的时候监听元素滚动事件，记录当前浏

结合具体问题：在浏览器输入一个网址并访问，具体发生了什么？1.对这个网址进行DNS域名解析，得到对应的IP地址DNS怎么找到域名的？DNS域名解析采用的是递归查询的方式，过程是，先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归查找后，找到了，返回给我们的浏览器2.根据这个IP，找到对应的服务器，发起TCP的三次握手，即建立连接TCP连接的建立（三次握手）？1、客户

httpWebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有1.1和1.0之说，也就是所谓的keep-alive

今天研究下如果需要缓存组件，vue提供的解决方式keep-alive文章目录一、Keep-alive是什么？

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，我们要把它也包裹在transition标签内，否则页面将重新渲染，切换的动画也会卡顿通过watch来处理路由跳转是左是右

这就是http协议）浏览器-->服务器发送的请求格式如下：表示请求的目标、协议版本GET/HTTP/1.1表示服务器的IP地址和端口Host:127.0.0.1:8080表示是长链接Connection:keep-alive

跳转的两种写法:1.使用keep-alive使组件缓存,防止刷新时参数丢失keep-alive组件用于缓存和保持组件的状态，而不是路由参数。

注意：我们前面讲nginx的时候有keepalive_time等选项，那里的Keep-Alive意图在于短时间内连接复用，希望可以短时间内在同一个连接上进行多次请求/响应

目录js跳转到新标签打开PDF文件js每十个字符换行es6用表达式或变量名作为对象的属性名vuev-for插值、:style、:class父组件加载完后再加载子组件keep-alive缓存跨域请求第三方接口跨域请求之

二、Vue生命周期中具体过程1.Vue生命周期中的函数创建Vue实例期阶段：运行阶段：销毁阶段：2.加入keep-alive后1）keep-alive的认识：2）keep-alive的用法：各组件间的执行情况

以上摘抄自vue官网，可以看出来，keep-alive是用来缓存组件的，比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。

2.基础特性：模块化设计，较好的扩展性高可靠性支持热部署：不停机更新配置文件，升级版本，更换日志文件低内存消耗：10000个keep-alive连接模式下的非活动

页面掉帧1》网络请求太多，请求返回的数据比较慢接口返回慢的话，后端做些优化；前端适当做些缓存，减少不必要的重复的请求可以从调试工具中的Network查看请求情况2》回流和重绘多减少dom的操作，适当使用keep-alive

正确用法在组件中使用（这里结合了transition内置动画组件）import{onActivated,onDeactivated}from'vue'//在keep-alive组件激活时调用onActivated