CN113486281B - 一种页面展示方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开涉及计算机技术领域，特别涉及一种页面展示方法、装置、电子设备及存储介质，用于解决已有技术下需要浏览器的主进程解析的文件过大，而导致待展示的页面无法顺畅展示的问题，该方法为：响应于针对待展示的HTML页面触发的访问请求，并将获取到的HTML文件包含的源DOM文件发送至webworks进程，触发webworks进程对源DOM文件进行渲染处理；再基于HTML文件包含的CSS文件，对webworks进程返回的目标DOM文件进行样式渲染，并将获得的待展示的HTML页面进行展示，这样，通过调用webworks进程，实现webworks进程与浏览器的主进程的并行处理，从而提高页面展示效率。

Description

一种页面展示方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，特别涉及一种页面展示方法、装置、电子设备及存储介质。

背景技术

在使用智能设备时，通常通过浏览器浏览网站内容。当浏览器获取到某一网站的统一资源定位系统(Uniform Resource Locator，URL)链接地址后，向服务器发起超文本传输协议(Hyper Text Transfer Protocol，HTTP)请求，然后对服务器返回的超文本标记语言(Hyper Text Markup Language，HTML)文件进行解析，并基于层叠样本表(CascadingStyle Sheets，CSS)文件和JavaScript文件，计算获得对应的文档对象模型(DocumentObject Model，简称DOM)结构，从而基于获得的DOM结构，创建网页视图展示相应的页面。

已有技术下，浏览器的主进程对获得的HTML文件进行解析，获得DOM基础结构，然后，再基于CSS文件，对DOM基础结构进行修饰，从而获得最终的DOM结构。浏览器的主进程除了负责对上述文件进行解析获得DOM结构，并对DOM结构进行修改外，还负责浏览器界面显示，与用户交互；负责各个页面的管理，创建和注销其他进程；负责网络资源的管理、下载；以及负责将渲染进程得到的内存中的bitmap，绘制到用户界面上等。

然而，由于浏览器的主进程只有一个，当浏览器的主进程针对一个页面需要解析的HTML文件过大，或者，获得的DOM结构中包含有过多的DOM属性，则会导致浏览器的主进程无暇顾及其他进程发起的处理请求，从而导致其他进程发起的处理请求在浏览器的主进程处出现阻塞，甚至导致等待处理的页面卡死，用户无法操作等。已有技术下，针对上述情况没有优选的解决方案。

因此，需要设计一种新的方法，以解决上述问题。

发明内容

本公开实施例提供一种页面展示方法、装置、电子设备及存储介质，用于解决已有技术下需要浏览器的主进程解析的文件过大，而导致待展示的页面无法顺畅展示的问题。

本公开实施例提供的具体技术方案如下：

第一方面，一种页面展示方法，包括：

响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；

将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件；

接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面；

对获得的所述超文本标记语言页面进行展示。

可选的，所述将所述源文档对象模型文件发送至webworks进程，包括：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

可选的，所述触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件，包括：

触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；

将所述各个目标文档对象模型子文件进行组合拼接，获得所述目标文档对象模型文件。

可选的，所述接收所述webworks进程返回的目标文档对象模型文件，包括：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

可选的，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，包括：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

第二方面，一种页面展示装置，包括：

获取单元，用于响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；

处理单元，用于将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件；

渲染单元，用于接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面；

展示单元，用于对获得的所述超文本标记语言页面进行展示。

可选的，所述将所述源文档对象模型文件发送至webworks进程，所述处理单元用于：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

可选的，所述触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件，所述处理单元用于：

触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；

将所述各个目标文档对象模型子文件进行组合拼接，获得所述目标文档对象模型文件。

可选的，所述接收所述webworks进程返回的目标文档对象模型文件，所述渲染单元用于：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

可选的，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，所述渲染单元用于：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

第三方面，一种计算机设备，包括：

存储器，用于存储可执行指令；

