页面排版方法及系统的制作方法
【专利摘要】本发明提供了一种页面排版方法及系统，其中的方法包括：在解析页面时，如果本地缓存库中有页面的排版树，且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时，则从本地缓存库中复制页面的排版树；根据页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点；将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点；在排版树内，对生成的与更新节点相对应的排版树节点、更新节点的父亲节点以及更新节点的祖先节点进行重新排版。通过本发明能够减少重建树的节点、降低排版的次数、提高页面显示的速度。
【专利说明】页面排版方法及系统
【技术领域】
[0001]本发明涉及移动浏览器【技术领域】，更为具体地，涉及一种页面排版方法及系统。
【背景技术】
[0002]随着互联网的兴起和发展，人们了解信息的方式不再局限于传统的纸媒，通过网页人们同样可以了解到更多的信息资讯，因此，这也使例如新浪、搜狐等众多门户网站得以发展。
[0003]然而信息传播的快速以及信息种类的繁多，致使当今的门户网站所包含的信息量也日益增多。通常一个门户网站的首页包含了上千个页面的链接，而由于信息的快速传播以及高速更新，一个门户网站的首页每天更新数十次已成为常态。
[0004]以用户使用移动浏览器观看一个门户网站的首页为例，假设用户观看首页时，此时有一条新闻发生了更新，如果用户这时刷新页面，则相当于重新加载整个门户网站的首页。对于重新加载整个门户网站的首页而言，则相当于重新对整个页面进行布局排版。也就是说，对于重新加载下来的页面，会重新生成一份D0M树及一份排版树，然后根据排版树将整个页面渲染出来，最终将渲染效果呈现在用户眼前。
[0005]在上述示例中，网页内容只是更新了一小部分，网页的整体排版布局并没有发生任何变化，发生变化的只是页面的内容(即一部分文字)。而通过上述示例也能够看出，在页面整体排版布局没有发生任何变化，只更新页面内容的情况下，现有的页面排版同样会删除已有的D0M树及排版树，然后重新生成这两个树并进行排版操作。而通常门户网站的首页不会频繁更新页面布局，频繁更新的只是页面的内容。如此，即使频繁更新页面内容也需要将整个页面重新布局排版，无疑将造成无端的浪费，进而影响到页面的显示速度。
【发明内容】
[0006]鉴于上述问题，本发明的目的是提供一种页面排版方法及系统，以降低页面排版的次数，提高页面显示的速度。
[0007]根据本发明的一个方面，提供一种页面排版方法，包括:
[0008]在解析所述页面时，如果本地缓存库中缓存有页面的排版树，且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时，则从本地缓存库中复制页面的排版树；
[0009]根据页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点；
[0010]将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点；
[0011 ] 在排版树内，对生成的与更新节点相对应的排版树节点、更新节点的父亲节点以及更新节点的祖先节点进行重新排版。
[0012]其中，在解析页面时，如果在本地缓存库中没有查找到页面的排版树，则解析页面，生成页面的排版树，然后将生成的页面的排版树保存到本地缓存库中。
[0013]另一方面，本发明还提供一种页面排版系统，包括:[0014]排版树复制单元，用于在解析页面时，当本地缓存库中缓存有页面的排版树，且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时，从本地缓存库中复制页面的排版树；
[0015]排版树节点生成单元，用于根据页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点；
[0016]排版树节点更新单元,用于将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点；
[0017]排版单元,用于对生成的与更新节点相对应的排版树节点、更新节点的父亲节点以及更新节点的祖先节点进行重新排版。
[0018]利用上述根据本发明的页面排版方法及系统，通过缓存排版树，从而只对发生变化的页面内容进行更新，实现减少重建树的节点，降低排版的次数，进而达到提高页面显示速度的目的。
[0019]为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。
【专利附图】
【附图说明】
[0020]通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中:
[0021]图1为根据本发明实施例的页面排版方法流程示意图；
[0022]图2为根据本发明实施例的页面排版的详细流程示意图；
[0023]图3-1为网页更新前的效果图；
[0024]图3-2为网页更新后的效果图；
[0025]图4为根据本发明实施例的页面排版系统的逻辑结构框图。
[0026]在所有附图中相同的标号指示相似或相应的特征或功能。
【具体实施方式】
[0027]以下将结合附图对本发明的具体实施例进行详细描述。
[0028]为了清楚说明本发明提供的页面排版方法，下面先对本发明中涉及到的部分名词做出解释说明:
[0029]排版树:webkit是一个开源的浏览器引擎，其中每个html页面对应于一颗排版树，排版树用于布局，具体负责D0M(Document Object Model,文件对象模型)树如何显示在屏幕上。从MVC (Model-View-Controller,模型一视图一控制器)的角度来看,D0M树属于MVC中的V部分，即视图部分。每生成一个D0M节点，就会去创建对应的排版节点。但是，虽然大部分D0M节点与排版节点是一一对应，但并不是所有D0M节点都与排版节点绝对一一对应。
[0030]图1示出了根据本发明实施例的页面排版方法流程。
[0031]如图1所示，本发明提供的页面排版方法包括:[0032]S110:在解析页面时，如果本地缓存库中缓存有页面的排版树，且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时，则从本地缓存库中复制页面的排版树。
[0033]具体地，移动浏览器在解析页面时，根据在页面中增加的缓存标签，确认页面的排版树可以在移动浏览器的本地缓存库中进行缓存。
[0034]需要说明的是，缓存标签的作用表示此页面元素可以进行缓存，以及利用此缓存标签判断页面元素在缓存中对应的备份是否可用和指示此页面元素的变化情况。
[0035]其中，如果该页面的排版树不可以在移动浏览器的本地缓存库中进行缓存，则只能进行正常的页面解析及排版流程。也就是说，在不允许读取该页面的排版树在本地缓存库中进行缓存的情况下，则无法使用本发明所提供的页面排版方法，只能按照常规的页面解析及排版流程进行页面的排版。
[0036]当确认页面的排版树可以在移动浏览器的本地缓存库中进行缓存时，在本地缓存库中查找该页面的排版树，如果在本地缓存库中没有查找到该页面的排版树，则移动浏览器通过正常流程解析该页面，生成该页面的排版树，然后将生成的该页面的排版树保存到本地缓存库中。
[0037]S120:根据页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点。
[0038]具体地，根据增加的页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点。
[0039]其中，如果页面中的缓存标签与存储在本地缓存库中的缓存标签不相同，则删除本地缓存库中的页面的排版树，然后将解析页面生成的排版树保存到本地缓存库中。
[0040]也就是说，移动浏览器在解析页面时，发现该页面中的缓存标签与存储在本地缓存库中的缓存标签不一致，则说明该页面的整体排版已经发生变化，需要更新本地缓存库中的缓存。在更新缓存的过程中，首先删除存储在缓存库中的该页面的排版树，然后重新解析该页面，并且重新生成该页面的排版树，然后重新缓存到本地缓存库中。
[0041]具体地，根据增加的页面节点元素的缓存标签，当有页面内容发生更新时，将该缓存标签标记为更新状态。当浏览器解析到该节点元素时，根据增加的页面节点元素的缓存标签来判断该页面内容(即节点元素)是否发生了更新。如果该节点元素发生了更新，则删除原节点元素的排版树节点，然后重新生成新的该节点元素的排版树节点。
[0042]S130:将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点。
[0043]具体地，在复制的页面的排版树中，用更新节点的排版树节点替换与更新节点对应排版树节点，并打开更新节点的排版树节点及其父亲节点、祖先节点的排版开关。
[0044]其中，在用更新节点的排版树节点替换更新节点对应排版树节点的过程中，将与更新节点对应的排版树节点删除，然后插入更新节点排版树节点。
[0045]也就是说，在将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点的过程中，将更新节点原有的排版树节点删除，然后插入生成的与更新节点相对应的排版树节点。
[0046]S140:在排版树内，对生成的与更新节点相对应的排版树节点、更新节点的父亲节点以及更新节点的祖先节点进行重新排版。[0047]具体地，在完成所有更新节点的排版树节点的替换后，在排版树内，对打开排版开关的所有排版树节点进行重新排版。
[0048]其中，在完成重新排版后进入渲染流程，并将渲染效果(即最终的网页效果)呈现给用户。
[0049]通过图1所示的流程可以看出，本发明根据页面中增加的缓存标签，将移动浏览器在解析页面时，生成的排版树进行缓存，然后再根据页面中增加的页面节点元素的缓存标签，将只发生变化的节点元素进行重新构造，同时将只发生变化的节点元素进行重新排版，从而减少页面排版的时间，提升网页更新显示的速度。
[0050]为了更为详细地说明本发明提供的页面排版的流程，图2示出了根据本发明实施例的页面排版的详细流程。
[0051]需要说明的是，在进入图2所示的流程之前，在网页端需要增加该页面的缓存标签，以标记该页面的D0M树与排版树可以进行缓存，以及标记节点元素的内容是否发生变化。
[0052]其中,webkit中每个html页面对应于一棵D0M树,D0M树用于描述html页面的信息。从MVC (Model View Controller，模型视图控制器)的角度来看，DOM树属于MVC中的Μ部分，即模型部分。
[0053]接下来，如图2所示:
[0054]S201:移动浏览器接收网页数据。
[0055]S202:移动浏览器解析该页面的缓存标签，判断是否允许读取D0M树与排版树的缓存，如果允许进入S204，否则进入S203。
[0056]S203:进入正常的解析、排版流程。
[0057]S204:查看本地缓存库中是否缓存有该页面的D0M树与排版树，且该页面的缓存标签与存储在移动浏览器的缓存库中的缓存标签是否相同，如果是进入S206，否则进入S205。
[0058]也就是说，如果缓存库中没有该页面的D0M树与排版树，或者缓存库中有该页面的D0M树与排版树，但缓存标签不相同，则进入S205 ;如果缓存库存中有该页面的D0M树与排版树，且缓存标签也相同，则进入S206。
[0059]S205:清空本地缓存库中的数据，进行正常的解析、排版流程，在完成排版后，将新的D0M树与排版树缓存到本地缓存库中。
[0060]S206:从本地缓存库中复制一份D0M树与排版树。
[0061]S207:移动浏览器在继续解析该页面时，根据增加的该页面的节点元素的缓存属性，找到更新的节点元素，生成对应的D0M树节点和排版树节点。
[0062]S208:将更新的节点元素所对应的原节点元素的D0M树内的节点删除，并插入新生成的D0M树节点。
[0063]S209:将更新的节点元素所对应的原节点元素的排版树内的节点删除，并插入新生成的排版树节点，同时打开更新的节点元素及其父亲、祖先节点的排版开关。
[0064]S210:完成全部更新节点的替换后，对打开排版开关的排版树内的全部节点重新进行排版。
[0065]S211:完成排版后进入渲染流程，最终将网页效果呈现给用户。[0066]通过图2所示的流程可以看出，采用本发明提供的页面排版方法，在页面内容发生变化后，能够大大减少分配节点及排版节点的操作，节省了排版时间，提高了页面的刷新速度。
[0067]以下将以两个实例对本发明提供的页面排版方法进行更为详细地说明。
[0068]实例一
[0069]在网站首页内增加缓存标签:
[0070]<meta name= “cache DOM tree” version:” 123456，，>
[0071]该缓存标签表明该页面可以使用缓存的DOM树，当前页面使用的DOM树的版本是” 123456”。
[0072]<meta name= “cache render tree” version:” 234567” >
[0073]该缓存标签表明该页面可以使用缓存的排版树，当前页面使用的排版树的版本是”234567”。
[0074]实例二
[0075] 在页面内增加该页面节点元素的缓存属性
[0076]< 1 i volitate><a href = //http: / / news, s i n a.com.c n /c/2013-09-10/192628182198.shtml〃target=〃—blank〃> 出席夏季达沃斯答问 </a><ahref=//http://news.sina.com.cn/c/2013-09-10/181628181738.shtml"
[0077]target=〃—blank〃>称当农民对任总理受益匪浅</a>〈/li>
[0078]该页面节点元素增加了 volitate关键字，浏览器在解析到这个关键字时，会查看对应的节点内容是否发生了变化，如果没有发生变化，则保留原节点，否则删除并创建新的节点，同时打开该元素对应的排版节点的排版开关。
[0079]图3-1与图3-2分别为网页更新前与更新后的效果对比图，其中图3-1示出了网页更新前的效果，图3-2示出了网页更新后的效果。对于图3-2，其元素对应如下:
[0080]<ul class="un1-blk-list011ist-a">〈li>〈a class="videoNewsLeft"href=//http://vide0.sina.com.cn/news///target=//_blank//> 新闻 </a> | <a target=//_blank"href="http://video, sina.com.cn/news/"> 多地上调最低工资标准 </a>〈/li>
[0081]<li volitateXa target=〃—blank〃href=〃http://video, sina.com.cn/vlist/news/zt/xlyhw/?opsubject—id=topl#114377138"class="videoNewsLeft"> 网聊伤人词汇 </a><a target=〃—blank〃 href=//http://vide0.sina.com.cn/vlist/news/zt/xlyhw/?opsubject—id=topl#114383361">2014 放假安排 </a>〈/li>
[0082]<li volitateXa target=〃—blank〃href=〃http://video, sina.com.cn/vlist/news/zt/zsgdtrz/?opsubject—id=topl#114361952〃class=〃videoNewsLeft〃> —卡通全国推行 </a><a target=〃—blank〃href=〃http://vide0.sina.com.cn/vlist/news/zt/gzfwbz/?opsubject—id=topl#114363193"> 电信发力 4G〈/a>〈/li>
[0083]<li><a target=〃_blank〃href=〃http://video, sina.com.cn/vlist/news/zt/topvideos/?opsubject—id=topl#114328443〃class=〃videoNewsLeft〃> 乘客坠地铁隧道</a><a volitate target=〃—blank〃href=〃http://video, sina.com.cn/vlist/news/zt/topvideos/?opsubject—id=topl#114337261〃> 感动社区人物 </a>〈/li>
[0084]<li><a target="_blank"href="http://video, sina.com.cn/vlist/news/zt/topvideos/?opsubject_id=topl#114331366"class="videoNewsLeft"> 人民币升值 </aXa volitate target=〃_blank〃href=〃http://vide0.sina.com.cn/vlist/news/zt/18newsroom/?opsubject_id=topl#l 14387151〃〉中东部迎大风降温 </a>〈/li>
[0085]</ul>
[0086]改变的页面节点元素被标记为“volitate”，即意味着该页面内容发生了变化，需要移动浏览器对变化的内容进行刷新处理。
[0087]与上述方法相对应，本发明还提供一种页面排版系统，图4示出了根据本发明实施例的页面排版系统的逻辑结构。
[0088]如图4所示，本发明提供的页面排版系统400包括排版树复制单元410、排版树节点生成单元420、排版树节点更新单元430和排版单元440。
[0089]其中，排版树复制单元410用于在解析页面时，当本地缓存库中缓存有页面的排版树，且页面中的缓存标签与存储在本地缓存库中的缓存标签相同时，从本地缓存库中复制页面的排版树；排版树节点生成单元420用于根据页面节点元素的缓存标签，找到页面节点元素的更新节点，生成与更新节点相对应的排版树节点。
[0090]排版树节点更新单元430用于在将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点；
[0091]排版单元440用于对生成的与更新节点相对应的排版树节点、更新节点的父亲以及更新节点的祖先节点进行重新排版。
[0092]本发明根据页面中增加的缓存标签，将移动浏览器在解析页面时，生成的排版树进行缓存，然后再根据页面中增加的页面节点元素的缓存标签，将只发生变化的节点元素进行重新构造，同时将只发生变化的节点元素进行重新排版，从而减少页面排版的时间，提升网页更新显示的速度。
[0093]在本发明的一个或者多个实施方式中，排版树复制单元410在解析页面时，如果在本地缓存库中没有查找到页面的排版树，则解析页面，生成页面的排版树，然后将生成的页面的排版树保存到本地缓存库中。
[0094]在本发明的一个或者多个实施方式中，排版树复制单元410进一步包括排版树处理单元，用于当页面中的缓存标签与存储在本地缓存库中的缓存标签不相同时，删除本地缓存库中的页面的排版树，然后将解析页面生成的排版树保存到本地缓存库中。
[0095]在本发明的一个或者多个实施方式中，树节点更新单元430在将生成的与更新节点相对应的排版树节点替换更新节点原有的排版树节点的过程中，将更新节点原有的排版树节点删除，然后插入生成的与更新节点相对应的排版树节点。
[0096]如上参照附图以示例的方式描述了根据本发明的页面排版方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的页面排版方法及系统，还可以在不脱离本
【发明内容】
的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。
【权利要求】
1.一种页面排版方法，包括:在解析页面时，如果本地缓存库中缓存有所述页面的排版树，且所述页面中的缓存标签与存储在所述本地缓存库中的缓存标签相同时，则从所述本地缓存库中复制所述页面的排版树；根据页面节点元素的缓存标签，找到所述页面节点元素的更新节点，生成与所述更新节点相对应的排版树节点；将生成的与所述更新节点相对应的排版树节点替换所述更新节点原有的排版树节占.在排版树内，对生成的与所述更新节点相对应的排版树节点、所述更新节点的父亲节点以及所述更新节点的祖先节点进行重新排版。
2.如权利要求1所述的页面排版方法，其中，在解析所述页面时，如果在所述本地缓存库中没有查找到所述页面的排版树，则解析所述页面，生成所述页面的排版树，然后将生成的所述页面的排版树保存到所述本地缓存库中。
3.如权利要求1所述的页面排版方法，其中，如果所述页面中的缓存标签与存储在所述本地缓存库中的缓存标签不相同，则删除所述本地缓存库中的所述页面的排版树，然后将解析所述页面生成的排版树保存到所述本地缓存库中。
4.如权利要求1至3任一项所述的页面排版方法，其中，在将生成的与所述更新节点相对应的排版树节点替换 所述更新节点原有的排版树节点的过程中，将所述更新节点原有的排版树节点删除，然后插入生成的与更新节点相对应的排版树节点。
5.—种页面排版系统，包括:排版树复制单元，用于在解析页面时，当本地缓存库中缓存有所述页面的排版树，且所述页面中的缓存标签与存储在所述本地缓存库中的缓存标签相同时，从所述本地缓存库中复制所述页面的排版树；排版树节点生成单元，用于根据页面节点元素的缓存标签，找到所述页面节点元素的更新节点，生成与所述更新节点相对应的排版树节点；排版树节点更新单元，用于将生成的与所述更新节点相对应的排版树节点替换所述更新节点原有的排版树节点；排版单元，用于对生成的与所述更新节点相对应的排版树节点、所述更新节点的父亲节点以及所述更新节点的祖先节点进行重新排版。
6.如权利要求5所述的页面排版系统，其中，所述排版树复制单元在解析所述页面时，如果在所述本地缓存库中没有查找到所述页面的排版树，则解析所述页面，生成所述页面的排版树，然后将生成的所述页面的排版树保存到所述本地缓存库中。
7.如权利要求5所述的页面排版系统，其中，所述排版树复制单元进一步包括:排版树处理单元，用于当所述页面中的缓存标签与存储在所述本地缓存库中的缓存标签不相同时，删除所述本地缓存库中的所述页面的排版树，然后将解析所述页面生成的排版树保存到所述本地缓存库中。
8.如权利要求5至7任一项所述的页面排版系统，其中，所述排版树节点更新单元在将生成的与所述更新节点相对应的排版树节点替换所述更新节点原有的排版树节点的过程中，将所述更新节点原有的排版树节点删除，然后插入生成的与更新节点相对应的排版树节点。`
【文档编号】G06F17/30GK103678486SQ201310533531
【公开日】2014年3月26日 申请日期:2013年10月31日 优先权日:2013年10月31日
【发明者】王晓振 申请人:北京优视网络有限公司