CN105160020A - 网页渲染的方法 - Google Patents

网页渲染的方法 Download PDF

Info

Publication number
CN105160020A
CN105160020A CN201510631880.7A CN201510631880A CN105160020A CN 105160020 A CN105160020 A CN 105160020A CN 201510631880 A CN201510631880 A CN 201510631880A CN 105160020 A CN105160020 A CN 105160020A
Authority
CN
China
Prior art keywords
node
visual range
webpage
height
page
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.)
Granted
Application number
CN201510631880.7A
Other languages
English (en)
Other versions
CN105160020B (zh
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 CN201510631880.7A priority Critical patent/CN105160020B/zh
Publication of CN105160020A publication Critical patent/CN105160020A/zh
Application granted granted Critical
Publication of CN105160020B publication Critical patent/CN105160020B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

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

Description

网页渲染的方法
技术领域
本发明涉及计算机技术领域，尤其涉及一种网页渲染的方法。
背景技术
在网页中经常会碰到需要处理大量周期性渲染任务，这些任务在每一个循环周期内都要执行。目前，网页周期性渲染的技术方案大致如下：
1.在页面内设置一个定时器，设定好周期时间；
2.在每一个周期内获得需要修改的节点，或提前获得这些节点；
3.使用css技术或者html技术对所述节点进行修改；
4.在经过设定的周期时间后，重复2、3步骤。
其中定时器主要是使用javascript的SetInterval实现；修改页面节点的回调方法写入定时器的回调事件里。
但是目前这种网页渲染的方法存在性能瓶颈：当页面有大量周期性渲染任务时，页面会非常卡顿，造成卡顿的原因是页面所有的节点都要从新渲染，而无论该节点是否在网页页面的可视范围里。因此在每一个任务周期里，要执行的任务较为繁重。
发明内容
有鉴于此，本发明提供一种网页渲染的方法，能够打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量。
为实现上述目的，本发明提供了一种网页渲染的方法。
本发明的网页渲染的方法包括：计算网页中的可视范围；周期性地获取所述网页中所有需要重新渲染的节点的节点列表，将所述节点列表中位于所述可视范围内的所有节点加入到待渲染列表中；以及渲染所述待渲染列表中的节点。
可选地，计算网页中的可视范围包括：计算当前网页状态下滚动条的高度；计算当前网页状态下窗口的高度；所述可视范围为从所述滚动条的高度到所述滚动条的高度加上所述窗口的高度之间的范围。
可选地，所述可视范围能够被扩展为将所述可视范围的上下边界各自加上与所述可视范围内的各节点有关的阈值。
可选地，所述阈值为所述可视范围内的各节点的高度或者为所述可视范围内的所有节点的平均高度。
可选地，所述方法还包括：在周期性地获取所述网页中所有需要重新渲染的节点的节点列表之后，缓存获取的所述节点列表。
可选地，所述方法还包括：设定延迟函数，如果从页面滚动后到下次滚动之前的等待时间小于等于所述延迟函数的设定时间，则重置所述延迟函数以重新计算等待时间；如果从页面滚动后到下次滚动之前的等待时间超过所述延迟函数的设定时间，则重新计算所述网页中的可视范围。
根据本发明的技术方案，通过计算网页中人眼的可视范围，并周期性地选择所有需要渲染节点中位于人眼可视范围内的节点，从而能够避免执行每个周期的渲染任务时对页面内所有的节点都重新渲染，而是只渲染位于人眼可视范围内的节点，从而打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量，提高网页渲染性能；通过根据阈值扩展节点选择的范围，从而能够将部分显示在人眼可视范围内的节点一并进行渲染，从而增强用户的视觉体验效果；通过缓存获取的节点的列表，从而能够在再次遍历列表时，无需再重复的从页面中获取需渲染元素，从而提高性能；通过设定延迟函数，从而能够防止当用户快速的连续滚动页面时频繁的计算网页中人眼的可视范围，避免不必要的计算。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的网页渲染的方法的主要步骤的示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
图1是根据本发明实施例的网页渲染的方法的主要步骤的示意图。
如图1所示，本发明实施例的网页渲染的方法主要包括如下步骤：
步骤S11：计算网页中的可视范围。
对网页进行周期性渲染的过程中，首先向页面中植入一个全局的定时器，以便周期性执行任务。但当页面有大量周期性渲染任务时，页面会非常卡顿，造成卡顿的原因是页面所有的节点都要重新渲染，不管在不在人眼的可视范围里，所以每一个任务周期里，要执行的任务比较繁重。但是由于显示屏物理构造的局限，浏览器在显示页面内容时，多数情况下不能完全的显示整个页面的内容。因此，每次都对整个页面内所有需要渲染的节点进行渲染是不必要的。因此，在本发明中，首先选择位于人眼可视范围的节点进行渲染。
在本发明的具体实施方式中，对人眼可视范围的计算步骤大致如下：使用javascript计算出当前网页状态下滚动条的高度，设为高度A，此时高度A即为页面往下方滚动了多少距离；再计算出当前窗口的高度，设为窗口高度A，此时窗口高度A即为浏览器可显示内容的窗口的大小；则人眼的可视范围即是从高度A到高度A+窗口高度A的那段范围。例如，滚动条向下滚动的高度A为550px，当前窗口的高度A为200px，则人眼的可视范围就是从550px到750px之间的范围。
在计算出页面中的可视范围后，从步骤S12开始处理。
步骤S12：周期性地获取所述网页中所有需要重新渲染的节点的节点列表，将所述节点列表中位于所述可视范围内的所有节点加入到待渲染列表中。计算出页面内人眼的可视范围后，就要选择在人眼的可视范围里出现的需要周期性重新渲染的节点。
首先，需要获取到每个周期内网页中所有需要渲染的节点的节点列表。无论该节点是不是出现在上文提到的人眼的可视范围里，都会被纳入这个节点列表。节点列表然后，遍历节点列表检查其里面的节点哪些出现在了可视范围里，并将这些节点放入待渲染列表。
在周期性地获取页面内所有需要渲染的节点的节点列表后，需要缓存需渲染的节点列表，在第二次遍历获取网页中的所有节点时，对于已缓存的节点，就无需再重复的从页面中获取该节点的高度位置等信息。
另外，在选择所述节点列表中位于人眼可视范围内的节点加入到待渲染列表的过程中，会存在一些特殊情形，如某个节点在人眼可视范围内显示了一部分。在本发明的具体实施方式中，对于这种情形，根据位于人眼可视范围内的节点的属性，设定一阈值(例如，可以是需要渲染的各节点的高度，或者是节点的平均高度)，将人眼的可视范围的上下边界各自加上该设定阈值，以便将放入待渲染列表中的节点的选择范围进行扩展，这样就可以将只显示了一部分的节点一并进行渲染。例如：上述得出的人眼可视范围为550px到750px之间，则在该范围内，某个节点只显示了一半。若该人眼可视范围内的各个节点的平均高度为40px，则在实际选择待渲染列表中的渲染节点时，在高度为510px到790px之间进行选择。将显示了部分的节点纳入需要渲染节点的范畴里。
通过上述描述，就可以将位于可视范围内的节点进行选取。
步骤S13：渲染所述待渲染列表中的节点。关于节点的渲染逻辑等信息，需写明在设定的全局定时器的回调函数(callback，回调函数就是一个通过函数指针调用的函数。如果把函数的指针(地址)作为参数传递给另一个函数，当这个指针被用为调用它所指向的函数时，就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应)中。
上述方法中，网页中的人眼可视范围并不是固定不变的，而是随着页面的滚动发生变化，因此，要在页面滚动(即用户拨动鼠标滚轮)后，重新计算页面中的可视范围。
但是当用户快速的连续波动滚轮时，可视范围也在变化中，这时若连续计算可视范围的意义是不大的，因此，在本发明的具体实施方式中，设定一延迟函数。当页面发生滚动时，启动该延迟函数。如果从页面滚动后到下次滚动之前的等待时间小于等于所述延迟函数的设定时间(该时间可以是在一个自定义的时间范围内，例如可以是300ms)，则重置延迟函数重新计算等待时间；从过从页面滚动后到下次滚动之前的等待时间超过所述延迟函数的设定时间，则重新计算网页中人眼的可视范围。这样可以防止当用户快速的连续拨动滚轮时，频繁的计算页面的可视范围，造成性能浪费。
根据本发明的技术方案，通过计算网页中人眼的可视范围，并周期性地选择所有需要渲染节点中位于人眼可视范围内的节点，从而能够避免执行每个周期的渲染任务时对页面内所有的节点都重新渲染，而是只渲染位于人眼可视范围内的节点，从而打破性能瓶颈，在保证页面流畅的同时，增加页面上可运行的周期渲染任务数量，提高网页渲染性能；通过根据阈值扩展节点选择的范围，从而能够将部分显示在人眼可视范围内的节点一并进行渲染，从而增强用户的视觉体验效果；通过缓存获取的节点的列表，从而能够在再次遍历列表时，无需再重复的从页面中获取需渲染元素，从而提高性能；通过设定延迟函数，从而能够防止当用户快速的连续滚动页面时频繁的计算网页中人眼的可视范围，避免不必要的计算。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (6)

1.一种网页渲染的方法，其特征在于，包括：
计算网页中的可视范围；
周期性地获取所述网页中所有需要重新渲染的节点的节点列表，将所述节点列表中位于所述可视范围内的所有节点加入到待渲染列表中；以及
渲染所述待渲染列表中的节点。
2.根据权利要求1所述的方法，其特征在于，计算网页中的可视范围包括：
计算当前网页状态下滚动条的高度；
计算当前网页状态下窗口的高度；
所述可视范围为从所述滚动条的高度到所述滚动条的高度加上所述窗口的高度之间的范围。
3.根据权利要求2所述的方法，其特征在于，所述可视范围能够被扩展为将所述可视范围的上下边界各自加上与所述可视范围内的各节点有关的阈值。
4.根据权利要求3所述的方法，其特征在于，所述阈值为所述可视范围内的各节点的高度或者为所述可视范围内的所有节点的平均高度。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：在周期性地获取所述网页中所有需要重新渲染的节点的节点列表之后，缓存获取的所述节点列表。
6.根据权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：
设定延迟函数，如果从页面滚动后到下次滚动之前的等待时间小于等于所述延迟函数的设定时间，则重置所述延迟函数以重新计算等待时间；
如果从页面滚动后到下次滚动之前的等待时间超过所述延迟函数的设定时间，则重新计算所述网页中的可视范围。
CN201510631880.7A 2015-09-29 2015-09-29 网页渲染的方法 Active CN105160020B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201510631880.7A CN105160020B (zh) 2015-09-29 2015-09-29 网页渲染的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510631880.7A CN105160020B (zh) 2015-09-29 2015-09-29 网页渲染的方法

Publications (2)

Publication Number Publication Date
CN105160020A true CN105160020A (zh) 2015-12-16
CN105160020B CN105160020B (zh) 2019-01-22

Family

ID=54800876

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201510631880.7A Active CN105160020B (zh) 2015-09-29 2015-09-29 网页渲染的方法

Country Status (1)

Country Link
CN (1) CN105160020B (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677314A (zh) * 2015-12-24 2016-06-15 小米科技有限责任公司 滚动事件的处理方法、装置和设备
CN107229642A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 目标页面的页面资源显示、页面资源加载方法及装置
CN108804164A (zh) * 2018-05-22 2018-11-13 北京五八信息技术有限公司 小程序的数据渲染方法、装置、移动终端及存储介质
CN110020349A (zh) * 2017-09-26 2019-07-16 北京京东尚科信息技术有限公司 页面渲染的方法及装置
CN110110260A (zh) * 2019-04-12 2019-08-09 北京奇艺世纪科技有限公司 一种页面渲染方法、装置及电子设备
CN110413914A (zh) * 2019-07-25 2019-11-05 中南民族大学 基于WebGL的渲染方法、装置、设备及存储介质
CN111338628A (zh) * 2020-03-10 2020-06-26 中国联合网络通信集团有限公司 组件渲染方法及设备
CN111427637A (zh) * 2019-01-10 2020-07-17 北京京东尚科信息技术有限公司 页面渲染方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777069A (zh) * 2010-01-04 2010-07-14 山东浪潮齐鲁软件产业股份有限公司 一种构建支持大数据量高性能浏览器列表组件的方法
US20130007587A1 (en) * 2011-06-28 2013-01-03 Microsoft Corporation Aiding search-result selection using visually branded elements
CN103164401A (zh) * 2011-12-08 2013-06-19 航天信息软件技术有限公司 页面表格显示方法
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN104156488A (zh) * 2014-08-29 2014-11-19 小米科技有限责任公司 网页变化检测方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777069A (zh) * 2010-01-04 2010-07-14 山东浪潮齐鲁软件产业股份有限公司 一种构建支持大数据量高性能浏览器列表组件的方法
US20130007587A1 (en) * 2011-06-28 2013-01-03 Microsoft Corporation Aiding search-result selection using visually branded elements
CN103164401A (zh) * 2011-12-08 2013-06-19 航天信息软件技术有限公司 页面表格显示方法
CN103399866A (zh) * 2013-07-05 2013-11-20 北京小米科技有限责任公司 一种网络页面的渲染方法、装置及设备
CN104156488A (zh) * 2014-08-29 2014-11-19 小米科技有限责任公司 网页变化检测方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
于海涛: ""嵌入式浏览器渲染体系结构的研究与设计"", 《中国优秀硕士学位论文全文数据库》 *

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677314A (zh) * 2015-12-24 2016-06-15 小米科技有限责任公司 滚动事件的处理方法、装置和设备
CN105677314B (zh) * 2015-12-24 2019-06-21 小米科技有限责任公司 滚动事件的处理方法、装置和设备
CN107229642A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 目标页面的页面资源显示、页面资源加载方法及装置
CN110020349A (zh) * 2017-09-26 2019-07-16 北京京东尚科信息技术有限公司 页面渲染的方法及装置
CN110020349B (zh) * 2017-09-26 2021-09-03 北京京东尚科信息技术有限公司 页面渲染的方法及装置
CN108804164A (zh) * 2018-05-22 2018-11-13 北京五八信息技术有限公司 小程序的数据渲染方法、装置、移动终端及存储介质
CN111427637A (zh) * 2019-01-10 2020-07-17 北京京东尚科信息技术有限公司 页面渲染方法和装置
CN111427637B (zh) * 2019-01-10 2023-09-22 北京京东尚科信息技术有限公司 页面渲染方法和装置
CN110110260A (zh) * 2019-04-12 2019-08-09 北京奇艺世纪科技有限公司 一种页面渲染方法、装置及电子设备
CN110110260B (zh) * 2019-04-12 2021-09-10 北京奇艺世纪科技有限公司 一种页面渲染方法、装置及电子设备
CN110413914A (zh) * 2019-07-25 2019-11-05 中南民族大学 基于WebGL的渲染方法、装置、设备及存储介质
CN111338628A (zh) * 2020-03-10 2020-06-26 中国联合网络通信集团有限公司 组件渲染方法及设备

Also Published As

Publication number Publication date
CN105160020B (zh) 2019-01-22

Similar Documents

Publication Publication Date Title
CN105160020A (zh) 网页渲染的方法
JP2018506110A (ja) ウェブページのローディング方法およびシステム
CN101908076A (zh) 页面布局自适应方法及装置
CN102473319A (zh) 动画控制装置、动画控制方法及动画控制程序
CN105094622B (zh) 调节表格列宽的方法及设备
CN103677521A (zh) 消息通知显示方法和终端
CN107066186A (zh) 一种基于Canvas的UI界面字符展示方法及显示设备
CN112835499B (zh) 一种轮播图展示方法、装置、设备及介质
CN106095917B (zh) 一种书签保存、展示方法、装置及浏览器
CN106503041A (zh) 页面布局自适应方法及系统
CN105787036B (zh) 一种控制页面内容更新的方法及装置
CN104243668A (zh) 一种基于安卓操作系统的视频全屏播放方法及装置
CN105373593B (zh) 一种展示网页中目标元素的方法及装置
TWI598835B (zh) 終端裝置及儲存媒體
CN108958612B (zh) 控制页面滑动的方法、控制页面方法、系统、终端设备及介质
WO2016192546A1 (zh) 一种动态曲线的数据点更新方法和设备
CN106874387B (zh) 一种自适应html滚屏展示实时信息的方法
CN113434138A (zh) 信息显示方法、装置和电子设备
CN113204401A (zh) 浏览器渲染方法，终端及存储介质
US10373207B2 (en) Managing advertising associated with dynamically-expanding content
CN106708495B (zh) 一种基于移动终端的页面显示方法及装置
JP2014085793A (ja) 表示装置及び表示制御方法
CN109948084B (zh) 网页信息的展示方法、装置、介质及计算设备
CN112987992B (zh) 一种导航元素展示方法、装置及电子设备
CN105278820B (zh) 显示方法和装置

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant