CN102760133A - 网页加载方法、系统、浏览器、终端及服务器 - Google Patents

Abstract

本发明实施例公开了一种网页加载方法，包括：浏览器向服务器发送网页请求并加载服务器返回的所请求网页的整体框架，并将服务器返回的所请求网页的首屏内容加载至整体框架的相应位置；浏览器显示首屏内容，其中装载全部或部分首屏内容的框架进入浏览器的可见区域内；当可见区域内的框架发生变化时，浏览器判断当前可见区域内的框架内需要加载新内容时，向服务器发送获取请求，请求获取需要加载的新内容；浏览器在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。本发明实施例还公开了一种浏览器、终端、服务器及网页加载系统。本发明可根据用户的请求动态加载网页，提高网页响应速率。

Description

网页加载方法、系统、浏览器、终端及服务器

技术领域

本发明涉及网页加载技术领域，尤其涉及一种网页加载方法、系统、浏览器、终端及服务器。

背景技术

随着互联网技术的发展，互联网用户对网页响应速度的要求也越来越高。传统的网页加载方案为：用户在终端的浏览器的地址栏中输入URL（Uniform / Universal Resource Locator，统一资源定位符）地址，浏览器即将该URL地址发送至服务器，请求获取该URL地址对应的网页；服务器抓取该URL地址对应的网页，并将该网页的整个页面（包括：网页的整体框架和全部内容）返回给浏览器；浏览器加载网页的整个页面，并向用户展示该网页。由于现有的网页一般较长，但浏览器的可见区域大小有限，因此浏览器一般需要分多屏显示所请求的网页，首次显示的为网页的首屏内容，用户可通过浏览器的滚动条查看网页的其他内容。传统的网页加载方案，服务器返回网页的整个页面，其页面数据量大，传输速率低；浏览器对网页的整个页面进行全量加载，耗费的时间长，影响响应速率，造成用户打开网页的等待时间过长。

为了解决上述问题，现有的网页加载方案基于传统的网页加载方案作了一定的改进，由于网页一般图文并茂，现有的网页加载方案对所请求网页的图片进行切片，比如：使用现有切片工具或切片软件，按一定大小规格对网页的图片进行切片，将图片切为该规格的多个小图片，以提高传输速率。服务器返回所请求网页的整体框架、浏览器首屏显示需要的图片及网页的全部文字内容给浏览器进行加载和显示，当用户通过滚动条查看网页的后续内容时，由浏览器从服务器中动态获取需要的图片，并动态加载和显示获取的图片。现有的网页加载方案相对于传统的网页加载方案，虽然能在一定程度上加快网页的响应速率，但还是存在一定的缺陷：由于现有的网页一般较长，用户通常仅会关注首屏显示的相关内容，只有很小一部分用户会将滚动条滚动到最底部，查看完整的网页，因此，现有的网页加载方案对网页的文字内容进行全量加载，既浪费了资源流量，同时也影响了传输速率和网页响应速率。

发明内容

本发明实施例所要解决的技术问题在于，提供一种网页加载方法、系统、浏览器及服务器，可根据用户的请求动态加载网页，提高网页响应速率。

为了解决上述技术问题，本发明实施例提供了一种网页加载方法，包括：

浏览器向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；

所述浏览器显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；

当可见区域内的框架发生变化时，所述浏览器判断当前可见区域内的框架内是否需要加载新内容，若判断结果为是，向所述服务器发送获取请求，请求获取需要加载的新内容；

所述浏览器在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。

其中，浏览器向服务器发送网页请求之后，加载所述服务器返回的所请求网页的整体框架之前，还包括：

所述服务器根据所述网页请求中包含的所请求网页的URL地址，从网络中获取所请求网页，其中包括：所请求网页的整体框架和全部内容；

所述服务器根据预置的切片方式，对所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，其中包括：首屏内容；

所述服务器将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器；

其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。

其中，所述浏览器显示所述首屏内容之后，判断当前可见区域内的框架内是否需要加载新内容之前，还包括：

所述浏览器监控可见区域内的框架是否发生变化，包括：

所述浏览器选取位于可见区域外的框架的任一DOM（Document Object Model，文档对象模型）元素作为参照点；

所述浏览器实时监控所选取的DOM元素，若监控到所选取的DOM元素进入可见区域内，则确定可见区域内的框架发生变化；否则，确定可见区域内的框架未发生变化。

其中，所述浏览器向所述服务器发送获取请求，请求获取需要加载的新内容，包括：

所述浏览器计算需要加载的新内容的高度，将所述新内容的高度与所述服务器返回的依次存储的各切片内容的高度相比较，确定需要获取的切片数量；

所述浏览器根据确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

相应地，本发明实施例还提供了一种浏览器，包括：

第一加载模块，用于向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；

