产品思维训练-App应用内容详情页加载速度提升方案

写在前面

历史版本的不断更新，各类型的统计、样式、效果的添加，导致正在做的App文章加载速度非常慢，我们希望可以提升内容的有效加载速度。

测试了自有App 内容平均加载速度：2.3s，最慢加载速度达到了13s

为了更好学习其他平台先进经验，我对比了主流的资讯平台（Charles模拟抓包，非本文重点，此处略过）

原生加载：头条系多为原生内容加载，内容经过有效格式化及转译，通过结构文件将文本及图片进行混排。

快速加载文本内容（页面文本大小3Kb左右）

懒加载图片信息内容（跟随手指滑动位置，预加载当前位置后1~3张图片）

类原生加载：使用Cordova、Flutter、DCloud、Lonic、AppCan等跨平台移动端开发框架

页面使用HTML5+CSS+JavaScript开发

部分学习替换成本较高，局部项目模块正在进行替换

网页加载：页面通过适配App端的H5页面进行展示。

使用手机Webview框架加载网页

受限于开发成本及时效问题，线上版本采用的是网页加载，顺着这个方向做了快速尝试。

一、线上应用加载内容页方式

1.1 内容页中包含

内容配置信息

内容模板

内容正文

1.2 页面加载方式

通过应用内打开手机网页形式，加载页面信息

1.3 遇到的问题

页面中包含大量的脚本文件，用于内容展示、数据收集及其他页面交互支持服务

特别是使用GoogleAnalysy的统计脚本，加上速度时延特别长

网络时延异常及手机性能影响脚本的加载与运行速度

二、Demo加载实验

2.1 加载模式优化

将资讯详情页加载所需要使用的支持文件预置在应用包内

   · JS脚本

    ·CSS样式文件

    ·内容详情页展示模板

App访问资讯、论坛内容接口，拉取内容数据

App直接利用本地资源文件及内容模板进行界面加载

2.2 实验效果

内容页从获取内容数据到展示加载有明显可感速度提升

通过vconsole跟踪，线上访问顽疾的论坛帖子详情页在应用内加载速度在内网环境测试 400~1000ms。(0.4s~1s)

2.3 实验总结

将线性加载结构变更为只加载内容正文，大幅提高了内容加载效率，降低支持文件加载的时延与带宽

后续产品计划通过服务端完成对内容配置信息、内容模板管理可实现

难点：内容页由于使用手机网页形式打开，可能存在jsonp跨域访问问题，需要技术解决。

    内容页AB测试模板分发

    内容页样式热更新（无需更新App）