处理器，用于读取并执行所述存储器中存储的可执行指令，以实现上述第一方面中任一项所述的方法。

第四方面，一种计算机可读存储介质，当所述计算机可读存储介质中的指令由处理器执行时，使得所述处理器能够执行上述第一方面中任一项所述的方法。

第五方面，一种计算机程序产品，包含可执行指令，当所述计算机程序产品的可执行指令由处理器执行时，能够实现上述第一方面中任一项所述的方法。

本公开实施例中，响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件；然后，将超文本标记语言文件包含的源文档对象模型文件发送至webworks进程，触发webworks进程对源文档对象模型文件进行渲染处理，并接收webworks进程返回的渲染后的目标文档对象模型文件；再并基于层叠样式表文件，对目标文档对象模型文件进行样式渲染，获得待展示的超文本标记语言页面，以及对获得的超文本标记语言页面进行展示，其中，超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件，这样，通过调用webworks进程，实现webworks进程在浏览器的后台运行Javascript代码，从而释放浏览器的主进程，使浏览器的主进程可以处理其他进程发起的处理请求，实现webworks进程和浏览器的主进程之间的并行处理，进而优化了DOM节点的处理流程，优化了展示效果，也提高了页面展示的效率。

附图说明

图1为本公开实施例中一种应用场景系统架构示意图；

图2为本公开实施例中终端设备进行页面展示的流程示意图；

图3A、图3B为本公开实施例中一种应用场景的示意图；

图4为本公开实施例中webworks进程进行渲染处理的流程示意图；

图5为本公开实施例中实现进程间通信的示意图；

图6为本公开实施例中一种获得待展示的HTML页面的流程示意图；

图7为本公开实施例中一种展示待展示的HTML页面的应用场景示意图；

图8为本公开实施例中页面展示的流程示意图；

图9为本公开实施例中页面展示装置的逻辑架构示意图；

图10为本公开实施例中计算机设备的实体架构示意图。

具体实施方式

为了解决需要浏览器的主进程解析的文件过大，而导致待展示的页面无法顺畅展示的问题，本公开实施例中，响应于针对待展示的超文本标记语言页面触发的访问请求，获取访问请求对应的超文本标记语言文件，并将超文本标记语言文件包含的源文档对象模型文件发送至webworks进程，触发webworks进程对源文档对象模型文件进行渲染处理；然后，再基于超文本标记语言文件包含的层叠样式表文件，对webworks进程返回的目标文档对象模型文件进行样式渲染，并将获得的待展示的超文本标记语言页面进行展示；这样，通过调用webworks进程，可以实现webworks进程与浏览器的主进程的并行处理，从而优化了DOM节点的处理流程，提高了页面展示的效率。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

以下，对本公开实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

(1)本公开实施例中术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

(2)本公开实施例中术语“电子设备”可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

(3)本公开实施例中术语“HTML”文件，为网页内容描述文件，利用超文本标记语言(Hyper Text Markup Language，HTML)描述网页内容。

(4)本公开实施例中术语“JavaScript代码”为加载网页的脚本语言代码，简称JS代码，JavaScript代码通过插入到HTML中执行，通过JavaScript可以实现HTML元素内容的输出，对事件作出反应，改变HTML内容、图像、样式、验证输入等功能，基本上网页上所有的交互都是通过JS函数实现的。

(5)本公开实施例中术语“webworks”，是一种页面处理的技术，是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

(6)本公开实施例中术语“CSS”，是一种用来表现HTML或可扩展标记语言(Extensible Markup Language，XML)等文件样式的计算机语言。层叠样式表(CascadingStyle Sheets，CSS)不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

下面结合附图对本公开优选的实施方式做出进一步详细说明。

参阅图1所示，其为本公开实施例的应用场景示意图。该应用场景示意图中包括终端设备100和服务器120，终端设备100与服务器120之间通过通信网络进行通信，终端设备100可以将从服务器120获取到的HTML页面110进行展示。

