《页面排版方法及系统.pdf》由会员分享，可在线阅读，更多相关《页面排版方法及系统.pdf（12页完整版）》请在专利查询网上搜索。
1、(10)申请公布号 CN 103678486 A (43)申请公布日 2014.03.26 CN 103678486 A (21)申请号 201310533531.2 (22)申请日 2013.10.31 G06F 17/30(2006.01) (71)申请人 北京优视网络有限公司 地址 100080 北京市海淀区苏州街 29 号维 亚大厦 16 层 10-20 室 (72)发明人 王晓振 (74)专利代理机构 北京鸿元知识产权代理有限 公司 11327 代理人 陈英俊 龚洁 (54) 发明名称 页面排版方法及系统 (57) 摘要 本发明提供了一种页面排版方法及系统， 其 中的方法包括 ： 在。
2、解析页面时， 如果本地缓存库 中有页面的排版树， 且页面中的缓存标签与存储 在本地缓存库中的缓存标签相同时， 则从本地缓 存库中复制页面的排版树 ； 根据页面节点元素的 缓存标签， 找到页面节点元素的更新节点， 生成与 更新节点相对应的排版树节点 ； 将生成的与更新 节点相对应的排版树节点替换更新节点原有的排 版树节点 ； 在排版树内， 对生成的与更新节点相 对应的排版树节点、 更新节点的父亲节点以及更 新节点的祖先节点进行重新排版。通过本发明能 够减少重建树的节点、 降低排版的次数、 提高页面 显示的速度。 (51)Int.Cl. 权利要求书 2 页 说明书 6 页 附图 3 页 (19)中。
3、华人民共和国国家知识产权局 (12)发明专利申请 权利要求书2页 说明书6页 附图3页 (10)申请公布号 CN 103678486 A CN 103678486 A 1/2 页 2 1. 一种页面排版方法， 包括 ： 在解析页面时， 如果本地缓存库中缓存有所述页面的排版树， 且所述页面中的缓存标 签与存储在所述本地缓存库中的缓存标签相同时， 则从所述本地缓存库中复制所述页面的 排版树 ； 根据页面节点元素的缓存标签， 找到所述页面节点元素的更新节点， 生成与所述更新 节点相对应的排版树节点 ； 将生成的与所述更新节点相对应的排版树节点替换所述更新节点原有的排版树节 点 ； 在排版树内， 对生。
4、成的与所述更新节点相对应的排版树节点、 所述更新节点的父亲节 点以及所述更新节点的祖先节点进行重新排版。 2. 如权利要求 1 所述的页面排版方法， 其中， 在解析所述页面时， 如果在所述本地缓存 库中没有查找到所述页面的排版树， 则解析所述页面， 生成所述页面的排版树， 然后将生成 的所述页面的排版树保存到所述本地缓存库中。 3. 如权利要求 1 所述的页面排版方法， 其中， 如果所述页面中的缓存标签与存储在所 述本地缓存库中的缓存标签不相同， 则删除所述本地缓存库中的所述页面的排版树， 然后 将解析所述页面生成的排版树保存到所述本地缓存库中。 4.如权利要求1至3任一项所述的页面排版方法，。
5、 其中， 在将生成的与所述更新节点相 对应的排版树节点替换所述更新节点原有的排版树节点的过程中， 将所述更新节点原有的排版树节点删除， 然后插入生成的与更新节点相对应的排版树 节点。 5. 一种页面排版系统， 包括 ： 排版树复制单元， 用于在解析页面时， 当本地缓存库中缓存有所述页面的排版树， 且所 述页面中的缓存标签与存储在所述本地缓存库中的缓存标签相同时， 从所述本地缓存库中 复制所述页面的排版树 ； 排版树节点生成单元， 用于根据页面节点元素的缓存标签， 找到所述页面节点元素的 更新节点， 生成与所述更新节点相对应的排版树节点 ； 排版树节点更新单元， 用于将生成的与所述更新节点相对应。
6、的排版树节点替换所述更 新节点原有的排版树节点 ； 排版单元， 用于对生成的与所述更新节点相对应的排版树节点、 所述更新节点的父亲 节点以及所述更新节点的祖先节点进行重新排版。 6. 如权利要求 5 所述的页面排版系统， 其中， 所述排版树复制单元在解析所述页面时， 如果在所述本地缓存库中没有查找到所述页面的排版树， 则解析所述页面， 生成所述页面 的排版树， 然后将生成的所述页面的排版树保存到所述本地缓存库中。 7. 如权利要求 5 所述的页面排版系统， 其中， 所述排版树复制单元进一步包括 ： 排版树处理单元， 用于当所述页面中的缓存标签与存储在所述本地缓存库中的缓存标 签不相同时， 删除。
7、所述本地缓存库中的所述页面的排版树， 然后将解析所述页面生成的排 版树保存到所述本地缓存库中。 8.如权利要求5至7任一项所述的页面排版系统， 其中， 所述排版树节点更新单元在将 生成的与所述更新节点相对应的排版树节点替换所述更新节点原有的排版树节点的过程 权 利 要 求 书 CN 103678486 A 2 2/2 页 3 中， 将所述更新节点原有的排版树节点删除， 然后插入生成的与更新节点相对应的排版树 节点。 权 利 要 求 书 CN 103678486 A 3 1/6 页 4 页面排版方法及系统 技术领域 0001 本发明涉及移动浏览器技术领域， 更为具体地， 涉及一种页面排版方法及系。
8、统。 背景技术 0002 随着互联网的兴起和发展， 人们了解信息的方式不再局限于传统的纸媒， 通过网 页人们同样可以了解到更多的信息资讯， 因此， 这也使例如新浪、 搜狐等众多门户网站得以 发展。 0003 然而信息传播的快速以及信息种类的繁多， 致使当今的门户网站所包含的信息量 也日益增多。通常一个门户网站的首页包含了上千个页面的链接， 而由于信息的快速传播 以及高速更新， 一个门户网站的首页每天更新数十次已成为常态。 0004 以用户使用移动浏览器观看一个门户网站的首页为例， 假设用户观看首页时， 此 时有一条新闻发生了更新， 如果用户这时刷新页面， 则相当于重新加载整个门户网站的首 页。。
9、对于重新加载整个门户网站的首页而言， 则相当于重新对整个页面进行布局排版。也 就是说， 对于重新加载下来的页面， 会重新生成一份 DOM 树及一份排版树， 然后根据排版树 将整个页面渲染出来， 最终将渲染效果呈现在用户眼前。 0005 在上述示例中， 网页内容只是更新了一小部分， 网页的整体排版布局并没有发生 任何变化， 发生变化的只是页面的内容 （即一部分文字） 。而通过上述示例也能够看出， 在页 面整体排版布局没有发生任何变化， 只更新页面内容的情况下， 现有的页面排版同样会删 除已有的 DOM 树及排版树， 然后重新生成这两个树并进行排版操作。而通常门户网站的首 页不会频繁更新页面布局，。
10、 频繁更新的只是页面的内容。 如此， 即使频繁更新页面内容也需 要将整个页面重新布局排版， 无疑将造成无端的浪费， 进而影响到页面的显示速度。 发明内容 0006 鉴于上述问题， 本发明的目的是提供一种页面排版方法及系统， 以降低页面排版 的次数， 提高页面显示的速度。 0007 根据本发明的一个方面， 提供一种页面排版方法， 包括 ： 0008 在解析所述页面时， 如果本地缓存库中缓存有页面的排版树， 且页面中的缓存标 签与存储在本地缓存库中的缓存标签相同时， 则从本地缓存库中复制页面的排版树 ； 0009 根据页面节点元素的缓存标签， 找到页面节点元素的更新节点， 生成与更新节点 相对应的。
11、排版树节点 ； 0010 将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点 ； 0011 在排版树内， 对生成的与更新节点相对应的排版树节点、 更新节点的父亲节点以 及更新节点的祖先节点进行重新排版。 0012 其中， 在解析页面时， 如果在本地缓存库中没有查找到页面的排版树， 则解析页 面， 生成页面的排版树， 然后将生成的页面的排版树保存到本地缓存库中。 0013 另一方面， 本发明还提供一种页面排版系统， 包括 ： 说 明 书 CN 103678486 A 4 2/6 页 5 0014 排版树复制单元， 用于在解析页面时， 当本地缓存库中缓存有页面的排版树， 且页 面中的。
12、缓存标签与存储在本地缓存库中的缓存标签相同时， 从本地缓存库中复制页面的排 版树 ； 0015 排版树节点生成单元， 用于根据页面节点元素的缓存标签， 找到页面节点元素的 更新节点， 生成与更新节点相对应的排版树节点 ； 0016 排版树节点更新单元， 用于将生成的与更新节点相对应的排版树节点替换更新节 点原有的排版树节点 ； 0017 排版单元， 用于对生成的与更新节点相对应的排版树节点、 更新节点的父亲节点 以及更新节点的祖先节点进行重新排版。 0018 利用上述根据本发明的页面排版方法及系统， 通过缓存排版树， 从而只对发生变 化的页面内容进行更新， 实现减少重建树的节点， 降低排版的次。
13、数， 进而达到提高页面显 示速度的目的。 0019 为了实现上述以及相关目的， 本发明的一个或多个方面包括后面将详细说明并在 权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。 然而， 这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。 此外， 本发明 旨在包括所有这些方面以及它们的等同物。 附图说明 0020 通过参考以下结合附图的说明及权利要求书的内容， 并且随着对本发明的更全面 理解， 本发明的其它目的及结果将更加明白及易于理解。在附图中 ： 0021 图 1 为根据本发明实施例的页面排版方法流程示意图 ； 0022 图 2 为根据本发明实施例的页。
14、面排版的详细流程示意图 ； 0023 图 3-1 为网页更新前的效果图 ； 0024 图 3-2 为网页更新后的效果图 ； 0025 图 4 为根据本发明实施例的页面排版系统的逻辑结构框图。 0026 在所有附图中相同的标号指示相似或相应的特征或功能。 具体实施方式 0027 以下将结合附图对本发明的具体实施例进行详细描述。 0028 为了清楚说明本发明提供的页面排版方法， 下面先对本发明中涉及到的部分名词 做出解释说明 ： 0029 排版树 ： webkit 是一个开源的浏览器引擎， 其中每个 html 页面对应于一颗排版 树， 排版树用于布局， 具体负责 DOM （Document Obj。
15、ect Model， 文件对象模型） 树如何显示在 屏幕上。从 MVC（Model-View-Controller， 模型视图控制器） 的角度来看， DOM 树属于 MVC 中的 V 部分， 即视图部分。每生成一个 DOM 节点， 就会去创建对应的排版节点。但是， 虽 然大部分 DOM 节点与排版节点是一一对应， 但并不是所有 DOM 节点都与排版节点绝对一一 对应。 0030 图 1 示出了根据本发明实施例的页面排版方法流程。 0031 如图 1 所示， 本发明提供的页面排版方法包括 ： 说 明 书 CN 103678486 A 5 3/6 页 6 0032 S110 ： 在解析页面时， 如。
16、果本地缓存库中缓存有页面的排版树， 且页面中的缓存标 签与存储在本地缓存库中的缓存标签相同时， 则从本地缓存库中复制页面的排版树。 0033 具体地， 移动浏览器在解析页面时， 根据在页面中增加的缓存标签， 确认页面的排 版树可以在移动浏览器的本地缓存库中进行缓存。 0034 需要说明的是， 缓存标签的作用表示此页面元素可以进行缓存， 以及利用此缓存 标签判断页面元素在缓存中对应的备份是否可用和指示此页面元素的变化情况。 0035 其中， 如果该页面的排版树不可以在移动浏览器的本地缓存库中进行缓存， 则只 能进行正常的页面解析及排版流程。也就是说， 在不允许读取该页面的排版树在本地缓存 库中进。
17、行缓存的情况下， 则无法使用本发明所提供的页面排版方法， 只能按照常规的页面 解析及排版流程进行页面的排版。 0036 当确认页面的排版树可以在移动浏览器的本地缓存库中进行缓存时， 在本地缓存 库中查找该页面的排版树， 如果在本地缓存库中没有查找到该页面的排版树， 则移动浏览 器通过正常流程解析该页面， 生成该页面的排版树， 然后将生成的该页面的排版树保存到 本地缓存库中。 0037 S120 ： 根据页面节点元素的缓存标签， 找到页面节点元素的更新节点， 生成与更新 节点相对应的排版树节点。 0038 具体地， 根据增加的页面节点元素的缓存标签， 找到页面节点元素的更新节点， 生 成与更新节。
18、点相对应的排版树节点。 0039 其中， 如果页面中的缓存标签与存储在本地缓存库中的缓存标签不相同， 则删除 本地缓存库中的页面的排版树， 然后将解析页面生成的排版树保存到本地缓存库中。 0040 也就是说， 移动浏览器在解析页面时， 发现该页面中的缓存标签与存储在本地缓 存库中的缓存标签不一致， 则说明该页面的整体排版已经发生变化， 需要更新本地缓存库 中的缓存。 在更新缓存的过程中， 首先删除存储在缓存库中的该页面的排版树， 然后重新解 析该页面， 并且重新生成该页面的排版树， 然后重新缓存到本地缓存库中。 0041 具体地， 根据增加的页面节点元素的缓存标签， 当有页面内容发生更新 时，。
19、 将该 缓存标签标记为更新状态。当浏览器解析到该节点元素时， 根据增加的页面节点元素的缓 存标签来判断该页面内容 （即节点元素） 是否发生了更新。如果该节点元素发生了更新， 则 删除原节点元素的排版树节点， 然后重新生成新的该节点元素的排版树节点。 0042 S130 ： 将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节 点。 0043 具体地， 在复制的页面的排版树中， 用更新节点的排版树节点替换与更新节点对 应排版树节点， 并打开更新节点的排版树节点及其父亲节点、 祖先节点的排版开关。 0044 其中， 在用更新节点的排版树节点替换更新节点对应排版树节点的过程中， 将与 更新。
20、节点对应的排版树节点删除， 然后插入更新节点排版树节点。 0045 也就是说， 在将生成的与更新节点相对应的排版树节点替换更新节点原有的排版 树节点的过程中， 将更新节点原有的排版树节点删除， 然后插入生成的与更新节点相对应 的排版树节点。 0046 S140 ： 在排版树内， 对生成的与更新节点相对应的排版树节点、 更新节点的父亲节 点以及更新节点的祖先节点进行重新排版。 说 明 书 CN 103678486 A 6 4/6 页 7 0047 具体地， 在完成所有更新节点的排版树节点的替换后， 在排版树内， 对打开排版开 关的所有排版树节点进行重新排版。 0048 其中， 在完成重新排版后进。
21、入渲染流程， 并将渲染效果 （即最终的网页效果） 呈现 给用户。 0049 通过图 1 所示的流程可以看出， 本发明根据页面中增加的缓存标签， 将移动浏览 器在解析页面时， 生成的排版树进行缓存， 然后再根据页面中增加的页面节点元素的缓存 标签， 将只发生变化的节点元素进行重新构造， 同时将只发生变化的节点元素进行重新排 版， 从而减少页面排版的时间， 提升网页更新显示的速度。 0050 为了更为详细地说明本发明提供的页面排版的流程， 图 2 示出了根据本发明实施 例的页面排版的详细流程。 0051 需要说明的是， 在进入图 2 所示的流程之前， 在网页端需要增加该页面的缓存标 签， 以标记该。
22、页面的 DOM 树与排版树可以进行缓存， 以及标记节点 元素的内容是否发生变 化。 0052 其中， webkit 中每个 html 页面对应于一棵 DOM 树， DOM 树用于描述 html 页面的信 息。从 MVC（Model View Controller， 模型视图控制器） 的角度来看， DOM 树属于 MVC 中的 M 部分， 即模型部分。 0053 接下来， 如图 2 所示 ： 0054 S201 ： 移动浏览器接收网页数据。 0055 S202 ： 移动浏览器解析该页面的缓存标签， 判断是否允许读取 DOM 树与排版树的 缓存， 如果允许进入 S204， 否则进入 S203。 0。
23、056 S203 ： 进入正常的解析、 排版流程。 0057 S204 ： 查看本地缓存库中是否缓存有该页面的 DOM 树与排版树， 且该页面的缓存 标签与存储在移动浏览器的缓存库中的缓存标签是否相同， 如果是进入 S206， 否则进入 S205。 0058 也就是说， 如果缓存库中没有该页面的 DOM 树与排版树， 或者缓存库中有该页面 的 DOM 树与排版树， 但缓存标签不相同， 则进入 S205 ； 如果缓存库存中有该页面的 DOM 树与 排版树， 且缓存标签也相同， 则进入 S206。 0059 S205 ： 清空本地缓存库中的数据， 进行正常的解析、 排版流程， 在完成排版后， 将新。
24、 的 DOM 树与排版树缓存到本地缓存库中。 0060 S206 ： 从本地缓存库中复制一份 DOM 树与排版树。 0061 S207 ： 移动浏览器在继续解析该页面时， 根据增加的该页面的节点元素的缓存属 性， 找到更新的节点元素， 生成对应的 DOM 树节点和排版树节点。 0062 S208 ： 将更新的节点元素所对应的原节点元素的 DOM 树内的节点删除， 并插入新 生成的 DOM 树节点。 0063 S209 ： 将更新的节点元素所对应的原节点元素的排版树内的节点删除， 并插入新 生成的排版树节点， 同时打开更新的节点元素及其父亲、 祖先节点的排版开关。 0064 S210 ： 完成全。
25、部更新节点的替换后， 对打开排版开关的排版树内的全部节点重新 进行排版。 0065 S211 ： 完成排版后进入渲染流程， 最终将网页效果呈现给用户。 说 明 书 CN 103678486 A 7 5/6 页 8 0066 通过图 2 所示的流程可以看出， 采用本发明提供的页面排版方法， 在页面内容发 生变化后， 能够大大减少分配节点及排版节点的操作， 节省了排版 时间， 提高了页面的刷 新速度。 0067 以下将以两个实例对本发明提供的页面排版方法进行更为详细地说明。 0068 实例一 0069 在网站首页内增加缓存标签 ： 0070 0071 该缓存标签表明该页面可以使用缓存的 DOM 树。
26、， 当前页面使用的 DOM 树的版本 是” 123456” 。 0072 0073 该缓存标签表明该页面可以使用缓存的排版树， 当前页面使用的排版树的版本 是” 234567” 。 0074 实例二 0075 在页面内增加该页面节点元素的缓存属性 0076 出 席 夏 季 达 沃 斯 答 问 称当农民对任总理受益匪浅 0078 该页面节点元素增加了 volitate 关键字， 浏览器在解析到这个关键字时， 会查看 对应的节点内容是否发生了变化， 如果没有发生变化， 则保留原节点， 否则删除并创建新的 节点， 同时打开该元素对应的排版节点的排版开关。 0079 图 3-1 与图 3-2 分别为网。
27、页更新前与更新后的效果对比图， 其中图 3-1 示出了网 页更新前的效果， 图 3-2 示出了网页更新后的效果。对于图 3-2， 其元素对应如下 ： 0080 新闻 | 多地上调最低工资标准 0081 网 聊 伤 人 词汇 2014 放假安排 0082 一 卡 通 全 国推行 电信发力 4G 0083 乘客坠地铁隧道 感动社区人物 0084 人 民 币 升 值 中东部迎大风降温 0085 0086 改变的页面节点元素被标记为 “volitate” ， 即意味着该页面内容发生了变化， 需 要移动浏览器对变化的内容进行刷新处理。 0087 与上述方法相对应， 本发明还提供一种页面排版系统， 图 4。
28、 示出了根据本发明实 施例的页面排版系统的逻辑结构。 0088 如图 4 所示， 本发明提供的页面排版系统 400 包括排版树复制单元 410、 排版树节 点生成单元 420、 排版树节点更新单元 430 和排版单元 440。 0089 其中， 排版树复制单元 410 用于在解析页面时， 当本地缓存库中缓存有页面的排 版树， 且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时， 从本地缓存库中复 制页面的排版树 ； 排版树节点生成单元 420 用于根据页面节点元素的缓存标签， 找到页面 节点元素的更新节点， 生成与更新节点相对应的排版树节点。 0090 排版树节点更新单元 430 用于在将。
29、生成的与更新节点相对应的排版树节点替换 更新节点原有的排版树节点 ； 0091 排版单元 440 用于对生成的与更新节点相对应的排版树节点、 更新节点的父亲以 及更新节点的祖先节点进行重新排版。 0092 本发明根据页面中增加的缓存标签， 将移动浏览器在解析页面时， 生成的排版树 进行缓存， 然后再根据页面中增加的页面节点元素的缓存标签， 将只发生变化的节点元素 进行重新构造， 同时将只发生变化的节点元素进行重新排版， 从而减少页面排版的时间， 提 升网页更新显示的速度。 0093 在本发明的一个或者多个实施方式中， 排版树复制单元 410 在解析页面时， 如果 在本地缓存库中没有查找到页面的。
30、排版树， 则解析页面， 生成页面的排版树， 然后将生成的 页面的排版树保存到本地缓存库中。 0094 在本发明的一个或者多个实施方式中， 排版树复制单元 410 进一步包括排版树处 理单元， 用于当页面中的缓存标签与存储在本地缓存库中的缓存标签不相同时， 删除本地 缓存库中的页面的排版树， 然后将解析页面生成的排版树保存到本地缓存库中。 0095 在本发明的一个或者多个实施方式中， 树节点更新单元 430 在将生成的与更新节 点相对应的排版树节点替换更新节点原有的排版树节点的过程中， 将更新节点原有的排版 树节点删除， 然后插入生成的与更新节点相对应的排版树节点。 0096 如上参照附图以示例的方式描述了根据本发明的页面排版方法及系统。但是， 本 领域技术人员应当理解， 对于上述本发明所提出的页面排版方法及系统， 还可以在不脱离 本发明内容的基础上做出各种改进。因此， 本发明的保护范围应当由所附的权利要求书的 内容确定。 说 明 书 CN 103678486 A 9 1/3 页 10 图 1 说 明 书 附 图 CN 103678486 A 10 2/3 页 11 图 2 说 明 书 附 图 CN 103678486 A 11 3/3 页 12 图 3-1 图 3-2 图 4 说 明 书 附 图 CN 103678486 A 12 。