CN113031926A - Transaction entrusted account book and span map display system and method - Google Patents
Transaction entrusted account book and span map display system and method Download PDFInfo
- Publication number
- CN113031926A CN113031926A CN202110322352.9A CN202110322352A CN113031926A CN 113031926 A CN113031926 A CN 113031926A CN 202110322352 A CN202110322352 A CN 202110322352A CN 113031926 A CN113031926 A CN 113031926A
- Authority
- CN
- China
- Prior art keywords
- data
- module
- transaction
- analysis module
- span
- 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
- 238000000034 method Methods 0.000 title claims abstract description 67
- 230000002776 aggregation Effects 0.000 claims abstract description 98
- 238000004220 aggregation Methods 0.000 claims abstract description 98
- 238000009877 rendering Methods 0.000 claims abstract description 61
- 230000008569 process Effects 0.000 claims abstract description 22
- 238000012545 processing Methods 0.000 claims abstract description 18
- 230000003993 interaction Effects 0.000 claims abstract description 12
- 238000004364 calculation method Methods 0.000 claims description 42
- 238000004422 calculation algorithm Methods 0.000 claims description 22
- 238000010586 diagram Methods 0.000 claims description 13
- 230000008859 change Effects 0.000 claims description 9
- 238000012216 screening Methods 0.000 claims description 5
- 230000000694 effects Effects 0.000 claims description 4
- 238000012163 sequencing technique Methods 0.000 claims description 4
- 238000009825 accumulation Methods 0.000 claims description 3
- 230000001360 synchronised effect Effects 0.000 claims description 3
- 238000012217 deletion Methods 0.000 claims description 2
- 230000037430 deletion Effects 0.000 claims description 2
- 238000012544 monitoring process Methods 0.000 claims description 2
- 239000013589 supplement Substances 0.000 claims description 2
- 230000001502 supplementing effect Effects 0.000 claims description 2
- 238000011161 development Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 230000007246 mechanism Effects 0.000 description 2
- 238000005457 optimization Methods 0.000 description 2
- 239000000047 product Substances 0.000 description 2
- 238000005070 sampling Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- DBGIVFWFUFKIQN-UHFFFAOYSA-N (+-)-Fenfluramine Chemical compound CCNC(C)CC1=CC=CC(C(F)(F)F)=C1 DBGIVFWFUFKIQN-UHFFFAOYSA-N 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008014 freezing Effects 0.000 description 1
- 238000007710 freezing Methods 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 239000011159 matrix material Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q40/00—Finance; Insurance; Tax strategies; Processing of corporate or income taxes
- G06Q40/04—Trading; Exchange, e.g. stocks, commodities, derivatives or currency exchange
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Business, Economics & Management (AREA)
- Finance (AREA)
- General Physics & Mathematics (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Accounting & Taxation (AREA)
- Software Systems (AREA)
- Economics (AREA)
- Development Economics (AREA)
- Marketing (AREA)
- Strategic Management (AREA)
- Technology Law (AREA)
- General Business, Economics & Management (AREA)
- Financial Or Insurance-Related Operations Such As Payment And Settlement (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application shows a transaction entrusted ledger and span map display system and method, comprising: a user enters a terminal and requests to view a transaction entrusted account book and span map data; the feedback module receives a client request, acquires target information, merging precision and view information, transmits the target information, the merging precision and the view information into the analysis module for processing, and simultaneously transmits the request to the analysis module; the analysis module receives a request for subscribing full Level2 order data to the aggregation service; the aggregation service subscribes data to the exchange end; the exchange end pushes data to the aggregation service in real time; the aggregation service pushes data to an analysis module; the analysis module receives the full Level2 order data, processes the order data to obtain a transaction entrusted ledger and span map data, and updates a single data stream to the rendering module through a Redox framework; the rendering module synchronously updates the visible transaction entrusted ledger book and the span map data to the feedback module; the feedback module displays the real-time data to the user side through the UI component interface. The method and the device improve the interaction fluency, save server resources and improve the system efficiency.
Description
Technical Field
The invention belongs to the technical field of internet interaction, and particularly relates to a transaction entrusted account book and span map display system and method.
Background
In a transaction mode of a transaction entrusted ledger (Orderbook), a transaction terminal webpage often faces the impact of pushing a large amount of market data, a browser kernel of a user usually processes DOM analysis and data calculation in a single process, and interaction and processing calculation are not isolated, so that interaction is blocked, and reasonable algorithm optimization is required to be performed to save performance overhead and improve interaction fluency. The transaction product terminal usually has a purchase order containing orders of both buyers and sellers and a span map, so that a transaction user can conveniently check the market listing information and the multi-space comparison, the transaction product terminal usually needs to be updated in real time to ensure that the user captures the market trend in time, but the performance resource of the complicated transaction terminal webpage is more scarce; meanwhile, due to the limitation of browser resources, a display end for expanding the Golboni for a transaction cannot support aggregation calculation of mass data, real-time data of two parties of the transaction and unlimited data volume are displayed, and when two parties of the transaction compare span graphs, the data volume is too large, real-time screening causes Web graph drawing to be unsmooth, and resource consumption is too large. In a Web browser of a user, a modern front-end framework converts ES6 standard grammar into ES5 standard javascript to run, and since the javascript controls the DOM structure and CSS pattern of the browser and is historically designed to run in a single thread in the browser, a developer can only write single-thread logic, and although the development difficulty is reduced, the performance is often a bottleneck.
With the fact that webpage terminals are more and more complex, the number of things needing to be processed in a javascript single thread is more and more, computing and drawing compete for resources mutually, computing blockage often occurs, particularly on a trading exchange terminal webpage, various complex associated data streams and webpage component structures exist, and meanwhile the use scene of the webpage terminal needs to guarantee great fluency, stability and instantaneity.
Therefore, it is desirable to provide a method capable of implementing split computation of data at each level, which can reasonably utilize and transfer complexity and overhead, and save browser resources.
Disclosure of Invention
Based on the problems, the invention provides a transaction entrusted account book and span map display system and a method; the interactive fluency can be improved, the server side resources can be saved, and the system efficiency can be improved.
In a first aspect, the application shows a transaction ledger and span-chart display system comprising:
the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
the feedback module includes: the system comprises a span diagram component, a transaction entrusted ledger component, a feedback module DOM structure and a UI display component; the span map component and the transaction entrusted ledger component are used for data interaction with the user side; the DOM structure is used for receiving DOM updates; the UI display component is used for displaying view data; the feedback module executes the task queue by adopting a javascript asynchronous process; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a React frame; the React frame is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving the unidirectional data stream synchronized by the analysis module; the rendering module is used for drawing a transaction entrusted ledger book and a span map;
the parsing module includes: redox state machine and Redox/Redox-saga framework; the frame is accessed with Web Worker asynchronous calculation; the Redox state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module; subscribing full Level2 data to the aggregation service and receiving pushed data of the aggregation service in real time, wherein the Redox/Redox-saga framework performs throttling cache on the data pushed by the aggregation service and performs calculation through a Web Worker, the Web Worker performs aggregation calculation on quantity and cumulant according to the aggregation precision of a transaction entrusted account book selected by a user, and updates the calculation result to a Redox state machine;
the aggregated service comprises: io service end; the socket.io server is used for communicating with the analysis module; full/incremental calibration and price screening of full Level2 data was performed.
In a second aspect, the present application shows a transaction ledger sheet and a span map display method, which are used for a whole process from a browser side to a transaction side, and the method includes:
s101: a user enters a transaction target terminal from a browser end and requests to view a transaction entrusted account book and span map data; the transaction target terminal includes: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a client viewing request, acquires target information, merging precision and view information, transmits the target information, the merging precision and the view information to the analysis module for processing, and simultaneously transmits the user viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 order data to the aggregation service; the transaction entrusted ledger and the span map data are constructed based on full Level2 order data;
s104: the aggregation service subscribes full Level2 order data to the exchange-side application programming interface;
s105: the exchange end receives the subscription information of the aggregation service, pushes full Level2 order data to the aggregation service in real time through an application programming interface of the exchange end, performs calibration/aggregation processing in the aggregation service and puts the data into a memory;
s106: when calibration/aggregation processing is carried out in the aggregation service and the memory is put into the aggregation service, the aggregation service pushes real-time full Level2 order data to an analysis module; the analysis module receives the full Level2 order data and processes the order data to obtain a transaction entrusted ledger and span map data; the processing and treating process comprises the following steps: calling Web Worker asynchronous calculation precision combination and span accumulation according to the full Level2 order data;
s107: after processing, the analysis module updates the single data stream to the rendering module through the Redox framework;
s108: the rendering module synchronously updates the visible transaction entrusted ledger book and the span map data to the feedback module;
s109: and the feedback module displays the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
In a third aspect, the present application shows a transaction entrusted ledger and a span map display method, which are used for a browser side, and the method includes:
s201: the user enters a transaction target terminal from a browser end and views a transaction entrusted ledger and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation module;
s202: the feedback module receives a client viewing request and sends a layout loading request to the rendering module;
s203: the rendering module performs a DOM update to the feedback module,
s204: after the updating, the feedback module obtains the view visible region parameters and the data parameters, and synchronizes the view visible region parameters and the data parameters to the analysis module, wherein the analysis module comprises: the system comprises a Redox state machine and a Redox-saga frame, wherein Web Worker asynchronous calculation is accessed into the frame;
s205: a Redox state machine of the analysis module synchronizes the visible region parameters and the data parameters of the view; the analysis module subscribes full Level2 data to the aggregation service and receives push data of the aggregation service in real time;
s206: when the analysis module receives the pushed data of the aggregation service in real time, the analysis module performs throttling cache on the data pushed by the aggregation service, and the data is calculated through a Web Worker, and the Web Worker performs quantity and cumulant aggregation calculation according to the aggregation precision of the transaction entrusted account book selected by the user; updating the calculation result to a Redox state machine of the analysis module;
s207: when the transaction entrusted ledger data and the span map data are updated to the Redox state machine, the analysis module updates the transaction entrusted ledger data and the span map data in a one-way data flow direction rendering module;
s208: after the rendering module is updated, the rendering module updates DOM to the feedback module;
s209: after the data is updated to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
The beneficial effect of this application does:
splitting a full-scale span diagram of a trading exchange and Level2 data calculation, saving browser page resources, and providing real-time market data for users with higher interactive fluency; the aggregation service efficiently schedules and processes matching engine application program interface data and user subscription data tasks as required, so that server resources are saved; the feedback module monitors the state of the user behavior, and adjusts system parameters in real time, so that system resources only serve the data concerned by the user, and the system efficiency is improved; the transaction entrusted account book and the span map are packaged, so that multi-project and multi-project multiplexing can be realized, and the development cost is saved; the virtual list and price window mechanism ensures that the interaction effect displayed to the user is still a whole data list, and the actual user browser only processes the part to be browsed and performs data calculation as required. Optimizing an area graph random edge sampling algorithm, eliminating redundant data points and accelerating span graph drawing; and the calculation of the Web Worker in parallel to the main flow is utilized, the calculation capability of the front end is expanded, and the page performance overhead is greatly saved integrally.
Drawings
In order to more clearly explain the technical solution of the application, the drawings needed to be used in the embodiments are briefly described below, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.
FIG. 1 is a schematic diagram of a transaction ledger and span map display system of the type shown in the present application;
fig. 2 is a schematic diagram of a method for displaying a transaction ledger and a span map for a whole process from a browser end to a clearing house end, according to the present application;
FIG. 3 is a schematic diagram of a transaction ledger sheet and span map display method for a browser-side method according to the present application;
FIG. 4 is a flow chart illustrating a feedback module acquiring view visible region parameters and data parameters according to the present application;
FIG. 5 is an aggregated service workflow diagram shown herein;
fig. 6 is a schematic diagram of an aggregated service subscription task management algorithm shown in the present application.
Detailed Description
To facilitate understanding by those skilled in the art, a part of technical terms related to the technical solutions shown in the present application will be explained first.
DOM (Document Object Model), a standard programming interface that handles extensible markup language. It is a platform and language independent application program interface that can dynamically access programs and scripts, update their content, structure, the document can be further processed, and the results of the processing can be added to the current page.
A UI component (User Interface Module) for User Interface interaction.
javascript is a lightweight, interpreted or just-in-time programming language with function precedence.
The React framework is a Web development framework and is mainly used for constructing a UI (user interface), and various types of parameters such as declaration codes can be transmitted in the React framework to help render the UI; or static HTML DOM elements; dynamic variables, even interactive application components, can also be passed.
Redux, an application data flow framework, is used for application state management.
Web Worker is a multi-threaded solution that can run some computationally expensive code without freezing the user interface.
Referring to fig. 1, fig. 1 shows a transaction commitment ledger and span map display system, the system comprising:
the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
the feedback module includes: the system comprises a span diagram component, a transaction entrusted ledger component, a feedback module DOM structure and a UI display component; the span map component and the transaction entrusted ledger component are used for data interaction with the user side; the DOM structure is used for receiving DOM updates; the UI display component is used for displaying view data; the feedback module executes the task queue by adopting a javascript asynchronous process; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a React frame; the React frame is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving the unidirectional data stream synchronized by the analysis module; the rendering module is used for drawing a transaction entrusted ledger book and a span map;
the parsing module includes: redox state machine and Redox/Redox-saga framework; the frame is accessed with Web Worker asynchronous calculation; the Redox state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module; subscribing full Level2 data to the aggregation service and receiving pushed data of the aggregation service in real time, wherein the Redox/Redox-saga framework performs throttling cache on the data pushed by the aggregation service and performs calculation through a Web Worker, the Web Worker performs aggregation calculation on quantity and cumulant according to the aggregation precision of a transaction entrusted account book selected by a user, and updates the calculation result to a Redox state machine;
the aggregated service comprises: io service end; the socket.io server is used for communicating with the analysis module; full/incremental calibration and price screening of full Level2 data was performed.
Referring to fig. 2, fig. 2 shows a transaction ledger and span map display method for a whole process from a browser end to an exchange end, the method includes:
s101: a user enters a transaction target terminal from a browser end and requests to view a transaction entrusted account book and span map data; the transaction target terminal includes: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a client viewing request, acquires target information, merging precision and view information, transmits the target information, the merging precision and the view information to the analysis module for processing, and simultaneously transmits the user viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 order data to the aggregation service; the transaction entrusted ledger and the span map data are constructed based on full Level2 order data;
s104: the aggregation service subscribes full Level2 order data to the exchange-side application programming interface; in a possible embodiment: the method for the aggregation service to subscribe the full Level2 order data to the exchange end application programming interface comprises the following steps: the aggregated service comprises: a sub-service; the sub-service is used as a subscription service; the analysis module subscribes a price window data parameter from the sub-service; the sub-service subscribes full Level2 order data to the exchange application programming interface according to the subscribed parameter range and the corresponding price window; when full-Level 2 order data are obtained, the sub-service pushes the full-Level 2 order data to an analysis module; the aggregated service further comprises: subscribing task management algorithm, wherein the subscribing task management algorithm adopts a modified LRU algorithm;
s105: the exchange end receives the subscription information of the aggregation service, pushes full Level2 order data to the aggregation service in real time through an application programming interface of the exchange end, performs calibration/aggregation processing in the aggregation service and puts the data into a memory;
s106: when calibration/aggregation processing is carried out in the aggregation service and the memory is put into the aggregation service, the aggregation service pushes real-time full Level2 order data to an analysis module; the analysis module receives the full Level2 order data and processes the order data to obtain a transaction entrusted ledger and span map data; the processing and treating process comprises the following steps: calling Web Worker asynchronous calculation precision combination and span accumulation according to the full Level2 order data;
s107: after processing, the analysis module updates the single data stream to the rendering module through the Redox framework;
s108: the rendering module synchronously updates the visible transaction entrusted ledger book and the span map data to the feedback module;
s109: and the feedback module displays the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
Referring to fig. 3, fig. 3 illustrates a transaction ledger sheet and span map display method for a browser side, the method comprising:
s201: the user enters a transaction target terminal from a browser end and views a transaction entrusted ledger and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation module;
s202: the feedback module receives a client viewing request and sends a layout loading request to the rendering module;
s203: the rendering module performs a DOM update to the feedback module,
s204: after the updating, the feedback module obtains the view visible region parameters and the data parameters, and synchronizes the view visible region parameters and the data parameters to the analysis module, wherein the analysis module comprises: the system comprises a Redox state machine and a Redox-saga frame, wherein Web Worker asynchronous calculation is accessed into the frame;
s205: a Redox state machine of the analysis module synchronizes the visible region parameters and the data parameters of the view; the analysis module subscribes full Level2 data to the aggregation service and receives push data of the aggregation service in real time;
s206: when the analysis module receives the pushed data of the aggregation service in real time, the analysis module performs throttling cache on the data pushed by the aggregation service, and the data is calculated through a Web Worker, and the Web Worker performs quantity and cumulant aggregation calculation according to the aggregation precision of the transaction entrusted account book selected by the user; updating the calculation result to a Redox state machine of the analysis module;
s207: when the transaction entrusted ledger data and the span map data are updated to the Redox state machine, the analysis module updates the transaction entrusted ledger data and the span map data in a one-way data flow direction rendering module;
s208: after the rendering module is updated, the rendering module updates DOM to the feedback module;
s209: after the data is updated to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
In a feasible embodiment, the transaction entrusted ledger and span map display method is used for a browser end; the method further comprises the following steps:
s301: when the feedback module interacts with a user, the user rolls to cause the visible area to change, at the moment, the feedback module checks whether data filling meets the DOM layout, and if so, the current DOM layout is displayed; if not, executing batch completion;
the batch supplementing method comprises the following steps: the feedback module acquires the view visible region parameters and the data parameters and synchronizes the view visible region parameters and the data parameters to the analysis module; the parsing module includes: the system comprises a Redox state machine and a Redox-saga frame, wherein Web Worker asynchronous calculation is accessed into the frame;
s302: a Redox state machine of the analysis module synchronizes the visible region parameters and the data parameters of the view; the analysis module supplements full Level2 data to the aggregation service according to conditions and receives push data of the aggregation service in real time;
s303: the analysis module performs throttling cache on data pushed by the aggregation service, calculates through a Web Worker, performs quantity and cumulant aggregation calculation according to the aggregation precision of a transaction entrusted account book selected by a user, and updates a calculation result to a Redox state machine;
in a possible embodiment, the view refresh is 60fps (frames/second), the reasonable throttling time is 16ms (milliseconds); the throttling algorithm is as follows: the data frame received in the throttling time is replaced by the last data frame in the throttling time
The analysis module throttling caching method comprises the following steps:
replacing the data frame received in the throttling time of 16ms with the last data in the throttling time;
carrying out asynchronous calculation on the replaced data by adopting a Web worker;
the Web worker carries out aggregation calculation of quantity and cumulant according to the data aggregation precision;
and updating the result after the aggregation calculation to a Redox state machine.
S304: when the transaction entrusted ledger data and the span map data are updated to the Redox state machine, the analysis module updates the transaction entrusted ledger data and the span map data in a one-way data flow direction rendering module;
s305: after the rendering module is updated, the rendering module updates DOM to the feedback module;
s306: after the data is updated to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction entrusted account book and the span map data to the user side through the UI component interface. Each time the UI layout changes, the feedback module is triggered to recalculate.
Referring to fig. 4, fig. 4 is a flow chart illustrating the feedback module acquiring the view visible region parameter and the data parameter;
the method for acquiring the parameters of the visible region of the view and the data parameters by the feedback module comprises the following steps:
monitoring DOM changes of the drawing area by the constructor;
filling the target drawing area by the drawing area DOM, wherein the drawing area DOM is changed, and the user view display area is changed;
local updating is realized according to the change of the user view display area; the local update content includes: a lowest buying price interval and a highest selling price interval.
The feedback module calculates the parameters of the obtained visual visible region and the data parameters by adopting a price window mechanism; the maximum data range required to be prepared; the calculation is used for screening out the data set stored in the browser end from the aggregation service.
The method for realizing local updating according to the change of the user view display area comprises the following steps:
obtaining (scrollTop, scrollHeight), wherein the scrollTop refers to the height of the content in the element beyond the upper boundary part of the element and is used for setting the vertical offset of the scroll bar in the element; the scrollHeight refers to the complete height of the return element and is the total height of the element content; changing the DOM of the drawing area to enable a getBoundingClientRect function to obtain showHeight (height of a display area), and obtaining an expanded data set through a self-increasing and adjusting price window of n; wherein, the initial n is 2, and the n is a multiple which changes with the user interaction/scrolling the view visible area; meanwhile, the DOM of the drawing area changes to change the DOM of the order, and the DOM of the order sets the height of each element through rowHeight;
the feedback module calculates the change of the display area according to the acquired content to realize local updating;
updating a data area distributed near a visible area according to a part of order purchase orders displayed in the visible area of a browser end user; local update content is obtained. The local update content maintains a transaction commitment ledger at the browser end.
In a feasible embodiment, the analysis module usage scenario comprises a scenario of precision aggregation and merging orders with the same price; when the analysis module is in the scene, the feedback module cannot fill and complete all target drawing areas according to a price interval corresponding to a certain layout; when the feedback module updates the parameters of the visual visible region and the data parameters, the internal drawing inspection of the feedback module is triggered;
if the unfilled region does not exist, updating through checking;
if the unfilled region exists, the feedback module calculates the filling range, expands the height parameter of the display region, and obtains an expanded data set through the self-increasing adjusting price window of n; where initial n is 2, the n is a multiple of the change in the visible area as the view is interacted/scrolled by the user.
In the process that the analysis module updates transaction entrusted book data and span map data by a unidirectional data flow to the rendering module, the specific position updated to the rendering module by the analysis module is a read component of the rendering module, and the read component is used for calculating DOM update; and synchronizing the DOM update to the feedback module;
when the analysis module updates the transaction entrusted ledger data and the span map data by a one-way data flow rendering module; the method for updating DOM to the feedback module by the rendering module comprises the following steps:
the rendering module is used for drawing a transaction entrusted ledger book and a span map; and the rendering module adopts a virtual list algorithm to draw a transaction entrusted ledger book and adopts a DOM Canvas to draw a span diagram.
The virtual list algorithm is a dynamically rendered DOM structure created substantially by an algorithm, which differs from a common standard DOM list by the control of the number of elements, the list virtual algorithm calculates a data set corresponding to the visible area of the current list relative to the full list data by pre-estimating the full data, the visible range of the current list, the user interaction state of a feedback module, according to the user scroll height and the external height of the list; meanwhile, high-frequency data stream updating is solved by combining DOM frames, frame output is carried out by utilizing the refresh frequency of a display, a small part of views are quickly rendered, and a good fps index is achieved.
The virtual list algorithm principle is as follows:
the lower-layer tables are estimated by constructing a FilterMask mask area, so that one FilterMask manages N lower-layer tables,
applying the virtual list algorithm principle to the scene shown in the application;
the method for drawing the transaction entrusted ledger comprises the following steps:
the rendering module is used for drawing the order forms of the buy order and the order form at the same time to obtain only a display item and a cache item;
meanwhile, the height of the hidden area data is only calculated and reset to the height of the list, so that the height of the scroll bar is opened, and the position of the scroll bar is positioned; the actual display effect is consistent with the rendering of all data;
the method for drawing the span map comprises the following steps:
the rendering module is used for drawing a transaction entrusted ledger book and a span map;
the method for drawing the transaction entrusted ledger comprises the following steps:
the rendering module is used for drawing the order forms of the buy order and the order form at the same time to obtain only a display item and a cache item; meanwhile, the height of the hidden area data is only calculated and reset to the height of the list, so that the height of the scroll bar is opened, and the position of the scroll bar is positioned; the actual display effect is consistent with the rendering of all data.
The principle of the span map drawing optimization algorithm is as follows:
the span map is a two-dimensional area map with price as an X axis and quantity as a Y axis; when the data volume is too dense, each pixel point in the two-dimensional area map has a large number of data points which have no meaning to users, so that the data points are combined; the merging adopts a simplified edge sampling algorithm to merge and extract data points, so that the number of drawn data points is reduced, and the Canvas drawing efficiency is improved.
Since the span map is an area map, it is necessary to process a matrix of data points as [ [ [ x1, y1], [ x2, y2], … ], which is a two-dimensional array.
The method for drawing the span map comprises the following steps:
drawing the pixel length N of the region according to the data point array length M and the X axis of the area map; if M is larger than N, randomly taking 3N data and disordering the data to form an array K; if M < ═ N; the subsequent steps are omitted;
adding K to the area map starting point [ x1, 0] and the ending point [ xn, 0 ];
traversing each data element of K and calculating the distance Dis between the point and all other points, recording the distance and the index0, index1 of the two points to a new array R, wherein the elements of the new array R are [ Dis, index0 and index1 ];
sequencing the new array R in the positive sequence according to Dis, and if two indexes have points which are not deleted, recording the points into a deleted array RM; the above process is circulated until len (rm) 2N is found, and the deletion can be finished;
and traversing K, deleting points of the index in the RM, and sequencing according to the price to obtain simplified area map data.
Referring to fig. 5, fig. 5 is a flowchart of the aggregated service work;
in a feasible embodiment, the aggregated service is deployed separately; the method for the aggregation service to subscribe the full Level2 order data to the exchange end application programming interface comprises the following steps:
the aggregated service comprises: a sub-service; the sub-service is used as a subscription service; the analysis module subscribes a price window data parameter from the sub-service; the sub-service subscribes full Level2 order data to the exchange application programming interface according to the subscribed parameter range and the corresponding price window;
when full Level2 order data is obtained, the sub-service pushes the full Level2 order data to the analysis module.
Referring to fig. 6, fig. 6 is a schematic diagram of an aggregated service subscription task management algorithm.
The aggregated service further comprises: and subscribing a task management algorithm, wherein the subscribing task management algorithm adopts a modified LRU algorithm.
The LRU algorithm is used for task management and realizes real-time on-demand scheduling on-demand calculation.
The present application has been described in detail with reference to specific embodiments and illustrative examples, but the description is not intended to limit the application. Those skilled in the art will appreciate that various equivalent substitutions, modifications or improvements may be made to the embodiments and implementations of the disclosure without departing from the spirit and scope of the disclosure, which is within the scope of the disclosure as defined by the appended claims.
Claims (9)
1. A transaction ledger and span-chart display system, the system comprising:
the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
the feedback module includes: the system comprises a span diagram component, a transaction entrusted ledger component, a feedback module DOM structure and a UI display component; the span map component and the transaction entrusted ledger component are used for data interaction with the user side; the feedback module DOM structure is used for receiving DOM update; the UI display component is used for displaying view data; the feedback module executes the task queue by adopting a javascript asynchronous process; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a React frame; the React frame is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving the unidirectional data stream synchronized by the analysis module; the rendering module is used for drawing a transaction entrusted ledger book and a span map;
the parsing module includes: redox state machine and Redox/Redox-saga framework; the frame is accessed with Web Worker asynchronous calculation; the Redox state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module, subscribing full Level2 data to the aggregation service and receiving pushed data of the aggregation service in real time, the Redox/Redox-saga frame carries out throttling cache on the data pushed by the aggregation service and carries out calculation through a Web Worker, the Web Worker carries out quantity and cumulant aggregation calculation according to the aggregation precision of a transaction account book selected by a user and updates the calculation result to the Redox state machine;
the aggregated service comprises: io service end; the socket.io server is used for communicating with the analysis module; full/incremental calibration and price screening of full Level2 data was performed.
2. A transaction entrusted ledger and span-length diagram display method is used for the whole process from a browser end to an exchange end, and is characterized by comprising the following steps:
s101: a user enters a transaction target terminal from a browser end and requests to view a transaction entrusted account book and span map data; the transaction target terminal includes: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a client viewing request, acquires target information, merging precision and view information, transmits the target information, the merging precision and the view information to the analysis module for processing, and simultaneously transmits the user viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 order data to the aggregation service; the transaction entrusted ledger and the span map data are constructed based on full Level2 order data;
s104: the aggregation service subscribes full Level2 order data to the exchange-side application programming interface;
s105: the exchange end receives the subscription information of the aggregation service, pushes full Level2 order data to the aggregation service in real time through an application programming interface of the exchange end, performs calibration/aggregation processing in the aggregation service and puts the data into a memory;
s106: when calibration/aggregation processing is carried out in the aggregation service and the memory is put into the aggregation service, the aggregation service pushes real-time full Level2 order data to an analysis module; the analysis module receives the full Level2 order data and processes the order data to obtain a transaction entrusted ledger and span map data; the processing and treating process comprises the following steps: calling Web Worker asynchronous calculation precision combination and span accumulation according to the full Level2 order data;
s107: after processing, the analysis module updates the single data stream to the rendering module through the Redox framework;
s108: the rendering module synchronously updates the visible transaction entrusted ledger book and the span map data to the feedback module;
s109: and the feedback module displays the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
3. The method of claim 2, wherein the method for the aggregation service to subscribe to full Level2 order book data from the exchange-side api is as follows:
the aggregated service comprises: a sub-service; the sub-service is used as a subscription service; the analysis module subscribes a price window data parameter from the sub-service; the sub-service subscribes full Level2 order data to the exchange application programming interface according to the subscribed parameter range and the corresponding price window;
when full Level2 order data is obtained, the sub-service pushes the full Level2 order data to the analysis module.
4. The transaction delegation ledger and span map display method of claim 2, wherein the aggregation service further comprises: and subscribing a task management algorithm, wherein the subscribing task management algorithm adopts a modified LRU algorithm.
5. The transaction delegation ledger and span-graph display method of claim 2, wherein the aggregation service is deployed separately.
6. A transaction entrusted ledger and span-length diagram display method is used for a browser end, and is characterized by comprising the following steps:
s201: the user enters a transaction target terminal from a browser end and views a transaction entrusted ledger and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation module;
s202: the feedback module receives a client viewing request and sends a layout loading request to the rendering module;
s203: the rendering module performs a DOM update to the feedback module,
s204: after the updating, the feedback module obtains the view visible region parameters and the data parameters, and synchronizes the view visible region parameters and the data parameters to the analysis module, wherein the analysis module comprises: the system comprises a Redox state machine and a Redox-saga frame, wherein Web Worker asynchronous calculation is accessed into the frame;
s205: a Redox state machine of the analysis module synchronizes the visible region parameters and the data parameters of the view; the analysis module subscribes full Level2 data to the aggregation service and receives push data of the aggregation service in real time;
s206: when the analysis module receives the pushed data of the aggregation service in real time, the analysis module performs throttling cache on the data pushed by the aggregation service, and the data is calculated through a Web Worker, and the Web Worker performs quantity and cumulant aggregation calculation according to the aggregation precision of the transaction entrusted account book selected by the user; updating the calculation result to a Redox state machine of the analysis module;
s207: when the transaction entrusted ledger data and the span map data are updated to the Redox state machine, the analysis module updates the transaction entrusted ledger data and the span map data in a one-way data flow direction rendering module;
s208: after the rendering module is updated, the rendering module updates DOM to the feedback module;
s209: after the data is updated to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
7. The transaction ledger and span-length map display method of claim 6, for a browser side, further comprising:
s301: when the feedback module interacts with a user, the user rolls to cause the visible area to change, at the moment, the feedback module checks whether data filling meets the DOM layout, and if so, the current DOM layout is displayed; if not, executing batch completion;
the batch supplementing method comprises the following steps: the feedback module acquires the view visible region parameters and the data parameters and synchronizes the view visible region parameters and the data parameters to the analysis module; the parsing module includes: the system comprises a Redox state machine and a Redox-saga frame, wherein Web Worker asynchronous calculation is accessed into the frame;
s302: a Redox state machine of the analysis module synchronizes the visible region parameters and the data parameters of the view; the analysis module supplements full Level2 data to the aggregation service according to conditions and receives push data of the aggregation service in real time;
s303: the analysis module performs throttling cache on data pushed by the aggregation service, calculates through a Web Worker, performs quantity and cumulant aggregation calculation according to the aggregation precision of a transaction entrusted account book selected by a user, and updates a calculation result to a Redox state machine;
s304: when the transaction entrusted ledger data and the span map data are updated to the Redox state machine, the analysis module updates the transaction entrusted ledger data and the span map data in a one-way data flow direction rendering module;
s305: after the rendering module is updated, the rendering module updates DOM to the feedback module;
s306: after the data is updated to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction entrusted account book and the span map data to the user side through the UI component interface.
8. The method of claim 6, wherein the method for the feedback module to obtain the view visible region parameter and the data parameter comprises:
monitoring DOM change of a drawing area by a constructor in a feedback module;
filling the target drawing area by the drawing area DOM, wherein the drawing area DOM is changed, and the user view display area is changed;
local updating is realized according to the change of the user view display area; the local update content includes: a lowest buying price interval and a highest selling price interval.
9. The method of claim 6, wherein when the rendering module is updated; the method for updating DOM to the feedback module by the rendering module comprises the following steps:
the rendering module is used for drawing a transaction entrusted ledger book and a span map;
the method for drawing the transaction entrusted ledger comprises the following steps:
the rendering module is used for drawing the order forms of the buy order and the order form at the same time to obtain only a display item and a cache item; meanwhile, the height of the hidden area data is only calculated and reset to the height of the list, so that the height of the scroll bar is opened, and the position of the scroll bar is positioned; the actual display effect is consistent with the rendering of all data;
the method for drawing the span map comprises the following steps:
drawing the pixel length N of the region according to the data point array length M and the X axis of the area map; if M is larger than N, randomly taking 3N data and disordering the data to form an array K; if M is less than or equal to N; the subsequent steps are omitted;
adding K to the area map starting point [ x1, 0] and the ending point [ xn, 0 ];
traversing each data element of K and calculating the distance Dis between the point and all other points, recording the distance and the indexes index0 and index1 of the two points to a new array R, wherein the elements of the new array R are [ Dis, index0 and index1 ];
sequencing the new array R in the positive sequence according to Dis, and if two indexes have points which are not deleted, recording the points into a deleted array RM; the above process is circulated until len (rm) 2N is found, and the deletion can be finished;
and traversing K, deleting points of the index in the RM, and sequencing according to the price to obtain simplified area map data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110322352.9A CN113031926B (en) | 2021-03-25 | 2021-03-25 | Transaction commission account book and span diagram display system and method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110322352.9A CN113031926B (en) | 2021-03-25 | 2021-03-25 | Transaction commission account book and span diagram display system and method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113031926A true CN113031926A (en) | 2021-06-25 |
| CN113031926B CN113031926B (en) | 2023-12-29 |
Family
ID=76474028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110322352.9A Active CN113031926B (en) | 2021-03-25 | 2021-03-25 | Transaction commission account book and span diagram display system and method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113031926B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015176519A1 (en) * | 2014-05-21 | 2015-11-26 | 华南理工大学 | Distributed collaborative method for improving application efficiency of web browser |
| CN106355270A (en) * | 2016-08-24 | 2017-01-25 | 张家林 | User transaction trust method and device |
| CN111880790A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, page rendering system, and computer-readable storage medium |
-
2021
- 2021-03-25 CN CN202110322352.9A patent/CN113031926B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2015176519A1 (en) * | 2014-05-21 | 2015-11-26 | 华南理工大学 | Distributed collaborative method for improving application efficiency of web browser |
| CN106355270A (en) * | 2016-08-24 | 2017-01-25 | 张家林 | User transaction trust method and device |
| CN111880790A (en) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | Page rendering method, page rendering system, and computer-readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113031926B (en) | 2023-12-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106570098B (en) | Page refreshing method and device | |
| AU2008206688B2 (en) | Method and system for creating IT-oriented server-based web applications | |
| US9369406B2 (en) | Resource server providing a rapidly changing resource | |
| US10540077B1 (en) | Conserving processing resources by controlling updates to damaged tiles of a content page | |
| US10185703B2 (en) | Web site design system integrating dynamic layout and dynamic content | |
| CN101176079B (en) | Method for distributing computing between server and client | |
| US8711148B2 (en) | Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects | |
| US9805135B2 (en) | Systems and methods for updating rich internet applications | |
| US20150331836A9 (en) | Graceful degradation of level-of-detail in document rendering | |
| US20070220013A1 (en) | System and method for displaying data on a thin client | |
| CN104052809B (en) | A kind of flow-dividing control method and apparatus of website test | |
| US20160103927A1 (en) | Automatic sizing of wrap packages of cards | |
| CN109388317B (en) | Picture loading method, terminal device and storage medium | |
| CN110598149A (en) | Webpage access method, device and storage medium | |
| JP2012514802A (en) | Interactive information system | |
| US20030200255A1 (en) | System and method for preventing timeout of a client | |
| CN110717120A (en) | Webpage list display method and device | |
| US20140344074A1 (en) | Network content message placement management | |
| EP1754197A1 (en) | Displaying graphical textures | |
| CN113031926B (en) | Transaction commission account book and span diagram display system and method | |
| US20110066935A1 (en) | Data file and rule driven synchronous or asynchronous document generation | |
| Wenzel et al. | Towards cross-platform collaboration-Transferring real-time groupware to the browser | |
| CN107918643A (en) | A kind of Webpage display process and terminal | |
| CN111222302A (en) | Webpage rendering control method, control device and computer readable medium | |
| US20140095244A1 (en) | Facility visualization and monitoring |
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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: Floor 1, No.81 Xinle Road, high tech Zone, Chengdu, Sichuan 610041 Applicant after: Chengdu Cooper Innovation Technology Co.,Ltd. Address before: Floor 1, No.81 Xinle Road, high tech Zone, Chengdu, Sichuan 610041 Applicant before: Chengdu Cooper blockchain Technology Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20230912 Address after: No. 1, Jinyun East Third Lane, High tech Zone, Chengdu, Sichuan, 610096 Applicant after: Sichuan Cooper Technology Group Co.,Ltd. Address before: Floor 1, No.81 Xinle Road, high tech Zone, Chengdu, Sichuan 610041 Applicant before: Chengdu Cooper Innovation Technology Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |