关于iframe:Iframe在Vue中的状态保持技术-京东云技术团队
引言Iframe是一个历史悠久的HTML元素，依据MDN WEB DOCS官网介绍，Iframe定义为HTML内联框架元素，示意嵌套的Browsing Context，它可能将另一个HTML页面嵌入到以后页面中。Iframe能够便宜实现跨利用级的页面共享，并且具备应用简略、高兼容性、内容隔离等长处，因而以Iframe为外围造成了前端平台架构畛域第1代技术。 家喻户晓，当Iframe在DOM中初始渲染时，会主动加载其指向的资源链接Url，并重置外部的状态。在一个典型的平台利用中，一个父利用主页面要挂载多个窗口（每一个窗口对应一个Iframe），那么如何在切换窗口时，实现每一个窗口中的状态（包含输出状态、锚点信息等）不失落，也即“状态放弃”呢？ 如果采纳父子利用通信来记录窗口状态，那么革新老本是十分微小的。答案是利用Iframe的CSS Display个性，切换窗口时，非激活状态的窗口并不隐没，仅是Display状态变更为none，激活状态窗口的Display状态变更为非none。在Display状态切换时，Iframe不会从新加载。在Vue利用中，一行v-show指令即可替咱们实现这一需要。 竞争机制上述的状态放弃模型存在一个性能缺点，即父利用主页面实际上要提前摆放多个Iframe窗口。即便是这些不可见的窗口，也会收回资源request申请。大量的并发申请，会导致页面性能降落。（值得一提的是，Chrome最新版本曾经反对了Iframe的滚动懒加载策略，然而在此场景下，并不能改善并发申请的问题。）因而，咱们须要引入资源池和竞争机制来治理多个Iframe。 引入一个容量为N的Iframe资源池来治理多开窗口，当资源池未满时，新激活的窗口能够直接插入至资源池中；当资源池已满时，资源池依照竞争策略，淘汰若干池中的窗口并抛弃，而后插入新激活的窗口至资源池中。通过调整容量N，能够限度父利用主页面上多开窗口的数量，从而限度并发申请数量，实现资源管控的目标。 Vue Patch原理摸索日前遇到了一个基于Vue利用的Iframe状态放弃问题，在上述模型下，资源池不仅保留窗口对象，而且记录了每个窗口的点击激活工夫。资源池应用以下竞争淘汰策略：对窗口激活工夫进行先后秩序排序，激活工夫排序秩序较前的窗口优先被淘汰。当资源池满时，会偶发池中窗口状态不能放弃的问题。 在Vue中，组件是一个可复用的Vue实例，Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。组件状态是否正确放弃，依赖要害属性key。基于此，首先排查了Iframe组件的key属性。事实上，Iframe组件曾经正确调配了惟一的Uid，此种状况能够排除。 既然不是组件复用的问题，那么在Vue外部的Diff Patch机制到底是如何运行的呢？让咱们看一下Vue 2.0的源代码： /** * 页面首次渲染和后续更新的入口地位，也是 patch 的入口地位 */Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) { if (!prevVnode) { // 老 VNode 不存在，示意首次渲染，即初始化页面时走这里 …… } else { // 响应式数据更新时，即更新页面时走这里 vm.$el = vm.__patch__(prevVnode, vnode) }}（1）在update生命周期下，次要执行了vm.__patch__办法。 /** * vm.__patch__ * 1、新节点不存在，老节点存在，调用 destroy，销毁老节点 * 2、如果 oldVnode 是实在元素，则示意首次渲染，创立新节点，并插入 body，而后移除老节点 * 3、如果 oldVnode 不是实在元素，则示意更新阶段，执行 patchVnode */function patch(oldVnode, vnode, hydrating, removeOnly) { …… // 1、新节点不存在，老节点存在，调用 destroy，销毁老节点 if (isUndef(oldVnode)) { …… // 2、老节点不存在，执行创立新节点 } else { // 判断 oldVnode 是否为实在元素 const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // 3、不是实在元素，然而老节点和新节点是同一个节点，则是更新阶段，执行 patch 更新节点 patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly) } else { ……// 是实在元素，则示意首次渲染 } } invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm}（2）在__patch__办法外部，触发patchVnode办法。 ...