计算机科学 ›› 2021, Vol. 48 ›› Issue (3): 119-123.doi: 10.11896/jsjkx.200600038

• 数据库&大数据&数据科学 • 上一篇    下一篇

基于Web的数据可视化图表渲染优化方法

鄂海红, 张田宇, 宋美娜   

  1. 北京邮电大学计算机学院 北京100876
  • 收稿日期:2020-06-04 修回日期:2020-08-15 出版日期:2021-03-15 发布日期:2021-03-05
  • 通讯作者: 张田宇(zhangtianyu0821@bupt.edu.cn)
  • 作者简介:ehaihong@bupt.edu.cn
  • 基金资助:
    国家重点研发计划(2018YFB1403501)

Web-based Data Visualization Chart Rendering Optimization Method

E Hai-hong, ZHANG Tian-yu, SONG Mei-na   

  1. School of Computing,Beijing University of Posts and Telecommunications,Beijing 100876,China
  • Received:2020-06-04 Revised:2020-08-15 Online:2021-03-15 Published:2021-03-05
  • About author:E Hai-hong,born in 1982,Ph.D,asso-ciate professor,is a member of China Computer Federation.Her main research interests include big data platform,cloud computing and microservice architecture.
    ZHANG Tian-yu,born in 1996,postgraduate.Her main research interests include big data platform and data visua-lization.
  • Supported by:
    National Key R&D Program of China (2018YFB1403501).

摘要: 在数据可视化场景中,Web页面作为数据可视化图表的承载主体,其性能的好坏直接影响可视化图表的加载速度和渲染效果,而目前基于Web技术的优化手段不能很好地缓解图表获取大规模复杂数据并进行渲染重绘所造成的网络数据传输压力。针对上述问题,提出了一种基于Web的数据可视化图表渲染方法。首先,将缓存机制与增量更新算法相融合,并从图表样式及交互配置信息和图表绑定数据两个方面对HTTP请求响应体进行深度优化。然后,通过减小HTTP请求响应体的大小来降低网络数据传输量,缩短数据资源的下载时间,进而提升图表加载速度,缩短页面渲染时长。最后,针对该方法进行充分的对比实验,实验结果表明,单个图表HTTP的总响应时间由75 ms缩短至28 ms,Web页面展示多个图表的总渲染时长由1 546 ms缩短至1 337 ms,从而验证了该方法的有效性。

关键词: HTTP响应, Web Storage, Web性能优化, 数据可视化, 图表渲染优化, 增量更新

Abstract: In data visualization scenario,as load-bearing body of data visualization,the web page’s performance directly affects the loading speed and rendering effect of the visualization chart.At present,the optimization method based on web technology cannot reduce the pressure of network data transmission caused by charts obtaining large-scale complex data for rendering and redra-wing.In view of the above problems,a web-based data visualization chart rendering method is proposed.Firstly,it combines the caching mechanism and the incremental update algorithm,and deeply optimizes the HTTP request response body from the aspects of chart style and its interactive configuration information and chart binding data.Then,by reducing the size of the HTTP request response body,it reduces the amount of network data transmission and shortens the download time of data resources by reducing the size of the HTTP request response body,thereby improving the chart loading speed and shortening the page rendering time.Finally,a full comparison experiment is carried out for this method.Experimental results show that the total HTTP response time of a single chart is shortened from 75 ms to 28 ms,and the total rendering time of multiple charts displayed on web pages is shortened from 1546 ms to 1 337 ms,thus the effectiveness of this method is verified.

Key words: Chart rendering optimization, Data visualization, HTTP response, Incremental update, Web performance optimization, Web Storage

中图分类号: 

  • TP302
