什么是KeepAlive?
首先,我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念,不能混为一谈。实际上HTTP的KeepAlive写法是Keep-Alive,跟TCP的KeepAlive写法上也有不同。
- TCP的keepalive是侧重在保持客户端和服务端的连接,一方会不定期发送心跳包给另一方,当一方端掉的时候,没有断掉的定时发送几次心跳包,如果间隔发送几次,对方都返回的是RST,而不是ACK,那么就释放当前链接。设想一下,如果tcp层没有keepalive的机制,一旦一方断开连接却没有发送FIN给另外一方的话,那么另外一方会一直以为这个连接还是存活的,几天,几月。那么这对服务器资源的影响是很大的。
- HTTP的keep-alive一般我们都会带上中间的横杠,普通的http连接是客户端连接上服务端,然后结束请求后,由客户端或者服务端进行http连接的关闭。下次再发送请求的时候,客户端再发起一个连接,传送数据,关闭连接。这么个流程反复。但是一旦客户端发送connection:keep-alive头给服务端,且服务端也接受这个keep-alive的话,两边对上暗号,这个连接就可以复用了,一个http处理完之后,另外一个http数据直接从这个连接走了。减少新建和断开TCP连接的消耗。
二者的作用简单来说:
HTTP协议的Keep-Alive意图在于短时间内连接复用,希望可以短时间内在同一个连接上进行多次请求/响应。
TCP的KeepAlive机制意图在于保活、心跳,检测连接错误。当一个TCP连接两端长时间没有数据传输时(通常默认配置是2小时),发送keepalive探针,探测链接是否存活。
总之,记住HTTP的Keep-Alive和TCP的KeepAlive不是一回事。
tcp的keepalive是在ESTABLISH状态的时候,双方如何检测连接的可用行。而http的keep-alive
说的是如何避免进行重复的TCP三次握手和四次挥手的环节。
正文开始。
vue可以通过<keep-alive>
元素包裹组件,实现缓存,下次使用时不需要重新创建该组件。但存在一个问题:keep-alive
包裹的组件中有滚动元素时,keep-alive
不会储存滚动位置。
实现后退不刷新主要依据keep-alive组件的activated和deactivated这两个生命周期钩子函数。
vue钩子函数的执行顺序:
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
初次进入页面,beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated。created和mounted不会再执行。
其中,
activated在keep-alive组件激活时调用.
deactivated在keep-alive组件被停用时调用.
Demo 实现了后退不刷新,并且返回时滚动到上次浏览的深度。
该demo中,包含三个链接导航。
home --> pageA --> pageB --> pageC
依次前进,每次前进到一个新页面都需要获取数据,而按下后退键后,
从pageC返回到pageB,pageB不再获取新数据,而是使用之前缓存的数据。
从pageB返回到pageA时,pageA不再获取新数据,而是使用之前的数据。并且当pageA存在滚动条时,返回时会滚动到上次浏览高度。
所以,pageA和pageB需要缓存,pageC不需要缓存。
//router.js import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({ mode: 'hash', routes: [ { path: '/', name: 'home', component: () => import('./views/Home.vue'), meta: { title: '首页', keepAlive: false //此组件不需要被缓存 } }, { path: '/pageA', name: 'pageA', component: () => import('./views/pageA.vue'), meta: { title: 'pageA', keepAlive: true, isBack: false } }, { path: '/pageB', name: 'pageB', component: () => import('./views/pageB.vue'), meta: { title: 'pageB', keepAlive: true, isBack: false } }, { path: '/pageC', name: 'pageC', component: () => import('./views/pageC.vue'), meta: { title: 'pageC', keepAlive: false } } ] }); export default router; //pageA.vue <template> <div class="page-a"> <h1>pageA</h1> <div> <div class="item" v-for="item in items" @click="goPageB"> {{ item }} </div> </div> <h1 @click="goPageB">go pageB</h1> </div> </template> <script> export default { name: 'PageA', data() { return { msg: "我是PageA页面", items: Array.from({length:50}, (v,k) => k), data: "", scrollTop: 0 }; }, beforeRouteEnter(to, from, next) { if(from.name == 'pageB'){ to.meta.isBack = true; } next(); }, mounted() { console.log('mounted....'); // this指向组件的实例,$el指向当前组件的DOM元素 const $el = this.$el; //滚动事件 $el.addEventListener("scroll", () => { //记录位置 this.scrollTop = $el.scrollTop; }); }, activated() { if(!this.$route.meta.isBack){ // 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据 this.getData(); } else { //恢复滚动条高度 if(this.scrollTop) { setTimeout(() => { this.$el.scrollTop = this.scrollTop; }, 100); } } // 恢复成默认的false,避免isBack一直是true this.$route.meta.isBack = false; }, methods: { getData() { // getData方法,模拟从后台请求数据 this.data = "数据"; console.log('get data') }, goPageB(){ this.$router.push({ path: "/pageB" }); }, back() { this.$router.push({ path: "/" }); } }, } </script> <style> .page-a { height: 100vh; overflow-y: auto; } .item { margin: 5px; padding: 10px; background: #ccc; } </style>
代码请参考 链接 ;
后退不刷新还可以通过include实现,可参考链接
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]