CN111222302A - 网页渲染的控制方法、控制装置以及计算机可读介质 - Google Patents

网页渲染的控制方法、控制装置以及计算机可读介质 Download PDF

Info

Publication number
CN111222302A
CN111222302A CN201811416778.5A CN201811416778A CN111222302A CN 111222302 A CN111222302 A CN 111222302A CN 201811416778 A CN201811416778 A CN 201811416778A CN 111222302 A CN111222302 A CN 111222302A
Authority
CN
China
Prior art keywords
container
data
rendering
history
dom elements
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
Application number
CN201811416778.5A
Other languages
English (en)
Inventor
冉隆川
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201811416778.5A priority Critical patent/CN111222302A/zh
Publication of CN111222302A publication Critical patent/CN111222302A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本发明实施例提供一种列表呈现的控制方法网页渲染的控制方法,包括:创建数据容器,所述数据容器存储未被渲染过的数据;获取当前终端的屏幕高度;获取根据网页内容解析生成的DOM树;建立所述DOM树中n个可见DOM元素的高度与所述屏幕高度的关系表达式,n为大于或等于1的整数;从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及将所述n个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染。建立n个可见DOM元素的高度和屏幕高度的关系表达式,在网页呈现时仅对这n个有效DOM元素进行渲染,避免对无效DOM元素的渲染,从而减轻了浏览器的绘制负载。本发明实施例同时提供控制装置和计算机可读存储介质。

Description

