资讯底层页三期优化具体方案设计

客户端计划地址：http://172.20.200.191:8003/pa...

三期最终目标

二期优化上线后，80%的用户在1300ms左右关上网页，三期优化的最终目标是80%的用户在300ms以内实现加载

计划概述

计划一：本地文件计划
在投顾直播的我的项目中，过后计划为通过文件协定关上本地网页模板，但此计划在资讯底层页不实用

  1. 资源援用
    当初资源援用都是绝对地址，如果改成了文件协定，那这些资源都无奈取得。 （前端写死为http或者https，影响大，包含后端生成的资源）
  2. 跨域
    谬误无奈捕捉，文件资源是ftp协定，js是http协定
    申请跨域 （能够应用客户端协定代理申请解决）
    计划二：本地服务器计划
    在app外部开一个服务器，是文件协定替换为网络协议。

次要流程


离线包下发：通过配置平台 https://testfund.10jqka.com.c... 配置离线包
客户端预热：客户端启动时，会创立一个后盾运行的webview，将下载好的包在本地以localhost的形式运行，期待用户点击资讯页
前端协定监听：前端调用webOfflineTemplateRender协定监听

window.registerWebHandler('webOfflineTemplateRender', (res) => {  res.url //原始url  res.isRender //0|1 渲染还是清理})

客户端拦挡：当用户点形如点击 news.10jqka.com.cn/mxxxxxxx 的链接时客户端会拦挡此链接，将webview置于前端，并通过webOfflineTemplateRender协定通知前端原始的location.href
前端渲染：前端通过原始的url申请数据并实现渲染,并在渲染实现通过perfTimeToElk协定通知客户端以后的工夫戳，客户端计算点击链接时与此工夫的差作为本地网页关上的的工夫。

window.callNativeHandler('perfTimeToElk', {    'templateRenderEnd': '工夫戳',    ... //其余自定义参数 }, function() {})

前端清理：当webview退出时（客户端管制），客户端通过webOfflineTemplateRender协定告诉前端被动清理曾经渲染的内容

网页须要解决的问题

  1. http申请须要通过客户端代理发送。应用预热计划后，网页的服务器变成localhost，间接申请服务器会产生跨域，所以须要应用客户端协定申请代理
  2. 脚手架革新。打包时须要对文件加密并且生成zip文件。
  3. 清理网页内容。网页“敞开”时须要清空vue渲染的内容并且革除组件信息，开释内存。
  4. 环境辨别。本地开发环境和线上环境服务器域名都是localhost，须要通过环境变量进行辨别

危险

  1. location.href扭转，从location.href取值的须要从新从url变量取，本我的项目中组件库和能够批改代码，组件库或者其余js库如何解决
  2. 都是http申请会有什么问题吗？

  3. 如何被动清理 ？

    • 1.清理节点：不是所有的节点都在#app下吧
    • 2.清理Vue组件。组件库通过Vue.use注册，注册时就曾经确定组件的内容，而vue.use会主动阻止多次重复注册组件，所以需要革除组件库
    • 3.清理其余全局变量
  4. 每关上一次网页，只是做了内容的替换，所以内存占用会越来越高，一种措施是应用location.reload从新加载预热好的模板就能够开释内存
  5. webview和app同生命周期，是否会更耗电
  6. app启动时就会下载zip包