CN106156148A - 一种页面的渲染方法、装置和终端设备 - Google Patents

Abstract

本发明实施例公开了一种页面的渲染方法，包括：向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块；接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中；从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层；在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。本发明实施例还公开了一种页面的渲染装置和终端设备。采用本发明，能减少页面的加载时间。

Description

一种页面的渲染方法、装置和终端设备

技术领域

本发明涉及互联网领域，尤其涉及一种页面的渲染方法、装置和终端设备。

背景技术

服务器和客户端基于HTTP(Hypertext Transfer Protocol，超文本传输协议，简称HTTP)进行交互，服务器接收到客户端发送的用于请求目标文件的HTTP请求时，服务器向客户端返回包含目标文件的HTTP响应。在现有的页面显示流程中，服务端需要向客户端传输完目标文件的数据后，客户端才会就接收到的目标文件的数据进行排版和绘制，最终在浏览器上显示页面。可以看出，目前的页面显示流程存在的问题是：如果待加载的文件的体积非常大的情况下，服务器向客户端传输文件的时长会很长，页面加载时间会难以忍受。

发明内容

本发明实施例所要解决的技术问题在于，提供一种页面的渲染方法、装置和终端设备。可解决现有技术中页面加载时间过长的问题。

为了解决上述技术问题，本发明实施例提供了一种页面的渲染方法，包括：

向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块；

接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中；

从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层；

在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

相应地，本发明实施例还提供了一种页面的渲染装置，包括：

网页请求模块，用于向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块；

数据接收模块，用于接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中；

图层创建模块，用于从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层；

对象渲染模块，用于在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

实施本发明实施例，具有如下有益效果：

接收服务器依次发送的数据块，每个数据块对应一个对象，将接收到的数据块写入数据缓存，读取数据缓存中的数据块，为读取的数据块创建一个图层，在图层上根据将读取的数据块渲染成对象显示出来，这样每读取到一个数据块就在对应的图层上执行渲染操作，避免接收到所有的对象数据再统一执行渲染操作，有效的减少用户的等待时间。

附图说明

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

图1是本发明实施例提供的一种页面的渲染方法的流程示意图；

图2是本发明实施例提供的一种页面的渲染方法的另一流程示意图；

图3是本发明实施例提供的一种页面的渲染方法的交互流程图；

图4是本发明实施例提供的一种页面的渲染装置的结构示意图；

图5是本发明实施例提供的一种页面的渲染装置的另一结构示意图。

具体实施方式

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

本发明实施例公开了一种页面的渲染方法和装置，服务器将页面文件划分为多个数据块，每个数据块对应页面文件中的一个对象，客户端向服务器发送页面请求时，服务器根据页面请求将多个数据块依次发送给客户端，每次发送一个数据块，直到所有的数据块全部发送完毕；客户端每接收到一个数据块将数据块写入到数据缓存中，客户端每次从数据缓存中读取一个数据块，为读取的数据块创建一个单独的图层，在图层上对数据块进行渲染生成对应的对象显示出来，这样客户端每读取到一个数据块就执行渲染操作，避免接收完所有的对象数据后再统一执行渲染操作，减少用户的等待时间。其中客户端可以是移动终端、平板电脑、个人电脑等，服务器为网页服务器。

参见图1，为本发明实施例提供的一种页面显示方法的流程示意图，在本发明实施例中，所述方法包括：

S101、向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块。

具体的，用户在客户端的浏览器上输入URL地址或用户点击当前页面上显示的URL地址时，客户端向服务器发送网页请求，服务器根据网页请求向客户数返回页面文件。服务器中存储有页面文件，服务器可以预先将页面文件划分为多个数据块，服务器在接收到客户端发送的网页请求后，直接根据预设顺序依次向客户端发送多个数据块；或者，服务器在接收到客户端发送的网页请求后，再对网页请求指向的网页文件的进行划分生成多个数据块，服务器根据预设顺序依次将多个数据块发送给客户端。其中，服务器划分页面文件的方法是：根据页面文件中包含的对象的进行划分生成多个数据块，每个数据块对应一个对象，即页面文件中包含的对象的数量和划分生成的数据块的数量相等，页面文件中包含的对象指的是页面上的文字或图片。

S102、接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中。

具体的，服务器每次从生成的多个数据块中选择一个数据块发送给客户端，客户端每接收到服务器发送的数据块，将接收到的数据块写入到数据缓存中。由于渲染操作耗费的时间会大于接收数据块的时间，为了防止接收到的数据块太多在客户端来不及执行渲染操作，导致客户端阻塞和崩溃，在客户端设置数据缓存避免接收速度和处理速度不匹配造成的问题。