显示模块，用于显示所述第一加载模块加载的首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；

判断模块，用于当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容；

内容请求模块，用于当所述判断模块的判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容；

第二加载模块，用于在所述整体框架的相应位置加载所述服务器返回的新内容，并交由所述显示模块在当前可见区域内显示所述新内容。

其中，所述浏览器还包括：监控模块，用于监控所述浏览器的可见区域内的框架是否发生变化。

其中，所述监控模块包括：

选取单元，用于选取位于可见区域外的框架的任一DOM元素作为参照点；

监控单元，用于实时监控所述选取单元选取的DOM元素，若监控到所选取的DOM元素进入可见区域内，则确定可见区域内的框架发生变化；否则，确定可见区域内的框架未发生变化。

其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度，所述浏览器接收所述服务器返回的各切片内容的高度；

所述内容获取模块包括：

计算单元，用于计算需要加载的新内容的高度；

比较确定单元，用于将所述计算单元计算得到的所述新内容的高度与所述服务器返回的各切片内容的高度相比较，确定需要获取的切片数量；

请求单元，用于根据所述比较确定单元确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

相应地，本发明实施例还提供了一种终端，包括：上述的浏览器。

相应地，本发明实施例还提供了一种服务器，包括：

网页请求响应模块，用于当接收到浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容；

内容请求响应模块，用于当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

其中，所述网页请求响应模块包括：

获取单元，用于当接收到浏览器发送的网页请求后，根据所述网页请求中包含的所请求网页的URL地址，从网络中获取所请求网页，其中包括：所请求网页的整体框架和全部内容；

切片存储单元，用于根据预置的切片方式，对所述获取单元获取的所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，其中包括：首屏内容；

返回单元，用于将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器；

其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。

相应地，本发明实施例还提供了一种网页加载系统，包括：服务器和至少一个终端，所述终端包括浏览器： 

所述浏览器，用于向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容，并在判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容；在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容；

所述服务器，用于当接收到所述浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容；当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

实施本发明实施例，具有如下有益效果：

本发明实施例中，服务器根据浏览器的网页请求，首次仅返回所请求网页的整体框架和首屏内容给浏览器进行加载和显示，由于仅返回所请求网页的整体框架和首屏内容，传输和加载的数据量相对较小，从而可提高传输速率，提高加载速率，提高网页首次打开的速率；另外，由于首次已返回了网页的整体框架，浏览器的滚动条为完整网页的高度，用户可使用该滚动条改变可见区域内的框架，当可见区域内的框架发生变化时，浏览器再从服务器处获取用户针对该网页所请求的新内容，并进行动态加载和显示，这样有针对性的网页加载，有效地节省了资源流量，提高了网页响应速率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明的网页加载系统的实施例的结构示意图；

图2为本发明的浏览器的第一实施例的结构示意图；

图3为本发明的浏览器的第二实施例的结构示意图；

图4为本发明的浏览器的监控模块的实施例的结构示意图；

图5为本发明的浏览器的内容请求模块的实施例的结构示意图；

图6为本发明的服务器的实施例的结构示意图；

图7为本发明的服务器的网页请求响应模块的实施例的结构示意图；

图8为本发明的网页加载方法的第一实施例的流程图；

图9为本发明的网页加载方法的第二实施例的流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参见图1，为本发明的网页加载系统的实施例的结构示意图；所述系统包括：至少一个终端和服务器，图1示出了三个终端，分别为：PC机（Personal Computer，个人计算机）、便携式电脑和PDA（Personal Digital Assistant，个人数字助理），可以理解的是，此处的终端仅为举例，实际应用中，网页加载系统中终端的数量并不限于三个，该数量可以为接入服务器的部分终端或所有终端，该终端可以为：PC机、便携式电脑、PDA、手机等设备中的任一种或多种。所述终端包括浏览器（图中未示出），即所述终端中安装了浏览器，用户可通过终端中的浏览器进行网页连接和查看。

所述浏览器，用于向服务器发送网页请求后，加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容，并在判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容；在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。

具体实现中，所述浏览器上述与服务器的交互过程，以及所述浏览器对网页的加载过程均由浏览器中内置的JavaScript脚本程序来实现。

所述服务器，用于当接收到所述浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容；当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

为了更清楚地说明本发明，下面将对本发明的网页加载系统中的终端中的浏览器进行详细介绍。

图2为本发明的浏览器的第一实施例的结构示意图；所述浏览器包括：

第一加载模块101，用于向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置。

