CN104809123A - 一种网页渲染方法及系统 - Google Patents

Abstract

本发明公开了一种网页渲染方法及系统。一种网页渲染方法包括：获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；确定每个目标元素所属的元素层；分别对各个元素层的目标元素进行独立渲染；对渲染之后的目标元素进行合成，得到渲染后的网页。一种网页渲染系统包括：元素集合获取单元、元素层确定单元、渲染单元和合成单元。本发明中，如果网页上有元素发生变化，只需对该元素所在的元素层进行重新渲染，其余各元素层的元素可以保持不变，提高了渲染的效率。

Description

一种网页渲染方法及系统

技术领域

本发明涉及互联网应用技术，特别涉及一种网页渲染方法及系统。

背景技术

随着科学技术的发展，计算机和移动终端的软件技术和硬件技术都有了长足的进步。由于互联网技术的广泛应用，人们可以在足不出户的情况下从网络上得到大量的信息，不但为人们的工作和学习提供了帮助，也丰富了人们的日常生活。

如今，人们从网络上获取信息大部分通过浏览器进行。浏览器向用户展现网页一般包括三个步骤：首先需要根据请求的URL（Uniform Resource Locator，统一资源定位符）进行域名解析，向服务器发起请求，接收文件；然后对文件中的资源进行语法解析，建立相应的内部数据结构；最后通过渲染，将请求返回的页面资源基于一定的规则完成页面布局及绘制，将网页的内容展现给用户。网页渲染作为浏览器完成网页加载的其中一个重要步骤，如果渲染的效率低，会造成网页加载速度慢，影响用户浏览网页。

如今网页的布局越来越复杂，一个页面上往往包含了大量的信息，除了文字信息之外，还可能包含有图片、视频和其他多媒体信息。目前的网页渲染技术都是通过CPU（Central Processing Unit，中央处理器）把网页上包含的所有元素在一块内存中进行渲染，然后将经过渲染之后的内容整体以图片的形式发布到显示屏上。对于包含内容较多的网页来说，一旦网页上有元素发生变化，需要将网页上包含的所有内容重新进行渲染和发布，效率较低，也会对页面显示速度产生影响。

发明内容

为了解决上述问题，本发明实施例提供了一种一种网页渲染方法及系统，以提高网页渲染效率，技术方案如下：

获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

确定每个目标元素所属的元素层；

分别对各个元素层的目标元素进行独立渲染；

对渲染之后的目标元素进行合成，得到渲染后的网页。

较佳的，在确定每个目标元素所属的元素层后，所述方法还包括：分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域。

所述分别对各个元素层的目标元素进行独立渲染，包括：将不同的元素层的目标元素绘制到所述目标元素绘所在的内部存储区域上。

较佳的，该方法进一步包括：对所述渲染后的网页进行监测，如果发现所述渲染后的网页中的元素发生变化，则确定发生变化的元素所属的元素层，并且对该元素层的目标元素进行重新渲染，将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页。

所述不同的元素层按照元素的变化频率进行划分。

本发明实施例还提供了一种网页渲染系统，包括：元素集合获取单元、元素层确定单元、渲染单元和合成单元；其中，

所述元素集合获取单元用于获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

所述元素层确定单元用于确定每个目标元素所属的元素层；

所述渲染单元用于分别对各个元素层的目标元素进行独立渲染；

所述合成单元用于对渲染之后的目标元素进行合成，得到渲染后的网页。

较佳的，所述系统还包括：目标元素存储单元；其中，所述目标元素存储单元用于以元素层为单位，分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域。

所述渲染单元具体用于：将不同的元素层的目标元素绘制到目标元素所在的内部存储区域上。

较佳的，该系统进一步包括：网页更新单元；其中，

所述网页更新单元用于对所述渲染后的网页进行监测，如果发现所述渲染后的网页中的元素发生变化，则确定发生变化的元素所属的元素层，并且对该元素层的目标元素进行重新渲染，将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页。