S103、从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层。

其中，客户端选择数据缓存中的一个数据块，读取选择的数据块，每读取一个数据块为该数据块创建一个单独的图层。

S104、在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

其中，每当一个数据块在对应的图层上完成渲染操作后，数据块对应的对象就会显示出来。每个对象位于各自的图层上，每个对象对应不同的图层，待划分的数据块全部完成渲染操作后，页面文件包含的所有对象会显示出来，从而完成页面文件的渲染，用户就可以查看到完整的页面。

实施本发明的实施例，接收服务器依次发送的数据块，每个数据块对应一个对象，将接收到的数据块写入数据缓存，读取数据缓存中的数据块，为读取的数据块创建一个图层，在图层上根据将读取的数据块渲染成对象显示出来，这样每读取到一个数据块就在对应的图层上执行渲染操作，避免接收到所有的对象数据再统一执行渲染操作，有效的减少用户的等待时间。

参见图2，为本发明实施例提供的一种页面的渲染方法的另一流程示意图，在本发明实施例中，所述方法包括：

S201、向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块。

具体的，用户在客户端的浏览器上输入URL地址或用户点击当前页面上显示的URL地址时，客户端向服务器发送网页请求，服务器根据网页请求向客户数返回页面文件。服务器中存储有页面文件，服务器可以预先将页面文件划分为多个数据块，服务器在接收到客户端发送的网页请求后，直接根据预设顺序依次向客户端发送多个数据块；或者，服务器在接收到客户端发送的网页请求后，再对网页请求指向的网页文件的进行划分生成多个数据块，服务器根据预设顺序依次将多个数据块发送给客户端。其中，服务器划分页面文件的方法是：根据页面文件中包含的对象的进行划分生成多个数据块，每个数据块对应一个对象，即页面文件中包含的对象的数量和划分生成的数据块的数量相等，页面文件中包含的对象指的是页面上的文字或图片。

示例性的，页面文件中包含N个对象，服务器将页面文件划分为N个数据块，每个数据块对应一个对象，假设N＝4，页面文件中包含对象1、对象2、对象3和对象4，服务器将页面文件划分为4个数据块，分别为数据块1、数据块2、数据块3和数据块4，其中数据块1对象对象1，数据块2对应对象2、数据块3对应对象3、数据块4对应对象4。用户点击客户端浏览器上的链接地址或在浏览器的地址栏中输入链接地址，链接地址指向服务器上的页面文件，客户端向服务器发送网页请求，服务器接收网页请求后，服务器将划分的4个数据块依次发送给客户端，直到4个数据块全部发送完毕。其中，服务器选择数据块的方式可以为：优先发送将位于页面上方的对象对应的数据块，例如属于页面的标题栏的数据块。

可以理解的是，划分后的各个数据块的大小可能会不相等，其中，按照发送顺序，首个数据块携带划分的数据块的总长度和自身的长度，后续数据块只携带自身的长度；或者，首个数据块携带划分的数据块的总数量和自身的序号，后续数据块只携带自身的序号，这样便于客户端接收数据块后判断是否全部接收完毕。

S202、接收所述服务器发送的数据块。

客户端接收服务器发送过来的数据块，其中，客户端可以通过识别数据块携带的身份标识来确定数据块是否属于请求的页面文件，如果不属于请求的页面文件，丢弃接收到的数据块。

S203、统计从所述服务器接收到的数据块的数量。

具体的，客户端对接收到的属于页面文件的数据块的数量进行统计，客户端可通过从接收到的首个数据块获取划分的数据块的数量，每接收到一个页面文件的数据块后，将接收到的数据块的数量加1。

S204、接收到的数据块的数量是否达到所述页面文件划分的数据块的数量。

具体的，客户端判断接收到的数据块的数量是否达到页面文件划分的数据块的数量，如果为是，执行S206，如果为否，执行S205。

S205、将接收到的数据块依次写入到数据缓存中。

具体的，客户端将接收到的属于页面文件的数据块写入到数据缓存中，写入的方法可以是：按照先进先出的顺序将接收到的数据块写入到数据缓存中数据块队列的队列尾。其中，数据缓存可以为SRAM或DRAM。

S206、停止向所述数据缓存写入数据块。

具体的，当页面文件的数据块全部接收完毕，停止向数据缓存写入数据块，防止不属于页面文件的数据块写入到数据缓存中，造成数据污染。

S207、数据缓存是否为空。

具体的，客户端判断数据缓存是否为空，即数据缓存中的数据块的数量为零，如果为是，执行S208，如果为否，执行S209。

S208、统计从所述数据缓存读取到的数据块的数量。