用户在终端浏览器的地址栏中输入想要查找的网页的URL地址，所述浏览器将该URL地址进行封装，生成网页请求发送至服务器，向服务器请求该URL地址对应的网页。所述服务器接收到所述网页请求后，对所请求的网页内容进行切片并依次存储，并向所述浏览器返回所请求网页的整体框架和切片后形成的首屏内容。其中，在实际的实施例中，所述首屏内容的高度等于或略大于所述浏览器的可见区域的高度，可以理解的是，该首屏内容的高度可以根据发送请求的终端的显示屏的显示区域大小进行协商。所述第一加载模块101加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置。具体地，所请求网页的整体框架可为DOM树结构，该DOM树结构包括组成该结构的各个DOM元素，每个DOM元素存放所请求网页的相应内容，且每个DOM元素还包含存放的所请求网页的相应内容的属性（如：高度、宽度、位置信息、排版信息等属性）。所述第一加载模块101将所述服务器返回的所请求网页的首屏内容加载至所述整体框架中对应的DOM元素中。

显示模块102，用于显示所述第一加载模块101加载的首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内。

由于大部分网页的高度均大于浏览器的可见区域的高度，浏览器一般需要分多次才能完整的展示网页，如前述，所述服务器返回的首屏内容的高度大于或等于所述浏览器的可见区域的高度，若所述首屏内容的高度大于所述浏览器的可见区域的高度，所述显示模块102仅能在可见区域内显示部分首屏内容，剩余的部分则被隐藏，需要用户滚动浏览器的滚动条才能查看，此时装载可见区域内的部分首屏内容的框架同时进入可见区域内，而除该框架以外的其他框架则位于浏览器的可见区域外。若所述首屏内容的高度等于所述浏览器的可见区域的高度，所述显示模块102则能在可见区域内显示全部首屏内容，此时装载首屏内容的框架同时进入可见区域内，而除该框架以外的其他框架则位于浏览器的可见区域外。需要说明的是，由于所述第一加载模块101已将所请求网页的整体框架进行了加载，所述浏览器的滚动条为完整的所请求网页的高度，用户可通过所述浏览器的滚动条的滚动来查看所请求网页在可见区域外的另一部分整体框架，但需要注意的是，由于所述第一加载模块101仅将首屏内容加载至整体框架的相应位置，因此，此时除装载首屏内容的部分框架之外，其他部分框架内的内容均为空。

可以理解的是，若所请求网页的高度与浏览器的可见区域的高度相等，则所述服务器对所请求网页的内容则无需要切片，即所述服务器返回的首屏内容即为网页的全部内容，所述服务器返回的整体框架则全部用于装载该首屏内容，且所请求网页的整体框架和首屏内容均在浏览器的可见区域内显示，浏览器的滚动条的长度与所请求网页的高度相同，用户无法滚动该滚动条；上述这种情况下可类似分析，在此不赘述。需要说明的是，考虑到现有大部分网页的高度均大于浏览器的可见区域的高度，除特别说明外，本发明后续实施例所述的网页均指高度大于浏览器的可见区域的高度的网页。

判断模块103，用于当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容。

浏览器实时监听用户的鼠标，监控可见区域内的框架是否发生变化，若用户鼠标引起浏览器的滚动条滚动，触发可见区域内的框架发生变化时，所述判断模块103判断当前可见区域内的框架内是否需要加载新内容，具体实现中，所述判断模块103判断可见区域内的框架是否全部装载内容，若仅部分框架装载了内容，则判断当前可见区域内的框架内需要加载新内容，否则，判断当前可见区域内的框架内无需加载新内容。例如：首屏内容的高度可大于浏览器可见区域的高度，因此，部分首屏内容可能被隐藏，若可见区域内新进入的框架刚好是装载被隐藏的部分首屏内容的框架，则当前可见区域内的框架内无需加载新内容；若可见区域内新进入的框架除了被隐藏的首屏内容的框架部分外，还包括其他未装载内容的部分框架，则判断当前可见区域内的框架内需要加载新内容。再如：设定可见区域内显示内容为其他切片内容，如为第二屏内容，用户通过鼠标向前滚动浏览器的滚动条，查看首屏内容，则此时新进入可见区域内的框架为已装载了首屏内容的框架，可见区域内的全部框架均已装载了内容，判断当前可见区域内的框架内无需加载新内容；等等，其他情况下可类似分析，在此不赘述。

内容请求模块104，用于当所述判断模块103的判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容。

所述内容请求模块104当所述判断模块103判断需要加载新内容时，则向所述服务器请求获取需要加载的新内容。

第二加载模块105，用于在所述整体框架的相应位置加载所述服务器返回的新内容，并交由所述显示模块102在当前可见区域内显示所述新内容。

