如何用keepAlive实现标签页缓存

什么是KeepAlive

        首先，要明确所说的是TCP的 KeepAlive 还是HTTP的 Keep-Alive。

        TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念，不能混为一谈。

        实际上HTTP的KeepAlive写法是Keep-Alive，跟TCP的KeepAlive写法上也有不同。

TCP的KeepAlive

        TCP的KeepAlive是侧重在保持客户端和服务端的连接，一方会不定期发送心跳包给另一方，当有一方断掉的时候，没有断掉的定时发送几次心跳包，如果间隔发送几次，对方都返回的是RST（Reset），而不是ACK，那么就释放当前连接。

🔑 核心机制：定时发送探测包（心跳包），检测连接是否仍然有效。

举例：

客户端突然断网了，但服务端不知道：

        没有 TCP Keepalive：服务端会一直保留这个连接，直到程序主动读写失败，如果保持连接的状态几天，几个月，这对服务器资源的影响是很大的。

        有 TCP Keepalive：服务端会在一段时间后探测失败，主动关闭连接，释放资源。

HTTP的keep-Alive

        普通的 HTTP 连接是客户端连接上服务端，等结束请求后，由客户端或服务端进行HTTP连接的关闭。下次再发送请求时，客户端再发起连接，传送数据，关闭连接。如此流程反复。

        但是一旦客户端发送 connection:keep-alive 头给服务端，且服务端也接受这个 keep-alive 的话，这个连接就可以复用了，一个 HTTP 处理完之后，另外一个 HTTP 数据直接从这个连接走了，减少新建和断开TCP连接的消耗。

🔑 核心机制：复用已有TCP连接，减少TCP连接的建立与断开。

举例：

你访问一个网页，里面有 10 张图片：

        没有 Keep-Alive：建立 11 次 TCP 连接（1 次 HTML + 10 次图片）

        有 Keep-Alive：可能只建立 1 次 TCP 连接，复用 10 次请求

二者对比

        注意不要混为一谈，HTTP 的 Keep-Alive 和 TCP 的 keepalive 没有直接依赖关系！

        TCP 的 KeepAlive 意图在于检测连接是否存活（保活），属于传输层。

        HTTP Keep-Alive 的意图在于短时间内保持连接复用，减少TCP 连接建立和关闭的开销，提高性能，属于应用层。

举例：

        HTTP Keep-Alive：就像你用水管洗车，洗完一辆车后，不马上关水龙头，等下一辆车来的时候继续用，省得每次开关水龙头。

        TCP Keepalive：就像你家里没人，但水龙头一直开着，水管公司（操作系统）过几个小时来看看有没有人用水，没人用水就关掉水管。

       

Vue中的KeepAlive

        vue可以通过 <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 组件失活时调用。

问题

        存在一个问题：keep-alive包裹的组件中有滚动元素时，是不会存储页面滚动位置的，若需要存储滚动位置，需要自行记录页面的滚动位置，并在activated时赋值。