[1]BIKAKIS N.Big Data Visualization Tools[C/OL]//Encyclopedia of Big Data Technologies.Springer,Cham.https://doi.org/10.1007/978-3-319-77525-8_109.
[2]REN Y G,YU G.Researeh and Development of the Data Visua-lization Techniques[J].Computer Science,2004(12):92-96.
[3]LI Y,MA J M,AN B,et al.Web Based Lightweight Tool for Big Data Procesing and Visualization[J].Computer Science,2018,45(9):60-64,93.
[4]DOLATABADI A D,NOURI H.Optimized Web Based Method for 2D-Visualization of 3D Medical Images[C]//World Congress on Engineering.2014:551-556.
[5]SECHLER J,HARRISON L,PECK E M,et al.SightLine:Building on the Web’s Visualization Ecosystem[C]//Human Factors in Computing Systems.2017:2049-2055.
[6]BAE P,LIM K,JUNG W,et al.Practical implementation of M4 for web visualization service[J].Journal of Communications and Networks,2017,19(4):384-391.
[7]REBELO J,ANDRADE C,COSTA C,et al.An immersive web visualization platform for a big data context in bosch’s industry 4.0 movement[C]//Information Systems-16th European,Mediterranean,and Middle Eastern Conference.2020:71-84.
[8]CAO B,SHI M,LI C,et al.The solution of web font-end performance optimization[C]//International Congress on Image and Signal Processing.2017:1-5.
[9]SHUANG K,ZHANG T,DONG Z,et al.Impact of HTTPPipelining Mechanism for Web Browsing Optimization[C]//IEEEInternational Conference on Mobile Services.2015:415-422.
[10]SAKAMOTO Y,MATSUMOTO S,TOKUNAGA S,et al.Empirical study on effects of script minification and HTTP compression for traffic reduction[C]//International Conference on Digital Information,Networking,and Wireless Communications.2015:127-132.
[11]WOLSING K,RUTH J,WEHRLE K,et al.A performanceperspective on web optimized protocol stacks:TCP+TLS+HTTP/2 vs.QUIC[J].arXiv:Networking and Internet Architecture,2019:1-7.
[12]LI M Z,CHEN J,WANG J L,et al.HTTP Chunked StreamConcurrence Analysis Based on State Machine [J].Computer Science,2018,45(9):60-64,93.
[13]SONG M N,WANG N,E H H.Research on Optimization Algorithms for HTTP Maximum Concurrent Connection Restriction[C]//2018 International Conference on Information Systems and Computer Aided Education (ICISCAE).2018.
[14]XU Z W,WANG Y.Research and Experiment on Relationship between New Features of HTTP/2 and Web Performance [J].Computer Technology and Development,2017,27(11):192-195.
[15]CHEN L B.Research on Performance Optimization Method of Web Application System Based on J2EE [J].Computer Science,2006(7):95-97.
[16]LI D Q,MEI H H,SHEN Y,et al.ECharts:A declarativeframework for rapid construction of web-based visualization[J].Visual Informatics,2018,2(2):136-146.
[17]ILIEV I,DIMITROV G P.Front end optimization methods and their effect[C]//2014 37th International Convention on Information and Communication Technology,Electronics and Micro-electronics(MIPRO).IEEE,2014:467-473.
[18]WANG P P,WEI Z Q,LI Z.Front-end Website Performance Optimization Based on Web Storage in Html5[C]//Software Engineering and Information Technology.2016:36-40.
[19]SHEN D.Research on the Optimization Technology of theFont-End Performance of Web System Based on Bootstrap [D].Beijing:Beijing University of Posts and Telecommunications,2016.
[20]COSTAS S,ILIOPOULOS M,SOHEL R.Algorithms for Computing Variants of the Longest Common Subsequence Problem[J].Theoretical Computer Science,2008,395(2):255-267.
[21]ZHENG Z J,WANG H,YU C.Two Algorithms to Solve Longest Circular Common Subsequence P-roblems [J/OL].Application Research of Computers:1-5.[2020-05-23].https://doi.org/10.19734/j.issn.1001-3695.2019.06.0258.
[1] 陈慧嫔, 王琨, 杨恒, 郑智捷.
蓝舌病毒基因组序列多元概率特征可视化分析
Visual Analysis of Multiple Probability Features of Bluetongue Virus Genome Sequence
计算机科学, 2022, 49(6A): 27-31. https://doi.org/10.11896/jsjkx.210300129
[2] 骆菁菁, 唐卫贞, 丁继婷.
基于皮尔逊系数的管制仿真训练数据独立化与因子分析下的数据可视化研究
Research of ATC Simulator Training Values Independence Based on Pearson Correlation Coefficient and Study of Data Visualization Based on Factor Analysis
计算机科学, 2021, 48(6A): 623-628. https://doi.org/10.11896/jsjkx.210200021
[3] 马梦宇, 吴烨, 陈荦, 伍江江, 李军, 景宁.
显示导向型的大规模地理矢量实时可视化技术
Display-oriented Data Visualization Technique for Large-scale Geographic Vector Data
计算机科学, 2020, 47(9): 117-122. https://doi.org/10.11896/jsjkx.190800121
[4] 汪洋, 李鹏, 季一木, 樊卫北, 张玉杰, 王汝传, 陈国良.
高性能计算与天文大数据研究综述
High Performance Computing and Astronomical Data:A Survey
计算机科学, 2020, 47(1): 1-6. https://doi.org/10.11896/jsjkx.190900042
[5] 郑红波, 吴斌, 徐菲, 张美玉, 秦绪佳.
基于高斯扩散模型的垃圾焚烧废气排放可视化
Visualization of Solid Waste Incineration Exhaust Emissions Based on Gaussian Diffusion Model
计算机科学, 2019, 46(6A): 527-531.
[6] 李炎, 马俊明, 安博, 曹东刚.
一个基于Web的轻量级大数据处理与可视化工具
Web Based Lightweight Tool for Big Data Processing and Visualization
计算机科学, 2018, 45(9): 60-64. https://doi.org/10.11896/j.issn.1002-137X.2018.09.008
[7] 李慧,陈红倩,董爽,马丽仪.
针对专业分流数据的双层放射环矩阵可视化
Double Sunburst Matrix Visualization to Overview Majors Distributary Data
计算机科学, 2017, 44(Z6): 455-458. https://doi.org/10.11896/j.issn.1002-137X.2017.6A.102
[8] 汤颖,钟南江,孙康高,秦大康,周伟华.
基于兴趣的社交网络用户聚类及可视化
Clustering and Visualization of Social Network Based on User Interests
计算机科学, 2017, 44(Z11): 385-390. https://doi.org/10.11896/j.issn.1002-137X.2017.11A.081
[9] 石秀金,胡艳玲.
基于分类树的动态集值型数据发布的隐私保护
Privacy Preserving Based on Taxonomy Tree for Dynamic Set-valued Data Publishing
计算机科学, 2017, 44(5): 120-124. https://doi.org/10.11896/j.issn.1002-137X.2017.05.022
[10] 李艳,靳永飞,吴婷婷,郭娜娜,于群.
多准则分类问题中近似集的增量更新方法
Incrementally Updating Approximations Approach in Dominance-based Rough Set for Multi-criteria Classification Problems
计算机科学, 2016, 43(12): 71-78. https://doi.org/10.11896/j.issn.1002-137X.2016.12.012
[11] 曾安平,李天瑞,罗川.
高斯核模糊粗糙集中对象集变化时近似集增量更新方法研究
Incremental Approach for Updating Approximations of Gaussian Kernelized Fuzzy Rough Sets under Variation of Object Set
计算机科学, 2013, 40(7): 173-177.
[12] 许 丞,刘 洪,谭 良.
Hadoop云平台的一种新的任务调度和监控机制
New Mechanism of Monitoring on Hadoop Cloud Platform
计算机科学, 2013, 40(1): 112-117.
[13] 周秋山,李天瑞,陈红梅,张钧波.
特性关系粗糙集中对象变化时近似集增量更新方法研究
Research on Properties of Approximations in Rough Sets Based on Characteristic Relation When Object Varies with Time
计算机科学, 2012, 39(6): 191-193.
[14] 谷小广,李天瑞,陈红梅,刘永文.
集值信息系统中对象更新时近似集的性质研究
Research on Properties of Approximations in Set-valued Information Systems when Objects Vary with Time
计算机科学, 2011, 38(7): 228-230.
[15] 刘伟斌,李天瑞,邹维丽,胡成祥.
特性关系粗糙集下属性值粗化细化时近似集增量更新方法研究
Approaches for Incrementally Updating Approximations under Characteristic Relation-based Rough Sets While Attribute Values Coarsening and Refining
计算机科学, 2010, 37(6): 248-251.
Viewed
Full text


Abstract

Cited

  Shared   
  Discussed   
No Suggested Reading articles found!