所述服务器响应所述内容请求模块104的获取请求，向所述浏览器返回所请求的新内容，所述第二加载模块105则将所述新内容加载至所述整体框架相应的位置，并交由所述显示模块102将其显示在当前可见区域内。需要说明的是，所述第二加载模块105的加载过程与第一加载模块101的加载过程类似，在此不赘述。由于服务器向所述浏览器返回的是切片内容，因此，返回的切片内容包含浏览器所请求的新内容，但返回的切片内容的整体高度大于或等于浏览器所请求的新内容的高度，若二者相等，则所述显示模块102则在当前可见区域内显示的所述新内容即为返回的全部切片内容；若返回的切片内容的整体高度大于浏览器所请求的新内容的高度，则所述显示模块102在当前可见区域内显示的新内容为返回的部分切片内容，而其余部分的切片内容处于可见区域之外而被隐藏，需要滚动浏览器滚动条才能查看，此过程与上述首屏内容加载显示过程类似。

本发明实施例中首次请求时仅返回所请求网页的整体框架和首屏内容，传输和加载的数据量相对较小，从而可提高传输速率，提高加载速率，提高网页首次打开的速率；当可见区域内的框架发生变化时，浏览器再从服务器处获取用户针对该网页所请求的新内容，并进行动态加载和显示，这样有针对性的网页加载，有效地节省了资源流量，提高了网页响应速率。

请参见图3，为本发明的浏览器的第二实施例的结构示意图；与上一实施例相同，所述浏览器包括：第一加载模块101、显示模块102、判断模块103、内容请求模块104和第二加载模块105。本实施例中，所述浏览器还包括：监控模块106。

所述监控模块106，用于监控所述浏览器的可见区域内的框架是否发生变化。

请一并参见图4，为本发明的浏览器的监控模块的实施例的结构示意图；所述监控模块106包括：

选取单元61，用于选取位于可见区域外的框架的任一DOM元素作为参照点。

如前述，网页的整体框架由多个DOM元素构成，所述选取单元61则可在浏览器的可见区域外实时选取任一DOM元素作为参照点，用以确定浏览器的可见区域内的框架是否发生变化。

监控单元62，用于实时监控所述选取单元61选取的DOM元素，若监控到所选取的DOM元素进入可见区域内，则确定可见区域内的框架发生变化；否则，确定可见区域内的框架未发生变化。

本发明实施例可监控可见区域内的框架发生变化，有利于浏览器根据用户对该网页所请求的新内容，进行动态加载和显示，有效地节省了资源流量，提高了网页响应速率。

为了更清楚地说明本发明，下面将对本发明的浏览器的内容请求模块进行详细介绍。

请参见图5，为本发明的浏览器的内容请求模块的实施例的结构示意图；所述内容请求模块104包括：

计算单元41，用于计算需要加载的新内容的高度。

所述计算单元41的计算过程为：由于浏览器的可见区域的高度是固定的，所述计算单元41可计算需要加载的新内容在可见区域内所占据的比例，比如：新内容占据可见区域的高度的1/4，则所述计算单元41计算得到需要加载的新内容的高度为可见区域的高度的1/4。

比较确定单元42，用于将所述计算单元41计算得到的所述新内容的高度与所述服务器返回的各切片内容的高度相比较，确定需要获取的切片数量。

如前述，所述浏览器接收所述服务器返回的各切片内容的高度。所述比较确定单元42将所述计算单元41计算得到的所述新内容的高度与所述服务器返回的各切片内容的高度相比较，依上述例子，新内容的高度为可见区域的高度的1/4，假设为10cm，当前可见区域内显示的内容为首屏内容，则所述比较确定单元42首先将存储于首屏内容之后的第二屏内容的高度与新内容的高度相比较，若第二屏内容的高度大于等于10cm，则表明第二屏内容已足以满足可见区域内需要加载的新内容的高度，由此确定需要获取的切片数量为1；若第二屏内容的高度小于10cm，为5cm，所述比较确定单元43用新内容的高度10cm减去第二屏内容的高度5cm，利用余下的5cm继续与第三屏内容的高度相比较，若第三屏内容的高度大于等于5cm，则表明第二屏内容与第三屏内容的总和足以满足可见区域内需要加载的新内容的高度，由此确定需要获取的切片数量为2；其他情况类似分析，在此不赘述。

请求单元43，用于根据所述比较确定单元42确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

所述请求单元43根据所述比较确定单元42确定的需要获取的切片数量生成获取请求，获取需要加载的新内容。需要说明的是，所述服务器按顺序依次存储各切片内容，其存储的顺序依次为：首屏内容、第二屏内容、第三屏内容至第N屏内容（N为整数）。所述浏览器也按同样的顺序依次获取各切片内容，所述获取请求中包含需要获取的切片数量，比如：切片数量为2，由于前次所述服务器已返回了首屏内容，则此次所述服务器依次返回第二屏内容和第三屏内容，其他情况下可类似分析，在此不赘述。 

本发明实施例根据用户的请求，对网页进行动态加载和显示，有效地节省了资源流量，提高了网页响应速率。

