页面切换流畅展示

74 阅读2分钟

1. 三个节点同时展示的原理

  1. 根据页面URL路径参数进行页面组件和页面数据的动态更新
  1. 查询当前项目共计有多少页面,构建页面展示目录
  1. 查询当前页面顺序的三个页面,进行虚拟节点渲染,保证是三个虚拟节点同时展示再dom树种,最后利用vue的render函数进行页面渲染。
  1. 配置一个div cache节点,作为初次挂载渲染结果的容器。每一次渲染前先拿到页面数据,再得到对应的组件渲染到一个新的div节点,并存储到cache 节点。最后把该页面对应的dom从cache节点取出,挂载到真正的展示节点。只要页面组件渲染过一遍,之后再也不会渲染组件,数据自然也不会再请求。这要既做到预请求、预渲染,也做到了不重复请求、渲染。最终效果也是达到预期。

2. 单独一个节点展示原理(vue创建页面流程)

  1. 利用createVNode创建虚拟节点,createVNode方法主要功能就是创造虚拟dom,它会根据传过来的Component和对应的data数据调用createBaseVNode创建虚拟节点,
  1. 虚拟节点创建成功以后,调用render函数进行节点渲染,render调用patch函数(最关键的地方)进行虚拟dom树的生成和渲染,
  1. patch函数的作用就是根据虚拟节点的属性进行展示的判断,利用processComponent实现老节点如果存在执行updateComponent,新节点进行mountComponent函数执行
  1.  mountComponent的核心就是先通过createComponentInstance创建组件实例instance,然后执行setupComponent函数(处理setup函数,props,slots,包括处理有无render函数,模板解析),最后调用setupRenderEffect函数 (调用render进行依赖收集)

本申请提供一种页面预加载,,用符省略号的实现方法。由于目前除了webkit内核浏览器支持多行文本溢出,主要通过text-overflow:ellipsis和webkit-line-clamp:行数,来实现多行文本溢出效果,其余非webkit内核浏览器,像IE,Edge,Firefox均不支持。本方方案通过javascript,html,css实现多浏览器兼容方案。

2. 演示模式页面自适应

无论浏览器窗口是多大,都yi

 设定窗口的固定大小1280*720,根据当前的浏览器进行,进行窗口缩放。