所述元素层确定单元中使用的元素层按照元素的变化频率进行划分。

本发明实施例提供的网页渲染方法中，首先确定目标元素集合中目标元素所属的元素层；其次分别对不同元素层的目标元素进行独立渲染，然后将渲染后的目标元素进行合成，得到合成网页。

在上述方法中，如果网页上有元素发生变化，只需要确定该元素的元素层，对该元素层进行重新渲染，其余各元素层的元素可以保持不变，提高了渲染的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的网页渲染方法的第一种流程图；

图2为本发明实施例的一种元素层划分示意图；

图3为本发明实施例提供的网页渲染方法的第二种流程图；

图4为本发明实施例提供的网页渲染方法的第三种流程图；

图5为本发明实施例提供的网页渲染方法的第四种流程图

图6为本发明实施例提供的网页渲染系统的第一种结构示意图；

图7为本发明实施例提供的网页渲染系统的第二种结构示意图；

图8为本发明实施例提供的网页渲染系统的第三种结构示意图。

具体实施方式

首先对本发明实施例提供的一种网页渲染方法进行说明，包括：

获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

确定每个目标元素所属的元素层；

分别对各个元素层的目标元素进行独立渲染；

对渲染之后的目标元素进行合成，得到渲染后的网页。

通过上述方法，可以如果网页上有元素发生变化，只需要确定该元素的元素层，对该元素层进行重新渲染，其余各元素层的元素可以保持不变，提高了渲染的效率。

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例提供的一种网页渲染方法可以包括：

S100，获取待渲染的目标元素集合；

广义来说，网页渲染就是浏览器将HTML（Hyper Text Mark-up Language，超文本标记语言）代码变成人眼看到的图像的全过程。渲染大致分为两部分，一部分是排版，一部分是绘制。排版就是根据文档流，加上浮动、定位等属性，确定各个盒子的位置还有尺寸。绘制就是将视频、文字等网页元素的属性按照预定的方式呈现出来。

在未渲染之前，所有的元素都是以HTML代码形式存在的，将这些元素视为一个目标元素集合，本发明实施例对目标元素集合进行处理，最终得到经过渲染之后的网页。一般来说，目标元素集合中包含至少一个目标元素。

S200，确定每个目标元素所属的元素层；

在实际应用中，网页中的元素变化频率不同。以网页上显示的视频和网页背景为例，一旦网页中的视频开始播放，那么视频中的元素每时每刻都是变化着的，而组成网页背景的元素则很少发生变化。

本发明一个可选实施例中，将网页中的元素按照变化频率划分为若干元素层，并对目标元素集合中的目标元素进行分析，确定各目标元素所属的元素层。

根据不同的需要，元素层有不同的划分方式。在本发明一个可选实施例中，将网页中的元素分为四个元素层，分别为：CSS3动画、视频、透明层和Canvas，如图2所示，图中layer1、layer2、layer3、layer4分别表示CSS3动画、视频、透明层和Canvas。需要说明的是，图2仅是对元素层的划分做示意性说明，并不对本发明构成限制。

其中，CSS（Cascading Style Sheet，层叠样式表）是一种用来表现HTML或XML（Extensible Markup Language，可扩展标记语言）等文件样式的计算机语言。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，CSS3是CSS技术的升级版本。通过CSS3能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。CSS3动画一般是用来为网页增添动态效果，时间比较短，而且构成比较简单。相对于视频来说，CSS3动画中的元素比较少，变化频率比较慢。但是相对于其他元素，变化频率相对较快，可作为一个元素层。

视频中包含的元素一般很多，持续的时间相对较长，并且变化极快，因此本发明实施例将视频作为一个元素层。

网页中的透明层一般是起到遮罩或者美化网页的作用，大部分情况下是无色的，基本不发生变化，以此可以将透明层划为一个元素层。

Canvas对象表示一个HTML画布元素，用于在网页上绘制图像，相对于视频和CSS3动画，基本上不发生变化。

