一种网页区块懒加载的方法和装置与流程

本申请涉及计算机技术，特别涉及一种网页区块懒加载的方法和装置。

背景技术：

随着互联网的发展，网页作为承载内容的载体，使用范围越来越广。为了提升用户打开网页时的初始速度，目前很多网页采用HTML区块懒加载的技术，HTML区块即网页中一个HTML元素的内容，HTML元素相当于HTML区块的容器，在网页刚打开时区块并不会被加载，而是先加载区块的容器，该容器可以被设置为一固定高度值(但不是区块的真实高度，因为此时区块还没有被加载，无法获取到区块高度)，等到HTML元素进入到用户的视野时才开始加载HTML区块，并获取到区块的真实高度，将容器也设置为区块对应的高度值。

但是，HTML区块被加载前后，容器高度是有差别的，比如容器最初的固定高度值与区块真实高度值不同，这将会造成HTML元素高度的突然变化，从用户看来，网页中的纵向滚动条的长度和位置都会变化，可以称为页面抖动，影响用户的体验；同时也使得对页面中区块的定位和导航变得更为复杂。

技术实现要素：

有鉴于此，本申请提供一种网页区块懒加载的方法和装置，以避免网页区块懒加载时的页面抖动。

具体地，本申请是通过如下技术方案实现的：

第一方面，提供一种网页区块懒加载的方法，包括：

接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；

将所述网页区块的容器的初始高度值发送至所述客户端，以使得客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；

在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

第二方面，提供一种网页区块懒加载的方法，包括：

向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；

接收所述服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；

在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

第三方面，提供一种网页区块懒加载的装置，包括：

请求接收模块，用于接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；

容器发送模块，用于将所述网页区块的容器的初始高度值发送至所述客户端，以使得所述客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；

内容发送模块，用于在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

第四方面，提供一种网页区块懒加载的装置，包括：

请求发送模块，用于向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；

容器加载模块，用于接收服务器发送的网页区块的容器的初始高度值， 所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；

内容加载模块，用于在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

本申请提供的网页区块懒加载的方法和装置，通过对懒加载区块在发送容器信息时将容器的高度设置为区块高度，使得在后续加载网页区块至容器时，区块加载前后的容器高度不会发生变化，从而避免了网页区块懒加载时的页面抖动。

附图说明

图1是本申请一示例性实施例示出的一种购物网站的页面；

图2是本申请一示例性实施例示出的另一种购物网站的页面；

图3是本申请一示例性实施例示出的网页区块加载系统；

图4是本申请一示例性实施例示出的一种网页区块懒加载的方法流程图；

图5是本申请一示例性实施例示出的一种网页区块懒加载的方法流程图；

图6是本申请一示例性实施例示出的一种客户端和服务器的交互流程图；

图7是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；

图8是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；

图9是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图；

图10是本申请一示例性实施例示出的一种网页区块懒加载的装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的 要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

网页中可以包括多个HTML元素，而HTML元素相当于HTML区块的容器，HTML区块即HTML元素的内容。参见图1的示例，图1示例了某购物网站的页面，并且是显示了该网站中进入到用户视野的页面，如果用户滚动页面右侧的滚动条11，将可以继续看到进入视野的该网站的下一部分页面内容，比如5F男装。

以图1为例，类似于3F或者4F所在的一块页面内容，可以称为HTML区块，例如区块12和区块13，需要说明的是，这两个区块只是示例，HTML区块的大小也可以比图1示例更大或更小。结合参见图2，可能该购物网站在初始打开时，图1中的页面并不是首先进入用户视野的页面，也就是在电脑浏览器中不会首先显示图1的页面，比如可以先显示1F和2F的内容，在滚动上述的滚动条11时才显示到3F或4F的内容。

而如果区块12和区块13采用的是懒加载技术，那么即使通过滚动上述的滚动条11使得3F或4F进入到浏览器显示，也不会立刻加载其中的显示内容，而是如图2所示的，先显示3F或4F所占的位置。本实施例中，将图2示例的尚未加载网页内容的部分可以称为“容器”(也可以称为HTML元素)，当加载具体的页面内容后，才显示为图1示例的形式，本实施例可以将容器中的内容称为“网页区块”(或者，HTML区块)。

需要说明的是，图2所示的3F或4F，在尚未进入浏览器视野区域时，就可以渲染容器。比如，用户可以点击“www.tmall.com”，首先从浏览器看到的是1F和2F的内容，而3F或4F此时尚未进入视野区域，但是已经渲染了3F或4F对应的容器，为图2示例的形式。当通过滚动条11将3F或4F提升到视野区域时，浏览器再加载网页区块，即加载容器中包含的内容，从而看到图1示例的形式。这就是网页区块的懒加载技术。