为了更清楚地说明本发明，下面将对本发明的网页加载系统中的服务器进行详细介绍。

请参见图6，为本发明的服务器的实施例的结构示意图；所述服务器包括：网页请求响应模块201和内容请求响应模块202。

所述网页请求响应模块201，用于当接收到浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容。

请一并参见图7，为本发明的服务器的网页请求响应模块的实施例的结构示意图；所述网页请求响应模块201包括：

获取单元11，用于当接收到浏览器发送的网页请求后，根据所述网页请求中包含的所请求网页的URL地址，从网络中获取所请求网页，包括：所请求网页的整体框架和全部内容。

切片存储单元12，用于根据预置的切片方式，对所述获取单元11获取的所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，包括首屏内容。

具体实现中，设定网页在切片后形成N（N为整数）个切片内容，其中存储的切片内容依次为：首屏内容、第二屏内容、第三屏内容至第N屏内容。所述预置的切片方式可以由服务器的操作人员根据实际情况预设定，比如：考虑常用浏览器的可见区域高度及常用终端的显示屏幕大小等因素，预设定合适的切片高度；再如：考虑网页中每一组内容的完整度因素，预设定合适的切片高度，等等。所述预置的切片方式还可以由连接至服务器的各浏览器在网页请求时实时上报自身的可见区域的高度，然后预设定合适的切片高度，等等。另外，N为整数，N的具体取值根据所请求网页的整体高度以及切片方式确定。所述切片存储单元12对所请求网页按从顶部至底部的方向，依次对所请求网页的全部内容进行切片，此处的切片过程与现有的图片切片过程类似，不同之处在于，所述切片存储单元12对整个网页的页面进行切片，比如：针对一个静态网页页面，该页面包括排布于整体框架内的所有内容（包括图片和文字内容），所述切片存储单元12按该页面的顶部至底部的方向，依次对所请求网页的全部内容进行切片并依次存储。

返回单元13，用于将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器。

所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。优选地，所述首屏内容的高度等于所述浏览器的可见区域的高度。此处对首屏内容的高度的设置，是为了在保证首次打开网页速度的前提下，保证浏览器可见区域内的网页内容的完整性和充实性，以提高用户的使用体验。

内容请求响应模块202，用于当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

需要说明的是，所述内容请求响应模块202按各切片内容的存储顺序，根据浏览器的获取请求，依次返回相应的切片内容。 

本发明实施例中首次请求时仅返回所请求网页的整体框架和首屏内容，传输和加载的数据量相对较小，从而可提高传输速率，提高加载速率，提高网页首次打开的速率；当可见区域内的框架发生变化时，浏览器再从服务器处获取用户针对该网页所请求的新内容，并进行动态加载和显示，这样有针对性的网页加载，有效地节省了资源流量，提高了网页响应速率。

为了更清楚地说明本发明，下面将对本发明的网页加载方法进行详细介绍。

请参见图8，为本发明的网页加载方法的第一实施例的流程图；所述方法包括：

S101，浏览器向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置。

用户在终端浏览器的地址栏中输入想要查找的网页的URL地址，所述浏览器将该URL地址进行封装，生成网页请求发送至服务器，向服务器请求该URL地址对应的网页。所述服务器接收到所述网页请求后，对所请求的网页内容进行切片存储，并向所述浏览器返回所请求网页的整体框架和切片后的首屏内容。其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。所述浏览器执行步骤S101，加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置。具体地，所请求网页的整体框架可为DOM树结构，该DOM树结构包括组成该结构的各个DOM元素，每个DOM元素存放所请求网页的相应内容，且每个DOM元素还包含存放的所请求网页的相应内容的属性（如：高度、宽度、位置信息、排版信息等属性）。所述第一加载模块101将所述服务器返回的所请求网页的首屏内容加载至所述整体框架中对应的DOM元素中。

S102，所述浏览器显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内。

由于大部分网页的高度均大于浏览器的可见区域的高度，浏览器一般需要分多次才能完整的展示网页，如前述，所述服务器返回的首屏内容的高度大于或等于所述浏览器的可见区域的高度，若所述首屏内容的高度大于所述浏览器的可见区域的高度，所述S102仅能在所述浏览器的可见区域内显示部分首屏内容，而剩余的部分则被隐藏，需要用户滚动浏览器的滚动条才能查看，此时装载可见区域内的部分首屏内容的框架同时进入可见区域内，而除该框架以外的其他框架则位于浏览器的可见区域外。若所述首屏内容的高度等于所述浏览器的可见区域的高度，所述S102则能在所述浏览器的可见区域内显示全部首屏内容，此时装载首屏内容的框架同时进入可见区域内，而除该框架以外的其他框架则位于浏览器的可见区域外。需要说明的是，由于所述S101已将所请求网页的整体框架进行了加载，所述浏览器的滚动条为完整的所请求网页的高度，用户可通过所述浏览器的滚动条的滚动来查看所请求网页在可见区域外的另一部分整体框架，但需要注意的是，由于S101仅将首屏内容加载至整体框架的相应位置，因此，此时除装载首屏内容的部分框架之外，其他部分框架内的内容均为空。

