菏泽哪里做网站,域名解析服务器ip地址,沈阳企业网站优化排名方案,网站建设信息介绍实现全站的页面缓存#xff0c;前进刷新#xff0c;返回走缓存#xff0c;并且能记住上一页的滚动位置#xff0c;参考了很多技术实现#xff0c;github上的导航组件实现的原理要么使用的keep-alive#xff0c;要么参考了keep-alive的源码#xff0c;但是只用keep-alive… 实现全站的页面缓存前进刷新返回走缓存并且能记住上一页的滚动位置参考了很多技术实现github上的导航组件实现的原理要么使用的keep-alive要么参考了keep-alive的源码但是只用keep-alive没法实现相同path不同参数展示不同view这就有点坑了所以需要结合自己要实现的功能适当改造keep-alive为了实现每次前进都能刷新返回走缓存还能自动定位的功能文章陆续从以下几个方面展开讲两套技术方案可选最后定的技术方案的原因实现的功能和原理踩过的坑 方案一vue的keep-alive组件 具体使用如下 keep-alive max10router-view//keep-alive 为什么这么使用?如vue官网https://cn.vuejs.org/v2/api/#...介绍 keep-alive 包裹动态组件时会缓存不活动的组件实例而不是销毁它们。和 transition 相似keep-alive 是一个抽象组件它自身不会渲染一个 DOM 元素也不会出现在父组件链中。 当组件在 keep-alive 内被切换它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。 因为缓存的需要通常出现在切换页面时所以就需要结合vue-router的router-view来实现 为什么keep-alive能实现缓存
render () {const slot this.$slots.defaultconst vnode: VNode getFirstComponentChild(slot)const componentOptions: ?VNodeComponentOptions vnode vnode.componentOptionsif (componentOptions) {// check patternconst name: ?string getComponentName(componentOptions)const { include, exclude } thisif (// not included(include (!name || !matches(include, name))) ||// excluded(exclude name matches(exclude, name))) {return vnode}const { cache, keys } thisconst key: ?string vnode.key null// same constructor may get registered as different local components// so cid alone is not enough (#3269)? componentOptions.Ctor.cid (componentOptions.tag ? ::${componentOptions.tag} : ): vnode.keyif (cache[key]) {vnode.componentInstance cache[key].componentInstance// make current key freshestremove(keys, key)keys.push(key)} else {cache[key] vnodekeys.push(key)// prune oldest entryif (this.max keys.length parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}}vnode.data.keepAlive true}return vnode || (slot slot[0])} 如上keep-alive源码其中render函数是这样实现的要渲染的试图组件作为插槽内容被获取到当渲染到路径匹配到的视图组件时会根据vnode存储的内容拿到对应的name,一次将这些组件实例放到变量cache中这样根据路由就可以找到缓存的vnode返回给createComponent方法去执行initComponentvue组件渲染这块的代码如下 function initComponent (vnode, insertedVnodeQueue) {if (isDef(vnode.data.pendingInsert)) {insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert)vnode.data.pendingInsert null}vnode.elm vnode.componentInstance.$elif (isPatchable(vnode)) {invokeCreateHooks(vnode, insertedVnodeQueue)setScope(vnode)} else {// empty component root.// skip all element-related modules except for ref (#3455)registerRef(vnode)// make sure to invoke the insert hookinsertedVnodeQueue.push(vnode)}
} 这里会有 vnode.elm 缓存了 vnode 创建生成的 DOM 节点。所以对于首次渲染而言除了在 keep-alive 中建立缓存和普通组件渲染没什么区别。从进入到返回的大致执行流程如下 能实现的功能能够把要缓存的组件渲染的vnode记到cache里边当返回的时候用缓存里边的dom直接渲染还有keep-alive组件提供的include 和 exclude属性可以有条件的缓存想缓存的组件如果配置了 max 并且缓存的长度超过了这个max的值还要从缓存中删除第一个 存在的问题存在的问题是存储vnode节点的key是name,也就是定义路由时组件对应的name这就会导致同样的path不同参数的时候打开的是从cache里边拿到的vnode会渲染出同样的视图出来但是很多业务场景都是根据参数来显示不同内容而keep-alive底层并没有对此做扩展可以看下keep-alive源码 const key: ?string vnode.key null? componentOptions.Ctor.cid (componentOptions.tag ? ::${componentOptions.tag} : ): vnode.keyif (cache[key]) {vnode.componentInstance cache[key].componentInstance// make current key freshestremove(keys, key)keys.push(key)} else {cache[key] vnodekeys.push(key)// prune oldest entryif (this.max keys.length parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}} vnode.key就是路由里边定义的name所以要用这套方案来实现的根据不同参数展示不同视图的功能就要对这里的key做改造但是keep-alive是vue自带的没法改底层然后就诞生了我的第二套方案 方案二navigation组件scrollbehavior github上找到类似功能的组件vue-navigation这个vue组件可以实现返回走缓存底层原理跟keep-alive一样实际上是改写了keep-alive组件前进刷新时新增了一个参数VNK这样在路由发生变化的时候都会用给url带一个参数并且cache的key取值依赖这个参数借鉴这个组件的思路做了一个类似keep-alive的组件其中key的值是getKey方法获取的改写以后的render方法如下 render () {var vnode this.$slots.default ? this.$slots.default[0] : nullif (vnode) {vnode.key vnode.key || (vnode.isComment ? comment : vnode.tag)const { cache, keys } thisvar key getKey(this.$route, keyName)if (vnode.key.indexOf(key) -1) {vnode.key __navigation- key - vnode.key}if (cache[key]) {if (vnode.key cache[key].key) {vnode.componentInstance cache[key].componentInstance} else {cache[key].componentInstance.$destroy()cache[key] vnode}remove(keys, key)keys.push(key)} else {cache[key] vnodekeys.push(key)// prune oldest entryif (this.max keys.length parseInt(this.max)) {pruneCacheEntry(cache, keys[0], keys, this._vnode)}}vnode.data.keepAlive true}return vnode} getKey方法实现//url上新增参数vnk的值 export function genKey() {// const t xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxxconst t xxxxxxxxreturn t.replace(/[xy]/g, function (c) {const r Math.random() * 16 | 0const v c x ? r : (r 0x3 | 0x8)return v.toString(16)})
}
//
export function getKey(route, keyName) {return ${route.name || route.path}?${route.query[keyName]}
} 通过新写一个install方法挂载这个导航组件到vue上就可以实现前进刷新返回走缓存并且可以配置最大缓存数后续开源到github 最后剩下返回上一页记住上一页的位置之所以没有用开源的这个组件的记位置是因为直接套用需要改整体布局height:100%;样式造成$(windows).scrollTop失效整体考虑改造成本较大还是使用了vue-router提供的scrollBehavior,在路由配置里引入 实现如下 var scrollBehavior async (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return new Promise((resolve, reject) {setTimeout(() {resolve({ x: 0, y: to.meta.savedPosition || 0 })}, 300)})}
}
const router new VueRouter({mode: history,scrollBehavior,routes: [{path: ,redirect: /mobile/home.html,meta: {needMtaReport: true,parentsStyle: {height: 100%,minHeight: 100%}}},{name: scienceCompetition,path: /mobile/scienceCompetition.html,component: scienceCompetition}]
} 总结 1.单页缓存下js加载解析编译执行的时间缩短了返回的时候由于走缓存js脚本的占用时间完全可以忽略从而整体上缩减了页面的加载渲染时间 2. 因为项目以前不是单页代码里边定义了很多全局变量或者全局事件绑定改成单页后全局变量的值依然存在就会导致业务逻辑出现bug所以使用单页需要注意全局变量或是事件的谨慎使用具体的踩坑记录在https://www.cnblogs.com/after... 3.通过push进入下一页时head里边会累加前面页面的静态资源访问的页面越多最后的页面挂的静态的资源越多返回的时候并不会减少已经加载的静态资源单页缓存是典型的空间换时间的方案内存的开销比较大能否对资源动态增减以及内存占用的优化一直在探索中暂时没有找到很好的解决方法。。。。。
