CN111428167B - 一种页面显示方法和装置 - Google Patents
一种页面显示方法和装置 Download PDFInfo
- Publication number
- CN111428167B CN111428167B CN202010147422.7A CN202010147422A CN111428167B CN 111428167 B CN111428167 B CN 111428167B CN 202010147422 A CN202010147422 A CN 202010147422A CN 111428167 B CN111428167 B CN 111428167B
- Authority
- CN
- China
- Prior art keywords
- dom
- cache pool
- page data
- reusable
- dom node
- 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.)
- Active
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
-
- 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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
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)
- Controls And Circuits For Display Device (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请涉及一种页面显示方法和装置。所述方法包括：在页面滚动时，确定待进入屏幕可视区域的目标页面数据；根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。本申请节省了新建DOM节点所需要花费的时间，提高界面渲染速度，同时也极大地节省了内存空间，避免设备卡顿。
Description
技术领域
本申请涉及前端技术领域，特别是涉及一种页面显示方法、装置、计算机设备和存储介质。
背景技术
随着终端技术的发展，个人计算机等设备已经逐渐成为用户生活中不可分割一部分。设备中可以安装浏览器，以通过浏览器的页面来获取信息。
DOM(Document Object Model，文档对象模型)，可以以一种独立于平台和语言的方式访问和修改一个页面文档的内容和结构，是表示和处理HTML(HyperText MarkupLanguage，超文本标记语言)或XML(Extensible Markup Language，可扩展标记语言)文档的常用方法。浏览器在加载页面的页面数据时，浏览器将页面数据分别添加到DOM节点中，从而可以在屏幕可视区域进行页面数据的显示。
然而，当页面的页面数据比较多的时候，需要在内存中创建大量的DOM节点来承载页面数据，这些DOM节点会持续占用内存空间，在DOM节点不能得到有效释放的情况下，最终会导致内存空间不足，造成卡顿。
发明内容
基于此，有必要针对上述技术问题，提供一种能够减少内存空间占用，避免造成设备卡顿的页面显示方法、装置、计算机设备和存储介质。
一种页面显示方法，所述方法包括：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，所述缓存池包括一级缓存池和二级缓存池，所述根据目标页面数据，判断缓存池中是否存在可复用的DOM节点，包括：
根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点。
在一示例性实施例中，所述根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点，包括：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则确定所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。
在一示例性实施例中，所述判断所述二级缓存池中是否存在可复用的DOM节点包括：
判断所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述二级缓存池中不存在与所述目标页面数据匹配的DOM节点，则从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
在一示例性实施例中，所述根据所述可复用的DOM节点在所述屏幕可视区域显示所述目标页面数据，包括：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点时，将所述目标页面数据替换所述可复用的DOM节点中的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
获取待进入屏幕非可视区域的页面数据对应的DOM节点；
当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一示例性实施例中，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一示例性实施例中，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
将所述目标页面数据填入所述新的DOM节点；
根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，所述页面数据为页面列表数据。
一种页面显示装置，所述装置包括：
目标页面数据确定模块，用于在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
复用DOM节点确定模块，用于根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
目标已经数据显示模块，用于若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数。
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示目标页面数据。一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
上述页面显示方法、装置，针对页面设置有缓存池，其中，缓存池中包括进入屏幕非可视区域的页面数据对应的DOM节点，该缓存池中DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点，在页面滚动时，确定待进入屏幕可视区域的目标页面数据，然后根据目标页面数据确定缓存池中是否存在可复用的DOM节点，若缓存池中存在可复用的DOM节点，则根据可复用的DOM节点在屏幕可视区域显示目标页面数据。本申请可以根据目标页面数据确定缓存池中是否存在可复用的DOM节点，若存在则可以利用可复用的DOM节点显示目标页面数据，其中，可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点，当可复用的DOM节点是布局有效和内容有效的DOM节点时，可以复用整个可复用的DOM节点，当可复用的DOM节点是布局有效和内容效用待定的DOM节点时，也可以根据目标页面数据来确定是复用整个可复用的DOM节点还是只需要替换可复用的DOM节点中的页面数据，可见，本申请如果存在可复用的DOM节点，则无需再新建一个DOM节点，节省了新建DOM节点所需要花费的时间，提高界面渲染速度，同时也极大地节省了内存空间，避免设备卡顿，此外如果可复用的DOM节点是布局有效和内容有效的DOM节点，还可以节省填充页面数据的过程，进一步提高了界面渲染速度。
附图说明
图1为一个实施例中页面显示方法的流程示意图；
图2为另一个实施例中页面显示方法的流程示意图；
图3为一个实施例中根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点步骤的流程示意图；
图4为一个实施例中判断所述二级缓存池中是否存在可复用的DOM节点步骤的流程示意图；
图5A-5I为一个实施例中DOM节点复用的示意图；
图6为一个实施例中页面显示装置的结构框图；
图7为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
在一个实施例中，如图1所示，提供了一种页面显示方法，具体可以包括以下步骤：
步骤102，在页面滚动时，确定待进入屏幕可视区域的目标页面数据。
在具体实现中，本实施例可以应用于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备等设备中，在这些设备上可以安装浏览器来加载页面。
其中，本实施例的页面数据可以为列表数据。具体地，在设备客户端上显示页面时，可以显示为列表页面，具体来说，即可以采用列表形式呈现数据的页面，这种类型的页面可以称为列表页面。比如，显示多个商品清单或者用户名单时，就可以采用列表形式来呈现。本实施例的页面可以为列表页面，在列表页面中包括列表，在列表中可以包括多项列表数据。比如，新闻列表中可以包括多项新闻内容的列表数据，商品列表中可以包括多项商品信息的列表数据。
在初始加载某个页面时，根据屏幕可视区域的屏幕大小创建DOM节点，并在DOM节点中填充相应的页面数据，从而可以在屏幕可视区域显示页面数据。例如，如果屏幕可视区域可以放入5个DOM节点，则可以创建5个DOM节点。
在实际中，页面中可能包含很多页面数据，尤其是列表页面中可以包括很多的列表数据。而受到设备的屏幕可视区域大小的限制，只能显示有限的页面数据，比如只能放入5个DOM节点，也即是只能显示5项页面数据，因此当一个页面中超过5项页面数据时，会存在部分页面数据隐藏在屏幕非可视区域的情况。用户在浏览页面时，可以通过页面的滚动条对页面进行上下滚动，从而浏览页面中不在屏幕可视区域的其他的页面数据。在本实施例中，在页面通过滚动条滚动页面时，将待进入屏幕可视区域的页面数据作为目标页面数据。
步骤104，根据目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点。
在本实施例中，预先针对页面创建缓存池。其中，在缓存池中保存有由于用户滚动页面，从屏幕可视区域进入屏幕非可视区域的页面数据对应的DOM节点。
在本实施例中，将根据目标页面数据确定缓存池中进入屏幕非可视区域的页面数据对应的DOM节点中是否存在可复用的DOM节点。
步骤106，若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示目标页面数据。
在从缓存池存在可复用的DOM节点后，就可以根据可复用的DOM节点在屏幕可视区域显示目标页面数据。其中，由于缓存池中的DOM节点为在先已经创建的DOM节点，因此重复利用缓存池的DOM节点无需重新创建新的DOM节点来承载目标页面数据，从而避免创建大量的DOM节点。
上述页面显示方法针对页面设置有缓存池，其中，缓存池中包括进入屏幕非可视区域的页面数据对应的DOM节点，该缓存池中DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点，在页面滚动时，确定待进入屏幕可视区域的目标页面数据，然后根据目标页面数据确定缓存池中是否存在可复用的DOM节点，若缓存池中存在可复用的DOM节点，则根据可复用的DOM节点在屏幕可视区域显示目标页面数据。
本申请可以根据目标页面数据确定缓存池中是否存在可复用的DOM节点，若存在则可以利用可复用的DOM节点显示目标页面数据，其中，可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点，当可复用的DOM节点是布局有效和内容有效的DOM节点时，可以复用整个可复用的DOM节点，当可复用的DOM节点是布局有效和内容效用待定的DOM节点时，也可以根据目标页面数据来确定是复用整个可复用的DOM节点还是只需要替换可复用的DOM节点中的页面数据，可见，本申请如果存在可复用的DOM节点，则无需再新建一个DOM节点，节省了新建DOM节点所需要花费的时间，提高界面渲染速度，同时也极大地节省了内存空间，避免设备卡顿，此外如果可复用的DOM节点是布局有效和内容有效的DOM节点，还可以节省填充页面数据的过程，进一步提高了界面渲染速度。
在一个实施例中，如图2所示，提供了另一种页面显示方法，包括以下步骤：
步骤202，在页面滚动时，确定待进入屏幕可视区域的目标页面数据。
待进入屏幕可视区域的目标页面数据，可以是从未进入到屏幕可视区域的页面数据，也可以是在先进入过屏幕可视区域但后来又滚出屏幕可视区域的页面数据。
在具体实现中，设备可以检测用户通过触控操作触发的页面滚动指令以滚动页面的滚动条，并根据用户的触控操作确定页面滚动方向和滚动距离，从而确定待进入屏幕可视区域的目标页面数据。例如，当整个页面滚动的滚动距离大于DOM节点距离页面顶部的距离+DOM节点本身的高度，若滚动方向为DOM节点向上，屏幕可视区域最上面的DOM节点滚出屏幕可视区域，则可以确定屏幕可视区域最下面的DOM节点的页面数据对应的下一页面数据作为目标页面数据；当整个页面滚动的距离小于DOM节点距离页面顶部的距离-屏幕可见区域的高度，若滚动方向为DOM节点向下，屏幕可视区域最下面的DOM节点滚出屏幕可视区域，则可以确定屏幕可视区域最上面的DOM节点的页面数据对应的上一页面数据作为目标页面数据。其他的情况下，DOM节点仍然处于屏幕可视区域内，可以暂时不做处理。可见，本实施例可以根据页面滚动的距离和页面滚动的方向，确定待进入屏幕可视区域的目标页面数据。
步骤204，根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点。
在本实施例中，缓存池包括一级缓存池和二级缓存池。所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点。
其中，布局有效是指缓存池里的DOM节点样式跟将来被复用时样式一样，内容有效是指缓存池里的DOM节点中的页面数据跟将来被复用时页面数据相同，内容效用待定是指缓存池里的DOM节点中的页面数据跟将来被复用时页面数据可以相同也可以不同。
本实施例在页面滚动时，会将由于页面滚动而不在屏幕可视区域的页面数据对应的DOM节点进行回收，并保存至一级缓存池或者二级缓存池中备用，后面即将进入屏幕可视区域的目标页面数据，可以在一级缓存池或者二级缓存池获取到可复用的DOM节点。
步骤206，若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示目标页面数据。
如果根据目标页面数据在一级缓存池或者二级缓存池查找到可复用的DOM节点，就可以直接利用可复用的DOM节点进行显示，也可以在目标页面数据替换可复用的DOM节点中原有的页面数据后再进行显示。
具体的，在初始加载页面时针对屏幕可视区域创建有页面容器，用于存储在屏幕可视区域显示的页面数据的DOM节点。假设可复用的DOM节点为一级缓存池中布局有效和内容有效的DOM节点，则可以将该可复用的DOM节点添加到页面的页面容器中进行显示；假设可复用的DOM节点为二级缓存池中布局有效和内容效用待定的DOM节点，则可以将该可复用的DOM节点添加到页面的列表容器中进行显示或者在目标页面数据替换可复用的DOM节点中原有的页面数据后添加到页面的页面容器中进行显示。
在一示例性实施例中，参照图3，所述步骤204具体包括如下步骤：
步骤302，判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则执行步骤304，若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则执行步骤306。
步骤304，将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
步骤306判断所述二级缓存池中是否为空；若所述二级缓存池不为空，则执行步骤308。
步骤308，判断所述二级缓存池中是否存在可复用的DOM节点。
本实施例中，在缓存池查找可复用的DOM节点时，首先在一级缓存池中查找是否存在页面数据与目标页面数据一致的DOM节点，若存在，则可以获取该DOM节点作为可复用的DOM节点，若不存在，则确定二级缓存池是否为空，如果不为空，则继续在二级缓存池中查找可复用的DOM节点。
在一示例性实施例中，参照图4，所述步骤308可以包括如下步骤：
步骤402，判断所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则执行步骤404；若所述二级缓存池中不存在与所述目标列表数据匹配的DOM节点，则执行步骤406。
步骤404，将所述匹配的DOM节点作为可复用的DOM节点。
步骤406，从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
在二级缓存池查找可复用的DOM节点时，首先在二级缓存池中查找是否存在页面数据与目标页面数据一致的DOM节点，若存在，则可以获取该DOM节点作为可复用的DOM节点，若不存在，则从二级缓存池中获取到的DOM节点作为可复用的DOM节点。
在一示例性实施例中，所述步骤204可以包括如下步骤：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点时，将所述目标列表数据替换所述可复用的DOM节点中的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
其中，如果可复用的DOM节点是一级缓存池或者二级缓存池中的匹配的DOM节点，即可复用的DOM节点的页面数据与目标页面数据一致，说明该可复用的DOM节点是原先填充有目标页面数据的DOM节点，因此可以直接将该可复用的DOM节点再次放入页面的页面容器即可在屏幕可视区域显示目标页面数据。
其中，如果可复用的DOM节点是二级缓存池中不匹配的DOM节点，也即是说可复用的DOM节点的页面数据与目标页面数据不一致，由于DOM节点的样式是统一的，因此可以利用目标页面数据替换可复用的DOM节点中的页面数据后，即可将替换为目标页面数据后的可复用的DOM节点放入页面的页面容器，以在屏幕可视区域显示目标页面数据。
在一示例性实施例中，在所述步骤202之后，所述方法还包括：
获取待进入屏幕非可视区域的页面数据对应的DOM节点；
当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
由于屏幕可视区域的大小是有限制的，因此如果目标页面数据要在屏幕可视区域进行显示，就需要将目标页面数据的可复用的DOM节点放入屏幕可视区域的页面容器中，那么在屏幕可视区域中的某一页面数据对应的DOM节点需要移出页面容器，即待进入屏幕非可视区域的页面数据对应的DOM节点。
一级缓存池中允许存放预设数量的DOM节点，比如可以设置为只允许存放2个DOM节点或者只允许存放4个DOM节点，二级缓存池则可以不限制存放DOM节点的数量。当然，一级缓存池的预设数量时可以动态调整大小，但是不宜设置过大。
对于移出页面容器的DOM节点，首先查看一级缓存池中的DOM节点是否达到预设数量，如果没有达到预设数量，比如一级缓存池中只存放了1个DOM节点，则将待进入屏幕非可视区域的页面数据对应的DOM节点放入一级缓存池中；如果达到预设数量，比如一级缓存池中已经存放了2个DOM节点，则需要将一级缓存池中的DOM节点移动到二级缓存池，然后将待进入屏幕非可视区域的页面数据对应的DOM节点保存至一级缓存池中，这样在一级缓存池中依旧只存放了不超过预设数量的DOM节点。
在一示例性实施例中，在所述步骤202之后，所述方法还可以包括如下步骤：
若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
将所述目标页面数据填入所述新的DOM节点；
根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
在实际中，也可能在一级缓存池和二级缓存池中获取不到可复用的DOM节点，则此时可以为目标页面数据创建一个新的DOM节点，由于本实施例中页面数据的样式是统一的，因此可以按照已有的DOM节点创建一个新的DOM节点。在创建新的DOM节点后，就可以将目标页面数据填入到新的DOM节点中，并将新的DOM节点放入页面的页面容器，即可在屏幕可视区域显示目标页面数据。
应用本实施例，对于滚出屏幕可视区域的已创建过的DOM节点进行回收，保存至一级缓存池和二级缓存池中备用，在页面滚动时，可以根据目标页面数据复用一级缓存池和二级缓存池的DOM节点，与不回收DOM节点加载目标页面数据的方式相比，既省去了每次创建DOM节点所需要花费的时间，提高界面渲染速度，让用户无感知地浏览页面的页面数据，同时也极大地节省了内存空间。
本实施例使用两个缓存池的优势在于，当复用一级缓存池里的DOM节点，此时整个DOM节点可以复用(布局跟内容)，大大节省了重绘时间，当复用二级缓存池里的DOM节点时，节点的布局可以复用，内容需要重新填充，但是也可以减少创建新的DOM节点的时间。
为了使本领域技术人员更加深入理解本实施例，下面以页面列表数据为例，采用一个具体的示例进行说明，本实施例可以基于javascript实现，一种复用DOM节点实现页面列表数据显示方法包括如下步骤：
1、创建一个列表容器，该列表容器用于存放屏幕可视区域的DOM节点；假设一个屏幕可视区域刚好能放下5个DOM节点，则在初始加载页面列表数据时需要创建5个DOM节点。假设一个页面总共有10个列表数据，pos0代表位置为0的列表数据，pos1代表位置为1的列表数据，其余的依次类推可以得到一个页面的列表数据pos0，pos1，pos2，pos3，pos4，pos5，pos6，pos7，pos8，pos9。在初始加载页面时，为了在屏幕可视区域显示pos0，pos1，pos2，pos3，pos4，需要将pos0，pos1，pos2，pos3，pos4分别填充至DOM节点，然后将分别填充了pos0，pos1，pos2，pos3，pos4的DOM节点放入到列表容器中。如图5A所示。
2、创建一级缓存池；一级缓存池简称pool1，假设pool1允许存放的DOM节点的预设数量为2个，pool1用于存放布局和内容都有效的DOM节点。
3、创建二级缓存池；二级缓存池简称pool2，pool1用于存放布局有效，内容可能失效的DOM节点。
4、假设屏幕往下滑动时，pos0滚出屏幕可视区域，pos5滚进屏幕可视区域，由于两个缓存池，即pool1和pool2都为空，所以新建一个pos5的DOM节点，pos0的DOM节点直接存放于pool1。那么此时缓存池的存放情况为：【pool1：pos0】。如图5B所示。
5、假设屏幕继续往下滑动时，pos1滚出屏幕可视区域，pos6滚进屏幕可视区域，由于pool1存放的DOM节点数量只有1个，所以新建一个pos6的DOM节点。那么此时缓存池的存放情况为：【pool1：pos0，pos1】。如图5C所示。
6、假设屏幕继续往下滑动，pos2滚出屏幕可视区域，pos7滚进屏幕可视区域，由于pool1里存放的是pos0的DOM节点，pos1的DOM节点，因此pos7不进行复用，又由于pool2为空，因此新建一个pos7的DOM节点；由于此时pool1已满，会移除pool1里的pos0的DOM节点到pool2，pos2的DOM节点存放于pool1。那么此时缓存池的存放情况为：【pool1：pos1，pos2；pool2：pos0】。如图5D所示。
7、假设屏幕继续往下滑动，pos3滚出屏幕可视区域，pos8滚进屏幕可视区域，由于pool1里存放的是pos1的DOM节点，pos2的DOM节点，所以pos8不进行复用，又由于pool2不为空，因此pos8复用pool2里的pos0的DOM节点(内容失效，需重新填充pos8的列表数据)；由于此时pool1已满，会移除pool1里的pos1的DOM节点到pool2，pos3的DOM节点存放于pool1。那么此时缓存池的存放情况为：【pool1：pos2，pos3；pool2：pos1】。如图5E所示。
8、假设屏幕往上滑动，pos3滚进屏幕可视区域，pos8滚出屏幕可视区域，由于pool1里存放pos3的DOM节点，所以pos3直接进行复用；由于此时pool1未满，所以pos8的DOM节点存放在pool1里。那么此时缓存池的存放情况为：【pool1：pos8，pos2；pool2：pos1】。如图5F所示。
9、假设屏幕继续往上滑动，pos2滚进屏幕可视区域，pos7滚出屏幕可视区域，由于pool1里存放pos2的DOM节点，所以pos2直接进行复用；由于此时pool1未满，所以pos7的DOM节点存放在pool1里。那么此时缓存池的存放情况为：【pool1：pos7，pos8；pool2：pos1】。如图5G所示。
10、假设屏幕继续往上滑动，pos1滚进屏幕可视区域，pos6滚出屏幕可视区域，由于pool1存放的是pos7的DOM节点，pos8的DOM节点，所以pos1不进行复用，又由于pool2不为空，因此pos1复用pool2里的pos1的DOM节点(内容未失效，不需要重新填充列表数据)；由于此时pool1已满，会移除pool1里的pos8的DOM节点到pool2，pos6的DOM节点存放于pool1。那么此时缓存池的存放情况为：【pool1：pos6，pos7；pool2：pos8】。如图5H所示。
11、假设屏幕继续往上滑动，pos0滚进屏幕可视区域，pos5滚出屏幕可视区域，由于pool1存放的是pos6的DOM节点，pos7的DOM节点，所以pos0不进行复用，又由于pool2不为空，因此pos1复用pool2里的pos8的DOM节点；由于此时pool1已满，会移除pool1里的pos7的DOM节点到pool2，pos5的DOM节点存放于pool1。那么此时缓存池的存放情况为：【pool1：pos5，pos6；pool2：pos7】。如图5I所示。
通过上述的步骤1-步骤11完成整个页面复用DOM节点的工作，本实施例通过复用DOM节点，可以用较少内存空间和较少时间即可加载显示列表的列表数据。本实施例通过DOM节点的回收复用，使用一级缓存池及二级缓存池来临时存取DOM节点。其中，一级缓存池存放的是布局和内容都有效的节点，使得列表里的列表数据在满足匹配的情况下直接复用这些DOM节点；二级缓存池存放的是布局有效，内容可能失效的节点，使得列表里的列表数据可以快速复用这些DOM节点，不需要创建新的DOM节点，只需要更新列表数据即可。
应该理解的是，虽然图1-4的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1-4中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中，如图6所示，提供了一种页面显示装置，包括：目标页面数据确定模块602、复用DOM节点判断模块604和目标页面数据显示模块606，其中：
目标页面数据确定模块602，用于在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
复用DOM节点判断模块604，用于根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
目标页面数据显示模块606，用于若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，所述复用DOM节点判断模块604，用于：
根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点。
在一示例性实施例中，所述复用DOM节点判断模块604，用于：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则确定所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。
在一示例性实施例中，所述复用DOM节点判断模块604，用于：
确定所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述二级缓存池中不存在与所述目标页面数据匹配的DOM节点，则从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
在一示例性实施例中，所述目标页面数据显示模块606，用于：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中获取与目标页面数据不匹配的DOM节点时，将所述目标页面数据替换所述可复用的DOM节点的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，所述装置还包括：
DOM节点获取模块，用于获取待进入屏幕非可视区域的页面数据对应的DOM节点；
第一DOM节点保存模块，用于当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一示例性实施例中，所述装置还包括：
第二DOM节点保存模块，用于当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一示例性实施例中，所述装置还包括：
DOM节点创建模块，用于若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
目标页面数据填入模块，用于将所述目标页面数据填入所述新的DOM节点；
目标页面数据填入显示模块，用于根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
在一示例性实施例中，所述页面数据为页面列表数据。
关于页面显示装置的具体限定可以参见上文中对于页面显示方法的限定，在此不再赘述。上述页面显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面显示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则确定所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
判断所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述二级缓存池中不存在与所述目标页面数据匹配的DOM节点，则从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中与所述目标页面数据不匹配的DOM节点时，将所述目标页面数据替换所述可复用的DOM节点中的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
获取待进入屏幕非可视区域的页面数据对应的DOM节点；
当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：
若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
将所述目标页面数据填入所述新的DOM节点；
根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则确定所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
判断所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述二级缓存池中不存在与所述目标页面数据匹配的DOM节点，则从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中与所述目标页面数据不匹配的DOM节点时，将所述目标页面数据替换所述可复用的DOM节点中的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
获取待进入屏幕非可视区域的页面数据对应的DOM节点；
当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
在一个实施例中，计算机程序被处理器执行时还实现以下步骤：
若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
将所述目标页面数据填入所述新的DOM节点；
根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-Only Memory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (12)
1.一种页面显示方法，其特征在于，所述方法包括：
在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；其中，所述缓存池包括一级缓存池和二级缓存池，所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；所述根据目标页面数据，判断缓存池中是否存在可复用的DOM节点，包括：根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点；
若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
2.根据权利要求1所述的方法，其特征在于，所述根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点，包括：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则判断所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。
3.根据权利要求2所述的方法，其特征在于，所述判断所述二级缓存池中是否存在可复用的DOM节点包括：
判断所述二级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述二级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述二级缓存池中不存在与所述目标页面数据匹配的DOM节点，则从所述二级缓存池中获取与所述目标页面数据不匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点。
4.根据权利要求3所述的方法，其特征在于，所述根据所述可复用的DOM节点在所述屏幕可视区域显示所述目标页面数据，包括：
当所述可复用的DOM节点是所述一级缓存池或者所述二级缓存池中与所述目标页面数据的匹配的DOM节点时，将所述可复用的DOM节点添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据；
当所述可复用的DOM节点是所述二级缓存池中与所述目标页面数据不匹配的DOM节点时，将所述目标页面数据替换所述可复用的DOM节点中的页面数据后添加至所述页面，以在所述屏幕可视区域显示所述目标页面数据。
5.根据权利要求1所述的方法，其特征在于，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
获取待进入屏幕非可视区域的页面数据对应的DOM节点；
当所述一级缓存池中的DOM节点的数量没有达到预设数量时，将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
6.根据权利要求5所述的方法，其特征在于，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
当所述一级缓存池中的DOM节点的数量达到预设数量时，将所述一级缓存池中的DOM节点移动到所述二级缓存池，并将所述待进入屏幕非可视区域的页面数据对应的DOM节点保存至所述一级缓存池中。
7.根据权利要求1所述的方法，其特征在于，在页面滚动时，确定待进入屏幕可视区域的目标页面数据之后，所述方法还包括：
若所述缓存池中不存在可复用的DOM节点，则创建新的DOM节点；
将所述目标页面数据填入所述新的DOM节点；
根据所述新的DOM节点，在所述屏幕可视区域显示所述目标页面数据。
8.根据权利要求1所述的方法，其特征在于，所述页面数据为页面列表数据。
9.一种页面显示装置，其特征在于，所述装置包括：
目标页面数据确定模块，用于在页面滚动时，确定待进入屏幕可视区域的目标页面数据；
复用DOM节点判断模块，用于根据所述目标页面数据，判断缓存池中是否存在可复用的DOM节点；其中，所述缓存池包括一级缓存池和二级缓存池，所述可复用的DOM节点包括进入屏幕非可视区域的页面数据对应的DOM节点，且所述可复用的DOM节点包括布局有效和内容有效的DOM节点以及布局有效和内容效用待定的DOM节点；所述根据目标页面数据，判断缓存池中是否存在可复用的DOM节点，包括：根据所述目标页面数据，判断所述一级缓存池或者所述二级缓存池中是否存在可复用的DOM节点；其中，所述一级缓存池用于存放布局有效和内容有效的进入屏幕非可视区域的DOM节点，所述二级缓存池用于存放布局有效但内容效用待定的进入屏幕非可视区域的DOM节点；
目标页面数据显示模块，用于若所述缓存池中存在可复用的DOM节点，则根据所述可复用的DOM节点在屏幕可视区域显示所述目标页面数据。
10.根据权利要求9所述的装置，其特征在于，所述复用DOM节点判断模块，用于：
判断所述一级缓存池中是否存在与所述目标页面数据匹配的DOM节点；
若所述一级缓存池中存在与所述目标页面数据匹配的DOM节点，则将所述匹配的DOM节点作为可复用的DOM节点，并判定为所述缓存池中存在可复用的DOM节点；
若所述一级缓存池中不存在与所述目标页面数据匹配的DOM节点，则判断所述二级缓存池中是否为空；
若所述二级缓存池不为空，则判断所述二级缓存池中是否存在可复用的DOM节点。
11.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至8中任一项所述的方法的步骤。
12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010147422.7A CN111428167B (zh) | 2020-03-05 | 2020-03-05 | 一种页面显示方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010147422.7A CN111428167B (zh) | 2020-03-05 | 2020-03-05 | 一种页面显示方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111428167A CN111428167A (zh) | 2020-07-17 |
| CN111428167B true CN111428167B (zh) | 2023-09-08 |
Family
ID=71547453
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010147422.7A Active CN111428167B (zh) | 2020-03-05 | 2020-03-05 | 一种页面显示方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111428167B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114186154A (zh) * | 2021-12-06 | 2022-03-15 | 北京达佳互联信息技术有限公司 | 页面处理方法、装置、电子设备及存储介质 |
| CN114217724B (zh) * | 2022-02-14 | 2022-07-05 | 北京智象信息技术有限公司 | 一种tv应用中长列表数据的展示与交互方法、系统及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103502983A (zh) * | 2011-04-28 | 2014-01-08 | 高通股份有限公司 | 利用基于DOM的同构来备忘缓存Web浏览计算 |
| CN103678486A (zh) * | 2013-10-31 | 2014-03-26 | 北京优视网络有限公司 | 页面排版方法及系统 |
| CN108595652A (zh) * | 2018-04-27 | 2018-09-28 | 平安科技（深圳）有限公司 | 加载dom节点数据的方法、装置、计算机设备及存储介质 |
| CN109408162A (zh) * | 2018-09-03 | 2019-03-01 | 平安普惠企业管理有限公司 | 一种显示页面的方法及终端 |
| CN109471989A (zh) * | 2018-11-01 | 2019-03-15 | 郑州云海信息技术有限公司 | 一种页面请求处理方法及相关装置 |
-
2020
- 2020-03-05 CN CN202010147422.7A patent/CN111428167B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103502983A (zh) * | 2011-04-28 | 2014-01-08 | 高通股份有限公司 | 利用基于DOM的同构来备忘缓存Web浏览计算 |
| CN103678486A (zh) * | 2013-10-31 | 2014-03-26 | 北京优视网络有限公司 | 页面排版方法及系统 |
| CN108595652A (zh) * | 2018-04-27 | 2018-09-28 | 平安科技（深圳）有限公司 | 加载dom节点数据的方法、装置、计算机设备及存储介质 |
| CN109408162A (zh) * | 2018-09-03 | 2019-03-01 | 平安普惠企业管理有限公司 | 一种显示页面的方法及终端 |
| CN109471989A (zh) * | 2018-11-01 | 2019-03-15 | 郑州云海信息技术有限公司 | 一种页面请求处理方法及相关装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111428167A (zh) | 2020-07-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8745515B2 (en) | Presentation of large pages on small displays | |
| US20220156447A1 (en) | Adaptive Column Selection | |
| EP2592574B1 (en) | Improved block zoom on a mobile electronic device | |
| NL2007909C2 (en) | Method and apparatus of scrolling a document displayed in a browser window. | |
| CN103605783B (zh) | 网页显示方法及装置 | |
| EP2423829A1 (en) | Scrollable and re-sizeable formula bar | |
| US9542363B2 (en) | Processing of page-image based document to generate a re-targeted document for different display devices which support different types of user input methods | |
| CN111428167B (zh) | 一种页面显示方法和装置 | |
| KR20060021810A (ko) | 웹 대응 전자 기기 장치, 웹페이지 처리 방법 및 프로그램 | |
| CN104915101A (zh) | 显示弹出式广告的方法和设备 | |
| US20150205454A1 (en) | Systems and methods for displaying preview data | |
| US9465780B2 (en) | User terminal device and scroll method supporting high-speed web scroll of web document | |
| CN105528200B (zh) | 浏览器标签页的显示方法及装置 | |
| CN104866582A (zh) | 显示页面信息的方法和装置 | |
| US20200401761A1 (en) | Responsive user interface system | |
| CN112241498A (zh) | 页面内容显示方法、装置、可读存储介质和计算机设备 | |
| CN107533568A (zh) | 确定应用缩放等级的系统和方法 | |
| US20120005626A1 (en) | Method and system for performing a web search via a client-side module | |
| US9612734B1 (en) | Random access browser scrolling for large pages | |
| CN110413931B (zh) | 数据加载方法、装置、计算机设备和存储介质 | |
| CN117194828B (zh) | React中Table滚动分页方法、装置及电子设备 | |
| CN109992580A (zh) | 列表数据的处理方法及装置、存储介质、计算机设备 | |
| CN113742612A (zh) | 一种数据渲染方法、装置、电子设备及存储介质 | |
| US20170270218A1 (en) | Mapping of Defined Regions Within a Webpage | |
| CN111814424A (zh) | 数据显示方法、装置、设备及计算机可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20230524 Address after: Room 101, No. 227 Gaotang Road, Tianhe District, Guangzhou City, Guangdong Province, 510665 (Location: Room 601) Applicant after: Yamei Zhilian Data Technology Co.,Ltd. Address before: Room 201, No.1 Hanjing Road, Tianhe District, Guangzhou City, Guangdong Province Applicant before: GUANGZHOU YAME INFORMATION TECHNOLOGY Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |