CN106156095A - 加载页面中的插件的方法和装置 - Google Patents

Abstract

本发明提供了一种加载页面中的插件的方法和装置。该方法包括：加载页面文件并对页面文件进行解析和排版；基于排版结果，确定页面文件中插件加载范围内的可视型插件，插件加载范围包括当前屏幕显示范围、或者当前屏幕显示范围以及当前屏幕显示范围之外预定距离内的预定距离范围；以及加载插件加载范围内的可视型插件。能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

Description

加载页面中的插件的方法和装置

技术领域

本发明涉及互联网页面浏览领域，特别涉及加载页面中的插件的方法和装置。

背景技术

人们通过浏览器或其它应用程序/应用来上网时，往往需要加载并显示来自互联网络的页面。页面例如可以是各种网页，或者其它类型的页面。

除了文字内容，越来越多的页面中包含了各种类型的插件，例如flash插件等。

插件可以分为可视型插件和不可视型插件(或者可以称为“功能型插件”)。

可视型插件具有可视特性，例如其宽度值width>0，高度值height>0，从而在屏幕上占据一定的空间，能够被用户看到。可视型插件只有在被用户实际见到时，才具有意义。这种类型的插件是最常见的，例如各种网页广告、视频汇聚站等。

不具有可视特性的插件是不可视型插件，往往用来实现某种功能。例如flash后台背景音乐，常见于例如一些在线音乐播放页面，其中嵌入了一些不可见型插件，以执行播放功能。

另外，很多网页由于内容较多，屏幕上一次只能显示其中一部分。相应地，也只有位于屏幕上所显示的部分中的插件处于可见状态。

在本发明的上下文中，术语“可视”是指插件本身具有能够被看到的属性，而术语“可见”则是指插件处于当前屏幕显示范围内，能够被用户看到。

一般而言，在浏览器正常打开链接以显示页面时，无论页面中插 件是否处于用户可见状态，整个页面的插件都会被加载。

例如，以使用浏览器浏览网页为例，通常的网页浏览过程如下所述：

首先，例如在浏览器地址栏中输入地址，然后开始加载。

浏览器从互联网络接收到页面HTML数据，然后开始解析，并生成DOM树，进行排版。

在排版之后调度JavaScript代码以访问插件对象，或者在排版之前执行JavaScript代码以访问插件对象，均会触发对页面内的插件的加载。

如上所述，当页面内容较多，屏幕上只显示了一部分页面内容时，但是用户已经下载了页面中包含的所有可视型插件。其中一些可视型插件处于不可见的状态。如果用户不往下翻网页，那么这些可视型插件就不会被用户看到，也就不能起到其期望的效果和作用。

这样就存在一个问题：对于不可见的可视型插件的加载，不必要地耗费了大量资源，例如内存、CPU、带宽流量。

发明内容

本发明所要解决的一个技术问题是，提供一种加载页面中的插件的方法和装置，其使得在用户浏览包含有可视型插件的页面时，能够节省资源。

根据本发明的一个方面，提供了一种加载页面中的插件的方法，包括：加载页面文件并对页面文件进行解析和排版；基于排版结果，确定页面文件中插件加载范围内的可视型插件，插件加载范围包括当前屏幕显示范围、或者当前屏幕显示范围以及当前屏幕显示范围之外预定距离内的预定距离范围；以及加载插件加载范围内的可视型插件。

这里，通过引入插件加载范围，加载该插件加载范围内的可视型插件，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

在插件加载范围包括当前屏幕显示范围以及当前屏幕显示范围之 外预定距离内的预定距离范围的情况下，可以进一步提前加载一些尚未进入当前屏幕显示范围但是很可能接下来就会进入当前屏幕显示范围的可视型插件，从而减少用户在翻页过程中等待加载新进入当前屏幕显示范围的可视型插件的时间。

优选地，确定插件加载范围内的可视型插件的步骤可以包括：判断页面文件中包含的插件是否可视型插件；以及判断可视型插件的位置是否在插件加载范围内。

这样，对于不同类型不同位置的插件，可以有效地进行区别处理。

