广告落地页渲染的原生化 All In One

性能优化, 落地页秒开，客户端渲染

技术方案

AMP

PWA

SSR
ESR

prefetch
preload

CDN

客户端渲染

页面加载时间(用户等待时间) = 页面完成加载时间 - 页面开始加载时间

Web Page 渲染步骤

浏览器执行的所有步骤：

处理 HTML 标记，构建 DOM 树。
处理 CSS 标记，构建 CSSOM 树。
将 DOM 树和 CSSOM 树融合成渲染树。

根据渲染树来布局（重排），计算每个节点的几何信息。
在屏幕上绘制（重绘）各个节点。

WebView 渲染步骤 /

加载解析 HTML 文件

加载 JavaScript 和 CSS 文件

解析并执行 JavaScript

构建 DOM 结构, 构建 CSSOM 结构, 构建 Render Tree

加载图片等资源

页面加载完毕

WebView loadFinish 实际上是在页面加载完毕阶段，而 DOM 构建完成时页面结构就已经基本渲染完成

从用户真实体验的角度出发，以 DOM 结构构建完成（DOM Ready）的时间点作为页面加载完成时间点

衡量指标

页面平均加载时长 = 页面加载时长的总和 / 页面 PV 总数

80 分位值（二八原则）

详情页加载速度 80 分位值是 1s，即表示 80% 的情况下用户进入详情页都能在 1s 内加载完

公共部分抽离，模板内置

将新闻中标题和正文内容进行拆分，把详情页的公共样式 CSS 和逻辑 JS 都抽离出来，形成一个独立而完备的详情页模板，这样就可以把模板直接内置在客户端本地存储中，无需通过网络获取了

与前端约定好的 JS 脚本，通过接口将正文内容数据注入页面完成详情页的页面展示，通过该这种方式我们可以将接口放到客户端上进行请求。

// jsBridge
function getData(api: '/', callback: renderData) {}

// callback
function renderData() {}

用户进入详情页的时候只需要本地加载模板，而且加载模板的时候也可以同时并行请求详情页数据，再将数据注入进模板中

使用算法，预加载数据

// 提前获取列表页的前十条数据，列表滚动，根据滚动位置在屏幕中心的位置，动态获取前后各 5 条数据

// 设置缓冲区间大小，超出限制后进行缓存替换， LRU 算法

https://leetcode.com/problems/lru-cache/

模板预热

模板合并，部分 JS、 CSS、图片内联化