网页渲染的控制方法、控制装置以及计算机可读介质
技术领域
本发明涉及计算机技术领域,具体涉及一种网页渲染的控制方法、控制装置以及计算机可读介质。
背景技术
目前移动互联环境下有许多复杂的业务场景,往往伴随着庞大的数据量支撑,例如商品列表、订单列表、历史记录、通知记录等数据。当浏览器应用检索这些数据时,满足条件的记录形成的数据列表能够达到十万条以上,这样的数据列表显示时,会加大终端的负荷,从而导致CPU使用率和内存使用率上升,在某些低端的终端上甚至会出现卡屏、闪崩的现象。
目前长列表主流的做法,就是然把数据分段存放在服务器端,用户需要多少就从服务器上获取多少。当获取新的数据获后,就把旧的数据用CSS隐藏,实际上旧的数据仍然还在页面中,只是让人看不而已。由于浏览器每秒60次的绘制机制,把本应不需要的DOM(Document Object Model,文档对象模型)元素也重新绘制了一遍,这样随着无效的DOM元素增多,浏览器的绘制负载增加。
发明内容
有鉴于此,本发明实施例提供一种网页渲染的控制方法及控制装置,建立n个可见DOM元素和屏幕高度的关系式,在实现网页呈现时,只对有效DOM元素进行渲染,从而减轻浏览器的绘制负载。
根据本发明的第一方面,提供一种一种网页渲染的控制方法,包括:
创建数据容器,所述数据容器存储未被渲染过的数据;
获取当前终端的屏幕高度;
获取根据网页内容解析生成的DOM树;
根据所述屏幕高度获得所述DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数;
从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及
将所述n个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染。
可选地,所述n个可见DOM元素的高度之和等于所述屏幕高度。
可选地,还包括:
侦听用户操作;
根据所述用户操作的纵向滑动距离和所述n个可见DOM元素的平均高度计算移动量,以及
根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器;以及
重新进行渲染,以实现网页刷新。
可选地,所述根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器包括:
创建第一历史容器和第二历史容器;
当滑动方向向下时,从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器,并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器;
当滑动方向向上时,从所述渲染容器中移出所述当前渲染的数据到所述第一历史容器,并从所述第二历史容器移入所述历史渲染过的数据到所述渲染容器。
可选地,所述控制方法还包括:当滑动方向向上时,如果所述第二历史容器为空,则从所述数据容器中移出所述未被渲染过的数据到所述渲染容器中。
可选地,还包括:获取用户滑动的开始坐标和结束坐标,根据开始坐标和结束坐标计算滑动距离和滑动方向。
可选地,每个可见DOM元素为一个列表元素。
根据本发明实施例的第二方面,提供一种网页渲染的控制装置,包括:
容器创建单元,用于创建数据容器,所述数据容器存储未被渲染过的数据;
第一高度获取单元,用于获取当前终端的屏幕高度;
第二高度计算单元,用于根据所述屏幕高度获得所述DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数;
数据获取单元,用于从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及
网页渲染单元,用于将每个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染,以实现网页呈现。
可选地,所述n个可见DOM元素的高度之和等于所述屏幕高度。
可选地,还包括:
移动量计算单元,用于用户操作的滑动距离和所述n个可见DOM元素的平均高度计算移动量;
数据移入移出单元,用于根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或从未被渲染过的数据到所述渲染容器;以及
网页重渲染单元,重新进行渲染,以实现网页刷新。
可选地,所述数据移入移出单元包括:
当滑动方向向下时,从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器,并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器;
当滑动方向向上时,从所述渲染容器中移出所述当前渲染的数据到所述第一历史容器,并从所述第二历史容器移入所述历史渲染过的数据到所述渲染容器,并且当滑动方向向上时,如果所述第二历史容器为空,则从所述数据容器中移出从未被渲染过的数据到所述渲染容器中。
根据本发明实施例的第三方面,提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机指令,所述计算机指令被执行时实现上述的控制方法。
根据本发明实施例的第四方面,提供一种控制装置,包括:
存储器,用于存储计算机指令;
处理器,耦合到所述存储器,所述处理器被配置为基于所述存储器存储的计算机指令执行实现上述的控制方法。
本发明一实施例具有以下优点或有益效果:根据屏幕高度获取n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,在网页呈现时仅对这n个有效DOM元素进行渲染,避免对无效DOM元素的渲染,从而减轻了浏览器的绘制负载。
附图说明
通过参照以下附图对本发明实施例的描述,本发明的上述以及其它目的、特征和优点将更为清楚,在附图中:
图1是本发明实施例的网页渲染的控制方法的流程图;
图2是示出了图1所示的控制方法之后附加的若干步骤;
图3和4是应用于本发明实施例的控制方法从渲染容器移入移出数据的操作示意图;
图5是本发明实施例的网页渲染的控制装置的结构图;
图6是本发明另一实施例的网页渲染的控制装置的结构图。
具体实施方式
以下基于实施例对本发明进行描述,但是本发明并不仅仅限于这些实施例。在下文对本发明的细节描述中,详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本发明。为了避免混淆本发明的实质,公知的方法、过程、流程没有详细叙述。另外附图不一定是按比例绘制的。
图1是本发明一实施例的网页渲染的控制方法的流程图。本实施例的控制方法尤其适用于控制浏览器端的列表的初次呈现。当然本实施例不局限于此,本实施例也能用于控制其他类型的DOM元素的呈现。所述控制方法包括以下步骤。
在步骤S101中,创建数据容器。
所述数据容器为在内存中开辟了一个存储空间,当浏览器端接收到新的列表数据,会放入该数据容器中,因此该数据容器存储的是未经渲染过的数据。
在步骤S102中,获取当前终端的屏幕高度,以及获取根据网页内容解析生成的DOM树。
屏幕高度指当前终端的显示屏屏幕的可用高度,一般以像素计。终端上的WEB应用可以基于HTML和JS技术获得显示屏屏幕的可用视窗高度作为本步骤中的屏幕高度。浏览器在显示网页时,首先即是根据网页内容生成DOM树,DOM树中包括若干个DOM元素,每个DOM元素具有自己的属性,例如大小、高度等。
在步骤S103中,根据屏幕高度获取n个可见DOM元素。
在本步骤中将通过网页内容解析的DOM树中的前n个可见DOM元素的高度和显示屏的屏幕高度之间建立关系表达式,使得前n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数。在一些情况下,DOM树的该n个可见DOM元素的高度之和正好等于屏幕高度。在一些情况下,DOM树的n个可见DOM元素的高度之和略大于屏幕高度,在另一些情况下,DOM树的n个可见DOM元素的高度之和略小于屏幕高度。通过设定阈值能够确定DOM树的n个可见DOM元素的高度之和与屏幕高度的关系表达式。即,n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数,设定阈值大于等于0。
在步骤S104中,从数据容器为n个可见DOM元素获取各自的未被渲染过的数据。
在本步骤中,根据n个可见DOM元素的高度,计算出n个可见DOM树各自的数据的数量,从而为数据容器中为n个可见DOM元素获取各自的数据。
在步骤S105中,将n个可见DOM元素各自的数据放在渲染容器中进行渲染,以实现网页呈现。可以理解,该步骤包括生成渲染树以及根据渲染树绘制出每个节点在屏幕中的位置,从而实现网页呈现。
在本实施例中,通过根据屏幕高度获取n个可见DOM元素,从而确定n个可见DOM元素为有效DOM,在渲染DOM树,只渲染该n个有效DOM元素,从而避免了对无效DOM元素的渲染。该控制方法能够减轻浏览器的绘制负载,提高浏览器的解析效率。
上述控制方法可以实现为一个浏览器插件,嵌入在浏览器中。当然该控制方法也可以和现有的浏览器技术结合从而获得一个新的浏览器。
可以理解,当n个可见DOM元素的高度之和略大于屏幕高度时,则第n个可见DOM元素应该有一部分无法显示在屏幕中,需要通过向上滑动看到其余部分;而当n个可见DOM元素的高度之和略小于屏幕高度时,在屏幕的底部有空白区域,还有种理想情况是n个可见DOM元素的高度之和等于屏幕高度。当n个可见DOM元素的高度之和略大于或者略小于屏幕高度时,一种处理方式是成比例地缩小或放大该n个可见DOM元素,使该n个可见DOM元素的高度之和等于屏幕高度。
进一步地,每个可见DOM元素对应于一个列表,每个列表中包含相同数量(至少一条)的数据,从而当根据DOM元素的高度从数据容器中获取数据时,每次从数据容器中获取相同数量的数据。
图2是示出了图1所示的控制方法之后附加的若干步骤。如前所述,图1所示的控制方法可用于列表的初次呈现,而图2则示出了在列表的初次呈现之后,根据用户行为刷新网页的过程。具体包括以下步骤。
在步骤S201中,侦听用户行为。
根据WEB技术能够捕捉到用户在显示屏屏幕的操作。例如滑动、点击。当列表在浏览器页面上时,用户可以针对列表进行上下滑动实现列表上翻和下翻。通过获取滑动开始的坐标和滑动结束的坐标,能够确定滑动滑动方向,即向上滑动还是向下滑动。
在步骤S202中,根据纵向滑动距离和n个可见DOM元素的平均高度计算移动量。
假设滑动开始的坐标为(x1,y1),滑动结束的坐标为(x2,y2),则纵向滑动距离为s=y2-y1,n个可见DOM元素的高度分别为:N1+N2+…Nn,平均高度H=(N1+N2+…Nn)/n,然后通过L=Ls/H得到移动量。x1,y1,x2,y2为大于零的正数,N1,N2,…,Nn为大于零的正数,n为正整数,L为正整数。
在步骤S203中,根据移动量从渲染容器中移出当前渲染的数据以及向渲染容器中移入历史渲染过的数据或未被渲染过的数据到所述渲染容器。
移动量用于表示从渲染容器中移入移出的数据量。在本步骤中,根据移动量进行实际的数据移动。例如,当向下滑动时,从渲染容器中移出当前渲染的数据,然后向渲染容器中移入历史渲染过的数据;当向上滑动时,从渲染容器中移出当前渲染的数据,然后将历史渲染过的数据或未被渲染过的数据移入到渲染容器中。
在步骤S204中,重新进行渲染。
当完成渲染容器的移入移出操作之后,进行重新渲染。该重新渲染的步骤和S105基本相同,重新生成渲染树并根据新的渲染树绘制出每个节点在屏幕中的位置,从而实现网页刷新。
在本实施例中,通过侦听滑动操作,基于纵向滑动距离计算移动量,并根据移动量移出渲染容器中的数据,并将其他数据移入到渲染容器中,再重新渲染,从而实现网页刷新。本实施例的步骤是图1的实施例的附加步骤,当用户滑动列表时,浏览器也只需绘制n个可见DOM元素,从而确保浏览器的绘制负载不会增加。
在一个可选的实施例中,创建历史容器,用于存储经过渲染的历史数据。当用户第一次向下滑动列表时,此时历史容器为空,需要从数据容器中加载新的数据到渲染容器中,同时将相同数量的数据从渲染容器中移动到历史容器中。经过多次向下滑动,若干条数据被从渲染容器中转移到历史容器中。然后,用户向上滑动,则需要从渲染容器中移动数据到历史容器中,再从历史容器中移动数据到渲染容器中。
为了方便操作,可以创建两个历史容器,例如如图3和4中的历史容器T和历史容器B。当第一次向上滑动时,历史容器T和B中不包含任何数据,需要加载的数据未被渲染过,因此需要从数据容器中获取数据到渲染容器301中。经过多次向上滑动,所有的数据容器中的数据均被转移到历史容器T和B中。此时,当向上滑动时,如图3所示,此时渲染容器301先使用shift方法取出不需要的值(对应步骤1),并将这个值push到历史数据T容器中(对应步骤2),历史容器B使用unshift方法取出值(对应步骤3),并将这个值push到渲染容器301中(对应步骤4)。在本例中,每次移入移出一条数据,因此需将上述方法执行L次。当向下滑动时,如图4所示,渲染容器301先使用pop方法将取出不需要的值(对应步骤5),并将这个值按照unshift方法被历史数据B容器接收(对应步骤6),历史数据T容器中使用pop方法取出值(对应步骤7),并将这个值被渲染容器301按照unshift方法接收(对应步骤8)。同理将此方法执行L次。
从上例可知,通过渲染容器和两个历史容器的交互过程完成数据从渲染容器移出移入的步骤。
应该指出的是,虽然上述实施例的DOM元素可为列表,也可以为其他的DOM元素。无论列表元素,还是其他DOM元素,均可以应用本发明实施例的控制方法。
图5是本发明一实施例的网页渲染的控制装置的结构图。所述控制装置包括:第一高度获取单元502和第二高度获取单元502、容器创建单元503、数据获取单元504和网页渲染单元505。
容器创建单元503用于创建数据容器,从服务器端传送过来的数据首先存储到数据容器中,数据容器存储未被渲染过的列表数据。
第一高度获取单元501用于获取当前终端的屏幕高度。所述屏幕高度例如可以采用JS中的方法window.screen.availHeight获取。
第二高度计算单元502用于根据屏幕高度获得DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数。可选地,调整n个可见DOM元素的高度使得n个可见DOM元素的高度之和等于屏幕高度。这种调整,例如可以按DOM树的高度之间的比例关系进行调整,即均匀地调整n个可见DOM元素的高度;再例如,按照预先设定的标准调整n个可见DOM元素的高度。
数据获取单元,用于从数据容器为n个可见DOM元素获取各自的未渲染数据,即根据n个可见DOM元素的高度分别从数据容器获取各自的未渲染数据。
网页渲染单元,用于将每个可见DOM元素各自的数据放在渲染容器中进行渲染,以实现网页呈现。网页渲染单元包括生成渲染树以及利用渲染树进行渲染,从而实现网页呈现。
根据本实施例的控制装置,根据屏幕高度获取n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,从而确定n个可见DOM元素为有效DOM元素,在渲染DOM树,只渲染该n个有效DOM元素,从而避免了对无效DOM元素的渲染。
可选地,所述控制装置还包括:移动量计算单元,用于用户操作的滑动距离和所述n个可见DOM元素的平均高度计算移动量;数据移入移出单元,用于根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或从未被渲染过的数据到所述渲染容器;以及网页重渲染单元,重新进行渲染,以实现网页刷新。
可选地,数据移入移出单元包括:历史容器创建模块,用于创建第一历史容器和第二历史容器;移动实现模块,用于当滑动方向向下时,从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器,并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器;当滑动方向向上时,从所述渲染容器中移出所述当前渲染的数据到所述第一历史容器,并从所述第二历史容器移入所述历史渲染过的数据到所述渲染容器,并且当滑动方向向上时,如果所述第二历史容器为空,则从所述数据容器中移出从未被渲染过的数据到所述渲染容器中。
图6是本发明实施例的网页渲染的控制装置的结构图。图6示出的设备仅仅是一个示例,不应对本发明实施例的功能和使用范围构成任何限制。
参考图6,该装置包括通过总线连接的处理器601、存储器602和输入输出设备603。存储器602包括只读存储器(ROM)和随机访问存储器(RAM),存储器602内存储有执行系统功能所需的各种计算机指令和数据,处理器601从存储器602中读取各种计算机指令以执行各种适当的动作和处理。输入输出设备包括键盘、鼠标等的输入部分;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分;包括硬盘等的存储部分;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分。存储器602还存储有以下的计算机指令以完成本发明实施例的装置规定的操作:创建数据容器,所述数据容器存储未被渲染过的数据;获取当前终端的屏幕高度;获取根据网页内容解析生成的DOM树;根据所述屏幕高度获得所述DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数;从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及将所述n个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染。
相应地,本发明实施例提供一种计算机可读存储介质,该计算机可读存储介质存储有计算机指令,所述计算机指令被执行时实现上述方法所规定的操作。
附图中的流程图、框图图示了本发明实施例的系统、方法、装置的可能的体系框架、功能和操作,流程图和框图上的方框可以代表一个模块、程序段或仅仅是一段代码,所述模块、程序段和代码都是用来实现规定逻辑功能的可执行指令。也应当注意,所述实现规定逻辑功能的可执行指令可以重新组合,从而生成新的模块和程序段。因此附图的方框以及方框顺序只是用来更好的图示实施例的过程和步骤,而不应以此作为对发明本身的限制。
系统的各个模块或单元可以通过硬件、固件或软件实现。软件例如包括采用JAVA、C/C++/C#、SQL等各种编程语言形成的编码程序。虽然在方法以及方法图例中给出本发明实施例的步骤以及步骤的顺序,但是所述步骤实现规定的逻辑功能的可执行指令可以重新组合,从而生成新的步骤。所述步骤的顺序也不应该仅仅局限于所述方法以及方法图例中的步骤顺序,可以根据功能的需要随时进行调整。例如将其特征在于的某些步骤并行或按照相反顺序执行。
根据本发明的系统和方法可以部署在单个或多个服务器上。例如,可以将不同的模块分别部署在不同的服务器上,形成专用服务器。或者,可以在多个服务器上分布式部署相同的功能单元、模块或系统,以减轻负载压力。所述服务器包括但不限于在同一个局域网以及通过Internet连接的多个PC机、PC服务器、刀片机、超级计算机等。
以上所述仅为本发明的优选实施例,并不用于限制本发明,对于本领域技术人员而言,本发明可以有各种改动和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (13)