需要说明的是，上述元素层划分方式只是为了便于说明，不能对本发明构成限制。特别地，如果目标元素集合中有一个元素变化频率非常快，可以将该元素单独划分为一个元素层。

S300，分别对各个元素层的目标元素进行独立渲染；

网页渲染可以通过多种方法来实现，例如，通过将不同元素层的目标元素绘制到该目标元素所在的内部存储区域上，来对目标元素进行渲染。具体的绘制过程本发明不做限制。

各个元素层的目标元素，渲染过程相互独立。

S400，对渲染之后的目标元素进行合成，得到渲染后的网页；

经过渲染之后的网页需要经过合成，以图像的形式显示出来。本发明实施例中，利用GPU（Graphic Processing Unit，图形处理器）对渲染之后的网页进行合成。GPU是图形处理器，相当于CPU在电脑中的作用，它决定了该显卡的档次和大部分性能。相比起CPU，GPU对于数据是并行处理，并且对于图形的处理更为高效。

可以理解的是，也可以通过CPU，以其他手段实现网页的合成，本发明对此不做限制。

实际中，网页中的内容并不是一成不变的。如今的网页中的内容往往较为复杂，包含大量内容，且时时发生着变化。因此，在本发明另一个可选实施例中，上述S400之后，如图3所示，还可以包括：

S500，对网页中的内容进行监测，如果发现网页中的元素发生变化，则对网页进行更新；

进一步可选的，如图4所示，以网页中正在进行视频播放为例，S500可以包括：

S501，确定发生变化的元素所属的元素层；

例如，视频进度前进一帧，视频中的图像就会发生改变，组成图像的元素也会相应的发生变化。接收到这种变化之后，确定发生变化的元素所属的元素层为视频元素层。

S502，对该元素层的目标元素进行重新渲染；

将视频元素层中的目标元素进行重新渲染，其余各元素层的目标元素保持不变。

可以理解的是，由于各元素层的目标元素的渲染过程相互独立，如果其他元素层中也有元素发生了变化，将该元素层的目标元素进行重新渲染即可。本发明实施例中提出的视频元素层只做说明，并不对本发明构成限制。

S503，将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页；

通过上述方法，不但可以进行网页渲染，当网页中的元素有所变化，只要重新渲染该元素所属的元素层即可，提高了网页渲染的效率。

可选的，如图5所示，在本发明另一个实施例中，在S200之后，上述方法还可以包括：

S600，分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域；

本发明实施例中，目标元素可以存储在CPU内存中，也可以存储在GPU的纹理缓存中。GPU的纹理缓存是是指用于存放纹理的显存，与CPU内存同为计算机的内部存储区域。

本发明实施例中的各元素层的目标元素如果存储在GPU的纹理缓存中，可以更快的进行网页渲染。

如果利用GPU对网页进行渲染，可以将CPU解放出来处理其他的数据，进一步的提高网页渲染的效率。

需要指出的是，S600与S300～S400的执行顺序是任意的，本发明的实施例不作具体限定。

目标元素存储在操作系统不同的内部存储区域中，读取和处理的速度快，更进一步提高了效率。

本发明实施例还提供了一种网页渲染系统，如图6所示，包括：元素集合获取单元001、元素层确定单元002、渲染单元003和合成单元004；下面对该系统做具体说明：

元素集合获取单元001，用于获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

元素层确定单元002，用于确定每个目标元素所属的元素层；

本发明实施例中，提供一种优选的元素层划分方式，即，将CSS3动画、视频、透明层和Canvas分别作为一个元素层，这四个元素层的元素变化频率不同。例如，视频中的元素变化频率极快，而透明层中的元素几乎不发生变化。

渲染单元003，用于分别对各个元素层的目标元素进行独立渲染；

合成单元004，用于对渲染之后的目标元素进行合成，得到渲染后的网页；

