页面显示方法和装置以及计算设备与流程

本发明总体上涉及浏览器技术领域，特别是涉及一种提高网页显示速度的方法和装置以及计算设备。

背景技术：

进入移动互联网时代之后，人们越来越多地利用诸如智能手机的移动终端来访问互联网。随着超文本标记语言第五版(html5)技术的进步与普及，终端浏览器能展示的网页内容也愈加多样化。页面内容可以包括文字信息、图片信息、音频信息、视频信息等。通过html5技术也可以实现用户与页面的交互，从而极大地提升了用户体验。

由于移动终端使用的便利性和良好的可携带性，越来越多的用户在户外使用移动网络接入互联网。与诸如wifi的局域网相比，移动网络最大的问题是网络信号弱且不稳定，由此带来的最直接的影响是网页显示慢。据统计，用户可接受的首屏显示时间平均为2秒。即，如果在手机上超过2秒未显示任何网页内容的话，90％的用户会放弃浏览这个网页。

因此，如何提高移动网络下网页显示速度，尤其是首屏显示速度，是终端浏览器领域迫切需要解决的问题。

技术实现要素：

本发明的一个目的在于，提高客户端浏览器的网页显示速度，尤其是首屏显示速度，从而改善用户体验。

目前，在终端浏览器领域的主流是基于webkit内核的浏览器。在webkit内核中，网页显示按照网页加载、网页解析、网页排版和网页渲染的基本流程进行，其中可以在加载页面的同时进行页面解析。具体地，如果在解析页面时发现页面内需要其它资源，则同时发起新的资源请求。这里的资源可以是层叠样式表(css)、图片资源、javascript资源、音视频资源，等等。根据webkit内核流程，如果在解析流程中产生了新的css资源请求，则在css样式表成功返回前会阻塞网页排版流程，网页排版流程被阻塞会直接影响到接下来的网页渲染，从而影响网页呈现给用户的速度。

为此，本发明的网页显示方法和装置，通过设置定时器来避免在例如首屏显示流程中出现的css样式表请求超时，由此加快网页显示速度，使得用户等待页面显示的最长时间不会超过设置值，从而改善用户的浏览体验。

根据本发明的一个方面，提供了一种页面显示方法，包括以下步骤：响应于预定条件，触发定时器；若在所述定时器规定的时间到期之前，判定指定类型的页面资源已全部加载成功，则终止所述定时器；以及响应于所述定时器终止或者所述定时器到期，针对已获取的页面资源进行排版和渲染用以页面显示。

在本发明的一个实施例，所述指定类型的页面资源是层叠样式表css。在此需要指出的是，本发明的技术方案适用于任何会阻塞页面排版和/或渲染流程的页面资源。

利用本方法，通过设置定时器规定加载诸如css样式表的页面资源的最长期限，由此避免了页面资源请求超时的情形，从而可以加速显示页面，改善用户浏览体验。

在本发明的一个实施例中，所述预定条件包括以下中的任一项或多项：确定待显示的页面是首屏页面；开始请求页面加载；以及解析确定需要加载所述指定类型的页面资源。

需要指出的是，本发明优选地用于首屏页面显示。统计显示，页面首屏对用户体验的影响较大，如果在一定时间内浏览器上没有显示任何内容，用户会放弃浏览这一网页。当然，本发明也可以适用于非首屏显示，尤其是在用户希望尽快浏览到页面的部分内容的时候。

在本发明的一个实施例中，在所述定时器到期时还未加载完页面中全部所述指定类型的页面资源的情况下，停止对未成功加载的页面资源的加载请求。

为了解决因网络信号不稳定导致的页面资源获取阻塞页面排版和渲染，本发明的技术方案在定时器规定时间到期之后不再继续请求未成功加载的页面资源，而是仅利用已加载的资源进行排版和渲染，加以显示，由此实现页面显示的加速。

在进一步的实施例中，在显示已获取的页面资源之后，自动重启对未获取的页面资源的加载。此外，在更进一步的实施例中，在重新加载完成所述指定类型的页面资源之后，对页面进行重新排版和渲染用以重新显示。

在完成首屏显示之后，未获取的页面资源会在接下来的重新加载流程中获取，从而不影响整个页面的最终显示效果。

在本发明的一个实施例中，该页面显示方法用于基于webkit内核的客户端浏览器。在此需要指出的是，本发明的页面显示方法还可以适用于现有的和今后开发出的与webkit内核工作原理近似的任何其他内核浏览器。

在本发明的一个实施例中，所述定时器规定的时间可以根据统计结果确定的。在本发明的一个实施例中，所述定时器规定的时间可以按照特定因素动态调整。