1.一种网页渲染的控制方法,其特征在于,包括:
创建数据容器,所述数据容器存储未被渲染过的数据;
获取当前终端的屏幕高度;
获取根据网页内容解析生成的DOM树;
根据所述屏幕高度获得所述DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数;
从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及
将所述n个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染。
2.根据权利要求1所述的控制方法,其特征在于,所述n个可见DOM元素的高度之和等于所述屏幕高度。
3.根据权利要求1所述的控制方法,其特征在于,还包括:
侦听用户操作;
根据所述用户操作的纵向滑动距离和所述n个可见DOM元素的平均高度计算移动量,以及
根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或从未被渲染过的数据到所述渲染容器;以及
重新进行渲染,以实现网页刷新。
4.根据权利要求3所述的控制方法,其特征在于,所述根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器包括:
创建第一历史容器和第二历史容器;
当滑动方向向下时,从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器,并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器;
当滑动方向向上时,从所述渲染容器中移出所述当前渲染的数据到所述第一历史容器,并从所述第二历史容器移入所述历史渲染过的数据到所述渲染容器。
5.根据权利要求4所述的控制方法,其特征在于,所述控制方法还包括:当滑动方向向上时,如果所述第二历史容器为空,则从所述数据容器中移出所述未被渲染过的数据到所述渲染容器中。
6.根据权利要求3所述的控制方法,其特征在于,还包括:获取用户滑动的开始坐标和结束坐标,根据开始坐标和结束坐标计算滑动距离和滑动方向。
7.根据权利要求6所述的控制方法,其特征在于,每个可见DOM元素为一个列表元素。
8.一种网页渲染的控制装置,其特征在于,包括:
容器创建单元,用于创建数据容器,所述数据容器存储未被渲染过的数据;
第一高度获取单元,用于获取当前终端的屏幕高度;
第二高度计算单元,用于根据所述屏幕高度获得所述DOM树中n个可见DOM元素,所述n个可见DOM元素的高度之和与所述屏幕高度之差的绝对值小于设定阈值,n为大于或等于1的整数;
数据获取单元,用于从所述数据容器为所述n个可见DOM元素获取各自的未被渲染过的数据;以及
网页渲染单元,用于将每个可见DOM元素各自的未被渲染过的数据放在渲染容器中进行渲染,以实现网页呈现。
9.根据权利要求8所述的控制装置,其特征在于,所述n个可见DOM元素的高度之和等于所述屏幕高度。
10.根据权利要求8所述的控制装置,其特征在于,还包括:
移动量计算单元,用于用户操作的滑动距离和所述n个可见DOM元素的平均高度计算移动量;
数据移入移出单元,用于根据所述移动量从所述渲染容器中移出当前渲染的数据,再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器;以及
网页重渲染单元,重新进行渲染,以实现网页刷新。
11.根据权利要求10所述的控制装置,其特征在于,所述数据移入移出单元包括:
历史容器创建模块,用于创建第一历史容器和第二历史容器;
移动实现模块,用于当滑动方向向下时,从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器,并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器;当滑动方向向上时,从所述渲染容器中移出所述当前渲染的数据到所述第一历史容器,并从所述第二历史容器移入所述历史渲染过的数据到所述渲染容器,并且当滑动方向向上时,如果所述第二历史容器为空,则从所述数据容器中移出所述未被渲染过的数据到所述渲染容器中。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,所述计算机指令被执行时实现如权利要求1至7任一项所述的控制方法。
13.一种控制装置,其特征在于,包括:
存储器,用于存储计算机指令;
处理器,耦合到所述存储器,所述处理器被配置为基于所述存储器存储的计算机指令执行实现如权利要求1至7中任一项所述的控制方法。
CN201811416778.5A 2018-11-26 2018-11-26 网页渲染的控制方法、控制装置以及计算机可读介质 Pending CN111222302A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811416778.5A CN111222302A (zh) 2018-11-26 2018-11-26 网页渲染的控制方法、控制装置以及计算机可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811416778.5A CN111222302A (zh) 2018-11-26 2018-11-26 网页渲染的控制方法、控制装置以及计算机可读介质