可以理解的是，若所请求网页的高度与浏览器的可见区域的高度相等，则所述服务器对所请求网页的内容则无需要切片，即所述服务器返回的首屏内容即为网页的全部内容，所述服务器返回的整体框架则全部用于装载该首屏内容，且所请求网页的整体框架和首屏内容均在浏览器的可见区域内显示，浏览器的滚动条的长度与所请求网页的高度相同，用户无法滚动该滚动条；上述这种情况下可类似分析，在此不赘述。

S103，当可见区域内的框架发生变化时，所述浏览器判断当前可见区域内的框架内是否需要加载新内容，若判断结果为是，转入S104；否则，结束。

浏览器实时监听用户的鼠标，监控可见区域内的框架是否发生变化，若用户鼠标引起浏览器的滚动条滚动，触发可见区域内的框架发生变化时，所述S103判断当前可见区域内的框架内是否需要加载新内容，具体实现中，所述S103判断可见区域内的框架是否全部装载内容，若仅部分框架装载了内容，则判断当前可见区域内的框架内需要加载新内容，否则，判断当前可见区域内的框架内无需加载新内容。例如：首屏内容的高度可大于浏览器可见区域的高度，因此，部分首屏内容可能被隐藏，若可见区域内新进入的框架刚好是装载被隐藏的部分首屏内容的框架，则当前可见区域内的框架内无需加载新内容；若可见区域内新进入的框架除了被隐藏的首屏内容的框架部分外，还包括其他未装载内容的部分框架，则判断当前可见区域内的框架内需要加载新内容。再如：设定可见区域内显示内容为其他切片内容，如为第二屏内容，用户通过鼠标向前滚动浏览器的滚动条，查看首屏内容，则此时新进入可见区域内的框架为已装载了首屏内容的框架，可见区域内的全部框架均已装载了内容，判断当前可见区域内的框架内无需加载新内容；等等，其他情况下可类似分析，在此不赘述。

S104，所述浏览器向所述服务器发送获取请求，请求获取需要加载的新内容。

所述S104当所述S103判断需要加载新内容时，则向所述服务器请求获取需要加载的新内容。

S105，所述浏览器在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。

所述服务器响应所述S104的获取请求，向所述浏览器返回所请求的新内容，所述S105则将所述新内容加载至所述整体框架相应的位置，并在当前可见区域内显示所述新内容。需要说明的是，所述S105的加载过程与所述S101的加载过程类似，在此不赘述。由于服务器向所述浏览器返回的是切片内容，因此，返回的切片内容包含浏览器所请求的新内容，但返回的切片内容的整体高度大于或等于浏览器所请求的新内容的高度，若二者相等，则当前可见区域内显示的所述新内容即为返回的全部切片内容；若返回的切片内容的整体高度大于浏览器所请求的新内容的高度，则当前可见区域内显示的新内容为返回的部分切片内容，而其余部分的切片内容处于可见区域之外而被隐藏，需要滚动浏览器滚动条才能查看，此过程与上述首屏内容加载显示过程类似。

本发明实施例中首次请求时仅返回所请求网页的整体框架和首屏内容，传输和加载的数据量相对较小，从而可提高传输速率，提高加载速率，提高网页首次打开的速率；当可见区域内的框架发生变化时，浏览器再从服务器处获取用户针对该网页所请求的新内容，并进行动态加载和显示，这样有针对性的网页加载，有效地节省了资源流量，提高了网页响应速率。

请参见图9，为本发明的网页加载方法的第二实施例的流程图；所述方法包括：

S201，浏览器向服务器发送网页请求后，所述服务器根据所述网页请求中包含的所请求网页的URL地址，从网络中获取所请求网页，包括：所请求网页的整体框架和全部内容。

S202，所述服务器根据预置的切片方式，对所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，包括首屏内容。

具体实现中，设定网页在切片后形成N（N为整数）个切片内容，其中存储的切片内容依次为：首屏内容、第二屏内容、第三屏内容至第N屏内容。所述预置的切片方式可以由服务器的操作人员根据实际情况预设定，比如：考虑常用浏览器的可见区域高度及常用终端的显示屏幕大小等因素，预设定合适的切片高度；再如：考虑网页中每一组内容的完整度因素，预设定合适的切片高度，等等。所述预置的切片方式还可以由连接至服务器的各浏览器在网页请求时实时上报自身的可见区域的高度，然后预设定合适的切片高度，等等。另外，N为整数，N的具体取值根据所请求网页的整体高度以及切片方式确定。所述S202对所请求网页按从顶部至底部的方向，依次对所请求网页的全部内容进行切片，此处的切片过程与现有技术类似，不同之处在于，所述S202对整个网页的页面进行切片，比如：针对一个静态网页页面，该页面包括排布于整体框架内的所有内容（包括图片和文字内容），所述S202按该页面的顶部至底部的方向，依次对所请求网页的全部内容进行切片并依次存储。