可选的，实际应用中，该应用场景中包含多个终端设备100；以及终端设备100可以对应一个用户，也可以对应多个用户，本公开实施例中，为了便于描述，参阅图1所示，仅以用户A对应一个终端设备100为例，终端设备100从服务器120获取到用户A所要查看的HTML页面，并在终端设备的显示模块上展示HTML页面110，用户A通过终端设备100查看该HTML页面110。

参阅图2所示，本公开实施例中，终端设备进行页面展示的具体流程如下：

步骤200：响应于针对待展示的HTML页面触发的访问请求，获取访问请求对应的HTML文件，其中，HTML文件至少包含源DOM文件和CSS文件。

本公开实施例中，参阅图3A、图3B所示，以用户A通过终端设备登录HTML页面为例。

参阅图3A所示，假设用户A可以通过在终端设备的浏览器的地址栏中输入需要查看的HTML页面，比如www.SSS.com，并执行相应的操作。

那么，终端设备获取到用户A针对待展示的HTML页面触发的访问请求，并响应于针对待展示的HTML页面触发的访问请求，向服务器发送获取该HTML页面对应的HTML文件的请求，从而基于服务器返回的HTML文件，获取到访问请求对应的HTML文件。

参阅图3B所示，又假设用户A在终端设备的浏览器中任一HTML页面中，执行了点击操作，如，在上述任一HTML页面中，点击了待展示的HTML页面对应的超链接。

那么，终端设备获取到针对待展示的HTML页面的访问请求，并响应于针对待展示的HTML页面触发的访问请求，向服务器发送获取该HTML页面对应的HTML文件的请求，从而基于服务器返回的HTML文件，获取到访问请求对应的HTML文件。

步骤210：将源DOM文件发送至webworks进程，触发webworks进程对源DOM文件进行渲染处理，并获得渲染后的目标DOM文件。

具体实施中，在执行步骤210时，首先，获得HTML文件对应的数据量，然后，将上述数据量与预设阈值进行比较，当确定上述HTML文件对应的数据量超过预设阈值时，终端设备对应的浏览器的主进程可以通过进程间通信的方式，通过异步消息投放函数(postMessage)应用程序编程接口(Application Programming Interface，API)，将源DOM文件发送至webworks进程，从而触发webworks进程对源DOM文件进行渲染处理，这样，释放了浏览器的主进程的资源，以使浏览器的主进程可以处理其他进程发送的处理请求，比如，用户在浏览器中执行了操作后，响应于用户的操作，返回相应的反馈信息等。

本公开实施例中，通过预先对需要解析的HTML页面的数据量进行判断，可以预先对终端设备的浏览器的主进程需要进行解析的数据量进行预估，当发现需要解析的HTML页面对应的数据量过大(即超过预设阈值)时，即调用webworks进程，实现webworks进程和浏览器的主进程的并行处理，从而释放浏览器的主进程，优化了DOM节点的处理流程，提高了页面展示效率。

具体实施中，在执行步骤210时，参阅图4所示，webworks进程在接收到通过postMessage API发送的源DOM文件之后，可以通过如下步骤，获得渲染后的目标DOM文件：

步骤2101：触发webworks进程对源DOM文件进行解析，并基于各个预设规则，为源DOM文件添加各自对应的DOM属性，获得添加DOM属性后的各个目标DOM子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的。

本公开实施例中，根据不同的场景，预先设置各自对应的预设规则，比如，预设规则{为字符<div>、</div>对应的内容添加DOM属性：style＝"color:white"}；那么，当webworks进程从源DOM文件中解析到字符<div>、</div>时，调用上述预设规则，为字符<div>、</div>对应的内容添加style＝"color:white"，从而得到添加DOM属性后的一个目标DOM子文件为<div style＝"color:white"></div>。

这样，根据不同的场景预先设置各自对应的预设规则，在webworks进程解析到相应的字符后，可以对应添加预设的DOM属性，从而获得各个目标DOM子文件。

步骤2102：将各个目标DOM子文件进行组合拼接，获得目标DOM文件。

