一种网页渲染方法及系统技术方案

技术编号:11787656 阅读:104 留言:0更新日期:2015-07-29 11:40
本发明专利技术公开了一种网页渲染方法及系统。一种网页渲染方法包括:获取待渲染的目标元素集合;其中,所述目标元素集合中包含至少一个目标元素;确定每个目标元素所属的元素层;分别对各个元素层的目标元素进行独立渲染;对渲染之后的目标元素进行合成,得到渲染后的网页。一种网页渲染系统包括:元素集合获取单元、元素层确定单元、渲染单元和合成单元。本发明专利技术中,如果网页上有元素发生变化,只需对该元素所在的元素层进行重新渲染,其余各元素层的元素可以保持不变,提高了渲染的效率。

【技术实现步骤摘要】

本专利技术涉及互联网应用技术,特别涉及一种网页渲染方法及系统
技术介绍
随着科学技术的发展,计算机和移动终端的软件技术和硬件技术都有了长足的进步。由于互联网技术的广泛应用,人们可以在足不出户的情况下从网络上得到大量的信息,不但为人们的工作和学习提供了帮助,也丰富了人们的日常生活。如今,人们从网络上获取信息大部分通过浏览器进行。浏览器向用户展现网页一般包括三个步骤:首先需要根据请求的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所示,图中IayerU layer2、layer3、layer4分别表示CSS3动画、视频、透明层和Canvas。需要说明的是,图2仅是对元素层的划分做示意性说明,并不对本专利技术构成限制。其中,CSS (Cascading Style S本文档来自技高网...

【技术保护点】
一种网页渲染方法,其特征在于,包括:获取待渲染的目标元素集合;其中,所述目标元素集合中包含至少一个目标元素;确定每个目标元素所属的元素层;分别对各个元素层的目标元素进行独立渲染;对渲染之后的目标元素进行合成,得到渲染后的网页。

【技术特征摘要】

【专利技术属性】
技术研发人员:刘阳关翔徐鸣
申请(专利权)人:贝壳网际北京安全技术有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1