关于前端:test

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

客户端计划地址：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 包