微信读书阅读器架构

微信读书的排版引擎设计，区别于浏览器，实现大部分常见的 HTML/CSS ，通过流排版和支持流索引的存储设计提高移动端的性能，牺牲部分准确性。

Transcript

1. 微信读书 阅读器器架构 ayangxu 2015-11-27
4. <h3/> <p/> text-indent margin-bottom line-height
5. <img/> border text-align font-family
6. 引擎架构
7. Webkit ⼯工作流程
8. 阅读器器⼯工作流程 zip HTML DOM CSS Text Stream RangeTree Style List Cursor PageFactory Paragraph Page PageView Scroller Render
9. 预处理理 HTML DOM CSS Text Stream RangeTree Style List
10. 树结构 VS 流结构
11. 树结构 VS 流结构
12. 树结构 VS 流结构 • 节点带上下⽂文，递归计算位置 • ⽅方便便在 DOM 树上查找和定位 • DOM 树整个留留在内存 • 内存不不好控制
13. 树结构 VS 流结构
14. 树结构 VS 流结构
15. 树结构 VS 流结构 • ⼀一次性计算好位置 • DOM 树不不需要留留在内存 • 按需加载⼀一⼩小部分⽂文本/索引⽚片段 • 内存好控制
16. 树的流存储 - RangeTree <p><i>WeRead</i><b>Rocks</b>!</p>
17. 树的流存储 - RangeTree <p><i>WeRead</i><b>Rocks</b>!</p> WeReadRocks!
18. 树的流存储 - RangeTree <p><i>WeRead</i><b>Rocks</b>!</p> WeReadRocks! tag: p color: blue [0..12)
19. 树的流存储 - RangeTree <p><i>WeRead</i><b>Rocks</b>!</p> WeReadRocks! tag: p color: blue [0..12) tag: i font-style: italic color: black [0..6) tag: b font-weight: bold color: red [6..11)
20. 树的流存储 - RangeTree tag: p color: blue [0..12) tag: i font-style: italic color: black [0..6) tag: b font-weight: bold color: red [6..11)
21. 树的流存储 - RangeTree tag: p color: blue [0..12) tag: i font-style: italic color: black [0..6) tag: b font-weight: bold color: red [6..11)
22. 树的流存储 - RangeTree tag: p color: blue [0..12) tag: i font-style: italic color: black [0..6) tag: b font-weight: bold color: red [6..11) WeReadRocks! tag: p color: blue tag: i font-style: italic color: black tag: b font-weight: bold color: red
23. 树的流存储 - RangeTree tag: p color: blue [0..12) tag: i font-style: italic color: black [0..6) tag: b font-weight: bold color: red [6..11) WeReadRocks! WeReadRocks! tag: p color: blue tag: i font-style: italic color: black tag: b font-weight: bold color: red
24. 流排版 Text Stream RangeTree Style List Cursor PageFactory Paragraph Page
25. Stream Cursor PageFactory
26. Stream Cursor PageFactory border-radius: 4px border: 1px solid black
27. Stream Cursor { Paragraph1 PageFactory text-indent: 2em border-radius: 4px border: 1px solid black
28. Stream Cursor { Paragraph1 PageFactory Paragraph2 Paragraph3 Paragraph4 Paragraph5 text-align: right text-indent: 2em border-radius: 4px border: 1px solid black
29. }Page1 Stream Cursor { Paragraph1 PageFactory Paragraph2 Paragraph3 Paragraph4 Paragraph5 text-align: right text-indent: 2em border-radius: 4px border: 1px solid black
30. Stream Cursor PageFactory
31. Stream Cursor { Paragraph1 PageFactory font-size: 1.5em font-weight: bold
32. Stream Cursor { Paragraph1 PageFactory font-size: 1.5em font-weight: bold float: left font-size: 2em Paragraph2 {
33. Stream Cursor { Paragraph1 PageFactory font-size: 1.5em font-weight: bold Paragraph3 float: left font-size: 2em Paragraph2 { text-indent: 2em
34. }Page2 Stream Cursor { Paragraph1 PageFactory font-size: 1.5em font-weight: bold Paragraph3 float: left font-size: 2em Paragraph2 { text-indent: 2em
35. Page3
36. Page3 Page4
37. Page3 Page4 …
38. 分⻚页索引 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 PageFactory Stream Cursor
39. 分⻚页索引 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 PageFactory Stream Cursor …
40. 分段渲染 Cursor PageFactory Paragraph Page PageView Scroller Render
41. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Data View
42. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
43. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
44. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
45. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
46. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
47. Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 … Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Page 0 1 2 3 4 5 Offset 0 120 240 360 480 600 Data View
48. 索引压缩
49. 索引类型 • ⻚页码偏移（0，120，240...） • 递增 • 位置（x/y，width/height） • 数字⼩小 • 重复率⾼高
50. 重复数字 23 23 23 23 23 23 23 23 23 23 23 23
51. 重复数字 23 23 23 23 23 23 23 23 23 23 23 23 23 12
52. 差值压缩 1 2 3 4 5 6 7 8 9 10 11 12
53. 差值压缩 1 2 3 4 5 6 7 8 9 10 11 12 1 1 1 1 1 1 1 1 1 1 1 1
54. 差值压缩 1 2 3 4 5 6 7 8 9 10 11 12 1 1 1 1 1 1 1 1 1 1 1 1 1 12
55. 变⻓长数字 255
56. 变⻓长数字 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 255
57. 变⻓长数字 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 1 255
58. 多种压缩混合 1 2 3 4 5 6 7 8 9 10 11 12 1 1 1 1 1 1 1 1 1 1 1 1 1 12
59. 多种压缩混合 1 2 3 4 5 6 7 8 9 10 11 12 1 1 1 1 1 1 1 1 1 1 1 1 1 12 1 0 0 0 0 0 0 1 1 0 0 0 1 1 0 0
60. 多种压缩混合 1 2 3 4 5 6 7 8 9 10 11 12 1 1 1 1 1 1 1 1 1 1 1 1 1 12 1 0 0 0 0 0 0 1 1 0 0 0 1 1 0 0 33164
61. 数据加密 • 索引友好（⻓长度不不变，AES/RSA） • 部分解密（分段解密） • 客户端性能要求⽐比较重 • 尽可能安全
62. Gilber Vernam + AES • 世界上最安全的加密（OTP，One-Time-Pad） • 真正随机/密钥不不复⽤用/密钥不不泄露露 • 随机密钥，每章⼀一个密钥 • 轮转密钥，跟偏移位置相关 • 有偏移位置可部分解密 • 流接⼝口（FilterInputStream）
63. 存储 排版 渲染 交互
64. 正⽂文 (加密) 资源 正⽂文样式 全局样式 存储 排版 渲染 交互
65. 正⽂文 (加密) 资源 正⽂文样式 全局样式 存储 排版 渲染 交互 布局 (位置) 断⾏行行断字 分⻚页 预渲染
66. 正⽂文 (加密) 资源 正⽂文样式 全局样式 存储 排版 渲染 交互 布局 (位置) 断⾏行行断字 分⻚页 预渲染 样式 (级联) ⽪皮肤 绘制
67. 翻⻚页 选区 事件 正⽂文 (加密) 资源 正⽂文样式 全局样式 存储 排版 渲染 交互 布局 (位置) 断⾏行行断字 分⻚页 预渲染 样式 (级联) ⽪皮肤 绘制
68. Q & A