本公开实施例中，在执行步骤2101之后，可以获得各个添加了DOM属性的目标DOM子文件，那么，在执行步骤2102时，将获得的各个目标DOM子文件组合拼接，获得针对源DOM文件进行添加DOM属性后的目标DOM文件。

步骤220：接收webworks进程返回的目标DOM文件。

本公开实施例中，在执行步骤2101-步骤2102之后，webworks进程完成了对源DOM文件的渲染处理，获得了相应的目标DOM文件；在执行步骤220时，接收webworks进程通过事件处理函数(onmessage)返回的响应信息，从而终端设备从响应消息中，获得目标DOM文件，这样，通过调用webworks进程对源DOM文件进行渲染处理，然后，将渲染后的目标DOM文件返回至浏览器的主进程，以使浏览器的主进程在执行步骤230，获得待展示的HTML页面，由于采用并行处理模式，可以提高HTML页面的展示效率。

参阅图5所示，仍以用户A通过终端设备登录HTML页面为例。

假设确定获取到的HTML文件对应的数据量超过预设阈值。

那么，终端设备采用进程间的通信方式，如通过postMessage API，使浏览器的主进程将HTML文件包含的源DOM文件发往webworks进程。

webworks进程接收源DOM文件，并对源DOM文件进行渲染处理，获得渲染后的目标DOM文件。

webworks进程通过onmessage，将获得的目标DOM文件发往浏览器的主进程。

浏览器的主进程通过onmessage接收到目标DOM文件，从而获得针对源DOM文件对应的目标DOM文件。

步骤230：基于CSS文件，对目标DOM文件进行样式渲染，获得待展示的HTML页面。

本公开实施例中，在执行步骤220之后，获取到目标DOM文件，则在执行步骤230时，参阅图6所示，可以通过执行如下操作，获得待展示的HTML页面：

步骤2301：调用渲染进程，基于CSS文件，对目标DOM文件进行样式渲染，获得样式渲染后的第一文件。

具体实施中，终端设备的浏览器的主进程在接收到目标DOM文件之后，还需要基于CSS文件，对目标DOM文件进行进一步的样式渲染，由于获得的目标DOM文件只是待展示的HTML页面的骨架，那么，相应获得最终的HTML页面，还需要对CSS文件进行解析，并与目标DOM文件结合，构建相应的渲染(render)文件，即第一文件。

步骤2302：基于除CSS文件和源DOM文件之外的其他HTML文件，对第一文件进行布局和绘制，获得待展示的HTML页面。

本公开实施例中，在执行步骤2302时，基于除CSS文件和源DOM文件之外的其他HTML文件，对获得的第一文件进行布局，从而获得待展示的HTML页面包含的各个元素各自对应的尺寸信息和位置信息，然后，在根据获得的各个元素各自对应的尺寸信息和位置信息，绘制待展示的HTML页面，进而获得待展示的HTML页面，这样，可以使获得的HTML页面更为生动，更具艺术效果，从而提高用户体验。

步骤240：对获得的HTML页面进行展示。

本公开实施例中，在执行步骤240时，终端设备将样式渲染后的HTML页面展示在终端设备的浏览器中，以使用户在终端设备上查看该待展示的HTML页面。

参阅图7所示，以用户A在浏览器呈现的任一HTML页面中点击待展示的HTML页面的“查看原图”为例。

终端设备获得“查看原图”的超链接对应的HTML文件，并接收到webworks进程返回的目标DOM文件；然后，基于CSS文件，对目标DOM文件进行样式渲染，从而获得待展示的HTML页面，并将该待展示的HTML页面展示在终端设备的浏览器中。

这样，通过调用webworks进程，可以实现webworks进程在浏览器的后台运行Javascript代码，从而释放浏览器的主进程，使浏览器的主进程可以处理其他进程发起的处理请求，实现webworks进程和浏览器的主进程之间的并行处理，进而优化了DOM节点的处理流程，优化了展示效果，提高了页面展示的效率。