网页区块在懒加载时，也是通过图3所示的系统实现的。如图3所示， 该系统可以包括服务器31和客户端32，例如，服务器31可以存储有网页信息，比如图1所示的购物网站中的HTML区块(如，区块代码)都存储在服务器31，由服务器31将代码发送至客户端32进行显示。而客户端32可以通过浏览器解析网页代码显示网页。比如，结合图1或图2所示，购物网站的页面信息，包括容器和区块，都是由服务器31发送至客户端32进行加载。

例如，在用户请求www.tmall.com时，对于懒加载的区块(例如3F和4F)，服务器31可以只将渲染容器所需的信息发送至客户端32，其中包括容器的预设高度值，比如图2所示的容器高度S，客户端32渲染容器并设置容器的高度为S。当容器所在的页面部位进入到视野区域时(即在浏览器显示，用户能够看到)，客户端32再请求服务器31发送容器中的区块的信息，加载区块至容器，最终设置容器的高度S为区块的高度。

由于当容器的预设高度值与最终区块高度不一致时，容器的高度S在区块加载前后会出现变化，引起页面抖动；为了解决该问题，本申请实施例的网页区块懒加载，采用了图4所示的方法流程，该方法由服务器执行，包括：

401、接收客户端发送的网页浏览请求，网页包括懒加载的网页区块；

402、将网页区块的容器的初始高度值发送至客户端，以使得所述客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的高度。

403、在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

对应于图4所示的服务器侧的执行流程，图5示例了客户端执行的流程：

501、向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；

502、接收所述服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的高度，并设置容器的高度为所述初始高度值；

503、在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

结合图4和图5，在步骤501中，客户端向服务器发送了网页浏览请求，例如用户在电脑的浏览器中输入“www.tmall.com”，则相当于请求服务器浏览该网页。其中，请求的网页中包括：懒加载的网页区块。

例如，仍以图1的购物网站为例，该网站在打开时，网站首页包括“首先进入到浏览器的视野区域的页面”和“未进入到视野区域的页面，该页面要通过滚动条提升到视野区域中”，对于未进入视野区域的页面部分中包括的网页区块，可以设置为懒加载区块，即这部分区块服务器可以先将容器信息发送至客户端，客户端渲染容器，等待至进入视野区域时再加载区块。当然，懒加载区块也可以按照其他规则由开发人员设定，并且可以通过一个特定的CLASS属性值，用于标识该区块为懒加载区块。

在步骤401中服务器接收到网页浏览请求后，可以在402中向客户端发送该页面的页面信息，对于懒加载区块，服务器暂时先不将网页区块的区块信息发送至客户端，而是将用于容纳区块的容器信息发送至客户端，其中包括容器的初始高度值，以使得客户端在502中将容器高度设置为该初始高度值。本实施例中，该初始高度值为网页区块的高度，即为网页区块在客户端加载后获得的HTML区块的真实高度。

参见图2的示例，客户端在502中按照初始高度值渲染容器后，得到的容器的高度S即为网页区块的区块高度，这样即使在503中客户端根据服务器发送的区块信息加载网页区块至容器后，加载以后的网页区块的高度也是上述的区块高度，由于容器的高度已经为区块高度，所以区块的加载并不会引起容器高度的改变。

本实施例的网页区块懒加载的方法，通过将容器的高度设置为区块高度，使得在对区块进行懒加载前后，容器的高度不会产生突变，从而不会出现页面抖动，比如纵向滚动条的长度和位置不会突然变化，提升了用户体验，并且可以更好的对页面中的区块进行定位和导航。

此外，由上述的例子可以看到，服务器向客户端发送的容器的高度是网页区块的高度，而该网页区块的高度可以是服务器在之前获取到并设置为容 器高度的。例如，对于购物网站的页面，在客户端首次访问该页面时，对于本来懒加载的区块不再进行懒加载，而是正常加载获取到区块高度，服务器据此设置容器高度为区块高度后，后续对该网页的访问就可以使用懒加载技术，如图4和图5所示的流程，懒加载时客户端渲染的容器已经具有区块高度，从而避免区块加载前后容器的高度突然变化。下面通过图6示例的流程，说明服务器如何获取到区块高度以及根据区块高度进行懒加载的例子，包括：

601、服务器接收客户端对网页的浏览请求；

例如，在本步骤中，客户端可以向服务器发送对网页的浏览请求，例如，该浏览请求可以是对网页的首次请求、第二次请求或者第三次请求等。以首次请求为例，对于服务器来说，接收到的网页浏览请求是否是首次请求，可以通过标识来区别，比如，可以用“0”表示该网页从未被请求过，当接收到第一次请求时，将该标识由“0”更改为“1”，则下次再接收到对该网页的浏览请求时，通过标识已经为“1”可以知道这不是首次请求，该网页已经被请求过。

