阿里巴巴猫客技术部 默燧:移动端图像加载优化与增强

函晓蕾

2017/11/14 发布于 技术 分类

介绍在移动业务内容化和移动设备本身性能不断突破的背景下,猫客是如何利用图形硬件结合图形图像技术来提高移动客户端对图像内容的展示和表达能力的。分享内容的第一部分介绍当前图像内容相关业务的实现和面临的挑战;第二部分介绍如何突破系统原生组件的限制,实现多样化图像展示和交互形式、动态的艺术化和个性化效果以及超越2D图像的范畴进一步增强组件的内容表达能力;最后介绍该系统的架构和关键的技术实现。

文字内容
1. 移动端基图于S像A图C加形C硬载2件0优1特7性化与增强 阿里巴巴猫客技术部-默燧 (方赳) indianpapa@163.com
2. AGENDA • 图片内容业务和行业现状 • 图片内容业务 • • •技框术架现有背设解景计决和与方S案关实A和键现C不特足C性2017
3. 本图由Picasso官方网站提供 Source: http://square.github.io/picasso SACC2017
4. • CDN解析度分级 • 文件头精简 • 长链接 • 缓存分级 • 淘汰策略 • 缩略图预加载 网络 内存 S速响效A率应度CC2显利特0性示用17 • Ashmem • 位图复用 • 异构并行处理 • 占位图
5. Request Return 数据完整性递增 加载成本递增 Memory Cache SADisCk CCa2ch0e17 响应速度递增 CDN
6. 图片性能 系统限制 SACC2017
7. AGENDA • 图片内容业务和行业现状 • 技术背景和关键特性 7• 移动图形硬件的发展 01• 可编程渲染管线和图像渲染 C2• 纹理缓存 AC• 渲染线程和OpenGL上下文共享 S• 基于时序的缓存预测 • 框架设计与整合
8. SACC2017 本图由ARM提供 Source: http://community.arm.com
9. • 低运算单元密度 • 复杂控制逻辑 • 大缓冲存储器 • 串行操作优化 SACC2017• 高运算单元密度 • 高计算内存访问 • 基于并行计算设计 • 大量并行逻辑运算单元 • 高时钟频率 • 向量计算优化 • 少逻辑运算单元(ALUs) • 深度流水线设计 • 短流水线(一般少于30个阶段) • 高数据吞吐量
10. 可编程图形渲染管线 SACC2017 本图由Nvidia提供 Source: http://developer.nvidia.com
11. 基于片段汇编的图像处理 Fragment Shader Program SACC2017
12. 曲线调节效果 SACC2017
13. 曲线调节效果 曲线 图像 0 1 2345 … 0 2 2334 … 255 255 0 12345 … 0 11457 … 255 255 0 1 2 3 4 5 … 255 SACC2017编码 OpenGL 0 2 2 3 6 6 … 255 0 12345 … 0 22366 … 255 255 解码 映射表 纹理 R GB A CPU(内存) GPU(显存)
14. 图片的动态显示效果 SACC2017
15. 纹理缓存 600 500 400 300 200 100 0 GPU Command SACC2017 FrameBuffers Texture Cache Texture ID HeapLimit 可用显存
16. Request Return 数据完整性递增 加载成本递增 Texture Cache SACC2017File/Memory Exchange Disk Cache Memory Cache 响应速度递增 CDN
17. 渲染线程和共享上下文 SACC2017
18. 基于时序的缓存策略 时序 关系 当前时 序 关联性 评估 出现 频次 SACC2017P(A):当前内容被使用概率,P(B):待评估内容被使用概率 P(B A):当前内容被使用时待评估内容也被使用的概率 缓存预测 缓存淘汰
19. LRU: 内容时序相关性: VS SACC2017 生成缓存方向 回溯旧内容方向
20. 0.6 0.5 0.4 0.3 0.2 0.1 0 624次 SACC2017 LRU 时序 534次 739次 983次
21. AGENDA • 图片内容业务和行业现状 • • 技术背景和关键特性 •框• 架资模源型设加渲计载染与和框S架渲整A染合C任务C分2发017
22. 组件模型渲染框架 SACC2017
23. 资源加载和渲染任务分发 SACC2017
24. SACC2017