本公开实施例中，参阅图8所示，提供一种页面展示的方法，具体流程如下：

步骤800：响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件。

步骤810：将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件。

本公开实施例中，所述将所述源文档对象模型文件发送至webworks进程，包括：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

可选的，所述触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件，包括：

触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；

将所述各个目标文档对象模型子文件进行组合拼接，获得所述目标文档对象模型文件。

步骤820：接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面。

可选的，所述接收所述webworks进程返回的目标文档对象模型文件，包括：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

可选的，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，包括：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

步骤830：对获得的所述超文本标记语言页面进行展示。

基于同一发明构思，参阅图9所示，本公开实施例中提供一种页面展示装置，包括：

获取单元910，用于响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；

处理单元920，用于将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件；

渲染单元930，用于接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面；

展示单元940，用于对获得的所述超文本标记语言页面进行展示。

可选的，所述将所述源文档对象模型文件发送至webworks进程，所述处理单元920用于：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

可选的，所述触发所述webworks进程对所述源文档对象模型文件进行渲染处理，并获得渲染后的目标文档对象模型文件，所述处理单元920用于：

触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；

将所述各个目标文档对象模型子文件进行组合拼接，获得所述目标文档对象模型文件。

可选的，所述接收所述webworks进程返回的目标文档对象模型文件，所述渲染单元930用于：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

可选的，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，所述渲染单元930用于：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

基于同一发明构思，参阅图10所示，本申请实施例提供一种计算机设备，例如，电子设备1000可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图10，电子设备1000可以包括以下一个或多个组件：处理组件1002，存储器1004，电源组件1006，多媒体组件1008，音频组件1010，输入/输出(I/O)的接口1012，传感器组件1014，以及通信组件1016。

处理组件1002通常控制电子设备1000的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件1002可以包括一个或多个处理器1020来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件1002可以包括一个或多个模块，便于处理组件1002和其他组件之间的交互。例如，处理组件1002可以包括多媒体模块，以方便多媒体组件1008和处理组件1002之间的交互。

存储器1004被配置为存储各种类型的数据以支持在电子设备1000的操作。这些数据的示例包括用于在电子设备1000上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器1004可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件1006为电子设备1000的各种组件提供电力。电源组件1006可以包括电源管理系统，一个或多个电源，及其他与为电子设备1000生成、管理和分配电力相关联的组件。

多媒体组件1008包括在电子设备1000和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件1008包括一个前置摄像头和/或后置摄像头。当电子设备1000处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件1010被配置为输出和/或输入音频信号。例如，音频组件1010包括一个麦克风(MIC)，当电子设备1000处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器1004或经由通信组件1016发送。在一些实施例中，音频组件1010还包括一个扬声器，用于输出音频信号。

I/O接口1012为处理组件1002和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件1014包括一个或多个传感器，用于为电子设备1000提供各个方面的状态评估。例如，传感器组件1014可以检测到电子设备1000的打开/关闭状态，组件的相对定位，例如所述组件为电子设备1000的显示器和小键盘，传感器组件1014还可以检测电子设备1000或电子设备1000一个组件的位置改变，用户与电子设备1000接触的存在或不存在，电子设备1000方位或加速/减速和电子设备1000的温度变化。传感器组件1014可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件1014还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件1014还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件1016被配置为便于电子设备1000和其他设备之间有线或无线方式的通信。电子设备1000可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件1016经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件1016还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，电子设备1000可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述实施例中计算机设备执行的任意一种方法。

基于同一发明构思，本公开实施例提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由处理器执行时，能够执行上述实施例中计算机设备执行的任意一种方法。

基于同一发明构思，本公开实施例提供一种计算机程序产品，包含可执行指令，当所述计算机程序产品的可执行指令由处理器执行时，能够实现如上述实施例中计算机设备执行的任意一种方法。