S203，所述服务器将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器。

所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。优选地，所述首屏内容的高度等于所述浏览器的可见区域的高度。此处对首屏内容的高度的设置，是为了在保证首次打开网页速度的前提下，保证浏览器可见区域内的网页内容的完整性和充实性，以提高用户的使用体验。

S204，所述浏览器加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置。

S205，所述浏览器显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内。

本实施例中，所述S204-S205与上一实施例的S101-S102的步骤相同，在此不赘述。

S206，所述浏览器选取位于可见区域外的框架的任一DOM元素作为参照点。

如前述，网页的整体框架由多个DOM元素构成，所述S206则可在浏览器的可见区域外实时选取任一DOM元素作为参照点，用以确定浏览器的可见区域内的框架是否发生变化。

S207，所述浏览器实时监控所选取的DOM元素，判断所选取的DOM元素是否进入可见区域内，若判断结果为是，转入S208；否则，结束。

S208，确定可见区域内的框架发生变化。

S209，所述浏览器判断当前可见区域内的框架内是否需要加载新内容，若判断结果为是，转入S210；否则，结束。

本实施例中，所述S208-S209步骤为所述浏览器监控当前可见区域内的框架是否发生变化的具体步骤。

S210，所述浏览器计算需要加载的新内容的高度。

所述S210的计算过程为：由于浏览器的可见区域的高度是固定的，所述S210可计算需要加载的新内容在可见区域内所占据的比例，比如：新内容占据可见区域的高度的1/4，则所述S210计算得到需要加载的新内容的高度为可见区域的高度的1/4。

S211，所述浏览器将所述新内容的高度与所述服务器返回的依次存储的各切片内容的高度相比较，确定需要获取的切片数量。

如前述，所述浏览器接收所述服务器返回的各切片内容的高度。所述S211将所述S210计算得到的所述新内容的高度与所述服务器返回的各切片内容的高度相比较，依上述例子，新内容的高度为可见区域的高度的1/4，假设为10cm，当前可见区域内显示的内容为首屏内容，则所述S211首先将存储于首屏内容之后的第二屏内容的高度与新内容的高度相比较，若第二屏内容的高度大于等于10cm，则表明第二屏内容已足以满足可见区域内需要加载的新内容的高度，由此确定需要获取的切片数量为1；若第二屏内容的高度小于10cm，为5cm，所述S211用新内容的高度10cm减去第二屏内容的高度5cm，利用余下的5cm继续与第三屏内容的高度相比较，若第三屏内容的高度大于等于5cm，则表明第二屏内容与第三屏内容的总和足以满足可见区域内需要加载的新内容的高度，由此确定需要获取的切片数量为2；其他情况类似分析，在此不赘述。

S212，所述浏览器根据确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

所述S212根据所述S211确定的需要获取的切片数量生成获取请求，获取需要加载的新内容。需要说明的是，所述服务器按顺序依次存储各切片内容，其存储的顺序依次为：首屏内容、第二屏内容、第三屏内容至第N屏内容（N为整数）。所述浏览器也按同样的顺序依次获取各切片内容，所述获取请求中包含需要获取的切片数量，比如：切片数量为2，由于前次所述服务器已返回了首屏内容，则此次所述服务器依次返回第二屏内容和第三屏内容，其他情况下可类似分析，在此不赘述。 

S213，所述浏览器在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。

本实施例中，所述S213与上一实施例的所述S105步骤相同，在此不赘述。

S214，所述浏览器判断所请求网页的全部内容是否加载完成，或者判断所请求网页是否被关闭，若判断结果为是，结束；否则，转入S206。

本发明实施例中首次请求时仅返回所请求网页的整体框架和首屏内容，传输和加载的数据量相对较小，从而可提高传输速率，提高加载速率，提高网页首次打开的速率；当可见区域内的框架发生变化时，浏览器再从服务器处获取用户针对该网页所请求的新内容，并进行动态加载和显示，这样有针对性的网页加载，有效地节省了资源流量，提高了网页响应速率。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）或随机存储记忆体（Random Access Memory，RAM）等。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (12)

1.一种网页加载方法，其特征在于，包括：

浏览器向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；

所述浏览器显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；

