CN109255089A - 基于Html的节点数据处理方法以及系统 - Google Patents
基于Html的节点数据处理方法以及系统 Download PDFInfo
- Publication number
- CN109255089A CN109255089A CN201810735145.4A CN201810735145A CN109255089A CN 109255089 A CN109255089 A CN 109255089A CN 201810735145 A CN201810735145 A CN 201810735145A CN 109255089 A CN109255089 A CN 109255089A
- Authority
- CN
- China
- Prior art keywords
- html
- data processing
- resource
- processing method
- node data
- 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
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 26
- 230000003068 static effect Effects 0.000 claims abstract description 24
- 238000009877 rendering Methods 0.000 claims abstract description 10
- 238000010586 diagram Methods 0.000 abstract description 8
- 230000004927 fusion Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 4
- 238000005457 optimization Methods 0.000 description 4
- 238000012800 visualization Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 238000000034 method Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 239000012141 concentrate Substances 0.000 description 1
- 235000014510 cooky Nutrition 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种基于Html的节点数据处理方法以及系统，该节点数据处理方法包括：获取基于Html的网页资源；以Javascript语言解析网页资源生成包括DOM对象节点，其中，网页资源包括静态资源和动态资源，静态资源包括Javascript脚本文件；合并Javascript脚本文件；渲染DOM对象后进行网页展现。本发明的上述技术方案，至少能够针对于大数据量的节点图进行实时的数据展示。
Description
技术领域
本发明涉及计算机技术领域，具体来说，涉及一种基于Html的节点数据处理方法以及系统。
背景技术
超融合集群应用中节点图的数据不能进行大数据量的可视化。并且节点的展示指标也有一定的局限性。尽管可以展示，但是性能一般，展示效果不是很集中，页面操作起来也比较卡顿。另外，在请求数据方面可以使用：websocket、轮询、长连接的方式，多用于实时的消息传送，聊天业务中常常用到。
现有的对于超融合集群应用中节点图展示，存在以下问题：渲染时间受到DOM量的影响，以及受到数据量的影响。其中，DOM为文档对象模型，可以根据DOM来快速定位每一个节点所在的位置，也可以根据DOM来控制每个节点的行为。性能损耗是与结构的复杂程度成正比的。性能损耗越大，渲染时间越久，秒级处理的效果越差。出现这样的问题的原因包括：前台的加载时间以及渲染时间是根据静态资源文件的加载时间以及动态资源的数据请求以及渲染的时间来计算。另外DOM结构越复杂，结构嵌套越深，无论是对Javascript的解析以及数据的渲染，都会耗费时间，响应时间越久，性能损耗越大。
发明内容
针对相关技术中上述的问题，本发明提出一种基于Html的节点数据处理方法以及系统，能够针对于大数据量的节点图进行实时的数据展示。
本发明的技术方案是这样实现的：
根据本发明的一个方面，提供了一种基于Html的节点数据处理方法，包括：
获取基于Html的网页资源；
以Javascript语言解析网页资源生成包括DOM对象节点，其中，网页资源包括静态资源和动态资源，静态资源包括Javascript脚本文件；
合并Javascript脚本文件；
渲染DOM对象后进行网页展现。
根据本发明的实施例，节点数据处理方法还包括：合并CSS样式文件，其中，静态资源还包括CSS文件。
根据本发明的实施例，节点数据处理方法还包括：合并CSS样式文件引用的图片，其中，图片为雪碧图。
根据本发明的实施例，进行网页展现包括：将CSS样式文件设置于页面上部，且Javascript脚本文件设置于页面下部。
根据本发明的实施例，对动态资源的请求为延时请求。
根据本发明的实施例，每次请求的数据请求量为单页面数据请求量。
根据本发明的实施例，在完成一次动态资源的请求之后，进行下一次动态资源的请求。
根据本发明的另一方面，提供了一种基于Html的节点数据处理系统，包括：获取模块，用于获取基于Html的网页资源；解析模块，用于以Javascript语言解析网页资源生成包括DOM对象节点，其中，网页资源包括静态资源和动态资源，静态资源包括Javascript脚本文件；第一合并模块，用于合并Javascript脚本文件；显现模块，用于渲染DOM对象后进行网页展现。
根据本发明的实施例，节点数据处理系统还包括：第二合并模块，用于合并CSS样式文件，其中，静态资源还包括CSS文件。
根据本发明的实施例，节点数据处理系统还包括：第三合并模块，用于合并CSS样式文件引用的图片，其中，图片为雪碧图。
本发明的上述技术方案，针对于大数据量的节点图进行实时的数据展示。能够针对大规模超融合集群应用特征数据进行秒级数据更新，达到在1秒之内对当前的数据进行请求以及数据渲染更新，并且在数据的更新上进行每秒的页面绘制以进行展示，达到实时可视化的效果。同时，通过合并Javascript脚本文件能够减少DOM操作，避免重绘以及重排。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是根据本发明实施例的基于Html的节点数据处理方法的流程图；
图2是根据本发明具体实施例的基于Html的节点数据处理方法的总体流程图；
图3是根据本发明具体实施例的基于Html的节点数据处理方法的处理静态资源的流程图；
图4是根据本发明具体实施例的基于Html的节点数据处理方法的处理动态资源请求的流程图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围。
如图1所示，根据本发明实施例，提供了一种基于Html的节点数据处理方法，包括以下步骤：
S102，获取基于Html的网页资源；
S104，以Javascript语言解析网页资源生成包括DOM对象节点，其中，网页资源包括静态资源和动态资源，静态资源包括Javascript脚本文件；
S106，合并Javascript脚本文件；
S108，渲染DOM对象后进行网页展现。
其中，DOM为文档对象模型，可以根据DOM来快速定位每一个节点所在的位置，也可以根据DOM来控制每个节点的行为。
本发明的上述技术方案，针对于大数据量的节点图进行实时的数据展示。能够针对大规模超融合集群应用特征数据进行秒级数据更新，达到在1秒之内对当前的数据进行请求以及数据渲染更新，并且在数据的更新上进行每秒的页面绘制以进行展示，达到实时可视化的效果。同时，通过合并Javascript脚本文件能够减少DOM操作，避免重绘以及重排。
根据本发明的实施例，基于Html的节点数据处理方法还包括：合并CSS样式文件，其中，静态资源还包括CSS文件。
根据本发明的实施例，基于Html的节点数据处理方法还包括：合并CSS样式文件引用的图片，其中，图片为雪碧图。因此，可以进一步减少DOM操作，避免重绘以及重排。
根据本发明的实施例，在步骤S108中进行网页展现可以具体包括：将CSS样式文件设置于页面上部，且Javascript脚本文件设置于页面下部。
在一个实施例中，对动态资源的请求为延时请求。在一个实施例中，每次请求的数据请求量为单页面数据请求量。在一个实施例中，在完成一次动态资源的请求之后，进行下一次动态资源的请求。从而，可以对于数据请求进行秒级优化。
下面结合图2至图4所示，对本发明的基于Html的节点数据处理方法进行进一步说明。
如图2所示，针对大规模超融合集群应用特征数据秒级处理方法，即基于Html的节点数据处理方法根本就是资源的请求以及渲染控制在1秒之内。可以从两个方向进行研究，后台请求返回数据迅速，时间短。前台资源请求快以及返回的数据渲染到页面快。每次数据更新过程总时间在1秒之内。本发明主要针对节点数据显示进行优化，可以从静态资源和动态资源两个方面来进行优化。
参考图3所示，静态资源的优化可以有几个方面来进行，大致可以总结为减少DOM操作，避免重绘以及重排。具体可以包括：1)合并Javascript脚本文件；2)合并CSS样式文件；3)合并CSS引用的图片，使用雪碧(sprite)图；4)CSS设置于页面最上部，Javascript设置于页面最下面；5)减少cookie传输；6)避免使用eval和Function函数。
参考图4所示，对于大规模超融合集群应用特征数据的数据请求秒级优化，可以包括：1)延时请求；2)每次请求的数据量小；3)每一次数据请求是在上一次请求完成之后。
综上所述，借助于本发明的上述技术方案，针对每个节点所需要展示的数据进行实时的动态展示，实现数据可视化的目的，使得数据更加清晰，同时，据节点图的单页请求方案有效的解决了大量节点的展示问题。无论多少节点，但是展示在window区域的节点图是相对固定的，节点图的个数是根据分辨率来计算的。在同一分辨率下，节点图的数量是一致的。进行分页切换的时候，结构基本不变，只是数据的请求区间进行变化，来进行数据渲染。它的性能与数据总量无关，只跟当前页请求的数量有关，也就是请求区间的数据量。解决了大数据量显示的优化问题。
根据本发明的另一个方面，还提供了一种基于Html的节点数据处理系统，包括：
获取模块，用于获取基于Html的网页资源；
解析模块，用于以Javascript语言解析网页资源生成包括DOM对象节点，其中，网页资源包括静态资源和动态资源，静态资源包括Javascript脚本文件；
第一合并模块，用于合并Javascript脚本文件；
显现模块，用于渲染DOM对象后进行网页展现。
根据本发明的实施例，节点数据处理系统还包括：第二合并模块，用于合并CSS样式文件，其中，静态资源还包括CSS文件。
根据本发明的实施例，节点数据处理系统还包括：第三合并模块，用于合并CSS样式文件引用的图片，其中，图片为雪碧图。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
1.一种基于Html的节点数据处理方法，其特征在于，包括：
获取基于Html的网页资源；
以Javascript语言解析网页资源生成包括DOM对象节点，其中，所述网页资源包括静态资源和动态资源，所述静态资源包括Javascript脚本文件；
合并Javascript脚本文件；
渲染DOM对象后进行网页展现。
2.根据权利要求1所述的基于Html的节点数据处理方法，其特征在于，还包括：
合并CSS样式文件，其中，所述静态资源还包括所述CSS文件。
3.根据权利要求2所述的基于Html的节点数据处理方法，其特征在于，还包括：
合并CSS样式文件引用的图片，其中，所述图片为雪碧图。
4.根据权利要求1所述的基于Html的节点数据处理方法，其特征在于，进行网页展现包括：
将CSS样式文件设置于页面上部，且Javascript脚本文件设置于页面下部。
5.根据权利要求1所述的基于Html的节点数据处理方法，其特征在于，其中，对所述动态资源的请求为延时请求。
6.根据权利要求5所述的基于Html的节点数据处理方法，其特征在于，其中，每次请求的数据请求量为单页面数据请求量。
7.根据权利要求5所述的基于Html的节点数据处理方法，其特征在于，其中，在完成一次动态资源的请求之后，进行下一次动态资源的请求。
8.一种基于Html的节点数据处理系统，其特征在于，包括：
获取模块，用于获取基于Html的网页资源；
解析模块，用于以Javascript语言解析网页资源生成包括DOM对象节点，其中，所述网页资源包括静态资源和动态资源，所述静态资源包括Javascript脚本文件；
第一合并模块，用于合并Javascript脚本文件；
显现模块，用于渲染DOM对象后进行网页展现。
9.根据权利要求8所述的基于Html的节点数据处理系统，其特征在于，还包括：
第二合并模块，用于合并CSS样式文件，其中，所述静态资源还包括所述CSS文件。
10.根据权利要求9所述的基于Html的节点数据处理系统，其特征在于，还包括：
第三合并模块，用于合并CSS样式文件引用的图片，其中，所述图片为雪碧图。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810735145.4A CN109255089B (zh) | 2018-07-06 | 2018-07-06 | 基于Html的节点数据处理方法以及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810735145.4A CN109255089B (zh) | 2018-07-06 | 2018-07-06 | 基于Html的节点数据处理方法以及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109255089A true CN109255089A (zh) | 2019-01-22 |
| CN109255089B CN109255089B (zh) | 2022-03-11 |
Family
ID=65052006
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810735145.4A Active CN109255089B (zh) | 2018-07-06 | 2018-07-06 | 基于Html的节点数据处理方法以及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109255089B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110166782A (zh) * | 2019-06-05 | 2019-08-23 | 上海易点时空网络有限公司 | 适用于车载多媒体的图像压缩方法及装置 |
| CN114595410A (zh) * | 2022-03-24 | 2022-06-07 | 中国农业银行股份有限公司 | 一种网页解析方法、系统及电子设备 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101645075A (zh) * | 2009-09-07 | 2010-02-10 | 浪潮集团山东通用软件有限公司 | 一种基于xml和动态脚本文件配置实现的通用数据列表方法 |
| CN102955854A (zh) * | 2012-11-06 | 2013-03-06 | 北京中娱在线网络科技有限公司 | 一种基于html5协议的网页展现方法及装置 |
-
2018
- 2018-07-06 CN CN201810735145.4A patent/CN109255089B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101645075A (zh) * | 2009-09-07 | 2010-02-10 | 浪潮集团山东通用软件有限公司 | 一种基于xml和动态脚本文件配置实现的通用数据列表方法 |
| CN102955854A (zh) * | 2012-11-06 | 2013-03-06 | 北京中娱在线网络科技有限公司 | 一种基于html5协议的网页展现方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 铁拐李FE: "javascript性能提升--脚本合并", 《CSDN》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110166782A (zh) * | 2019-06-05 | 2019-08-23 | 上海易点时空网络有限公司 | 适用于车载多媒体的图像压缩方法及装置 |
| CN114595410A (zh) * | 2022-03-24 | 2022-06-07 | 中国农业银行股份有限公司 | 一种网页解析方法、系统及电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109255089B (zh) | 2022-03-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR100353585B1 (ko) | 표시 제어 정보 생성 방법 및 컴퓨터 | |
| CN102663056B (zh) | 一种图片元素显示方法和装置 | |
| US9866612B2 (en) | Server-based browser system | |
| CN102955854B (zh) | 一种基于html5协议的网页展现方法及装置 | |
| CN110442811A (zh) | 一种页面的处理方法、装置、计算机设备和存储介质 | |
| US11088970B2 (en) | Interactive message display method, apparatus and system, and storage medium | |
| JP2019519831A (ja) | ページの間においてジャンプする方法及び装置 | |
| CN102891765A (zh) | 一种基于SNMP和HTML5实现web网络拓扑的方法 | |
| EP2958025B1 (en) | Output function dividing system | |
| CN101996206A (zh) | 一种呈现网页页面的方法、装置及系统 | |
| CN103412890A (zh) | 一种网页加载方法和装置 | |
| CN103955367A (zh) | 一种生成页面的方法及装置 | |
| CN102737067A (zh) | 输出网页的方法和系统 | |
| CN107038219B (zh) | iOS中加载GIF动画的方法及装置 | |
| CN103440151A (zh) | 一种动态加载Web页面的方法和装置 | |
| CN109255089A (zh) | 基于Html的节点数据处理方法以及系统 | |
| CN100590624C (zh) | 基于soa架构的多维空间数据展现方法 | |
| CN106649299B (zh) | 一种网页区块懒加载的方法和装置 | |
| CN110362766A (zh) | 一种页面显示控制方法及终端 | |
| CN105069092A (zh) | 一种报表展示的方法、系统及移动终端 | |
| CN110502561A (zh) | 一种基于svg技术的船舶灾害标绘方法 | |
| CN114297544A (zh) | 一种远程浏览方法、装置、设备及存储介质 | |
| CN107040818A (zh) | 用于安卓电视的布局层级分析方法及系统 | |
| CN109344217A (zh) | 一种基于JavaScript和SVG的WebGIS实现方法 | |
| CN113760281A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220727 Address after: 100089 building 36, courtyard 8, Dongbeiwang West Road, Haidian District, Beijing Patentee after: Dawning Information Industry (Beijing) Co.,Ltd. Patentee after: DAWNING INFORMATION INDUSTRY Co.,Ltd. Address before: 100193 No. 36 Building, No. 8 Hospital, Wangxi Road, Haidian District, Beijing Patentee before: Dawning Information Industry (Beijing) Co.,Ltd. |
|
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231115 Address after: 030024 No. 19 Gaoxin Street, Taiyuan Xuefu Park, Shanxi Comprehensive Reform Demonstration Zone, Taiyuan City, Shanxi Province Patentee after: Guoke Jinyun Technology Co.,Ltd. Address before: 100089 building 36, courtyard 8, Dongbeiwang West Road, Haidian District, Beijing Patentee before: Dawning Information Industry (Beijing) Co.,Ltd. Patentee before: DAWNING INFORMATION INDUSTRY Co.,Ltd. |