CN104133884A - 显示网页的方法及装置 - Google Patents

Abstract

本发明提供了一种显示网页的方法及装置，其中，该方法包括：获取用户访问网页的请求，并获得与请求对应的网页资源；根据移动终端屏幕的大小，确定暂停解析的位置；以及对网页资源进行解析直至到达位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。本发明实施例提供的显示网页的方法及装置，可提高网页的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

Description

显示网页的方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种显示网页的方法及装置。

背景技术

随着移动通信技术地飞速发展，移动终端(如智能手机、平板电脑等)的综合处理能力越来越强，移动终端已成为人们生活和工作不可缺少的工具，用户通过移动终端浏览网页已成为人们获取信息的重要途径，网页的呈现效率影响着用户的浏览体验。

然而，由于移动端的解析速度以及移动网络环境相对受限，用户通过移动终端浏览网页的过程中经常出现网页打开缓慢的性能问题，为了提高网页的呈现效率，除了传统的简化页面结构，优化后端响应之外，还可以优化浏览器内核对页面的绘制速度。

现有的浏览器内核进行绘制的过程中，通常对网页代码解析(parse)完成后，还需要经过完整的布局(layout)与绘制(paint)阶段，才能在屏幕上展示给用户。其中，浏览器内核从parse状态转化成layout状态需要满足若干必要条件，必要条件可以包括解析的单词(token)数目、解析的时间和延迟(delay)时间。浏览器内核从layout状态转化成paint状态的过程中仍需要满足若干必要条件。例如，当一个网页代码由A、B两段组成，代码A表示首屏的所有内容，代码B代表非首屏的内容，即必须通过用户的操作才可呈现的内容。现有的浏览器内核进行绘制的过程中，首先对A和B两部分全部解析后，再对A和B两部分进行布局和绘制，并在绘制完成后，在移动终端显示首屏内容和根据用户操作显示非首屏内容。

但是，现有的浏览器内核显示网页的方式使得用户看见首屏内容的时间较长，用户的浏览体验较差。

发明内容

本发明旨在至少在一定程度上解决相关技术中的技术问题之一。为此，本发明第一个目的在于提出一种显示网页的方法，该方法可提高显示网页的效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

本发明的第二个目的在于提出一种显示网页的装置。

为了实现上述目的，本发明第一方面实施例的显示网页的方法，包括：获取用户访问网页的请求，并获得与所述请求对应的网页资源；根据移动终端屏幕的大小，确定暂停解析的位置；以及对所述网页资源进行解析直至到达所述位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

根据本发明实施例的显示网页的方法，获得与用户访问网页的请求相对应的网页资源，并根据移动终端屏幕的大小确定暂停解析的位置，以及根据暂停解析的位置对网页资源的部分内容进行布局和绘制操作，并显示绘制后的网页，由此，由此，提高了网页的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

为了实现上述目的，本发明第二方面实施例的显示网页的装置，包括：获取模块，用于获取用户访问网页的请求，并获得与所述请求对应的网页资源；确定模块，用于根据移动终端屏幕的大小，确定暂停解析的位置；以及第一处理模块，用于对所述网页资源进行解析直至到达所述位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

根据本发明实施例的显示网页的装置,通过获取模块获得与用户访问网页的请求相对应的网页资源，并通过确定模块根据移动终端屏幕的大小确定暂停解析的位置，以及通过第一处理模块根据暂停解析的位置对网页资源的部分内容进行布局和绘制操作，并显示绘制后的网页，由此，提高了网页的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

附图说明

图1是根据本发明一个实施例的显示网页的方法的流程图。

图2是根据本发明另一个实施例的显示网页的方法的流程图。

图3是根据本发明一个实施例的显示网页的装置的结构示意图。

具体实施方式

下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。

目前，传统的页面绘制需要解析完4096个token数以及满足若干必要条件后才可进行布局和绘制，并在绘制后在移动终端中显示对应的网页，然而，传统的页面绘制方式并没有考虑移动终端首屏内容的大小，以及没有考虑实际用户感知内容展现的重要性，用户第一次看见非白屏的页面时间较长，用户通过移动终端进行网页浏览的用户体验较差。如果可根据移动终端屏幕的大小对移动终端首屏内容所对应的网页资源进行布局和绘制，则可优先展现实际用户可感知的首屏内容，缩短了用户第一次看见非白屏页面的时间，提高用户的浏览体验。为此，本发明实施例提出了一种显示网页的方法及装置。

下面参考附图描述本发明实施例的显示网页的方法及装置。

图1是根据本发明一个实施例的显示网页的方法的流程图，如图1所示，该方法包括：

S101，获取用户访问网页的请求，并获得与请求对应的网页资源。