当可见区域内的框架发生变化时，所述浏览器判断当前可见区域内的框架内是否需要加载新内容，若判断结果为是，向所述服务器发送获取请求，请求获取需要加载的新内容；

所述浏览器在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容。

2.如权利要求1所述的方法，其特征在于，浏览器向服务器发送网页请求之后，加载所述服务器返回的所请求网页的整体框架之前，还包括：

所述服务器根据所述网页请求中包含的所请求网页的统一资源定位符URL地址，从网络中获取所请求网页，其中包括：所请求网页的整体框架和全部内容；

所述服务器根据预置的切片方式，对所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，其中包括：首屏内容；

所述服务器将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器；

其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。

3.如权利要求2所述的方法，其特征在于，所述浏览器显示所述首屏内容之后，判断当前可见区域内的框架内是否需要加载新内容之前，还包括：

所述浏览器监控可见区域内的框架是否发生变化，包括：

所述浏览器选取位于可见区域外的框架的任一文档对象模型DOM元素作为参照点；

所述浏览器实时监控所选取的DOM元素，若监控到所选取的DOM元素进入可见区域内，则确定可见区域内的框架发生变化；否则，确定可见区域内的框架未发生变化。

4.如权利要求3所述的方法，其特征在于，所述浏览器向所述服务器发送获取请求，请求获取需要加载的新内容，包括：

所述浏览器计算需要加载的新内容的高度，将所述新内容的高度与所述服务器返回的各切片内容的高度相比较，确定需要获取的切片数量；

所述浏览器根据确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

5.一种浏览器，其特征在于，包括：

第一加载模块，用于向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；

显示模块，用于显示所述第一加载模块加载的首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；

判断模块，用于当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容；

内容请求模块，用于当所述判断模块的判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容；

第二加载模块，用于在所述整体框架的相应位置加载所述服务器返回的新内容，并交由所述显示模块在当前可见区域内显示所述新内容。

6.如权利要求5所述的浏览器，其特征在于，还包括：

监控模块，用于监控所述浏览器的可见区域内的框架是否发生变化。

7.如权利要求6所述的浏览器，其特征在于，所述监控模块包括：

选取单元，用于选取位于可见区域外的框架的任一DOM元素作为参照点；

监控单元，用于实时监控所述选取单元选取的DOM元素，若监控到所选取的DOM元素进入可见区域内，则确定可见区域内的框架发生变化；否则，确定可见区域内的框架未发生变化。

8.如权利要求5-7任一项所述的浏览器，其特征在于，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度，所述浏览器接收所述服务器返回的各切片内容的高度；

所述内容获取模块包括：

计算单元，用于计算需要加载的新内容的高度；

比较确定单元，用于将所述计算单元计算得到的所述新内容的高度与所述服务器返回的各切片内容的高度相比较，确定需要获取的切片数量；

请求单元，用于根据所述比较确定单元确定的需要获取的切片数量生成获取请求，向所述服务器请求获取需要加载的新内容。

9.一种终端，其特征在于，包括：如权利要求5-7任一项所述的浏览器。

10.一种服务器，其特征在于，包括：

网页请求响应模块，用于当接收到浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容；

内容请求响应模块，用于当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

11.如权利要求10所述的服务器，其特征在于，所述网页请求响应模块包括：

获取单元，用于当接收到浏览器发送的网页请求后，根据所述网页请求中包含的所请求网页的URL地址，从网络中获取所请求网页，其中包括：所请求网页的整体框架和全部内容；

切片存储单元，用于根据预置的切片方式，对所述获取单元获取的所请求网页的全部内容进行切片并依次存储，所述网页在切片后形成至少一个切片内容，其中包括：首屏内容； 

返回单元，用于将所请求网页的整体框架和首屏内容返回给所述浏览器，并将各切片内容的高度返回给所述浏览器；

其中，所述首屏内容的高度大于或等于所述浏览器的可见区域的高度。

12.一种网页加载系统，包括：服务器和至少一个终端，所述终端包括浏览器，其特征在于：

所述浏览器，用于向服务器发送网页请求并加载所述服务器返回的所请求网页的整体框架，并将所述服务器返回的所请求网页的首屏内容加载至所述整体框架的相应位置；显示所述首屏内容，其中装载全部或部分首屏内容的框架进入所述浏览器的可见区域内；当可见区域内的框架发生变化时，判断当前可见区域内的框架内是否需要加载新内容，并在判断结果为是时，向所述服务器发送获取请求，请求获取需要加载的新内容；在所述整体框架的相应位置加载所述服务器返回的新内容，并在当前可见区域内显示所述新内容；

所述服务器，用于当接收到所述浏览器发送的网页请求后，向所述浏览器返回所请求网页的整体框架和首屏内容；当接收到所述浏览器发送的获取请求后，向所述浏览器返回所请求获取的新内容。

Images