在一个示例中，可以选择例如90％的指定类型的页面资源成功加载所需的时间作为定时器时间，例如可以将定时器时间设定为1秒。在另一示例中，可以选择例如90％的用户能够承受的页面资源加载时间作为定时器时间，例如可以将定时器时间设定为2秒。此外，定时器规定的时间可以随页面内容、目标人群、浏览时间等等因素而动态调整。

根据本发明的另一个方面，提供了一种页面显示装置，包括：触发单元，配置为响应于预定条件，触发定时器；终止单元，配置为若在所述定时器规定的时间到期之前，判定指定类型的页面资源已全部加载成功，则终止所述定时器；以及显示单元，配置为响应于所述定时器终止或者所述定时器到期，针对已获取的页面资源进行排版和渲染用以页面显示。

在本发明的一个实施例中，所述预定条件包括以下中的任一项或多项：确定待显示的页面是首屏页面；开始请求页面加载；以及解析确定需要加载所述指定类型的页面资源。

在本发明的一个实施例中，所述指定类型的页面资源是层叠样式表css。

在本发明的一个实施例中，所述页面显示装置还包括：加载停止单元，配置为在所述定时器到期时还未加载完页面中全部所述指定类型的页面资源的情况下，停止对未成功加载的页面资源的加载请求。

在本发明的一个实施例中，所述页面显示装置还包括：重新加载单元，配置为在显示已获取的页面资源之后，自动重启对未获取的页面资源的加载。

在本发明的一个实施例中，所述页面显示装置还包括：重新显示单元，配置为在重新加载完成所述指定类型的页面资源之后，对页面进行重新排版和渲染用以重新显示。

在本发明的一个实施例中，该页面显示装置用于基于webkit内核的客户端浏览器。

在本发明的一个实施例中，所述定时器规定的时间是根据统计结果确定的；和/或所述定时器规定的时间是按照特定因素动态调整的。

根据本发明的又一个方面，提供了一种计算设备，包括：网络接口，所述网络接口使得所述计算设备能够经由一个或多个网络通信；存储器，通过所述网络接口加载的网络资源缓存在所述存储器中；以及一个或多个处理器，与所述网络接口和所述存储器相连接，所述一个或多个处理器配置为执行以下操作：响应于预定条件，触发定时器；若在所述定时器规定的时间到期之前，判定指定类型的页面资源已全部加载成功，则终止所述定时器；以及响应于所述定时器终止或者所述定时器到期，针对已获取的页面资源进行排版和渲染用以页面显示。

本发明的页面显示方法和装置以及计算设备，通过利用定时器设定页面资源加载的最长时间，由此避免了尤其是在首屏显示流程中出现的页面资源请求超时，从而加快了网页显示速度，进而改善了用户的浏览体验。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1是示出了根据本发明一实施例的计算设备的结构框图。

图2是示出了根据本发明一实施例的页面显示方法的流程图。

图3是示出了根据本发明一实施例的触发定时器的处理的流程图。

图4是示出了根据本发明一实施例的页面显示装置的功能框图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

如前所述，为了加快网页显示速度，本申请利用定时器设定指定类型页面资源加载的最长时间，在定时器规定时间到期时，停止对未获取资源的请求，而是针对已获取的资源进行排版和渲染，以显示给用户，由此使得用户不会等待太长时间，从而改善了用户体验。

下面将参照图1至图4来具体地描述本发明的实施例。图1是示出了根据本发明一实施例的计算设备100的结构框图。计算设备100的部件包括但不限于网络接口110、存储器120以及一个或多个处理器130。处理器130与网络接口110和存储器120相连接。在本发明的一个实施例中，计算设备100的上述以及图1中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图1所示的计算设备结构框图仅仅是出于示例的目的，而不是对本发明范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。

计算设备100优选地可以是任何类型的移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备。

网络接口110使得计算设备100能够经由一个或多个网络通信。这些网络的示例包括局域网(lan)、广域网(wan)、个域网(pan)或诸如因特网的通信网络的组合。网络接口110可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(nic))中的一个或多个，诸如ieee802.11无线局域网(wlan)无线接口、全球微波互联接入(wi-max)接口、以太网接口、通用串行总线(usb)接口、蜂窝网络接口、蓝牙接口、近场通信(nfc)接口，等等。

通过网络接口110访问到的网络数据缓存在存储器120中。存储器120可包括存储文件形式或其他形式的内容的任何类型的存储设备中的一个或多个，包括磁硬盘驱动器、固态硬驱、半导体存储设备、闪存，或者能够存储程序指令或数字信息的任何其他计算机可读可写存储介质。

处理器130能够读取存储器120中缓存的网络数据，并配置为触发和控制定时器来限定网络资源加载的最长时间，由此使得用户等待网页显示的时间不会过长，从而实现用户体验的改善。