综上所述，本公开实施例中，响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件；然后，将超文本标记语言文件包含的源文档对象模型文件发送至webworks进程，触发webworks进程对源文档对象模型文件进行渲染处理，并接收webworks进程返回的渲染后的目标文档对象模型文件；再并基于层叠样式表文件，对目标文档对象模型文件进行样式渲染，获得待展示的超文本标记语言页面，以及对获得的超文本标记语言页面进行展示，其中，超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；这样，通过调用webworks进程，实现webworks进程在浏览的后台运行Javascript代码，从而释放浏览器的主进程，使浏览器的主进程可以处理其他进程发起的处理请求，实现webworks进程和浏览器的主进程之间的并行处理，进而优化了DOM节点的处理流程，优化了展示效果，也提高了页面展示的效率。

本领域内的技术人员应明白，本公开的实施例可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本公开是参照根据本公开实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本公开的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本公开范围的所有变更和修改。

显然，本领域的技术人员可以对本公开实施例进行各种改动和变型而不脱离本公开实施例的精神和范围。这样，倘若本公开实施例的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包含这些改动和变型在内。

Claims (10)

1.一种页面展示方法，其特征在于，包括：

响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；

将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；

将所述各个目标文档对象模型子文件进行组合拼接，获得渲染后的目标文档对象模型文件；

接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面；

对获得的所述超文本标记语言页面进行展示。

2.如权利要求1所述的方法，其特征在于，所述将所述源文档对象模型文件发送至webworks进程，包括：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

3.如权利要求1所述的方法，其特征在于，所述接收所述webworks进程返回的目标文档对象模型文件，包括：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

4.如权利要求1-3任一项所述的方法，其特征在于，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，包括：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

5.一种页面展示装置，其特征在于，包括：

获取单元，用于响应于针对待展示的超文本标记语言页面触发的访问请求，获取所述访问请求对应的超文本标记语言文件，其中，所述超文本标记语言文件至少包含源文档对象模型文件和层叠样式表文件；

处理单元，用于将所述源文档对象模型文件发送至webworks进程，触发所述webworks进程对所述源文档对象模型文件进行解析，并基于各个预设规则，为所述源文档对象模型文件添加各自对应的文档对象模型属性，获得添加文档对象模型属性后的各个目标文档对象模型子文件；其中，每个预设规则是基于与一个预设规则对应的场景预先设置的；将所述各个目标文档对象模型子文件进行组合拼接，获得渲染后的目标文档对象模型文件；

渲染单元，用于接收所述webworks进程返回的目标文档对象模型文件，并基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面；

展示单元，用于对获得的所述超文本标记语言页面进行展示。

6.如权利要求5所述的装置，其特征在于，所述将所述源文档对象模型文件发送至webworks进程，所述处理单元用于：

将所述超文本标记语言文件对应的数据量与预设阈值进行比较；

当确定所述数据量超过所述预设阈值时，将所述源文档对象模型文件通过异步消息投放函数应用程序编程接口，发送至所述webworks进程。

7.如权利要求5所述的装置，其特征在于，所述接收所述webworks进程返回的目标文档对象模型文件，所述渲染单元用于：

接收所述webworks进程通过事件处理函数返回的响应信息；

从所述响应信息中，获取所述目标文档对象模型文件。

8.如权利要求5-7任一项所述的装置，其特征在于，所述基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得所述待展示的超文本标记语言页面，所述渲染单元用于：

调用渲染进程，基于所述层叠样式表文件，对所述目标文档对象模型文件进行样式渲染，获得样式渲染后的第一文件；

基于除所述层叠样式表文件和所述源文档对象模型文件之外的其他所述超文本标记语言文件，对所述第一文件进行布局和绘制，获得所述待展示的超文本标记语言页面。

9.一种计算机设备，其特征在于，包括：

存储器，用于存储可执行指令；

处理器，用于读取并执行所述存储器中存储的可执行指令，以实现如权利要求1-4任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由处理器执行时，使得所述处理器能够执行如权利要求1-4任一项所述的方法。