602、服务器将网页信息发送至客户端，包括：懒加载的网页区块的区块信息、以及高度上报标识；

例如，当服务器确定这是对网页的首次浏览请求时，可以将网页信息发送至客户端。其中，网页中包括懒加载区块，如图1和图2的示例，网页中有些区块是不需要立刻加载的，这些懒加载区块可以通过其特定的CLASS属性识别出来。

对于懒加载区块，本例子可以暂不执行懒加载，比如，服务器在本步骤中发送网页信息时，可以将懒加载的网页区块的区块信息都发送至客户端，也就是说，区别于传统的懒加载技术，本实施例对于懒加载区块，在首次访问时仍然会将“容器+区块”都发送至客户端，使得客户端正常加载网页区块至容器(传统技术中是先发送容器，后续容器进入视野区域时再发送区块)，即在本步骤中对于懒加载区块并不执行懒加载。此时对于容器可以不设置高度值，使得容器加载区块获取区块的真实高度。

此外，本步骤中服务器在向客户端发送容器和区块时，还携带高度上报标识。该高度上报标识的作用是，使得客户端根据该标识将正常加载区块后获得的区块高度上报至服务器。本实施例并不限制高度上报标识的具体设置形式，例如可以在网页中增加首次访问标识，或者对于懒加载区块设置“11”属性值用于表示需要上报区块高度。

603、客户端根据所述预设高度值设置容器高度，并根据区块信息加载所述网页区块至所述容器，获得所述网页区块的区块高度；

例如，客户端接收到602中服务器发送的网页信息后，可以根据容器的预设高度值渲染容器，并根据区块信息加载网页区块至容器，还可以在加载区块后获得区块高度。例如，当网页区块在浏览器中被正常的加载后，可以通过浏览器端的JAVASCRIPT语言提供的接口，可以获取到网页区块的高度。

604、客户端根据高度上报标识，将网页区块的区块高度发送至服务器；

例如，客户端根据高度上报标识，将获得的区块高度发送至服务器。在上报区块高度时，可以一并携带区块信息，比如区块信息可以是区块的标识信息，或者区块的代码信息，以使得服务器知道区块高度及对应的区块。例如，客户端向服务器发送的方式可以通过表单的方式，或者通过AJAX请求的方式，将区块高度发送至服务器。

605、服务器将所述网页区块的容器的初始高度值设置为所述区块高度。

例如，服务器可以根据604中客户端上报的区块高度，将该网页的区块容器的初始高度值设置为区块高度值，这样当后续客户端再访问该网页时，服务器就可以将区块高度值作为容器的初始高度值返回至客户端，参见下述步骤606和607。

606、客户端向服务器发送再次浏览请求；

例如，客户端后续又再次请求访问该网页。

607、服务器向客户端发送网页信息，包括懒加载区块的容器高度为区块高度；

608、客户端加载网页信息，包括渲染容器，容器的高度为区块高度。

609、当页面进入视野区域时，客户端向服务器请求加载区块；

610、服务器发送区块信息；

611、客户端根据区块信息加载区块至容器。

由于容器的高度在区块加载前后，就已经是区块的真实高度，因此区块的加载并不会引起容器的较大变化，从而避免了页面抖动。

由图6可以看到，在懒加载区块进行懒加载之前，服务器已经通过上述流程获取了网页区块的真实区块高度，并将容器的初始高度值设置为该区块高度，后续懒加载区块进行懒加载时，即使尚未加载区块时的渲染容器，容器的高度也已经是区块的真实高度，所以区块懒加载不会造成容器高度的较大变化从而避免了页面抖动现象。

此外，服务器根据区块高度值设置容器的高度，可以有多种方式，例如：

在一个例子中，上述的容器的初始高度值可以为网页区块的样式高度值，即服务器可以根据客户端上报的区块高度值，将容器的样式高度值设置为该区块的真实高度即区块高度。样式即CSS，用于设置网页中HTML元素的展示排布的语言。在这种方式中，服务器可以将容器的样式高度值发送至客户端，客户端根据样式高度值渲染容器，容器的高度为区块高度。

在另一个例子中，上述的容器的初始高度值可以为服务器设置的网页区块的容器的自定义属性值，该自定义属性值用于表示容器的高度。在这种方式中，服务器可以将容器的自定义属性值发送至客户端，比如在607中，将容器信息包括用于表示容器高度的自定义属性值发送至客户端。客户端在608中渲染容器时，可以是将自定义属性值转换为网页区块的样式高度值，再根据样式高度值设置容器的高度。

