[发明专利]网页渲染的方法

说明书

本发明提供一种网页渲染的方法，能够打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量。本发明的网页渲染的方法包括：计算网页中的可视范围；周期性地获取所述网页中所有需要重新渲染的节点的节点列表，将所述节点列表中位于所述可视范围内的所有节点加入到待渲染列表中；以及渲染所述待渲染列表中的节点。

技术领域

本发明涉及计算机技术领域，尤其涉及一种网页渲染的方法。

背景技术

在网页中经常会碰到需要处理大量周期性渲染任务，这些任务在每一个循环周期内都要执行。目前，网页周期性渲染的技术方案大致如下：

1.在页面内设置一个定时器，设定好周期时间；

2.在每一个周期内获得需要修改的节点，或提前获得这些节点；

3.使用css技术或者html技术对所述节点进行修改；

4.在经过设定的周期时间后，重复2、3步骤。

其中定时器主要是使用javascript的SetInterval实现；修改页面节点的回调方法写入定时器的回调事件里。

但是目前这种网页渲染的方法存在性能瓶颈：当页面有大量周期性渲染任务时，页面会非常卡顿，造成卡顿的原因是页面所有的节点都要从新渲染，而无论该节点是否在网页页面的可视范围里。因此在每一个任务周期里，要执行的任务较为繁重。

发明内容

有鉴于此，本发明提供一种网页渲染的方法，能够打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量。

为实现上述目的，本发明提供了一种网页渲染的方法。

本发明的网页渲染的方法包括：计算网页中的可视范围；周期性地获取所述网页中所有需要重新渲染的节点的节点列表，将所述节点列表中位于所述可视范围内的所有节点加入到待渲染列表中；以及渲染所述待渲染列表中的节点。

可选地，计算网页中的可视范围包括：计算当前网页状态下滚动条的高度；计算当前网页状态下窗口的高度；所述可视范围为从所述滚动条的高度到所述滚动条的高度加上所述窗口的高度之间的范围。

可选地，所述可视范围能够被扩展为将所述可视范围的上下边界各自加上与所述可视范围内的各节点有关的阈值。

可选地，所述阈值为所述可视范围内的各节点的高度或者为所述可视范围内的所有节点的平均高度。

可选地，所述方法还包括：在周期性地获取所述网页中所有需要重新渲染的节点的节点列表之后，缓存获取的所述节点列表。

可选地，所述方法还包括：设定延迟函数，如果从页面滚动后到下次滚动之前的等待时间小于等于所述延迟函数的设定时间，则重置所述延迟函数以重新计算等待时间；如果从页面滚动后到下次滚动之前的等待时间超过所述延迟函数的设定时间，则重新计算所述网页中的可视范围。

根据本发明的技术方案，通过计算网页中人眼的可视范围，并周期性地选择所有需要渲染节点中位于人眼可视范围内的节点，从而能够避免执行每个周期的渲染任务时对页面内所有的节点都重新渲染，而是只渲染位于人眼可视范围内的节点，从而打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量，提高网页渲染性能；通过根据阈值扩展节点选择的范围，从而能够将部分显示在人眼可视范围内的节点一并进行渲染，从而增强用户的视觉体验效果；通过缓存获取的节点的列表，从而能够在再次遍历列表时，无需再重复的从页面中获取需渲染元素，从而提高性能；通过设定延迟函数，从而能够防止当用户快速的连续滚动页面时频繁的计算网页中人眼的可视范围，避免不必要的计算。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：