处理器130加速页面显示的处理可以参见图2。图2示出了根据本发明一实施例的页面显示方法200的流程图。下文中，将参考基于webkit内核的客户端浏览器来描述本发明的页面显示方法。然而本领域普通技术人员将会理解，本发明的页面显示方法还可以适用于现有的和今后开发出的与webkit内核工作原理近似的任何其他内核浏览器。

页面显示方法200开始于步骤s210，如图2所示，处理器130响应于预定条件触发定时器。在本发明的一个实施例中，触发定时器的预定条件可以包括但不限于：确定待显示的页面是首屏页面，解析确定需要加载指定类型的页面资源，以及开始请求页面加载。

具体地，步骤s210可以仅响应于页面加载请求开始就执行。例如，在用户使用浏览器开始访问特定网页，就触发定时器开始计时。

优选地，步骤s210用于首屏页面显示，即仅在确定待显示的页面是首屏页面时才触发定时器。统计显示，相对于非页面首屏，页面首屏对用户体验的影响较大。在用户浏览网页时，如果在一定时间内(例如，超过两秒)浏览器上没有显示任何内容，绝大多数用户会放弃浏览这一网页。当然，本发明也可以适用于非首屏显示，尤其是在用户希望尽快浏览到页面的部分内容的情况下。

如前所述，html5技术中可加载的页面资源可以包括层叠样式表(css)、图片资源、javascript资源、音视频资源，等等。按照webkit内核流程，对诸如css资源的请求在成功响应之前会阻塞网页排版和渲染流程，从而影响网页呈现给用户的速度。

为了解决加载这些资源对页面显示速度的影响，优选地，在步骤s210中，可以仅响应于在解析流程中确定需要加载指定类型的页面资源，而触发定时器。需要说明的是，尽管在下文中将以层叠样式表css为例描述本发明的页面显示技术，但本领域普通技术人员将会理解，本发明的技术方案可以适用于任何会阻塞页面排版和/或渲染流程的页面资源类型。

在本发明的一个实施例中，以上预定条件可以相结合地使用。图3示出了根据一示例的触发定时器的处理300。在步骤s310处，页面请求开始。接下来，在步骤s330，对所请求的页面进行解析。如果解析确定需要加载css样式表(步骤s350中的“是”分支)，则处理300进行到步骤s370。在步骤s370，确定是否当前要显示的页面是网页首屏。如果步骤s370中确定是首屏，则激活定时器(步骤s390)。若在步骤350中确定要加载的页面资源不是css样式表，或者，在步骤s370中确定要显示的页面不是首屏，则处理300可以进入正常加载网络资源的流程(图3中所示的流程节点a)，而无需触发定时器来计时。

需要指出的是，图3中的处理300仅仅给出了本发明触发定时器的一个示例，其中各判定条件的顺序可以根据需要而更改，甚至也可以省略其中一些判定步骤或者添加其他判定条件。例如，可以仅在页面请求开始之后就激活定时器，即步骤s390发生在解析步骤s330之前。如果步骤s350和s370中判定要加载的资源不是css样式表或者要显示的页面不是首屏，则可以结束定时器。

现在回到图1，在步骤s210中触发了定时器之后，方法200进行到步骤s220，记录css请求列表。接下来，在步骤s230，获取css样式表并更新css请求列表。

如果在定时器的规定时间内已经获取了css请求列表中的全部css样式表(步骤s250中的“是”分支)，则处理器130终止定时器(步骤s255)。如果定时器定时到期(步骤s240中的“是”分支)，则确定已经获取的资源(步骤s260)。

在本发明的一个实施例中，在定时器触发超时且未获取全部css样式表的情况下，可以停止对未成功加载的页面资源的加载请求，并加以记录。例如，在步骤s245，查看css请求列表并移除css请求列表中尚未响应的css加载请求。

由此，流程进行到步骤s270，针对已获取的页面资源进行排版和渲染，然后显示该页面。需要指出的是，这里所谓的已获取的页面资源不仅仅限于指定类型的页面资源，而是包括为了显示页面而从网络加载的所有页面资源。

利用本方法，通过设置定时器规定加载诸如css样式表的页面资源的最长期限，由此避免了页面资源请求超时的情形，从而可以加速显示页面，改善用户浏览体验。

此外，在一个实施例中，本发明的技术方案在定时器规定时间到期之后不再继续请求未成功加载的页面资源，而是仅利用已加载的资源进行排版和渲染，加以显示，由此实现页面显示的加速。

在进一步的实施例中，在显示已获取的页面资源之后，若存在未获取的页面资源(步骤s282中的“是”分支)，则自动重启对未获取的页面资源的加载，例如在步骤s284中重开尚未响应的css请求。此外，在更进一步的实施例中，在重新加载完成上述页面资源(步骤s286的“是”分支)之后，对页面进行重新排版和渲染用以重新显示。若在步骤s286确定还未重新加载完成，则在步骤s284中继续加载这些页面资源。