例如，通过浏览器端的JAVASCRIPT语言提供的对HTML元素样式进行修改的接口，用自定义属性值的区块高度设置容器的样式高度值，即用区块高度设置区块对应容器的STYLE属性中的HEIGHT样式值。

此外，需要说明的是，在601中的浏览请求，也可以不是首次请求，比如是第二次等，当然首次请求时即执行图6的流程，获取区块高度，可以更 快的设置容器的初始高度值为区块高度，提高改善懒加载效果的效率。

图6的流程中，客户端和服务器，可以是外部用户对网页服务器的访问；或者，还可以是在内容管理系统的其中阶段执行的流程，内容管理系统是网站系统中用来生成、编辑修改、存储网页代码内容的内部系统，凡是具有这一类功能的系统都可以称为内容管理系统，网站系统中一般也都会有内容管理系统。该系统一般既具有服务端，也具有客户端。而图6所示的流程可以是在内容管理系统中进行的。

此外，在网页区块懒加载的方法中，客户端在加载区块获取到区块高度(即网页区块的真实高度)后，也可以不上报至服务器，而是将区块高度存储在客户端。这样当后续服务器根据客户端发送的网页浏览请求将具有默认高度值(该默认高度值不是区块的真实高度)的容器信息发送至客户端之后，客户端自身可以将默认高度值更改为上述存储的区块高度，从而使得客户端加载的容器具有了区块高度，使得在后续加载区块后容器的高度也不会变化。

图7为一个例子中的网页区块懒加载的装置的结构图，该装置可以设置在服务器，该装置的结构本实施例简单描述，其工作原理可以结合参见方法实施例所述。如图7所示，该装置可以包括：请求接收模块71、容器发送模块72和内容发送模块73；其中，

请求接收模块71，用于接收客户端发送的网页浏览请求，请求的网页包括：懒加载的网页区块；

容器发送模块72，用于将所述网页区块的容器的初始高度值发送至所述客户端，以使得所述客户端设置容器的高度为所述初始高度值，所述初始高度值为网页区块的区块高度；

内容发送模块73，用于在接收到所述客户端发送的区块加载请求时，将所述网页区块的区块信息发送至所述客户端，以使得所述客户端根据区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

如图8所示，该装置还可以包括：上报指示模块74和高度设置模块75；

上报指示模块74，用于在接收到对网页的浏览请求时，将所述网页的网页信息发送至所述客户端，所述网页信息包括：懒加载的网页区块的区块信息、以及高度上报标识；所述高度上报标识用于指示所述客户端上报加载网页区块后获得的区块高度；

高度设置模块75，用于接收所述客户端发送的网页区块的区块高度，并将所述网页区块的容器的初始高度值设置为所述区块高度。

例如，高度设置模块，在将所述网页区块的容器的初始高度值设置为所述区块高度时，包括：根据所述区块高度，设置所述网页区块的容器的样式高度值；或者，将所述区块高度设置为所述网页区块的容器的自定义属性值。

图9为一个例子中的网页区块懒加载的装置的结构图，该装置可以设置在客户端，该装置的结构本实施例简单描述，其工作原理可以结合参见方法实施例所述。如图9所示，该装置可以包括：请求发送模块91、容器加载模块92和内容加载模块93；其中，

请求发送模块91，用于向服务器发送网页浏览请求，请求的网页包括：懒加载的网页区块；

容器加载模块92，用于接收服务器发送的网页区块的容器的初始高度值，所述初始高度值为网页区块的区块高度，并设置容器的高度为所述初始高度值；

内容加载模块93，用于在检测到所述网页区块进入视野区域时，向所述服务器发送区块加载请求，并根据所述服务器返回的区块信息将所述网页区块加载至所述容器，并且加载后的网页区块的高度为所述区块高度。

如图10所示，该装置还可以包括：指示接收模块94、高度获取模块95和高度上报模块96；其中，

指示接收模块94，用于向所述服务器发送对网页的浏览请求，并接收所述服务器返回的网页信息，所述网页信息包括：懒加载的网页区块的区块信息、以及高度上报标识；

高度获取模块95，用于根据所述预设高度值设置容器高度，并根据区块 信息加载所述网页区块至所述容器，获得所述网页区块的区块高度；

高度上报模块96，用于根据所述高度上报标识，将所述网页区块的区块高度发送至所述服务器，以使得所述服务器将所述网页区块的容器的初始高度值设置为所述区块高度。

进一步的，容器加载模块92，在设置容器的高度为初始高度值时，包括：所述初始高度值为所述网页区块的容器的样式高度值，该样式高度值为区块的真实高度，根据所述样式高度值设置所述容器的高度；或者，所述初始高度值为所述网页区块的容器的自定义属性值，将所述自定义属性值转换为网页区块的样式高度值，根据所述样式高度值设置所述容器的高度。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。