Publications (1)

Publication Number Publication Date
CN111222302A true CN111222302A (zh) 2020-06-02

Family

ID=70807797

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811416778.5A Pending CN111222302A (zh) 2018-11-26 2018-11-26 网页渲染的控制方法、控制装置以及计算机可读介质

Country Status (1)

Country Link
CN (1) CN111222302A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114780095A (zh) * 2022-06-21 2022-07-22 统信软件技术有限公司 离屏渲染方法、装置、打印方法、计算设备和存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN113672320B (zh) * 2021-07-19 2023-11-17 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114780095A (zh) * 2022-06-21 2022-07-22 统信软件技术有限公司 离屏渲染方法、装置、打印方法、计算设备和存储介质

Similar Documents

Publication Publication Date Title
CN106570098B (zh) 页面刷新的方法及装置
US10936795B2 (en) Techniques for use of snapshots with browsing transitions
US10339209B2 (en) Webpage display method and device
US8957912B2 (en) Displaying items in an application window
CN110717120A (zh) 一种网页列表显示方法和装置
US20120293543A1 (en) Displaying Items in an Application Window
US9679075B1 (en) Efficient delivery of animated image files
CN112667330A (zh) 一种页面显示方法及计算机设备
CN110675465A (zh) 用于生成图像的方法和装置
US9646362B2 (en) Algorithm for improved zooming in data visualization components
CN111222302A (zh) 网页渲染的控制方法、控制装置以及计算机可读介质
US9501812B2 (en) Map performance by dynamically reducing map detail
US9781065B2 (en) Lightweight application integration for mobile cloud computing
CN115793926A (zh) 列表的渲染方法、装置、电子设备及存储介质
JP6395160B2 (ja) 電子表示装置の文書配置
US10169734B2 (en) Dynamic layout for organizational charts
CN113626113B (zh) 一种页面渲染方法和装置
CN109800039B (zh) 一种用户界面展示方法、装置、电子设备及存储介质
CN112148398B (zh) 图像处理方法和装置
CN117270834A (zh) 地图渲染方法、装置、电子设备和存储介质
CN113282852A (zh) 编辑网页的方法和装置
US20130132893A1 (en) Method and apparatus for displaying data
CN115329720A (zh) 一种文档展示方法、装置、设备及存储介质
CN114371838A (zh) 一种小程序画布渲染方法、装置、设备及存储介质
CN113849164A (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