广告落地页渲染的原生化 All In One
性能优化, 落地页秒开， 客户端渲染
技术方案
AMP
PWA
SSR
ESR
prefetch
preload
CDN
客户端渲染
WebView vs Native
页面加载时间(用户等待时间) = 页面完成加载时间 - 页面开始加载时间
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、图片内联化 <script id="inline-js">、<style class="inline-style">、<img src="base64 image">
模板简化, async, defer 非关键 js
在合适的时机在后台创建 WebView，并且提前预热加载模板
使用模板预创建池的手段来优化用户进入详情页时的预热模板命中率
WebView 的创建是一个性能开销比较大的操作，如果我们使用预创建池的方案，那么就会在后台频繁创建 WebView，这样对用户在 Feed 场景的浏览体验也会有一定的影响
复用 WebView 模版，动态注入数据
每次使用的时候都是同一个模板，所以使用完当前 WebView 之后，只需要在用户退出页面的时候把正文数据清空，这样进入下一个页面的时候就能够继续复用这个 WebView 重新注入数据即可
CDN 加速
将详情页内容数据分为静态和动态两部分，将正文内容、标题、作者栏等用户主要消费的又基本不变的内容托管到了 CDN 上。
容灾
多域名备份和快速超时的策略
SSR
服务端预渲染, 返回直出页面，无需 WebView 二次解析
客户端渲染
在详情页中，会将图片和视频等非文字内容通过原生组件的方式放在客户端进行渲染，既可以提高渲染效率，也可以减少不必要的流量消耗。
原生化渲染还有一个好处，图片越来越成为文章体验的重要部分，对于多图文章，我们在 Feed 页面也可以智能加载详情页需要的图片，增加用户的文章首屏体验。
白屏检测和上报
在 iOS 中，使用的是系统提供的 WKWebView，WKWebView 是运行在一个独立进程中的组件，所以当 WKWebView 上占用内存过大时，WKWebView 所在的 WebContent Process 会被系统 kill 掉，反映在用户体验上就是发生了白屏。
当然不管是 iOS 和 Android， WebView 加载的逻辑都比较复杂，有时候怎么重试也无法成功，这个时候我们会直接降级到加载线上的详情页，优先保证用户的体验。
WKWebview 秒开实践
iOS 原生端渲染
Native Side Render
//
https://juejin.cn/post/6887161842406260744
refs
https://www.cnblogs.com/xgqfrms/p/6408181.html
https://www.infoq.cn/article/jqzxgcc15zjwv7iw9ihh
https://zhuanlan.zhihu.com/p/25279069
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！