在该实施例中，接收用户访问网页的请求，并根据请求从网页服务器中获得与该请求相对应的网页资源。

S102，根据移动终端屏幕的大小，确定暂停解析的位置。

具体地，在获得对应的网页资源后，可预测移动终端屏幕大小的网页包含的单词数，并根据单词数确定暂停解析的位置。其中，暂停解析的位置可通过预定标记来表示，预定标记可以采用元素标签属性来表示，其中，元素标签属性是属性信息中的一种，并且块(block)元素标签(如<p>或<div>)属性是最常使用的标记暂停解析位置的方式。

具体而言，浏览器内核在根据移动终端例如手机的屏幕大小预测首屏内容包含的单词数后，可根据首屏内容包含的单词数确定一个暂停解析的位置，并在该位置上添加一个例如首次绘制(FirstPaint)属性的标记，方便解析时可根据该标记暂停解析过程。

S103，对网页资源进行解析直至到达位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

具体地，在对网页资源进行解析的过程中，当浏览器解析到暂停解析的位置时，暂停网页资源的解析过程，并立刻对已经解析的页面内容进行布局，当已布局的页面内容达到移动终端屏幕的大小时进行绘制操作，并在绘制完成后，将绘制后的部分网页内容显示给用户，由此，提高了页面的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

在该实施例中，为了方便用户查看全部的页面内容，在根据解析结果进行页面内容的布局和绘制操作之后，还可以包括S104，如图2所示。

S104自暂停解析的位置起恢复对剩余网页资源的解析、布局和绘制操作，以显示对应网页。

具体地，根据暂停解析的位置恢复对剩余网页资源的解析，在解析完剩余网页资源后，对剩余网页资源所对应的页面内容进行布局和绘制操作，并根据用户的触发操作例如滑屏显示对应的网页，方便用户浏览完整的网页资源。

例如，一个页面代码由A、B两段组成，其中，A表示构成移动终端上web页面在首屏可见的部分web内容，B表示非首屏可见的内容，具体地，可在A代码的末尾设置属性信息例如首次绘制属性(<div FirstPaint＝true></div>)来标识暂停解析的位置，其中，<div>为最常见的block元素标签，FirsPaint属性事实上只标记HTML文档在某div元素处已经完成了对首屏内容的描述，它也可以放置到其他任何标签如<p>的属性描述中。具体地，在对网页资源进行解析的过程中，当解析到暂停解析的位置时，暂停解析过程，对已经解析的A代码所对应的页面内容进行布局和绘制操作，并在绘制后首先显示A代码所对应的首屏内容，然后再从暂停解析的位置处对剩余网页资源即对B代码所对应的网页资源进行解析、布局和绘制等操作，并在绘制完成后根据用户的滑屏操作显示其他网页。

相对于传统的方式，上述显示网页的方法，在解析完A代码后，立刻已经解析A代码所对应的页面内容进行布局和绘制，并在绘制后立刻在移动终端中显示首屏内容，节省了对代码B进行解析、布局与绘制所消耗的时间，在移动终端中优先展现用户实际可见的首屏内容，缩短了用户第一次看见非白屏的页面的时间，使得用户看见首屏内容的时间较短，提高了用户的浏览体验。

上述显示网页的方法的实施例，获得与用户访问网页的请求相对应的网页资源，并根据移动终端屏幕的大小确定暂停解析的位置，以及根据暂停解析的位置对网页资源的部分内容进行布局和绘制操作，并显示绘制后的网页，由此，由此，提高了网页的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

为了实现上述实施例，本发明还提出一种显示网页的装置。

图3是根据本发明一个实施例的显示网页的装置的结构示意图。

如图3所示，该显示网页的装置包括：获取模块31、确定模块32和第一处理模块33，其中：

获取模块31用于获取用户访问网页的请求，并获得与上述请求对应的网页资源；确定模块32用于根据移动终端屏幕的大小，确定暂停解析的位置；以及第一处理模块33用于对上述网页资源进行解析直至到达上述位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

上述确定模块32具体用于：预测上述移动终端屏幕大小的网页包含的单词数，根据上述单词数确定暂停解析的位置。其中，暂停解析的位置可通过预定标记来表示，预定标记可以采用元素标签属性来表示。其中，元素标签属性是属性信息中的一种，并且块(block)元素标签(如<p>或<div>)属性是最常使用的标记暂停解析位置的方式。

具体地，在根据移动终端例如手机的屏幕大小预测首屏内容包含的单词数后，上述确定模块32可根据首屏内容包含的单词数确定一个暂停解析的位置，并在该位置上添加一个例如首次绘制(FirstPaint)属性的标记，方便解析时可根据该标记暂停解析过程。