其中，客户端统计从数据缓存中读取到的数据块的数量。客户端可采用先出的方式读取数据缓存中的数据块，首先读取数据缓存中的数据块队列的队列头，读取出来后，队列头进行出队操作生成新的队列头。客户端可以从首个读取的数据块中获取页面文件划分的数据块的数量，对从数据缓存中读取的数据块进行计数。

S209、若所述读取到的数据块的数量未达到所述页面文件划分的数据块的数量，等待预设时长。

具体的，如果S208统计的从数据缓存中读取的数据块的数量未达到页面文件划分的数据块的数量，表明服务器还有未发送完的数据块或客户端还有未写入数据缓存的数据块，等待预设时长，待客户端将剩余的数据块写入数据缓存中再从数据缓存中读取。

S210、从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层。

具体的，客户端从数据缓存中读取一个数据块，每个数据块对应一个对象，客户端为数据块创建一个单独的图层，图层的大小和形状可以与对象的形状和大小相同，然后在创建的图层上对数据块执行渲染操作，渲染操作完成后，用户可以在客户端上看到完成渲染操作后的对象。每个对象位于各自的图层上，每个对象对应不同的图层，待划分的数据块全部完成渲染操作后，页面文件包含的所有对象会显示出来，从而完成页面文件的渲染，用户就可以查看到完整的页面。

S211、接收用于移动目标对象的移动指令；其中，所述目标对象为所述页面文件包含的对象中的任意一个。

具体的，页面文件划分的数据块全部完成渲染操作后，生成页面文件对应的目标页面，如果目标页面上存在活动的对象时，用户对目标对象进行移动时，客户端监控目标对象移动的轨迹。其中，用户可以通过触摸屏、鼠标或键盘对目标对象进行移动。

S212、确定目标对象的最终位置，并对所述目标对象在所述最终位置重新执行渲染操作。

具体的，当目标对象停止移动时，根据目标对象的坐标确定其最终位置，在最终位置上对目标对象重新执行渲染操作，这样重新渲染时，只需要对目标对象进行渲染，不需要对目标页面上的其他对象重新执行渲染操作，能提高渲染的效率。

可选的，客户端完成渲染操作的对象缓存至本地磁盘中的对象缓存中。其中，对象可以是文字或图片的截图，本发明不作限制。当客户端接收渲染数据块的操作时，可以首先在对象缓存中查询是否存在于数据块对应的对象，如果命中，直接将本地磁盘中的对象显示在浏览器上，这样可以提高页面渲染的响应速度。

实施本发明的实施例，接收服务器依次发送的数据块，每个数据块对应一个对象，将接收到的数据块写入数据缓存，读取数据缓存中的数据块，为读取的数据块创建一个图层，在图层上根据将读取的数据块渲染成对象显示出来，这样每读取到一个数据块就在对应的图层上执行渲染操作，避免接收到所有的对象数据再统一执行渲染操作，有效的减少用户的等待时间。

参见图3，为本发明实施例提供的一种页面的渲染方法的交互示意图，在本发明实施例设计的设备包括服务器1和客户端2，其中交互流程如下：

S301、服务器根据页面文件包含的对象将所述页面文件划分为N个数据块。其中，N为大于1的整数，页面文件中的对象包括文本对象、表格对象或图形对象等，划分后的每个数据块对应页面文件中的一个对象。

S302、客户端向服务器网页请求。其中，网页请求用于请求页面文件。

S303、服务器依次将所述N个数据块发送给客户端。

S304、客户端将接收到的数据块写入到数据缓存中。

S305、客户端读取数据缓存中的数据块，为读取的数据块创建一个单独的图层。其中，页面文件划分的N个数据块中，每个数据块对应一个单独的图层。

S306、在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。其中N个数据块均渲染完毕后，生成页面文件对应的完整页面。

本发明实施例和方法实施例一和二基于同一构思，其带来的技术效果也相同，具体过程请参照方法实施例一和方法实施例二的描述，此处不再赘述。

参见图4，为本发明实施例提供的一种页面的渲染装置结构示意图，用于执行本发明实施例一的页面的渲染方法，在本发明实施例中所述页面显示装置包括写网页请求模块40、数据接收模块41、图层创建模块42和对象渲染模块43。

网页请求模块40，用于向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块。

数据接收模块41，用于接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中。

图层创建模块42，用于从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层。

对象渲染模块43，用于在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

本发明实施例和方法实施例一基于同一构思，其带来的技术效果也相同，具体请参照方法实施例一的描述，此处不再赘述。