在完成首屏显示之后，未获取的页面资源在接下来的重新加载流程中获取，从而使得不影响整个页面的最终显示效果。

在本发明的一个实施例中，定时器规定的时间可以根据统计结果确定的。在一个示例中，可以选择例如90％的指定类型的页面资源成功加载所需的时间作为定时器时间，例如可以将定时器时间设定为1秒。在另一示例中，可以选择例如90％的用户能够承受的页面资源加载时间作为定时器时间，例如可以将定时器时间设定为2秒。

在本发明的一个实施例中，定时器规定的时间可以按照特定因素动态调整。例如，定时器规定的时间可以随页面内容、目标人群、浏览时间、用户偏好等等因素而动态调整。在一个示例中，如果网页的目标受众是年轻人，则考虑到年轻人缺乏耐心的特点，可以将定时器的规定时间设定为更短。在另一示例中，可以记录用户的浏览习惯，例如用户浏览不同网页的时间，从而根据当前页面类型而动态调整定时器的规定时间。

图4示出了根据本发明一实施例的页面显示装置400的功能框图。页面显示装置400的功能模块可以由实现本发明原理的硬件、软件或硬件和软件的结合来实现，例如通过图1所示的计算设备100中的一个或多个处理器130来实现。本领域技术人员可以理解的是，图4所描述的功能模块可以组合起来或者划分成子模块，从而实现上述发明的原理。因此，本文的描述可以支持对本文描述的功能模块的任何可能的组合、或者划分、或者更进一步的限定。

参照图4，页面显示装置400被配置为包括触发单元410、终止单元430以及显示单元450。在本发明的一个实施例中，页面显示装置400适用于基于webkit内核的客户端浏览器。然而本领域普通技术人员将会理解，本发明的页面显示技术还可以适用于现有的和今后开发出的与webkit内核工作原理近似的任何其他内核浏览器。

触发单元410被配置为响应于预定条件，触发定时器。在本发明的一个实施例中，预定条件可以包括以下中的任一项或多项：确定待显示的页面是首屏页面；开始请求页面加载；以及解析确定需要加载所述指定类型的页面资源。如前所述，优选地，触发单元410在响应于确定待显示的页面是首屏页面的情况下才触发定时器。在本发明的一个实施例中，指定类型的页面资源是层叠样式表css。需要说明的是，本发明的技术方案可以适用于任何会阻塞页面排版和/或渲染流程的页面资源类型。

终止单元430，配置为若在触发单元410触发的定时器规定的时间到期之前，判定指定类型的页面资源已全部加载成功，则终止定时器。显示单元450，配置为响应于定时器终止或者定时器到期，针对已获取的页面资源进行排版和渲染用以页面显示。

在本发明的一个实施例中，页面显示装置400还可以包括加载停止单元470，配置为在定时器到期时还未加载完页面中全部指定类型的页面资源的情况下，停止对未成功加载的页面资源的加载请求。本发明的技术方案在定时器规定时间到期之后不再继续请求未成功加载的页面资源，而是仅利用已加载的资源进行排版和渲染，加以显示，由此实现页面显示的加速。

在本发明的一个实施例中，页面显示装置400还可以包括重新加载单元480，配置为在显示已获取的页面资源之后，自动重启对未获取的页面资源的加载。在本发明的一个实施例中，页面显示装置400还可以包括重新显示单元490，配置为在重新加载完成指定类型的页面资源之后，对页面进行重新排版和渲染用以重新显示。在完成首屏显示之后，未获取的页面资源在接下来的重新加载流程中获取，从而使得不影响整个页面的最终显示效果。

在本发明的一个实施例中，定时器规定的时间可以根据统计结果确定的。在一个示例中，可以选择例如90％的指定类型的页面资源成功加载所需的时间作为定时器时间，例如可以将定时器时间设定为1秒。在另一示例中，可以选择例如90％的用户能够承受的页面资源加载时间作为定时器时间，例如可以将定时器时间设定为2秒。

在本发明的一个实施例中，定时器规定的时间可以按照特定因素动态调整。例如，定时器规定的时间可以随页面内容、目标人群、浏览时间、用户偏好等等因素而动态调整。在一个示例中，如果网页的目标受众是年轻人，则考虑到年轻人缺乏耐心的特点，可以将定时器的规定时间设定为更短。在另一示例中，可以记录用户的浏览习惯，例如用户浏览不同网页的时间，从而根据当前页面类型而动态调整定时器的规定时间。

综上所述，本发明的页面显示方法和装置以及计算设备，通过利用定时器设定页面资源加载的最长时间，由此避免了尤其是在首屏显示流程中出现的页面资源请求超时，从而加快了网页显示速度，进而改善了用户的浏览体验。

此外，根据本发明的方法还可以实现为一种计算机程序，该计算机程序包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。或者，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的上述方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。