CN105512227A - 网页数据加载方法及系统 - Google Patents
网页数据加载方法及系统 Download PDFInfo
- Publication number
- CN105512227A CN105512227A CN201510857475.7A CN201510857475A CN105512227A CN 105512227 A CN105512227 A CN 105512227A CN 201510857475 A CN201510857475 A CN 201510857475A CN 105512227 A CN105512227 A CN 105512227A
- Authority
- CN
- China
- Prior art keywords
- data
- block
- judged result
- page block
- property value
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种网页数据加载方法和一种网页数据加载系统，其中，所述网页数据加载方法包括：将所述当前网页页面分成多个页面块；判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。通过本发明的技术方案，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据，同时提升网页浏览效率，从而提升用户体验。
Description
技术领域
本发明涉及计算机技术领域，具体而言，涉及一种网页数据加载方法和一种网页数据加载系统。
背景技术
随着互联网越来越普及，Web(互联网)应用产品越来越多，Web页面技术也越来越成熟，相关的Web页面也越来越多，在Web形态的产品中有众多的页面，比如，数据可能实时变化的页面、页面尺寸比较大的页面等，为了提高Web应用的加载和呈现性能以及提高页面访问速度，需要将Web应用中的页面和数据分块加载和按需呈现。
现有的实现页面分块加载和按需呈现的技术方案，一般通过分页和预先加载机制实现，该方案对于数据能够分页处理的情况非常适用，例如表格数据展现，但是对于页面的分块加载适用性不强，以及对于多页签下数据的按需呈现适用性也不强。
具体地，现有技术方案中，分块加载数据一般是根据需要加载不同页的数据，更多地应用于类似表格的数据展现，有很明确的分页加载数据需求，客户端根据需要加载第N页的数据，考虑到性能问题，也会预先加载第N-1页、第N+1页的数据，以提高页面的展现速度，加载流程如图1所示。
但是，上述技术方案存在以下问题：(1)只有数据能分块分页加载；(2)页面不能按需绑定；(3)页面的展现局限于表格展现。
因此，如何实现网页加载的分块处理且能够按需呈现及绑定数据，同时提升网页浏览效率，从而提升用户体验成为亟待解决的技术问题。
发明内容
本发明正是基于上述技术问题，提出了一种新的技术方案，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据，同时提升网页浏览效率，从而提升用户体验。
有鉴于此，本发明的第一方面，提出了一种网页数据加载方法，包括：将所述当前网页页面分成多个页面块；判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
在该技术方案中，为当前网页页面加载数据时，首先将该当前网页页面划分成多个页面块，进而判断即将加载数据的当前页面块是否在展现范围内，以及在判定为是时，向服务器端请求数据，并在接收到服务器端响应请求反馈的多个数据块后进行展现，以完成当前页面块的数据加载，进一步完成当前网页页面的数据加载，其中，该当前页面块为当前网页页面的多个页面块中的任一页面块，如此，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据。
在上述技术方案中，优选地，所述判断当前页面块是否在展现范围内，具体包括：获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；获取当前浏览窗口的Height属性值和Width属性值；判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
在该技术方案中，如何判断当前页面块是否在展现范围内，以确定是否请求对应的页面内容，具体流程步骤包括：首先，确定当前页面块所属的文档对象模型(DOM，DocumentObjectModel)元素的Top属性值(即设置一个定位元素的上外边距边界与其包含块上边界之间的偏移)和Left属性值(即设置一个定位元素左外边距边界与其包含块左边界之间的偏移)，以及当前浏览窗口(可以是全屏窗口也可以是任一比例的缩小窗口)的Height属性值(高度值)和Width属性值(宽度值)；然后分别判断Top属性值是否大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和，以及Left属性值是否大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和，进而根据上述判断结果确定该当前页面块是否在展现范围内，如此，可以有效地保证对需要展现的页面块进行数据加载，提高网页数据加载的准确性和效率。
在上述任一技术方案中，优选地，根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内，具体包括：当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
在该技术方案中，当判定Top属性值大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和以及判定Left属性值大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和时，判定当前页面块在展现范围内，可以向服务器请求对应的页面内容，以实现页面能够按需呈现及绑定数据。
在上述任一技术方案中，优选地，所述接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载，具体包括：将所述多个数据块按照所述服务器端的反馈顺序进行存储；调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
在该技术方案中，当接收到服务器端反馈的对该当前页面块的多个数据块时，按照反馈的先后顺序依次进行存储，接收完毕后，通过调用与每个数据块对应的回调函数将每个数据块准确地加载到该当前页面的对应位置，完成该当前页面块的数据加载进行展现，如此，可以有效保证数据加载的完整性，避免遗漏以及因加载位置有误而导致页面加载失败，进而确保了网页浏览效率。
在上述任一技术方案中，优选地，所述当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块，具体包括：当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
在该技术方案中，当确定当前页面块在展现范围内时，通过向服务器端发送合并数据请求的方式获取该当前页面块的全部数据，即供服务器端将该合并数据请求进行拆分并分别获取拆分得到的多个数据请求对应的多个数据块，进而由服务器端将获取到的所有多个数据块顺序反馈以供该当前网页页面块进行加载，如此，通过合并数据请求的方式从服务器端获取相应的数据，可以有效地提升网页浏览效率，从而提升用户体验。
根据本发明的第二方面，提出了一种网页数据加载系统，包括：拆分模块，用于将所述当前网页页面分成多个页面块；判断模块，用于判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；数据请求模块，用于当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；加载模块，用于接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
在该技术方案中，为当前网页页面加载数据时，首先将该当前网页页面划分成多个页面块，进而判断即将加载数据的当前页面块是否在展现范围内，以及在判定为是时，向服务器端请求数据，并在接收到服务器端响应请求反馈的多个数据块后进行展现，以完成当前页面块的数据加载，进一步完成当前网页页面的数据加载，其中，该当前页面块为当前网页页面的多个页面块中的任一页面块，如此，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据。
在上述技术方案中，优选地，所述判断模块具体包括：第一获取子模块，用于获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；第二获取子模块，用于获取当前浏览窗口的Height属性值和Width属性值；第一判断子模块，用于判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；第二判断子模块，用于判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；确定子模块，用于根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
在该技术方案中，如何判断当前页面块是否在展现范围内，以确定是否请求对应的页面内容，具体流程步骤包括：首先，确定当前页面块所属的文档对象模型(DOM，DocumentObjectModel)元素的Top属性值(即设置一个定位元素的上外边距边界与其包含块上边界之间的偏移)和Left属性值(即设置一个定位元素左外边距边界与其包含块左边界之间的偏移)，以及当前浏览窗口(可以是全屏窗口也可以是任一比例的缩小窗口)的Height属性值(高度值)和Width属性值(宽度值)；然后分别判断Top属性值是否大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和，以及Left属性值是否大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和，进而根据上述判断结果确定该当前页面块是否在展现范围内，如此，可以有效地保证对需要展现的页面块进行数据加载，提高网页数据加载的准确性和效率。
在上述任一技术方案中，优选地，所述确定子模块具体用于：当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
在该技术方案中，当判定Top属性值大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和以及判定Left属性值大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和时，判定当前页面块在展现范围内，可以向服务器请求对应的页面内容，以实现页面能够按需呈现及绑定数据。
在上述任一技术方案中，优选地，所述加载模块具体包括：存储子模块，用于将所述多个数据块按照所述服务器端的反馈顺序进行存储；调用子模块，用于调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
在该技术方案中，当接收到服务器端反馈的对该当前页面块的多个数据块时，按照反馈的先后顺序依次进行存储，接收完毕后，通过调用与每个数据块对应的回调函数将每个数据块准确地加载到该当前页面的对应位置，完成该当前页面块的数据加载进行展现，如此，可以有效保证数据加载的完整性，避免遗漏以及因加载位置有误而导致页面加载失败，进而确保了网页浏览效率。
在上述任一技术方案中，优选地，所述数据请求模块具体用于：当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
在该技术方案中，当确定当前页面块在展现范围内时，通过向服务器端发送合并数据请求的方式获取该当前页面块的全部数据，即供服务器端将该合并数据请求进行拆分并分别获取拆分得到的多个数据请求对应的多个数据块，进而由服务器端将获取到的所有多个数据块顺序反馈以供该当前网页页面块进行加载，如此，通过合并数据请求的方式从服务器端获取相应的数据，可以有效地提升网页浏览效率，从而提升用户体验。
通过以上技术方案，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据，同时提升网页浏览效率，从而提升用户体验。
附图说明
图1示出了相关技术中的网页分页加载数据的流程示意图；
图2示出了根据本发明的一个实施例的网页数据加载方法的流程示意图；
图3示出了根据本发明的一个实施例的网页数据加载系统的框图；
图4示出了根据本发明的一个实施例的网页分页加载数据的流程示意图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。
图2示出了根据本发明的一个实施例的网页数据加载方法的流程示意图。
如图2所示，根据本发明的一个实施例的网页数据加载方法，包括：步骤202，将所述当前网页页面分成多个页面块；步骤204，判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；步骤206，当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；步骤208，接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
在该技术方案中，为当前网页页面加载数据时，首先将该当前网页页面划分成多个页面块，进而判断即将加载数据的当前页面块是否在展现范围内，以及在判定为是时，向服务器端请求数据，并在接收到服务器端响应请求反馈的多个数据块后进行展现，以完成当前页面块的数据加载，进一步完成当前网页页面的数据加载，其中，该当前页面块为当前网页页面的多个页面块中的任一页面块，如此，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据。
在上述技术方案中，优选地，所述步骤204具体包括：获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；获取当前浏览窗口的Height属性值和Width属性值；判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
在该技术方案中，如何判断当前页面块是否在展现范围内，以确定是否请求对应的页面内容，具体流程步骤包括：首先，确定当前页面块所属的文档对象模型(DOM，DocumentObjectModel)元素的Top属性值(即设置一个定位元素的上外边距边界与其包含块上边界之间的偏移)和Left属性值(即设置一个定位元素左外边距边界与其包含块左边界之间的偏移)，以及当前浏览窗口(可以是全屏窗口也可以是任一比例的缩小窗口)的Height属性值(高度值)和Width属性值(宽度值)；然后分别判断Top属性值是否大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和，以及Left属性值是否大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和，进而根据上述判断结果确定该当前页面块是否在展现范围内，如此，可以有效地保证对需要展现的页面块进行数据加载，提高网页数据加载的准确性和效率。
在上述任一技术方案中，优选地，根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内，具体包括：当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
在该技术方案中，当判定Top属性值大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和以及判定Left属性值大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和时，判定当前页面块在展现范围内，可以向服务器请求对应的页面内容，以实现页面能够按需呈现及绑定数据。
在上述任一技术方案中，优选地，所述步骤208具体包括：将所述多个数据块按照所述服务器端的反馈顺序进行存储；调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
在该技术方案中，当接收到服务器端反馈的对该当前页面块的多个数据块时，按照反馈的先后顺序依次进行存储，接收完毕后，通过调用与每个数据块对应的回调函数将每个数据块准确地加载到该当前页面的对应位置，完成该当前页面块的数据加载进行展现，如此，可以有效保证数据加载的完整性，避免遗漏以及因加载位置有误而导致页面加载失败，进而确保了网页浏览效率。
在上述任一技术方案中，优选地，所述步骤206具体包括：当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
在该技术方案中，当确定当前页面块在展现范围内时，通过向服务器端发送合并数据请求的方式获取该当前页面块的全部数据，即供服务器端将该合并数据请求进行拆分并分别获取拆分得到的多个数据请求对应的多个数据块，进而由服务器端将获取到的所有多个数据块顺序反馈以供该当前网页页面块进行加载，如此，通过合并数据请求的方式从服务器端获取相应的数据，可以有效地提升网页浏览效率，从而提升用户体验。
图3示出了根据本发明的一个实施例的网页数据加载系统的框图。
如图3所示，根据本发明的一个实施例的网页数据加载系统300，包括：拆分模块302、判断模块304、数据请求模块306和加载模块308。
其中，拆分模块302，用于将所述当前网页页面分成多个页面块；判断模块304，用于判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；数据请求模块306，用于当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；加载模块308，用于接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
在该技术方案中，为当前网页页面加载数据时，首先将该当前网页页面划分成多个页面块，进而判断即将加载数据的当前页面块是否在展现范围内，以及在判定为是时，向服务器端请求数据，并在接收到服务器端响应请求反馈的多个数据块后进行展现，以完成当前页面块的数据加载，进一步完成当前网页页面的数据加载，其中，该当前页面块为当前网页页面的多个页面块中的任一页面块，如此，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据。
在上述技术方案中，优选地，所述判断模块304具体包括：第一获取子模块3040、第二获取子模块3042、第一判断子模块3044、第二判断子模块3046和确定子模块3048。
其中，第一获取子模块3040，用于获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；第二获取子模块3042，用于获取当前浏览窗口的Height属性值和Width属性值；第一判断子模块3044，用于判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；第二判断子模块3046，用于判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；确定子模块3048，用于根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
在该技术方案中，如何判断当前页面块是否在展现范围内，以确定是否请求对应的页面内容，具体流程步骤包括：首先，确定当前页面块所属的文档对象模型(DOM，DocumentObjectModel)元素的Top属性值(即设置一个定位元素的上外边距边界与其包含块上边界之间的偏移)和Left属性值(即设置一个定位元素左外边距边界与其包含块左边界之间的偏移)，以及当前浏览窗口(可以是全屏窗口也可以是任一比例的缩小窗口)的Height属性值(高度值)和Width属性值(宽度值)；然后分别判断Top属性值是否大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和，以及Left属性值是否大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和，进而根据上述判断结果确定该当前页面块是否在展现范围内，如此，可以有效地保证对需要展现的页面块进行数据加载，提高网页数据加载的准确性和效率。
在上述任一技术方案中，优选地，所述确定子模块3048具体用于：当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
在该技术方案中，当判定Top属性值大于或等于预设阈值(比如0)且小于或等于该预设阈值与Height属性值之和以及判定Left属性值大于或等于该预设阈值且小于或等于该预设阈值与Width属性值之和时，判定当前页面块在展现范围内，可以向服务器请求对应的页面内容，以实现页面能够按需呈现及绑定数据。
在上述任一技术方案中，优选地，所述加载模块308具体包括：存储子模块3082和调用子模块3084。
其中，存储子模块3082，用于将所述多个数据块按照所述服务器端的反馈顺序进行存储；调用子模块3084，用于调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
在该技术方案中，当接收到服务器端反馈的对该当前页面块的多个数据块时，按照反馈的先后顺序依次进行存储，接收完毕后，通过调用与每个数据块对应的回调函数将每个数据块准确地加载到该当前页面的对应位置，完成该当前页面块的数据加载进行展现，如此，可以有效保证数据加载的完整性，避免遗漏以及因加载位置有误而导致页面加载失败，进而确保了网页浏览效率。
在上述任一技术方案中，优选地，所述数据请求模块306具体用于：当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
在该技术方案中，当确定当前页面块在展现范围内时，通过向服务器端发送合并数据请求的方式获取该当前页面块的全部数据，即供服务器端将该合并数据请求进行拆分并分别获取拆分得到的多个数据请求对应的多个数据块，进而由服务器端将获取到的所有多个数据块顺序反馈以供该当前网页页面块进行加载，如此，通过合并数据请求的方式从服务器端获取相应的数据，可以有效地提升网页浏览效率，从而提升用户体验。
下面结合具体实施例说明本发明的技术方案。
图4示出了根据本发明的一个实施例的网页分页加载数据的流程示意图。
如图4所示，提供了一种实现动态页面数据分块和按需呈现的方法流程，即提供将动态页面的呈现部分与动态数据部分分离，先通过客户端合并请求的方式请求需要的数据，当数据准备好时再通过模板机制，按需地绑定和呈现数据，即将请求的数据加载至页面的对应位置。通过将整个页面(即当前网页页面)成若干区域(即多个页面块)，根据当前区域(即当前页面块)是否在展现范围内再决定是否要加载和绑定数据。由于对页面进行了分块处理，可以实现数据按需呈现和分块加载，另外通过分块处理也可以实现页面的数据延迟加载和预加载。
具体地，将整个页面分成若干区域，页面块1、页面块2…页面块m，判断当前页面块是否在可展现范围之内(具体参见如下算法1)，对于需要展现的页面块(即在可展现范围内的页面块)，通过页面生成引擎，请求对应的页面内容；同时，服务器端对于该页面块需要的数据，以挂件的形式，合理分成若干挂件请求的数据块，数据块1、数据块2…数据块n，进而通过合并请求的形式从服务器端获取根据若干挂件请求的多个数据块，然后客户端维护视图模型进行数据管理，当数据准备好时，通过模板机制，按需绑定数据，即将请求的数据加载至页面的对应位置(具体参见如下算法2)。
算法1：
(1)获取当前页面块所属DOM元素的top与left；
(2)获取当前窗口的width与height；
(3)设置一个阈值(threshold)，默认为0；
(4)若top>＝(0-threshold)且left>＝(0-threshold)且top<＝(height+threshold)且left<＝(width+threshold)，则可判定当前页面块在可展现范围之内；反之，则可判定当前页面块不在可展现范围之内。
算法2：
(1)定义一个合并请求的客户端代理，采用POST形式(HTTP(HyperTextTransferProtocol，超文本传输协议)协议中的一个重要组成部分，一般用来向目的服务器发出更新请求，并附有请求实体)传输数据；
(2)客户端代理对于需要合并请求的服务，输入数据及回调函数，以对象的形式组织好并加入到该客户端代理的队列中；
(3)客户端代理提交该合并请求到服务端；
(4)服务器端截获该合并请求并分发；
(5)当所有分发的请求都已经返回数据后，再返回客户端处理；
(6)客户端根据队列的先后顺序，利用返回的数据执行对应的回调函数。
通过上述技术方案，实现了基于页面的分块加载和按需绑定能够做到页面的分块加载以及页面呈现和数据的按需绑定，同时，通过合并请求等方式，也能够大大提高网站的浏览效率。
以上结合附图详细说明了本发明的技术方案，可以有效地实现网页加载的分块处理且能够按需呈现及绑定数据，同时提升网页浏览效率，从而提升用户体验。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种网页数据加载方法，其特征在于，包括：
将所述当前网页页面分成多个页面块；
判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；
当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；
接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
2.根据权利要求1所述的网页数据加载方法，其特征在于，所述判断当前页面块是否在展现范围内，具体包括：
获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；
获取当前浏览窗口的Height属性值和Width属性值；
判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；
判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；
根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
3.根据权利要求2所述的网页数据加载方法，其特征在于，根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内，具体包括：
当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
4.根据权利要求1至3中任一项所述的网页数据加载方法，其特征在于，所述接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载，具体包括：
将所述多个数据块按照所述服务器端的反馈顺序进行存储；
调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
5.根据权利要求1至3中任一项所述的网页数据加载方法，其特征在于，所述当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块，具体包括：
当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
6.一种网页数据加载系统，其特征在于，包括：
拆分模块，用于将所述当前网页页面分成多个页面块；
判断模块，用于判断当前页面块是否在展现范围内，其中，所述当前页面块为所述多个页面块中的任一页面块；
数据请求模块，用于当判断结果为是时，向服务器端发送数据请求，以获取所述当前页面块所需的多个数据块；
加载模块，用于接收所述服务器端根据所述数据请求反馈的所述多个数据块进行展现，以完成网页数据加载。
7.根据权利要求6所述的网页数据加载系统，其特征在于，所述判断模块具体包括：
第一获取子模块，用于获取所述当前页面块所属的文档对象模型元素的Top属性值和Left属性值；
第二获取子模块，用于获取当前浏览窗口的Height属性值和Width属性值；
第一判断子模块，用于判断所述Top属性值是否大于或等于预设阈值且小于或等于所述预设阈值与所述Height属性值之和，生成第一判断结果；
第二判断子模块，用于判断所述Left属性值是否大于或等于所述预设阈值且小于或等于所述预设阈值与所述Width属性值之和，生成第二判断结果；
确定子模块，用于根据所述第一判断结果和所述第二判断结果确定所述当前页面块是否在展现范围内。
8.根据权利要求7所述的网页数据加载系统，其特征在于，所述确定子模块具体用于：
当所述第一判断结果和所述第二判断结果均为是时，确定所述当前页面块在展现范围内。
9.根据权利要求6至8中任一项所述的网页数据加载系统，其特征在于，所述加载模块具体包括：
存储子模块，用于将所述多个数据块按照所述服务器端的反馈顺序进行存储；
调用子模块，用于调用与所述多个数据块中的每个数据块对应的回调函数，以将所述每个数据块加载至所述当前页面块的对应位置。
10.根据权利要求6至8中任一项所述的网页数据加载系统，其特征在于，所述数据请求模块具体用于：
当所述判断结果为是时，将用于加载所述当前页面块的全部数据的合并数据请求发送至所述服务器端，以供所述服务器端将所述合并数据请求拆分为多个子数据请求并获取与所述多个子数据请求对应的所述多个数据块。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510857475.7A CN105512227A (zh) | 2015-11-30 | 2015-11-30 | 网页数据加载方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510857475.7A CN105512227A (zh) | 2015-11-30 | 2015-11-30 | 网页数据加载方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105512227A true CN105512227A (zh) | 2016-04-20 |
Family
ID=55720209
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510857475.7A Pending CN105512227A (zh) | 2015-11-30 | 2015-11-30 | 网页数据加载方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105512227A (zh) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391163A (zh) * | 2017-04-21 | 2017-11-24 | 阿里巴巴集团控股有限公司 | 移动终端中页面数据加载方法、装置和应用 |
| CN108132942A (zh) * | 2016-11-30 | 2018-06-08 | 北京国双科技有限公司 | 一种页面生成方法及终端 |
| CN108600331A (zh) * | 2018-04-02 | 2018-09-28 | 北京大米科技有限公司 | 交互界面呈现方法、客户端、终端及系统 |
| CN109740081A (zh) * | 2018-12-27 | 2019-05-10 | 新华三技术有限公司合肥分公司 | 页面加载方法及装置 |
| CN109933380A (zh) * | 2019-03-05 | 2019-06-25 | 天津字节跳动科技有限公司 | 在线表格分块加载方法及装置 |
| CN112099771A (zh) * | 2020-11-18 | 2020-12-18 | 浙江口碑网络技术有限公司 | 一种数据处理方法、装置、电子设备以及存储介质 |
| CN114895971A (zh) * | 2022-03-23 | 2022-08-12 | 深圳市酷开网络科技股份有限公司 | 一种数据加载方法、装置、终端设备及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102314486A (zh) * | 2011-08-04 | 2012-01-11 | 百度在线网络技术（北京）有限公司 | 一种用于页面浏览的方法与设备 |
| CN103546505A (zh) * | 2012-07-12 | 2014-01-29 | 百度在线网络技术（北京）有限公司 | 将页面分块按优先级顺序显示的方法、系统及装置 |
| CN103853729A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 页面加载方法及其系统 |
| US20150019956A1 (en) * | 2013-07-12 | 2015-01-15 | Alibaba Group Holding Limited | Method and device for displaying a web page |
| CN102591954B (zh) * | 2011-12-29 | 2015-09-30 | 深圳Tcl新技术有限公司 | 一种浏览器用数据加载方法及装置 |
-
2015
- 2015-11-30 CN CN201510857475.7A patent/CN105512227A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102314486A (zh) * | 2011-08-04 | 2012-01-11 | 百度在线网络技术（北京）有限公司 | 一种用于页面浏览的方法与设备 |
| CN102591954B (zh) * | 2011-12-29 | 2015-09-30 | 深圳Tcl新技术有限公司 | 一种浏览器用数据加载方法及装置 |
| CN103546505A (zh) * | 2012-07-12 | 2014-01-29 | 百度在线网络技术（北京）有限公司 | 将页面分块按优先级顺序显示的方法、系统及装置 |
| CN103853729A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 页面加载方法及其系统 |
| US20150019956A1 (en) * | 2013-07-12 | 2015-01-15 | Alibaba Group Holding Limited | Method and device for displaying a web page |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108132942A (zh) * | 2016-11-30 | 2018-06-08 | 北京国双科技有限公司 | 一种页面生成方法及终端 |
| CN107391163A (zh) * | 2017-04-21 | 2017-11-24 | 阿里巴巴集团控股有限公司 | 移动终端中页面数据加载方法、装置和应用 |
| CN107391163B (zh) * | 2017-04-21 | 2021-01-15 | 创新先进技术有限公司 | 移动终端中页面数据加载方法、装置和应用 |
| CN108600331A (zh) * | 2018-04-02 | 2018-09-28 | 北京大米科技有限公司 | 交互界面呈现方法、客户端、终端及系统 |
| CN108600331B (zh) * | 2018-04-02 | 2021-04-02 | 北京大米科技有限公司 | 交互界面呈现方法、客户端、终端及系统 |
| CN109740081A (zh) * | 2018-12-27 | 2019-05-10 | 新华三技术有限公司合肥分公司 | 页面加载方法及装置 |
| CN109740081B (zh) * | 2018-12-27 | 2021-03-09 | 新华三技术有限公司合肥分公司 | 页面加载方法及装置 |
| CN109933380A (zh) * | 2019-03-05 | 2019-06-25 | 天津字节跳动科技有限公司 | 在线表格分块加载方法及装置 |
| CN109933380B (zh) * | 2019-03-05 | 2023-02-28 | 天津字节跳动科技有限公司 | 在线表格分块加载方法及装置 |
| CN112099771A (zh) * | 2020-11-18 | 2020-12-18 | 浙江口碑网络技术有限公司 | 一种数据处理方法、装置、电子设备以及存储介质 |
| CN114895971A (zh) * | 2022-03-23 | 2022-08-12 | 深圳市酷开网络科技股份有限公司 | 一种数据加载方法、装置、终端设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105512227A (zh) | 网页数据加载方法及系统 | |
| CN103412890A (zh) | 一种网页加载方法和装置 | |
| WO2012174070A2 (en) | Improving access to network content | |
| CN105550338A (zh) | 一种基于HTML5应用缓存的移动Web缓存优化方法 | |
| CN106933965B (zh) | 静态资源请求的方法 | |
| CN103368986A (zh) | 一种信息推荐方法及信息推荐装置 | |
| US10158691B2 (en) | Method and apparatus for providing network resources at intermediary server | |
| CN112036123B (zh) | 基于网页页面的pdf生成方法、装置、设备及存储介质 | |
| CN103383687A (zh) | 一种页面处理方法和装置 | |
| CN109495553B (zh) | 一种网页显示控制方法、系统及反向代理服务器 | |
| US8825856B1 (en) | Usage-based content filtering for bandwidth optimization | |
| CN104980512A (zh) | 一种基于移动应用提供目标对象的方法与设备 | |
| CN106126683B (zh) | 页面显示方法及终端设备 | |
| CN104965690A (zh) | 数据处理方法及装置 | |
| US9104664B1 (en) | Access to search results | |
| CN110083752A (zh) | 房源信息推荐方法、装置、设备及存储介质 | |
| CN106649299B (zh) | 一种网页区块懒加载的方法和装置 | |
| CN106557584A (zh) | 一种网址收藏方法及装置 | |
| CN103297498A (zh) | 基于手机客户端的关联内容推送方法 | |
| CN104283920A (zh) | 一种网络应用路由的方法、服务器、终端和系统 | |
| US9147006B2 (en) | Requesting computer data assets | |
| JP2019511060A5 (zh) | ||
| CN108664493B (zh) | 统计url是否有效的方法、装置、电子设备和存储介质 | |
| CN103379163B (zh) | 一种业务对象的确定方法以及确定装置 | |
| US10095791B2 (en) | Information search method and apparatus |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20160420 |
|
| RJ01 | Rejection of invention patent application after publication |