CN106126645A - 一种提高web页面渲染性能的装置 - Google Patents
一种提高web页面渲染性能的装置 Download PDFInfo
- Publication number
- CN106126645A CN106126645A CN201610466252.2A CN201610466252A CN106126645A CN 106126645 A CN106126645 A CN 106126645A CN 201610466252 A CN201610466252 A CN 201610466252A CN 106126645 A CN106126645 A CN 106126645A
- Authority
- CN
- China
- Prior art keywords
- dom
- module
- performance
- renders
- web 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.)
- Pending
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
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)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开一种提高web页面渲染性能的装置,涉及web前端开发领域,在浏览器端用javascript实现了一套DOM接口,其结构主要包括:接口模块、缓冲模块、装载模块和输出模块;其中,缓冲模块通过装载模块获取真实的DOM结构,接口模块接收DOM操作,所有DOM操作通过接口模块流经缓冲模块,通过缓冲模块计算出实际DOM结构需要做的最小变动,最后,通过输出模块提交给浏览器执行,仅仅将需要变化的部分进行实际的浏览器DOM更新。通过本发明够能自动的管理复杂的DOM操作,最大化减少针对DOM的操作,提高web页面渲染性能。
Description
技术领域
本发明涉及web前端开发领域,具体的说是一种提高web页面渲染性能的装置。
背景技术
在web开发中,有一些业务场景,需要实时的将变化的数据体现到UI层面上,这时就需要对DOM进行操作。调用浏览器的接口对页面的DOM进行操作,从性能上来讲非常的昂贵,所以在web开发中,都尽量避免频繁的对DOM进行操作。但是对于一些业务复杂、功能多样的页面,手工对DOM的操作进行管理,通常是极其复杂的。
本发明提出一种提高web页面渲染性能的装置,使用JAVASCRIPT进行开发,够能自动的管理复杂的DOM操作,提高web页面渲染性能。渲染的流程基本包括:首先,计算CSS(层叠样式表)样式,然后,构建渲染树,确定布局:定位坐标和大小,是否换行,各种position,overflow, z-index属性等,然后根据渲染树对页面进行渲染,正式开画。JavaScript是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。
发明内容
本发明针对目前技术发展的需求和不足之处,提供一种提高web页面渲染性能的装置。
本发明所述一种提高web页面渲染性能的装置,解决上述技术问题采用的技术方案如下:所述一种提高web页面渲染性能的装置,在浏览器端用javascript实现了一套DOM接口,其结构主要包括:接口模块、缓冲模块、装载模块和输出模块;其中,缓冲模块通过装载模块获取真实的DOM结构,接口模块接收DOM操作,所有DOM操作通过接口模块流经缓冲模块,通过缓冲模块计算出实际DOM结构需要做的最小变动,再通过输出模块提交给浏览器执行。
优选的,所述接口模块提供一系列操作dom的接口,包括对DOM的创建、删除、修改、追加,整体上覆盖了浏览器源生的DOM接口,使得所有的DOM操作都能够流经缓冲模块。
优选的,所述缓冲模块是该装置的核心,通过装载模块获取真实DOM结构,同时使用javascript来模拟DOM节点;所述缓冲模块中设置有差异比较器,差异比较器对模拟的DOM节点修改前后的差异进行计算,计算出实际DOM结构需要做的最小变动。
优选的,所述缓冲模块中的差异比较器主要负责比较两颗DOM树,以及记录DOM节点之间的差异;所述差异比较器使用一个DOM树算法,只对同级别DOM节点进行比较;每个DOM节点都有一个编号,在深度优先遍历的过程中,若对应的DOM节点有变化,则把相应的变化类别记录下来。
优选的,通过缓存模块的差异比较器,计算出两颗模拟的DOM节点之间的差异;通过输出模块提交给浏览器执行,来修改真实的DOM结构。
优选的,当页面的数据变化时,该装置自动管理页面上所有的dom变化,并且在内存里对这些变化进行统一的标记与识别,最后将最终的汇总结果和更新部分提交给页面渲染。
本发明所述一种提高web页面渲染性能的装置与现有技术相比具有的有益效果是:
本发明在浏览器端使用JAVASCRIPT开发该装置,用javascript构建的DOM树性能比浏览器的DOM要好很多;该装置在浏览器端实现了一套DOM 接口,引入一个缓冲层;进行页面开发时,所有的DOM操作都会通过DOM接口,经过该缓冲层;通过该缓冲层计算实际DOM结构需要做的最小变动,最后,仅仅将需要变化的部分进行实际的浏览器DOM更新;通过本发明够能自动的管理复杂的DOM操作,最大化减少针对DOM的操作,提高web页面渲染性能。
说明书附图
附图1为所述提高web页面渲染性能的装置的构造示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白,以下结合具体实施例,对本发明所述一种提高web页面渲染性能的装置进一步详细说明。
针对一些业务复杂、功能多样的页面,手工对DOM进行操作极其复杂的问题,本发明公开了一种提高web页面渲染性能的装置,在浏览器端用javascript实现了一套DOM 接口,引入一个缓冲层;进行页面开发时,所有的DOM操作都会通过DOM接口,经过该缓冲层。每当有OM操作的请求时,在缓存层内重新构建整个DOM树;然后,分析整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别;最后,仅仅将需要变化的部分进行实际的浏览器DOM更新。该装置够能自动的管理复杂的DOM操作,最大化减少针对DOM的操作,提高web页面渲染性能。
实施例:
本实施例所述一种提高web页面渲染性能的装置,在浏览器端用javascript实现了一套DOM 接口,如附图1所示,该装置的结构主要包括:接口模块、缓冲模块、装载模块和输出模块;其中,缓冲模块通过装载模块获取真实的DOM结构,接口模块接收DOM操作,所有DOM操作通过接口模块流经缓冲模块,通过缓冲模块计算出实际DOM结构需要做的最小变动,再通过输出模块提交给浏览器执行。
所述接口模块提供一系列操作dom的接口,包括对DOM的创建、删除、修改、追加等,整体上覆盖了浏览器源生的DOM接口,使得所有的DOM操作都能够流经缓冲模块。
所述缓冲模块是该装置的核心,其首先通过装载模块获取真实DOM结构,同时使用javascript来模拟DOM节点,模拟的DOM节点包括便签、属性和子节点。所述缓冲模块中设置有差异比较器。在用JS对象表示DOM结构后,从接口模块进来的DOM操作,首先作用在这个JS模拟的DOM节点上,然后,差异比较器对模拟的DOM节点修改前后的差异进行计算,计算出实际DOM结构需要做的最小变动,最后,通过输出模块提交给浏览器执行。
所述缓冲模块中的差异比较器主要负责比较两颗DOM树,以及记录DOM节点之间的差异。由于,计算两棵树之间差异的常规算法复杂度为O(n3),一个文档的DOM结构有上百个节点是很正常的情况,这种复杂度无法应用于实际项目。很少存在跨级别的修改DOM节点,通常是修改节点的属性、调整子节点的顺序、添加子节点等。本实施例中,所述差异比较器使用一个有效的DOM树算法,只对同级别DOM节点进行比较,避免了diff算法的复杂性。对DOM树采取同级比较,节点之间的差异可以归结为4种类型:修改节点属性、修改节点文本内容、替换原有节点、调整子节点,包括移动、删除等。每个DOM节点都有一个编号,在深度优先遍历的过程中,若对应的DOM节点有变化,则把相应的变化类别记录下来。
本实施例所述提高web页面渲染性能的装置,通过缓存模块的差异比较器,计算出两颗模拟的DOM节点之间的差异后,然后通过输出模块提交给浏览器执行,来修改真实的DOM结构。
当页面的数据变化时,本实施例所述提高web页面渲染性能的装置,会自动的管理页面上所有的dom变化,并且在内存里对这些变化进行统一的标记与识别,最后将最终的汇总结果和更新部分提交给页面渲染。该装置能够批量处理DOM结构的更新,在一个事件循环中的两次数据变化会被合并,例如:连续的先将节点内容从A变更为B,然后又从B变更为A,那么缓冲层的自动处理机构会认为UI没有发生任何变化。
上述具体实施方式仅是本发明的具体个案,本发明的专利保护范围包括但不限于上述具体实施方式,任何符合本发明的权利要求书的且任何所属技术领域的普通技术人员对其所做的适当变化或替换,皆应落入本发明的专利保护范围。
Claims (6)
1.一种提高web页面渲染性能的装置,其特征在于, 在浏览器端用javascript实现了一套DOM 接口,其结构主要包括:接口模块、缓冲模块、装载模块和输出模块;其中,缓冲模块通过装载模块获取真实的DOM结构,接口模块接收DOM操作,所有DOM操作通过接口模块流经缓冲模块,通过缓冲模块计算出实际DOM结构需要做的最小变动,再通过输出模块提交给浏览器执行。
2.根据权利要求1所述一种提高web页面渲染性能的装置,其特征在于, 所述接口模块提供一系列操作dom的接口,包括对DOM的创建、删除、修改、追加,整体上覆盖了浏览器源生的DOM接口,使得所有的DOM操作都能够流经缓冲模块。
3.根据权利要求2所述一种提高web页面渲染性能的装置,其特征在于, 所述缓冲模块是该装置的核心,通过装载模块获取真实DOM结构,同时使用javascript来模拟DOM节点;所述缓冲模块中设置有差异比较器,差异比较器对模拟的DOM节点修改前后的差异进行计算,计算出实际DOM结构需要做的最小变动。
4.根据权利要求3所述一种提高web页面渲染性能的装置,其特征在于, 所述缓冲模块中的差异比较器主要负责比较两颗DOM树,以及记录DOM节点之间的差异;所述差异比较器使用一个DOM树算法,只对同级别DOM节点进行比较;每个DOM节点都有一个编号,在深度优先遍历的过程中,若对应的DOM节点有变化,则把相应的变化类别记录下来。
5.根据权利要求4所述一种提高web页面渲染性能的装置,其特征在于, 通过缓存模块的差异比较器,计算出两颗模拟的DOM节点之间的差异;通过输出模块提交给浏览器执行,来修改真实的DOM结构。
6.根据权利要求5所述一种提高web页面渲染性能的装置,其特征在于, 当页面的数据变化时,该装置自动管理页面上所有的dom变化,并且在内存里对这些变化进行统一的标记与识别,最后将最终的汇总结果和更新部分提交给页面渲染。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610466252.2A CN106126645A (zh) | 2016-06-24 | 2016-06-24 | 一种提高web页面渲染性能的装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610466252.2A CN106126645A (zh) | 2016-06-24 | 2016-06-24 | 一种提高web页面渲染性能的装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106126645A true CN106126645A (zh) | 2016-11-16 |
Family
ID=57269006
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610466252.2A Pending CN106126645A (zh) | 2016-06-24 | 2016-06-24 | 一种提高web页面渲染性能的装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106126645A (zh) |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106598574A (zh) * | 2016-11-25 | 2017-04-26 | 腾讯科技(深圳)有限公司 | 页面渲染的方法和装置 |
CN107463372A (zh) * | 2017-07-07 | 2017-12-12 | 北京小米移动软件有限公司 | 一种数据驱动的页面更新方法和装置 |
CN108052539A (zh) * | 2017-11-20 | 2018-05-18 | 烽火通信科技股份有限公司 | 一种浏览器页面切换方法及浏览器 |
CN109739500A (zh) * | 2018-12-14 | 2019-05-10 | 中国四维测绘技术有限公司 | 一种bs架构下的浏览器前端渲染展示方法 |
CN111522608A (zh) * | 2019-02-03 | 2020-08-11 | 北京数聚鑫云信息技术有限公司 | 一种提高模拟操作的执行速率的方法及装置 |
CN112905279A (zh) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | 页面组件渲染方法、装置、电子设备及存储介质 |
CN114547525A (zh) * | 2022-04-26 | 2022-05-27 | 成都瑞华康源科技有限公司 | 一种Web浏览器下的大数据量树形结构渲染系统及方法 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102650999A (zh) * | 2011-02-28 | 2012-08-29 | 株式会社理光 | 一种从网页中抽取对象属性值信息的方法和系统 |
US20120278698A1 (en) * | 2011-04-29 | 2012-11-01 | International Business Machines Corporation | Method and system for processing a webpage |
CN104199915A (zh) * | 2014-08-29 | 2014-12-10 | 小米科技有限责任公司 | 网页变化检测方法及装置 |
-
2016
- 2016-06-24 CN CN201610466252.2A patent/CN106126645A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102650999A (zh) * | 2011-02-28 | 2012-08-29 | 株式会社理光 | 一种从网页中抽取对象属性值信息的方法和系统 |
US20120278698A1 (en) * | 2011-04-29 | 2012-11-01 | International Business Machines Corporation | Method and system for processing a webpage |
CN104199915A (zh) * | 2014-08-29 | 2014-12-10 | 小米科技有限责任公司 | 网页变化检测方法及装置 |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10824691B2 (en) | 2016-11-25 | 2020-11-03 | Tencent Technology (Shenzhen) Company Limited | Page rendering method, device, and data storage medium |
WO2018095261A1 (zh) * | 2016-11-25 | 2018-05-31 | 腾讯科技(深圳)有限公司 | 页面渲染的方法、装置和存储介质 |
CN106598574B (zh) * | 2016-11-25 | 2020-02-18 | 腾讯科技(深圳)有限公司 | 页面渲染的方法和装置 |
CN106598574A (zh) * | 2016-11-25 | 2017-04-26 | 腾讯科技(深圳)有限公司 | 页面渲染的方法和装置 |
CN107463372A (zh) * | 2017-07-07 | 2017-12-12 | 北京小米移动软件有限公司 | 一种数据驱动的页面更新方法和装置 |
CN107463372B (zh) * | 2017-07-07 | 2020-10-13 | 北京小米移动软件有限公司 | 一种数据驱动的页面更新方法和装置 |
CN108052539A (zh) * | 2017-11-20 | 2018-05-18 | 烽火通信科技股份有限公司 | 一种浏览器页面切换方法及浏览器 |
CN109739500A (zh) * | 2018-12-14 | 2019-05-10 | 中国四维测绘技术有限公司 | 一种bs架构下的浏览器前端渲染展示方法 |
CN111522608A (zh) * | 2019-02-03 | 2020-08-11 | 北京数聚鑫云信息技术有限公司 | 一种提高模拟操作的执行速率的方法及装置 |
CN111522608B (zh) * | 2019-02-03 | 2023-09-22 | 北京数聚鑫云信息技术有限公司 | 一种提高模拟操作的执行速率的方法及装置 |
CN112905279A (zh) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | 页面组件渲染方法、装置、电子设备及存储介质 |
CN112905279B (zh) * | 2021-02-03 | 2023-05-12 | 广州虎牙科技有限公司 | 页面组件渲染方法、装置、电子设备及存储介质 |
CN114547525A (zh) * | 2022-04-26 | 2022-05-27 | 成都瑞华康源科技有限公司 | 一种Web浏览器下的大数据量树形结构渲染系统及方法 |
CN114547525B (zh) * | 2022-04-26 | 2022-08-05 | 成都瑞华康源科技有限公司 | 一种Web浏览器下的大数据量树形结构渲染系统及方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106126645A (zh) | 一种提高web页面渲染性能的装置 | |
US11328523B2 (en) | Image composites using a generative neural network | |
US11526655B2 (en) | Machine learning systems and methods for translating captured input images into an interactive demonstration presentation for an envisioned software product | |
Cui et al. | FashionGAN: Display your fashion design using conditional generative adversarial nets | |
CN105786526B (zh) | 一种基于Web的高效流程图绘制系统及方法 | |
CN103678120B (zh) | 基于建模的web应用自动化测试方法 | |
Zhang et al. | Deep detail enhancement for any garment | |
CN107357817B (zh) | 一种面向json的网页模块化设计及其异步加载方法 | |
CN107766532A (zh) | 一种前端Node.js自动化正静态方法 | |
CN105528418B (zh) | 一种设计文档生成方法及装置 | |
US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
AU2005220377B2 (en) | Script generation | |
CN105278946A (zh) | 一种RESTful API可视化方法 | |
KR101588592B1 (ko) | 객체관계 매핑 기반 하이브리드 앱 개발 시스템 및 그 방법 | |
US11675967B2 (en) | Automated front-end code generating method and system for a website | |
CN106325875A (zh) | 一种网页ui界面与网页设计图的对比方法 | |
CN104036059A (zh) | 一种基于图元的工程协同设计方法和系统 | |
CN110264311A (zh) | 一种基于深度学习的商业推广信息精准推荐方法及系统 | |
US20090119577A1 (en) | Method and Arrangement in a Display System | |
CN114661286A (zh) | 一种大屏可视化代码生成方法、系统及存储介质 | |
CN109086040A (zh) | 一种快速生成html代码的方法和系统 | |
WO2023239468A1 (en) | Cross-application componentized document generation | |
CN104516971B (zh) | 一种合并css样式文件中背景图片的方法 | |
US20210397663A1 (en) | Data reduction in a tree data structure for a wireframe | |
CN111949267B (zh) | 一种ui前端生成方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20161116 |