本发明实施例提供一种优选的合成方法，即利用GPU合成器对渲染之后的目标元素进行合成，相比起利用CPU进行合成，效率更高。

实际中，网页中的内容总是时时发生变化，针对这种情况，本发明提供的网页渲染系统还可以包括：网页更新单元005，如图7所示；其中，

网页更新单元005，用于对所述渲染后的网页进行监测，如果发现所述渲染后的网页中的元素发生变化，则确定发生变化的元素所属的元素层，并且指示所述渲染单元对该元素层的目标元素进行重新渲染，指示所述合成单元将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页。

可选的，如图8所示，本发明提供的网页渲染系统还可以包括：目标元素存储单元006；

目标元素存储单元006，用于以元素层为单位，分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域；

所述内部存储区域可以为CPU的内存，也可以为GPU的纹理缓存。如果将目标元素存储在GPU的纹理缓存中，那么可以更进一步的提高渲染效率。

相应的，如果将目标元素存储在CPU中，则渲染单元003具体用于：针对不同的元素层的目标元素，将所述目标元素绘制在CPU一块内存上；其中，不同元素层的目标元素绘制在不同的内存上；

如果将目标元素存储在GPU中，则渲染单元003具体用于：针对不同的元素层的目标元素，将所述目标元素绘制在GPU一块纹理缓存上；其中，不同元素层的目标元素绘制在不同的纹理缓存上。

对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本领域普通技术人员可以理解实现上述方法实施方式中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，所述的程序可以存储于计算机可读取存储介质中，这里所称得的存储介质，如：ROM/RAM、磁碟、光盘等。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

1.一种网页渲染方法，其特征在于，包括：

获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

确定每个目标元素所属的元素层；

分别对各个元素层的目标元素进行独立渲染；

对渲染之后的目标元素进行合成，得到渲染后的网页。

2.如权利要求1所述的方法，其特征在于，在确定每个目标元素所属的元素层后，所述方法还包括：

分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域。

3.如权利要求2所述的方法，所述分别对各个元素层的目标元素进行独立渲染，包括：

将不同的元素层的目标元素绘制到所述目标元素绘所在的内部存储区域上。

4.如权利要求1到3中任意一项所述的方法，其特征在于，该方法进一步包括：对所述渲染后的网页进行监测，如果发现所述渲染后的网页中的元素发生变化，则确定发生变化的元素所属的元素层，并且对该元素层的目标元素进行重新渲染，将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页。

5.如权利要求4所述的方法，其特征在于，所述不同的元素层按照元素的变化频率进行划分。

6.一种网页渲染系统，其特征在于，包括：

元素集合获取单元、元素层确定单元、渲染单元和合成单元；其中，

所述元素集合获取单元用于获取待渲染的目标元素集合；其中，所述目标元素集合中包含至少一个目标元素；

所述元素层确定单元用于确定每个目标元素所属的元素层；

所述渲染单元用于分别对各个元素层的目标元素进行独立渲染；

所述合成单元用于对渲染之后的目标元素进行合成，得到渲染后的网页。

7.如权利要求6所述的系统，其特征在于，所述系统还包括：目标元素存储单元；其中，所述目标元素存储单元用于以元素层为单位，分别将不同元素层的目标元素存储在操作系统中不同的内部存储区域。

8.如权利要求7所述的系统，其特征在于，所述渲染单元具体用于：将不同的元素层的目标元素绘制到目标元素所在的内部存储区域上。

9.如权利要求6到8中任意一项所述的系统，其特征在于，该系统进一步包括：网页更新单元；其中，

所述网页更新单元用于对所述渲染后的网页进行监测，如果发现所述渲染后的网页中的元素发生变化，则确定发生变化的元素所属的元素层，并且对该元素层的目标元素进行重新渲染，将重新渲染的目标元素与其他未重新渲染的目标元素进行合成，得到更新渲染后的网页。

10.如权利要求9所述的系统，其特征在于，所述元素层确定单元中使用的元素层按照元素的变化频率进行划分。