上述第一处理模块33具体用于：当已布局的页面内容达到上述移动终端屏幕的大小时进行绘制操作。

具体地，当上述第一处理模块33解析到暂停解析的位置，暂停对网页资源的解析过程，并立刻对已经解析的页面内容进行布局，当已布局的页面内容达到移动终端屏幕的大小时进行绘制操作，并在绘制完成后，将绘制后的部分网页内容显示给用户，由此，在移动终端中高优提前展现用户实际可见的内容，缩短了用户第一次看见非白屏页面的时间，提升了用户的浏览体验。

为了方便用户查看全部的页面内容，上述装置还可以包括第二处理模块34，第二处理模块34用于在上述第一处理模块33根据解析结果进行页面内容的布局和绘制操作之后，自暂停解析的位置起恢复对剩余网页资源的解析、布局和绘制操作，以显示对应网页。

例如，一个页面代码由A、B两段组成，其中，A表示构成移动终端上web页面在首屏可见的部分web内容，B表示非首屏可见的内容，具体地，确定模块32可在A代码的末尾设置属性信息例如首次绘制属性(<div FirstPaint＝true></div>)来确定暂停解析的位置。其中，<div>为最常见的block元素标签，FirsPaint属性事实上只标记HTML文档在某div元素处已经完成了对首屏内容的描述，它也可以放置到其他任何标签如<p>的属性描述中。具体地，在对网页资源进行解析的过程中，当解析到暂停解析的位置时，第一处理模块33暂停解析过程，对已经解析的A代码所对应的页面内容进行布局和绘制操作，并在绘制后首先显示A代码所对应的首屏内容，然后第二处理模块34从暂停解析的位置处对剩余网页资源即对B代码所对应的网页资源进行解析、布局和绘制等操作，并在绘制完成后根据用户的滑屏操作显示其他网页。

包含获取模块31、确定模块32、第一处理模块33和第二处理模块34的显示网页的装置进行显示网页的过程可参见图1或者图2，此处不赘述。

上述显示网页的方法的实施例，通过获取模块获得与用户访问网页的请求相对应的网页资源，并通过确定模块根据移动终端屏幕的大小确定暂停解析的位置，以及通过第一处理模块根据暂停解析的位置对网页资源的部分内容进行布局和绘制操作，并显示绘制后的网页，由此，提高了网页的呈现效率，使得用户看见首屏内容的时间较短，提升了用户的浏览体验。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种显示网页的方法，其特征在于，包括：

获取用户访问网页的请求，并获得与所述请求对应的网页资源；

根据移动终端屏幕的大小，确定暂停解析的位置；以及

对所述网页资源进行解析直至到达所述位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

2.根据权利要求1所述的方法，其特征在于，在所述根据解析结果进行页面内容的布局和绘制操作之后，还包括：

自所述位置起恢复对剩余网页资源的解析、布局和绘制操作，以显示对应网页。

3.根据权利要求1或2所述的方法，其特征在于，所述根据移动终端屏幕的大小，确定暂停解析的位置，包括：

预测所述移动终端屏幕大小的网页包含的单词数，根据所述单词数确定暂停解析的位置。

4.根据权利要求3所述的方法，其特征在于，所述暂停解析的位置通过预定标记来表示，所述预定标记为属性信息。

5.根据权利要求4所述的方法，其特征在于，所述根据解析结果进行页面内容的布局和绘制操作，包括：

当已布局的页面内容达到所述移动终端屏幕的大小时进行绘制操作。

6.一种显示网页的装置，其特征在于，包括：

获取模块，用于获取用户访问网页的请求，并获得与所述请求对应的网页资源；

确定模块，用于根据移动终端屏幕的大小，确定暂停解析的位置；以及

第一处理模块，用于对所述网页资源进行解析直至到达所述位置，并根据解析结果进行页面内容的布局和绘制操作，以显示绘制后的网页。

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

第二处理模块，用于在所述第一处理模块根据解析结果进行页面内容的布局和绘制操作之后，自所述位置起恢复对剩余网页资源的解析、布局和绘制操作，以显示对应网页。

8.根据权利要求6或7所述的装置，其特征在于，所述确定模块，具体用于：

预测所述移动终端屏幕大小的网页包含的单词数，根据所述单词数确定暂停解析的位置。

9.根据权利要求8所述的装置，其特征在于，所述暂停解析的位置通过预定标记来表示，所述预定标记包括属性信息。

10.根据权利要求9所述的装置，其特征在于，所述第一处理模块，具体用于：

当已布局的页面内容达到所述移动终端屏幕的大小时进行绘制操作。