优选地，可以根据插件的尺寸数据来判断插件是否可视型插件。

这样，可以简便地区分可视型插件和不可视型插件(功能型插件)。

优选地，该方法还可以包括：判断所述插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及加载所述插件加载范围以外尺寸数据小于或等于预定阈值的可视型插件。

这样，一些较小的可视型插件可以直接加载，而只对于一些较大的可视型插件进行延迟加载，处理更加有针对性，可以进一步提升用户的体验。

优选地，该方法还可以包括：使用占位插件替代插件加载范围以外尚未加载的可视型插件；保存被占位插件替代的可视型插件的插件信息。

这样，既能在未加载一些可视型插件的情况下顺利完成排版，又能在需要时根据所保存的插件信息加载这些可视型插件。

优选地，该方法还可以包括：响应于当前屏幕显示范围发生变化，根据所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。

这样，可以根据用户浏览的进程来进一步加载可视型插件，使得浏览体验更加流畅。另外，不需要由用户执行例如点击未加载的可视型插件等操作来启动加载，操作更加顺畅。

根据本发明的另一个方面，提供了一种加载页面中的插件的装置，包括：页面文件处理单元，用于加载页面文件并对页面文件进行解析 和排版；确定单元，用于基于排版结果，确定页面文件中插件加载范围内的可视型插件，插件加载范围包括当前屏幕显示范围、或者所述当前屏幕显示范围以及所述当前屏幕显示范围之外预定距离内的预定距离范围；以及第一插件加载单元，用于加载插件加载范围内的可视型插件。

优选地，确定单元可以包括：第一判断单元，用于判断页面文件中包含的插件是否可视型插件；以及第二判断单元，用于判断可视型插件的位置是否在插件加载范围内。

优选地，该装置还可以包括：第三判断单元，用于判断所述插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及第二插件加载单元，用于加载所述插件加载范围以外尺寸数据小于或等于所述预定阈值的可视型插件。

优选地，该装置还可以包括：占位单元，用于使用占位插件替代插件加载范围以外尚未加载的可视型插件；以及插件信息保存单元，用于保存被占位插件替代的可视型插件的插件信息。

优选地，该装置还可以包括：第三插件加载单元，用于响应于当前屏幕显示范围发生变化，根据插件信息保存单元所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。

综上可知，通过根据本发明的方法和装置，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

附图说明

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

图1是根据本发明实施例的插件加载方法的示意性流程图。

图2是根据本发明改进实施例的插件加载方法的示意性流程图。

图3是根据本发明响应于当前屏幕显示范围的变化而进一步加载插件的步骤的示意性流程图。

图4是根据本发明实施例的插件加载装置的示意性框图。

图5是根据本发明改进实施例的插件加载装置的示意性框图。

具体实施方式

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

首先，参考图1至3详细描述根据本发明的加载页面中的插件的方法(插件加载方法)。

图1是根据本发明实施例的插件加载方法的示意性流程图。

如图1所示，当例如用户请求浏览页面时，首先在步骤S100，加载页面文件并对页面文件进行解析和排版。

然后，在步骤S200，基于排版的结果，确定页面文件中插件加载范围内的可视型插件。

插件加载范围是页面文件中的一个范围，落在其中的可视型插件需要被加载。

一般地，插件加载范围可以包括当前屏幕显示范围。即，当前屏幕显示范围内的可视型插件都是需要加载的。

在优选实施例中，插件加载范围可以包括当前屏幕显示范围以及当前屏幕显示范围之外预定距离内的预定距离范围。

这里，“之外”可以包括之前和之后，在页面显示内容较宽的情况下，还可以包括之左和之右。

预定距离，例如，可以对应于一个屏幕显示范围的距离，即一屏的高度(之前或之后的情况下)或宽度(之左或之右的情况下)。

