CN109240784B - 一种内存对象的图表渲染方法及系统 - Google Patents
一种内存对象的图表渲染方法及系统 Download PDFInfo
- Publication number
- CN109240784B CN109240784B CN201811004872.XA CN201811004872A CN109240784B CN 109240784 B CN109240784 B CN 109240784B CN 201811004872 A CN201811004872 A CN 201811004872A CN 109240784 B CN109240784 B CN 109240784B
- Authority
- CN
- China
- Prior art keywords
- chart
- rendering
- diagram
- value
- graph
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种内存对象的图表渲染方法及系统，涉及JavaScriptr技术。本发明公开的内存对象的图表渲染方法，包括：当接收到针对页面中的图表发起的操作时，若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象；根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。本申请技术方案简化了render、dom以及实例化操作的频率，从而降低了react框架下JavaScript的CPU使用率以及内存负载。
Description
技术领域
本发明涉及JavaScript，特别涉及一种基于js内存对象的图表渲染方案。
背景技术
JavaScript是一种属于网络的脚本语言，被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。 JavaScript在内存处理方面由自身的内存垃圾回收机制处理，内存在不使用的时候会被垃圾回收器自动回收，能够让开发人员在开发中更注重业务逻辑的编写。但是随着业务的不断复杂化，单页面应用、移动HTML5应用和Node.js程序等等的发展，JavaScript中的内存问题所导致的卡顿、内存溢出等现象变得越来越频繁，如何在react框架下对JavaScript的内存以及性能进行优化成为关键问题。
发明内容
本申请提供一种内存对象的图表渲染方法及系统，可以解决现有react 框架下JavaScript的内存以及性能无法满足得复杂化业务的问题。
本申请公开了一种内存对象的图表渲染方法，主要包括：
当接收到针对页面中的图表发起的操作时，若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象；
根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。
可选地，上述方法还包括：
在页面内存中预先建立.jsx文件后缀的react组件，并在该react组件对应的render函数中，新定义html的div标签，用于存放图表的标识，并配置所述react组件对应的render函数在生命周期shouldComponentUpdate中，直接反馈错误信息，以使react组件只挂载一次dom操作。
可选地，上述方法还包括：
在所述react组件的props属性中，增加可被传入的参数标识ID，所述 ID为页面内各图表的标识。
可选地，上述方法还包括：
当接收到针对页面中的图表发起的操作时，若该图表未进行实例化，则将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/ 值key/value的形式存储至页面内存，其中，图表的标识为索引key，图表的实例化方法生成的对象为值value。
可选地，上述方法中，所述将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存后，该方法还包括：
封装该图表对应的渲染图表方法函数initOptions，并通过索引/值 key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为索引key，渲染图表方法函数initOptions为值 value。
本文还公开了一种内存对象的图表渲染系统，主要包括：
第一单元，在接收到针对页面中的图表发起的操作时，若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象；
第二单元，根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。
可选地，上述系统还包括：
配置单元，在页面内存中预先建立.jsx文件后缀的react组件，并在该react 组件对应的render函数中，新定义html的div标签，用于存放图表的标识，并配置所述react组件对应的render函数在生命周期shouldComponentUpdate 中，直接反馈错误信息，以使react组件只挂载一次dom操作。
可选地，上述系统中，所述配置单元，在所述react组件的props属性中，增加可被传入的参数标识ID，所述ID为页面内各图表的标识。
可选地，上述系统中，所述配置单元，在接收到针对页面中的图表发起的操作时，若该图表未进行实例化，还将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存，其中，图表的标识为索引key，图表的实例化方法生成的对象为值value。
可选地，上述系统中，所述配置单元，对于已经实例化的图表，还封装图表对应的渲染图表方法函数initOptions，并通过索引/值key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为索引key，渲染图表方法函数initOptions为值value。
本申请技术方案简化了render、dom以及实例化操作的频率，从而降低了react框架下JavaScript的CPU使用率以及内存负载。
附图说明
图1为本发明实施例中一种内存对象的图表渲染方法的流程图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，下文将结合附图对本发明技术方案作进一步详细说明。需要说明的是，在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。
实施例1
本申请发明人发现：
每次绘制页面时，都需要重新定义实例化一次图表，会导致实例的次数变多，导致内存无故的消耗，很容易导致内存溢出。
针对上述情况，发明人提出：图表可以只实例化一次，当第二次或者第 N次调用图表的时候，可以从内存中拿到已经实例化的图表进行渲染以及图表的各项操作即可。
因此，本实施例提供一种内存对象的图表渲染方法，主要包括如下操作：
当接收到针对页面中的图表发起的操作时，若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象，并根据接收到的操作和该图表的标识，调用该图表对应的渲染图表方法函数实现对图表的操作处理。
其中，本实施例中，对图表发起的操作包括如下任一种或几种：
查询、增加、删除、修改。
另外，发明还发现在react框架下的5个生命周期中，默认情况下生命周期使用方法：shouldComponentUpdate函数时返回的是true，并且只要图表数据发生改变，会触发至少有两次的dom或者虚拟dom的变更。因此，如果将图表的数据(即图表的配置数据)放在render函数里面，会导致render函数被执行最少两次，且每一次页面切换，也至少有两次render渲染操作(即 render函数被执行最少两次)。
针对上述情况：发明人提出可以在react框架下，每次切换页面时，使得只产生一次render操作，以简化render操作的频率。
每次更新数据渲染图表，都会重复的去渲染重绘dom，导致刷新的频率变高，从而导致在显卡比较低的情况下，cpu的使用率会持续标高，最终导致浏览器崩溃。
针对上述情况，发明人提出：在react框架下，只绘制一次dom操作，其余的操作都是在svg或者canvas标签中做变更，减少dom操作的频率，进而减少绘图导致的CPU的刷新频率。
基于上述想法，可以以本实施例的方法为基础，增加如下操作：
即在页面内存中预先建立.jsx文件后缀的react组件，并在该react组件对应的render函数中，新定义html的div标签，仅用于存放图表的标识，并配置所述react组件对应的render函数在生命周期shouldComponentUpdate中，直接反馈错误信息，即直接反馈错误信息可以直接终止react组件的后期渲染步骤，从而使react组件只挂载一次dom操作。而图表的数据则存储在页面内存中
另外，在上述react组件的props属性中，增加可被传入的参数ID，该 ID为页面内各图表的标识，该ID为唯一性标识，即同一页面中的不同图表对应的ID均不相同。
还要注意的是，当接收到针对页面中的图表发起的操作时，若该图表未进行实例化，则将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过key/value的形式存储至页面内存，其中，图表的标识为key，图表的实例化方法生成的对象为value。
而对于已经实例化的图表，封装该图表对应的渲染图表方法函数 initOptions，并通过key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为key，渲染图表方法函数 initOptions为value。
下面结合具体应用说明上述内存对象的图表渲染方法的一种具体实现，该实现过程如图1所示，包括如下操作：
步骤100：先新建一个.jsx文件后缀的react组件，在render函数中，新定义一个html的div标签，用于存放图表的占位，并且前文所述的react组件做为容器组件在react生命周期中，在生命周期：shouldComponentUpdate里面，直接return false，从而使得react组件就只负责挂载一次dom操作。
步骤200：容器组件内部使用props中，定义一个可被传入的属性名称叫 ID(即此ID可做为图表的标识)，此ID来必须是一个唯一性的ID，避免一个页面中有多个图表的时候，会产生ID重复的冲突。
步骤300：封装一个挂载实例化的对象，将配置好的图表的格式和数据结构作为这个挂载实例化的对象，其可以通过(key/value)的形式存储。将属性ID存放在对象中，当做key，根据图表的实例化方法生成的对象当做 value存放在全局对象repository中，这样就可以存放到浏览器的内存中。
例如：repository[id]＝echart.init(document.geElementById(id)))。
步骤400：封装一个渲染图表的方法(initOptions)，同步骤300一样，以 (ID+initOptions)作为key，以initOptions作为一个value，存放在js全局对象中(即repository[id+initOptions])，提供外部调用(此时的value是一个函数)。
步骤500：在react的生命周期componentDidMount里，调用步骤300和步骤400。
步骤600：在react中，将.jsx文件后缀的react组件引用到页面，只需从内存中通过对应ID(及key)取出这个已经实例化的全局对象，例如 (repository[id])，这个对象可以使用图表各种功能，当要改变图表中数据的时候，可以通过调用repository[id+initOptions](数据来源)来渲染图表中的数据。
实施例2
本实施例还提供一种内存对象的图表渲染系统，主要如下两个单元。
第一单元，在接收到针对页面中的图表发起的操作时，若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象；
第二单元，根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。
另外，在上述系统架构的基础上，还可以包括：配置单元，主要在页面内存中预先建立.jsx文件后缀的react组件，并在该react组件对应的render 函数中，新定义html的div标签，用于存放图表的标识，并配置所述react 组件对应的render函数在生命周期shouldComponentUpdate中，直接反馈错误信息，以使react组件只挂载一次dom操作。其中，配置单元，可以在创建的react组件的props属性中，增加可被传入的参数标识ID，所述ID为页面内各图表的标识。
对于页面中的图表接收到了用户发起的操作，但该图表从未进行实例化的情况，配置单元还可以将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存，其中，图表的标识为索引key，图表的实例化方法生成的对象为值value。
按照上述操作，已经实例化的图表，配置单元还可以封装图表对应的渲染图表方法函数initOptions，并通过索引/值key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为索引 key，渲染图表方法函数initOptions为值value。
要注意的是，本实施例提供的系统可实现上述实施例1方法的所有操作步骤，故对上述系统的其他详细介绍可参见实施例1的相应内容，在此不再赘述。
本领域普通技术人员可以理解上述方法中的全部或部分步骤可通过程序来指令相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本申请不限制于任何特定形式的硬件和软件的结合。
以上所述，仅为本发明的较佳实例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种内存对象的图表渲染方法，其特征在于，包括：
当接收到针对页面中的图表发起的操作时，若该图表未进行实例化，则将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存，其中，图表的标识为索引key，图表的实例化方法生成的对象为值value；若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象，其中，所述图表对应预先建立的react组件，且所述react组件对应的render函数在生命周期shouldComponentUpdate中反馈错误信息；
根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。
2.如权利要求1所述的方法，其特征在于，该方法还包括：
在页面内存中预先建立.jsx文件后缀的react组件，并在该react组件对应的render函数中，新定义html的div标签，用于存放图表的标识。
3.如权利要求2所述的方法，其特征在于，该方法还包括：
在所述react组件的props属性中，增加可被传入的参数标识ID，所述ID为页面内各图表的标识。
4.如权利要求1所述的方法，其特征在于，所述将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存后，该方法还包括：
封装该图表对应的渲染图表方法函数initOptions，并通过索引/值key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为索引key，渲染图表方法函数initOptions为值value。
5.一种内存对象的图表渲染系统，其特征在于，包括：
第一单元，在接收到针对页面中的图表发起的操作时，若该图表未进行实例化，则将配置好的该图表的格式和数据结构封装为挂载实例化的对象，并通过索引/值key/value的形式存储至页面内存，其中，图表的标识为索引key，图表的实例化方法生成的对象为值value；若该图表已经实例化，则通过该图表的标识从内存中提取该图表对应的全局对象，其中，所述图表对应预先建立的react组件，且所述react组件对应的render函数在生命周期shouldComponentUpdate中反馈错误信息；
第二单元，根据接收到的操作和该图表的标识，调用该图表对应的全局对象中的渲染图表方法函数实现对图表的操作处理。
6.如权利要求5所述的系统，其特征在于，该系统还包括：
配置单元，在页面内存中预先建立.jsx文件后缀的react组件，并在该react组件对应的render函数中，新定义html的div标签，用于存放图表的标识。
7.如权利要求6所述的系统，其特征在于，
所述配置单元，在所述react组件的props属性中，增加能够被传入的参数标识ID，所述ID为页面内各图表的标识。
8.如权利要求5所述的系统，其特征在于，
所述配置单元，对于已经实例化的图表，还封装图表对应的渲染图表方法函数initOptions，并通过索引/值key/value的形式存储所述渲染图表方法函数至全局对象中，其中，图表的标识和渲染图表方法函数为索引key，渲染图表方法函数initOptions为值value。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811004872.XA CN109240784B (zh) | 2018-08-30 | 2018-08-30 | 一种内存对象的图表渲染方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811004872.XA CN109240784B (zh) | 2018-08-30 | 2018-08-30 | 一种内存对象的图表渲染方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109240784A CN109240784A (zh) | 2019-01-18 |
| CN109240784B true CN109240784B (zh) | 2020-06-23 |
Family
ID=65069207
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811004872.XA Active CN109240784B (zh) | 2018-08-30 | 2018-08-30 | 一种内存对象的图表渲染方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109240784B (zh) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110990087B (zh) * | 2019-11-27 | 2023-03-21 | 北京明略软件系统有限公司 | 网络组件嵌套运行方法、装置及数据处理设备 |
| CN112347171A (zh) * | 2020-11-03 | 2021-02-09 | 广州朗国电子科技有限公司 | 一种将接口数据转为可视化图表方法及装置、存储介质 |
| CN112540820A (zh) * | 2020-12-09 | 2021-03-23 | 北京奇艺世纪科技有限公司 | 一种用户界面的更新方法、装置及电子设备 |
| CN112486489B (zh) * | 2020-12-11 | 2024-06-07 | 上海万物新生环保科技集团有限公司 | 一种拍卖组件的渲染方法及设备 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107133046B (zh) * | 2017-05-11 | 2021-02-02 | 武汉斗鱼网络科技有限公司 | 页面搭建方法、装置和电子终端 |
| CN108132755A (zh) * | 2018-01-18 | 2018-06-08 | 北京网信云服信息科技有限公司 | 一种数字输入方法、装置和移动设备 |
-
2018
- 2018-08-30 CN CN201811004872.XA patent/CN109240784B/zh active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN109240784A (zh) | 2019-01-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109240784B (zh) | 一种内存对象的图表渲染方法及系统 | |
| US20210216700A1 (en) | Information Processing Method and System | |
| US11706331B2 (en) | Information processing method and apparatus, storage medium, and electronic device | |
| US8863129B2 (en) | Automated caching and mirroring of immutable data in distributed virtual machines via native interface components | |
| CN105373615A (zh) | 一种页面定制化的方法和装置 | |
| US20140222947A1 (en) | Method and apparatus for browsings webpages, and storage medium | |
| CN111026490B (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
| CN111343181B (zh) | 报文的处理方法，系统以及数据池和计算机可读存储介质 | |
| CN112463123A (zh) | 任务编译方法、装置、网络节点、系统及存储介质 | |
| CN105988814B (zh) | 界面生成方法及装置 | |
| CN110262749B (zh) | 一种网页操作方法、装置、容器、设备及介质 | |
| CN113810865B (zh) | 一种基于短信进行航班提醒的方法及装置 | |
| CN114117298A (zh) | 一种基于电商的商品信息查询方法及系统 | |
| CN111008050B (zh) | 页面任务执行方法、装置、终端及存储介质 | |
| CN115809056B (zh) | 组件复用实现方法、装置和终端设备、可读存储介质 | |
| CN115146198A (zh) | 一种基于Electron的简易浏览器实现方法及系统 | |
| CN112597408B (zh) | 一种系统融合方法、装置、设备和存储介质 | |
| CN115237467A (zh) | 页面视图配置方法、装置、计算机设备及存储介质 | |
| EP1775661A1 (en) | Displaying using graphics display language and native UI objects | |
| CN114489645A (zh) | 一种基于Vue和Element-UI的表单生成构造方法、系统和存储介质 | |
| CN111931111A (zh) | 一种网页开发方法、网页展示方法、装置及设备 | |
| CN114896011B (zh) | 页面中动态内容的播放方法、装置、电子设备及存储介质 | |
| CN113779466B (zh) | 一种页面显示方法、装置、存储介质及电子设备 | |
| AU2003271847B2 (en) | Wireless communication device | |
| CN114201253B (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 |