[发明专利]网页渲染的控制方法、控制装置以及计算机可读介质

说明书

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

技术领域

本发明涉及计算机技术领域，具体涉及一种网页渲染的控制方法、控制装置以及计算机可读介质。

背景技术

目前移动互联环境下有许多复杂的业务场景，往往伴随着庞大的数据量支撑，例如商品列表、订单列表、历史记录、通知记录等数据。当浏览器应用检索这些数据时，满足条件的记录形成的数据列表能够达到十万条以上，这样的数据列表显示时，会加大终端的负荷，从而导致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元素的平均高度计算移动量，以及

根据所述移动量从所述渲染容器中移出当前渲染的数据，再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器；以及

重新进行渲染，以实现网页刷新。

可选地，所述根据所述移动量从所述渲染容器中移出当前渲染的数据，再移入历史渲染过的数据或未被渲染过的数据到所述渲染容器包括：

创建第一历史容器和第二历史容器；

当滑动方向向下时，从所述渲染容器中移出所述当前渲染的数据到所述第二历史容器，并从所述第一历史容器移入所述历史渲染过的数据到所述渲染容器；