或者，预定距离可以对应于一次若干次屏幕显示范围移动指令(例如翻页指令(上翻指令(Page Up)、下翻指令(Page Down)或者点击进度条)将使屏幕显示范围移动的距离。

预定距离也可以是其它指定距离。

这样，可以将一些尚未进入当前屏幕显示范围但是很可能接下来就会进入当前屏幕显示范围的可视型插件提前纳入插件加载范围以便预加载，从而能够减少用户在翻页过程中等待加载新进入当前屏幕显示范围的可视型插件的时间。

然后，在步骤S300，加载步骤S200中所确定的插件加载范围内的可视型插件。

这里，通过引入插件加载范围，加载该插件加载范围内的可视型插件，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

图2是根据本发明改进实施例的插件加载方法的示意性流程图。

如图2所示，步骤S200可以包括两个判断步骤S210和S220。

在步骤S100加载页面文件并对页面文件进行解析和排版之后，对页面中的各个插件分别执行步骤S210和步骤S220的判断。这样，对于不同类型、不同位置的插件有效地进行区别处理。

图2中示出了先执行步骤S210的判断，后执行步骤S220的判断的情况。然而，应当理解，也可以先执行步骤S220的位置“可见”判断，再执行步骤S210的属性“可视”判断。即，先判断插件是否在插件加载范围内，然后再判断插件加载范围内的插件是否可视型插件。

在步骤S210，判断页面文件中包含的插件是否可视型插件。即对插件本身的属性进行判断，确定是否“可视”。

例如，可以根据插件的尺寸数据来判断插件是否可视型插件。

尺寸数据可以包括宽度值(width)和高度值(height)。根据可视型插件的形状，尺寸数据也可以其它几何参数值。

例如，可以认为，满足以下条件的插件是可视型插件：

宽度值width>0，高度值height>0。

这样，可以简便地区分可视型插件和不可视型插件(功能型插件)。

如果在步骤S210判定插件是不可视型插件，则进入步骤S310，按照常规方案进行处理，例如直接加载该不可视型插件。

页面中往往有一些不可视型插件(功能型插件)，例如用于播放背景音乐的插件，即使不在屏幕显示范围内，但是也需要加载，否则无法实现相应功能。换句话说，对这类插件的加载可以与其位置无关。

如果在步骤S210判定插件是可视型插件，则进入步骤S220做进一步的判断。

在步骤S220，判断该可视型插件的位置是否在上述插件加载范围内。即，对插件所处的位置进行判断，确定是否“可见”或很可能即将变得“可见”。

如果在步骤S220判定该可视型插件的位置在插件加载范围内，则进入步骤S300，如上文中参考图1所描述，加载该可视型插件。

如果在步骤S220判定该可视型插件的位置不在插件加载范围内，则可以在步骤S230进一步判断该可视型插件的尺寸数据是否小于或等于预定阈值。

如果在步骤S230判定该可视型插件的尺寸数据小于或等于预定阈值，则可以进入步骤S320，加载该可视型插件。

这样，对于一些较小的可视型插件可以直接加载，而只对于一些较大的可视型插件进行延迟加载。处理更加有针对性，可以进一步提升用户的体验。

如果在步骤S230判定尺寸数据大于预定阈值，则可以进入步骤S400，使用占位插件替代该可视型插件(即，插件加载范围以外尚未加载的可视型插件)。

占位插件可以被认为是浏览器内置的很简单的插件，它满足插件的所有特性，例如具有和被替代的可视型插件相同的高度值和宽度值，坐标、样式等也与被替代的可视型插件一致，只是所有实体数据都是内置的。

占位插件本身可以是一个实现了blink::Plugin接口的插件元素。占位插件对用户不可见，是为了满足页面排版等需要而存在的。

通过使用占位插件，使得能够在未加载一些可视型插件的情况下顺利完成排版。

另一方面，还可以在步骤S500，保存被占位插件替代的可视型插件的插件信息，以便后续需要时(例如当前屏幕显示范围发生变化时)根据所保存的插件信息加载该可视型插件。这里，插件信息例如可以是可视型插件的URL等使得能够加载该可视型插件的信息。

这样，使得能够在需要时根据所保存的插件信息加载这些可视型插件。

图2中示出了步骤S230和步骤S310，使得对于较小的可视型插件，即使其不在插件加载范围内，也可以直接加载，而只使用占位插件替代较大的可视型插件以便实现延迟加载。从而，在不增加太多资源消耗的情况下，改善用户的体验。

然而，应当明白，也可以使用占位插件替代插件加载范围以外所有可视型插件，而不考虑其尺寸大小。换言之，步骤S230和步骤S310是可以省略的。

上面参考图1和图2描述了例如初次加载网页时的操作。随着用户浏览进程，当前屏幕显示范围会发生变化。响应于当前屏幕显示范围发生变化，可以根据步骤S500中保存的插件信息，进一步加载相应变化后的插件加载范围内之前尚未加载的可视型插件。

下面参考图3描述后期随着当前屏幕显示范围的变化而进一步加载可视型插件的一种示例性过程。

图3是根据本发明响应于当前屏幕显示范围的变化而进一步加载插件的步骤的示意性流程图。

在步骤S610，判断当前屏幕显示范围是否发生了变化。例如，可以响应于屏幕显示范围移动指令(例如翻页指令(上翻指令(Page Up)、下翻指令(Page Down)或者点击进度条等)来做出相应判断。

插件加载范围是基于当前屏幕显示范围定义的。因此，在当前屏幕显示范围发生变化时，插件加载范围也会相应地发生变化。

如果在步骤S610判定还没有发生变化，则可以返回步骤S610继续监测。

如果在步骤S610判定已经发生变化，则可以在步骤S620进一步 判断相应变化后的插件加载范围内是否有尚未加载的可视型插件。

如果在步骤S620判定相应变化后的插件加载范围内没有尚未加载的可视型插件，则可以返回步骤S610继续监测。

如果在步骤S620判定相应变化后的插件加载范围内有尚未加载的可视型插件，则可以进入步骤S630，根据图2所示步骤S500中所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。从而可以使用新加载的可视型插件来替换原来的占位插件。

这样，可以根据用户浏览的进程来进一步加载可视型插件，使得浏览体验更加流畅。

另外，不需要通过用户执行例如点击未加载的可视型插件等操作来启动加载，操作更加简便、顺畅。

上面参考图1至3详细描述了根据本发明的加载页面中的插件的方法(插件加载方法)。下面参考图4和图5详细描述根据本发明的加载页面中的插件的装置(插件加载装置)。图4和图5中的各个单元分别与图1至图3中的各个步骤对应。为了避免重复，这里将省略对一些相关细节的详细描述。

图4是根据本发明实施例的插件加载装置的示意性框图。

如图4所示，根据本发明的插件加载装置包括：页面文件处理单元100、确定单元200、第一插件加载单元300。

页面文件处理单元100例如响应于用户浏览页面的请求，加载页面文件并对页面文件进行解析和排版。

确定单元200基于排版结果，确定页面文件中插件加载范围内的可视型插件。

如上文所述，插件加载范围可以包括当前屏幕显示范围；或者，插件加载范围可以包括所述当前屏幕显示范围以及所述当前屏幕显示范围之外预定距离内的预定距离范围。

第一插件加载单元300加载插件加载范围内的可视型插件。

这里，通过引入插件加载范围，加载该插件加载范围内的可视型 插件，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

图5是根据本发明改进实施例的插件加载装置的示意性框图。

图5所示改进实施例的插件加载装置同样包括页面文件处理单元100、确定单元200、第一插件加载单元300。

如图5所示，确定单元200可以包括两个判断单元。

第一判断单元210用于判断页面文件中包含的插件是否可视型插件。对于不是可视型插件的插件(功能型插件)，可以通过相应的插件加载单元(图中未示出)来按照常规程序直接加载而不需额外的等待或延迟。

第二判断单元220用于判断可视型插件的位置是否在插件加载范围内。

通过第一判断单元210和第二判断单元220的判断，确定单元200可以确定插件加载范围内的可视型插件。

这样，第一插件加载单元300就可以加载插件加载范围内的这些可视型插件。

进一步地，该插件加载装置还可以进一步包括第三判断单元230。

第三判断单元230用于判断插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值。

根据第三判断单元230的判断结果，可以由不同的单元对插件加载范围以外的可视型插件执行处理。

对于插件加载范围以外尺寸数据小于或等于预定阈值的可视型插件，可以由第二插件加载单元310来直接加载。

另一方面，对于插件加载范围以外尺寸数据大于预定阈值的可视型插件，可以暂不加载，而是通过占位单元400使用占位插件替代。即由占位单元400使用占位插件替代插件加载范围以外尚未加载的可视型插件。

相应地，可以通过插件信息保存单元500保存被占位插件替代的可视型插件的插件信息。该插件信息例如可以是可视型插件的URL 等使得能够加载该可视型插件的信息。

为了在当前屏幕显示范围发生变化时相应地补充加载先前为加载的可视型插件，该插件加载装置还可以包括第三插件加载单元600。

第三插件加载单元600用于响应于当前屏幕显示范围发生变化，根据插件信息保存单元500所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。从而可以使用新加载的可视型插件来替换原来的占位插件。

上文中已经参考附图详细描述了根据本发明的加载页面中的插件的方法和装置。

综上可知，通过根据本发明的方法和装置，能够避免加载用户看不到的不必要的可视型插件，从而节省大量资源。

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

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

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

Claims (11)

1.一种加载页面中的插件的方法，包括：

加载页面文件并对所述页面文件进行解析和排版；

基于排版结果，确定所述页面文件中插件加载范围内的可视型插件，所述插件加载范围包括当前屏幕显示范围、或者所述当前屏幕显示范围以及所述当前屏幕显示范围之外预定距离内的预定距离范围；以及

加载所述插件加载范围内的可视型插件。

2.根据权利要求1所述的方法，其中，所述确定插件加载范围内的可视型插件的步骤包括：

判断所述页面文件中包含的插件是否是可视型插件；以及

判断所述可视型插件的位置是否在所述插件加载范围内。

3.根据权利要求2所述的方法，其中，

根据所述插件的尺寸数据来判断所述插件是否可视型插件。

4.根据权利要求1所述的方法，还包括：

判断所述插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及

加载所述插件加载范围以外尺寸数据小于或等于预定阈值的可视型插件。

5.根据权利要求1至4中任何一项所述的方法，还包括：

使用占位插件替代所述插件加载范围以外尚未加载的可视型插件；

保存被占位插件替代的可视型插件的插件信息。

6.根据权利要求5所述的方法，还包括：响应于当前屏幕显示范围发生变化，根据所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。

7.一种加载页面中的插件的装置，包括：

页面文件处理单元，用于加载页面文件并对所述页面文件进行解析和排版；

确定单元，用于基于排版结果，确定所述页面文件中插件加载范围内的可视型插件，所述插件加载范围包括当前屏幕显示范围、或者所述当前屏幕显示范围以及所述当前屏幕显示范围之外预定距离内的预定距离范围；以及

第一插件加载单元，用于加载所述插件加载范围内的可视型插件。

8.根据权利要求7所述的装置，其中，所述确定单元包括：

第一判断单元，用于判断所述页面文件中包含的插件是否可视型插件；以及

第二判断单元，用于判断所述可视型插件的位置是否在所述插件加载范围内。

9.根据权利要求7所述的装置，还包括：

第三判断单元，用于判断所述插件加载范围以外的可视型插件的尺寸数据是否小于或等于预定阈值；以及

第二插件加载单元，用于加载所述插件加载范围以外尺寸数据小于或等于所述预定阈值的可视型插件。

10.根据权利要求7至9中任何一项所述的装置，还包括：

占位单元，用于使用占位插件替代所述插件加载范围以外尚未加载的可视型插件；以及

插件信息保存单元，用于保存被占位插件替代的可视型插件的插件信息。

11.根据权利要求10所述的装置，还包括：

第三插件加载单元，用于响应于当前屏幕显示范围发生变化，根据所述插件信息保存单元所保存的插件信息，进一步加载相应变化后的插件加载范围内尚未加载的可视型插件。