参见图5，为本发明实施例提供的一种页面的渲染装置的另一结构示意图，用于执行本发明实施例二的页面的渲染方法，在本发明实施例中，所述页面显示装置除包括：网页请求模块40、数据接收模块41、图层创建模块42和对象渲染模块43，还包括：指令接收模块44、重渲染模块45、统计模块46、停止模块47、判断模块48和等待模块49。

其中，指令接收模块44，用于接收用于移动目标对象的移动指令；其中，所述目标对象为所述页面文件包含的对象中的任意一个。

重渲染模块45，用于确定目标对象的最终位置，并对所述目标对象在所述最终位置重新进行执行渲染操作。

其中，统计模块46，用于统计从所述服务器接收到的数据块的数量。

停止模块47，用于当接收到的数据块的数量达到所述页面文件划分的数据块的数量时，停止向所述数据缓存中写入数据块。

其中，判断模块48，用于判断所述数据缓存是否为空，若为是，统计从所述数据缓存读取到的数据块的数量。

等待模块49，用于若所述读取到的数据块的数量未达到所述页面文件划分的数据块的数量，若为是，等待预设时长。

可选的，所述图层创建模块42用于从所述读取的数据块中获取对应的对象的形状信息，并根据所述形象信息为所述读取的数据块创建一个单独的图层。

本发明实施例和方法实施例二基于同一构思，其带来的技术效果也相同，具体请操作方法实施例二的描述，此处不再赘述。

本发明实施例还提供了一种终端设备，包括装置实施例一和装置实施例二的页面的渲染装置，其中，终端设备可以是智能手机、个人电脑、笔记本电脑、平板电脑、个人数字助理或车载影音平台等，本发明不作限制。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

以上所揭露的仅为本发明一种较佳实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (11)

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

向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块；

接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中；

从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层；

在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

2.如权利要求1所述的渲染方法，其特征在于，所述在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象之后，还包括：

接收用于移动目标对象的移动指令；其中，所述目标对象为所述页面文件包含的对象中的任意一个；

确定目标对象的最终位置，并对所述目标对象在所述最终位置重新进行执行渲染操作。

3.如权利要求1或2所述的方法，其特征在于，所述接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中，还包括：

统计从所述服务器接收到的数据块的数量；

当接收到的数据块的数量达到所述页面文件划分的数据块的数量时，停止向所述数据缓存中写入数据块。

4.如权利要求1或2所述的方法，其特征在于，所述从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个图层之前，还包括：

判断所述数据缓存是否为空，若为是，统计从所述数据缓存读取到的数据块的数量；

若所述读取到的数据块的数量未达到所述页面文件划分的数据块的数量，若为是，等待预设时长。

5.如权利要求1-4任意一项所述的方法，其特征在于，所述为所述读取的数据块创建一个单独的图层包括：

从所述读取的数据块中获取对应的对象的形状信息，并根据所述形象信息为所述读取的数据块创建一个单独的图层。

6.一种页面的渲染装置，其特征在于，包括：

网页请求模块，用于向服务器发送网页请求；其中，所述网页请求用于指示所述服务器根据预设顺序依次发送多个数据块，所述多个数据块由所述服务器根据页面文件包含的对象划分所述页面文件生成的，每个对象对应一个数据块；

数据接收模块，用于接收所述服务器发送的数据块，并将接收的数据块依次写入到数据缓存中；

图层创建模块，用于从所述数据缓存中读取一个数据块，为所述读取的数据块创建一个单独的图层；

对象渲染模块，用于在所述创建的图层上对所述数据块执行渲染操作后生成所述数据块对应的对象。

7.如权利要求6所述的渲染装置，其特征在于，还包括：

指令接收模块，用于接收用于移动目标对象的移动指令；其中，所述目标对象为所述页面文件包含的对象中的任意一个；

重渲染模块，用于确定目标对象的最终位置，并对所述目标对象在所述最终位置重新进行执行渲染操作。

8.如权利要求6或7所述的渲染装置，其特征在于，还包括：

统计模块，用于统计从所述服务器接收到的数据块的数量；

停止模块，用于当接收到的数据块的数量达到所述页面文件划分的数据块的数量时，停止向所述数据缓存中写入数据块。

9.如权利要求6或7所述的渲染装置，其特征在于，还包括：

判断模块，用于判断所述数据缓存是否为空，若为是，统计从所述数据缓存读取到的数据块的数量；

等待模块，用于若所述读取到的数据块的数量未达到所述页面文件划分的数据块的数量，若为是，等待预设时长。

10.如权利要求6-9任意一项所述的渲染装置，其特征在于，所述图层创建模块用于从所述读取的数据块中获取对应的对象的形状信息，并根据所述形象信息为所述读取的数据块创建一个单独的图层。

11.一种终端设备，其特征在于，包括如权利要求6-10任意一项所述的渲染装置。