CN113031926B - Transaction commission account book and span diagram display system and method - Google Patents
Transaction commission account book and span diagram display system and method Download PDFInfo
- Publication number
- CN113031926B CN113031926B CN202110322352.9A CN202110322352A CN113031926B CN 113031926 B CN113031926 B CN 113031926B CN 202110322352 A CN202110322352 A CN 202110322352A CN 113031926 B CN113031926 B CN 113031926B
- Authority
- CN
- China
- Prior art keywords
- data
- module
- account book
- analysis module
- transaction
- 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
- 238000000034 method Methods 0.000 title claims abstract description 67
- 238000010586 diagram Methods 0.000 title claims description 26
- 230000002776 aggregation Effects 0.000 claims abstract description 103
- 238000004220 aggregation Methods 0.000 claims abstract description 103
- 238000004458 analytical method Methods 0.000 claims abstract description 82
- 238000009877 rendering Methods 0.000 claims abstract description 61
- 230000008569 process Effects 0.000 claims abstract description 18
- 238000012545 processing Methods 0.000 claims abstract description 18
- 230000003993 interaction Effects 0.000 claims abstract description 14
- 238000004364 calculation method Methods 0.000 claims description 37
- DBGIVFWFUFKIQN-UHFFFAOYSA-N (+-)-Fenfluramine Chemical compound CCNC(C)CC1=CC=CC(C(F)(F)F)=C1 DBGIVFWFUFKIQN-UHFFFAOYSA-N 0.000 claims description 28
- 238000004422 calculation algorithm Methods 0.000 claims description 23
- 230000008859 change Effects 0.000 claims description 13
- 238000007726 management method Methods 0.000 claims description 10
- 238000009825 accumulation Methods 0.000 claims description 9
- 238000006243 chemical reaction Methods 0.000 claims description 8
- 238000012216 screening Methods 0.000 claims description 5
- 230000000694 effects Effects 0.000 claims description 3
- 230000001360 synchronised effect Effects 0.000 claims description 3
- 230000000295 complement effect Effects 0.000 claims description 2
- 238000012217 deletion Methods 0.000 claims description 2
- 230000037430 deletion Effects 0.000 claims description 2
- 239000013589 supplement Substances 0.000 claims description 2
- 238000011161 development Methods 0.000 description 3
- 230000000903 blocking effect 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
- 238000013515 script Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 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
- 230000006870 function Effects 0.000 description 1
- 230000002452 interceptive effect Effects 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
- 238000012913 prioritisation 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
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 commission account book and span map display system and method, comprising: the user enters the terminal and requests to check the transaction commission account book and span map data; the feedback module receives the client request, acquires the target information, the merging precision and the view information, transmits the target information, the merging precision and the view information to the analysis module for processing, and simultaneously transmits the request to the analysis module; the analysis module receives a request to subscribe the full Level2 business card 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 the analysis module; the analysis module receives the full Level2 business board data to process to obtain transaction commission account and span map data, and updates a single data stream to the rendering module through a reduce frame; the rendering module synchronously updates the visible transaction commission account book and span map data to the feedback module; and the feedback module displays the real-time data to the user terminal through the UI component interface. According to the method and the device, the interaction smoothness is improved, the resources of the server side are saved, and the system efficiency is improved.
Description
Technical Field
The invention belongs to the technical field of internet interaction, and particularly relates to a transaction commission account book and span map display system and method.
Background
In a transaction commission book (Orderboost) transaction mode, a transaction terminal webpage often faces the impact of pushing a large amount of market data, a user's browser kernel usually processes DOM analysis and data calculation in a single process, processing interaction and processing calculation are not isolated, and interaction blocking is caused, so that reasonable algorithm optimization is required to be performed, performance overhead is saved, and interaction smoothness is improved. The trading product terminal is generally provided with a trading disc and a span graph containing orders of both parties, so that a trading user can conveniently check market hanging order information and multi-space comparison, the trading product terminal is generally required to be updated in real time to ensure that the user captures market trends in time, and the performance resources of a complex trading terminal webpage are more scarce; meanwhile, due to the limitation of resources at the browser end, the display end of the transaction for expanding the Goinbini cannot support the aggregate calculation of mass data, real-time data of both sides of the transaction are displayed, the data amount is unlimited, when both sides of the transaction compare with span graphs, the data amount is too large, and real-time screening causes the Web graph to draw and clamp, so that the resource consumption is too large. In a Web browser of a user, a modern front-end framework converts an ES6 standard grammar into an ES5 standard javascript to run, and the javascript is historically designed to run in a single thread in the browser because of controlling a DOM structure and a CSS style of the browser, so that a developer can only write single thread logic, and performance is often a bottleneck although development difficulty is reduced.
Along with the increasing complexity of the webpage terminal, more and more things need to be processed in the javascript single thread, calculation and drawing compete for resources, calculation blocking often occurs, and particularly on the webpage of the exchange terminal, various complicated associated data streams and webpage component structures exist, and meanwhile, the use scene of the javascript single thread needs to ensure great smoothness, stability and instantaneity.
Therefore, it is needed to provide a method for splitting and calculating data at each level, which can reasonably utilize and transfer complexity and cost, and save browser resources.
Disclosure of Invention
Based on the problems, the invention provides a transaction consignment account book and span map display system and a method; the interaction smoothness can be improved, the resources of the server side are saved, and the system efficiency is improved.
In a first aspect, the present application shows a transaction proxy 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 commission account book component, a feedback module DOM structure and a UI display component; the span diagram component and the transaction commission account book component are used for carrying out data interaction with a user; the DOM structure is used for receiving DOM update; the UI display component is used for displaying view data; the feedback module executes a task queue by adopting a javascript asynchronous flow; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a reaction frame; the reaction framework is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving unidirectional data streams synchronized by the analysis module; the rendering module is used for drawing a transaction commission account book and a span diagram;
the parsing module includes: a Redux state machine and a Redux/Redux-saga framework; the framework is accessed with Web workbench asynchronous calculation; the reduce state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module; subscribing full 2 data to the aggregation service, receiving push data of the aggregation service in real time, throttling and caching the data pushed by the aggregation service by the Redux/Redux-saga framework, calculating by a Web Worker, carrying out quantity and accumulation quantity aggregation calculation according to the transaction commission account book aggregation precision selected by a user, and updating a calculation result to a Redux state machine;
the aggregation service includes: socket.io server; the socket.io server is used for communicating with the analysis module; full/delta calibration and price screening of full Level2 data was performed.
In a second aspect, the present application shows a transaction proxy account book and span map display method, for a browser-side to exchange-side overall process, the method including:
s101: a user enters a terminal of a transaction target from a browser end and requests to view transaction commission account book and span map data; the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a customer viewing request, acquires target information, merging precision and view information, transmits the target information, merging precision and view information into the analysis module for processing, and simultaneously transmits the customer viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 business plate data to the aggregation service; the transaction commission account book and span map data are constructed based on full Level2 business board data;
s104: the aggregation service subscribes full Level2 business plate data to an application programming interface of the exchange end;
s105: the exchange terminal receives the subscription information of the aggregation service, pushes the full Level2 business plate data to the aggregation service in real time through an application programming interface of the exchange terminal, 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, after the internal memory is put into the aggregation service, the aggregation service pushes real-time full-quantity Level2 business disc data to an analysis module; the analysis module receives the full Level2 business board data and processes the data to obtain transaction commission account book and span map data; the processing process comprises the following steps: calling Web workbench asynchronous calculation precision merging and span accumulating according to full Level2 business plate data;
s107: after processing, the analysis module updates a single data stream to the rendering module through the reduce frame;
s108: the rendering module synchronously updates the visible transaction commission account book and span map data to the feedback module;
s109: and the feedback module displays the real-time transaction commission account book and span map data to the user through the UI component interface.
In a third aspect, the present application shows a transaction proxy account book and span map display method, which is used for a browser, and is characterized in that the method includes:
s201: the user enters a transaction target terminal from a browser end to check transaction commission account book and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analyzing 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 updates the DOM to the feedback module,
s204: after updating, the feedback module acquires the view visible region parameter and the data parameter, and synchronizes the view visible region parameter and the data parameter to the analysis module, wherein the analysis module comprises: the system comprises a Redux state machine and a Redux-saga framework, wherein Web workbench asynchronous calculation is connected into the framework;
s205: the Redux state machine of the analysis module synchronizes view visible region parameters and data parameters; 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 push data of the aggregation service in real time, the analysis module throttles and caches the data pushed by the aggregation service, and calculates the data through a Web Worker, and the Web Worker calculates the aggregation of the quantity and the accumulation according to the aggregation precision of the transaction commission account book selected by the user; updating the calculation result to a Redux state machine of the analysis module;
s207: after updating to the reduce state machine, the analysis module updates transaction commission account book data and span map data by a unidirectional data flow rendering module;
s208: after the rendering module is updated, the rendering module updates the DOM to the feedback module;
s209: after updating to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction commission account and span map data to the user through the UI component interface.
The beneficial effects of this application are:
splitting the full span diagram of the exchange and the Level2 data calculation, saving the page resources of the browser, and providing real-time quotation data for users with higher interaction smoothness; the aggregation service efficiently schedules and processes the matching engine application program interface data and the user subscription data tasks as required, so that the resources of a server are saved; the feedback module monitors the state of the user behavior, adjusts system parameters in real time, and enables system resources to only serve the part of data concerned by the user, so that the system efficiency is improved; the transaction commission account book and the span map are packaged, so that multi-project multiplexing can be realized, and development cost is saved; the virtual list and the price window mechanism enable the interactive effect displayed to the user to be all data lists, and the actual user browser only processes the part needing to be browsed and performs data calculation according to the need. Optimizing an area map random edge sampling algorithm, eliminating redundant data points and accelerating drawing of a span map; and the calculation of the Web workbench parallel to the main flow is utilized, the front-end calculation capability is expanded, and the page performance overhead is greatly saved as a whole.
Drawings
For a clearer description of the technical solutions of the application, the drawings that are necessary for the embodiments will be briefly described, it being obvious to a person skilled in the art that other drawings can be obtained from these drawings without inventive effort.
FIG. 1 is a schematic diagram of a transaction proxy ledger and span map display system shown in the present application;
FIG. 2 is a schematic diagram of a method for displaying a transaction proxy account book and span map for an overall process from a browser end to a exchange end;
FIG. 3 is a schematic diagram of a method for displaying a transaction proxy account book and span map for a browser end;
FIG. 4 is a flowchart of a feedback module of the present application acquiring view visible region parameters and data parameters;
FIG. 5 is an aggregate 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
For the convenience of understanding of those skilled in the art, the technical terms related to the technical solution shown in the present application will be explained first.
DOM (Document Object Model ), is a standard programming interface that handles extensible markup language. The method is an application program interface which is irrelevant to a platform and a language, can dynamically access programs and scripts, update the content and the structure of the programs and the scripts, can further process documents, and can add the processed results to a current page.
A UI component (User Interface Module, user interface component) for user interface interactions.
javascript is a lightweight, interpreted or just-in-time programming language with functional prioritization.
The act framework is a Web development framework and is mainly used for constructing a UI, and various parameters such as declaration codes can be transmitted in the act framework to help render the UI; static HTML DOM elements; dynamic variables, and even interactable application components, may also be passed.
Redux is an application data flow framework for application state management.
Web workbench is a multi-threaded solution that can run some computationally intensive code without freezing the user interface.
Referring to FIG. 1, FIG. 1 illustrates a transaction proxy 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 commission account book component, a feedback module DOM structure and a UI display component; the span diagram component and the transaction commission account book component are used for carrying out data interaction with a user; the DOM structure is used for receiving DOM update; the UI display component is used for displaying view data; the feedback module executes a task queue by adopting a javascript asynchronous flow; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a reaction frame; the reaction framework is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving unidirectional data streams synchronized by the analysis module; the rendering module is used for drawing a transaction commission account book and a span diagram;
the parsing module includes: a Redux state machine and a Redux/Redux-saga framework; the framework is accessed with Web workbench asynchronous calculation; the reduce state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module; subscribing full 2 data to the aggregation service, receiving push data of the aggregation service in real time, throttling and caching the data pushed by the aggregation service by the Redux/Redux-saga framework, calculating by a Web Worker, carrying out quantity and accumulation quantity aggregation calculation according to the transaction commission account book aggregation precision selected by a user, and updating a calculation result to a Redux state machine;
the aggregation service includes: socket.io server; the socket.io server is used for communicating with the analysis module; full/delta calibration and price screening of full Level2 data was performed.
Referring to fig. 2, fig. 2 shows a transaction proxy account book and span map display method for an overall process from a browser end to a exchange end, where the method includes:
s101: a user enters a terminal of a transaction target from a browser end and requests to view transaction commission account book and span map data; the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a customer viewing request, acquires target information, merging precision and view information, transmits the target information, merging precision and view information into the analysis module for processing, and simultaneously transmits the customer viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 business plate data to the aggregation service; the transaction commission account book and span map data are constructed based on full Level2 business board data;
s104: the aggregation service subscribes full Level2 business plate data to an application programming interface of the exchange end; in one possible embodiment: the method for subscribing the full Level2 business plate data by the aggregation service from the application programming interface of the exchange end comprises the following steps: the aggregation service includes: sub-services; the sub-service serves as a subscription service; the analysis module subscribes price window data parameters from the sub-service; the sub-service dynamically subscribes full 2 buying and selling disc data to an application programming interface of the exchange end according to a corresponding price window according to the subscribed parameter range; when the full-Level 2 business turn-around data is obtained, the sub-service pushes the full-Level 2 business turn-around data to the analysis module; the aggregated service further includes: a subscription task management algorithm, wherein the subscription task management algorithm adopts a modified LRU algorithm;
s105: the exchange terminal receives the subscription information of the aggregation service, pushes the full Level2 business plate data to the aggregation service in real time through an application programming interface of the exchange terminal, 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, after the internal memory is put into the aggregation service, the aggregation service pushes real-time full-quantity Level2 business disc data to an analysis module; the analysis module receives the full Level2 business board data and processes the data to obtain transaction commission account book and span map data; the processing process comprises the following steps: calling Web workbench asynchronous calculation precision merging and span accumulating according to full Level2 business plate data;
s107: after processing, the analysis module updates a single data stream to the rendering module through the reduce frame;
s108: the rendering module synchronously updates the visible transaction commission account book and span map data to the feedback module;
s109: and the feedback module displays the real-time transaction commission account book and span map data to the user through the UI component interface.
Referring to fig. 3, fig. 3 shows a transaction proxy account book and span map display method, which is used for a browser, and the method includes:
s201: the user enters a transaction target terminal from a browser end to check transaction commission account book and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analyzing 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 updates the DOM to the feedback module,
s204: after updating, the feedback module acquires the view visible region parameter and the data parameter, and synchronizes the view visible region parameter and the data parameter to the analysis module, wherein the analysis module comprises: the system comprises a Redux state machine and a Redux-saga framework, wherein Web workbench asynchronous calculation is connected into the framework;
s205: the Redux state machine of the analysis module synchronizes view visible region parameters and data parameters; 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 push data of the aggregation service in real time, the analysis module throttles and caches the data pushed by the aggregation service, and calculates the data through a Web Worker, and the Web Worker calculates the aggregation of the quantity and the accumulation according to the aggregation precision of the transaction commission account book selected by the user; updating the calculation result to a Redux state machine of the analysis module;
s207: after updating to the reduce state machine, the analysis module updates transaction commission account book data and span map data by a unidirectional data flow rendering module;
s208: after the rendering module is updated, the rendering module updates the DOM to the feedback module;
s209: after updating to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction commission account and span map data to the user through the UI component interface.
In a feasible embodiment, the transaction commission account book and span map display method is used for a browser end; the method further comprises the steps of:
s301: when the feedback module interacts with the user, the user scrolls to change the visible area, and at the moment, the feedback module checks whether the data filling meets the DOM layout, and if so, the current DOM layout is displayed; if not, executing batch complement;
the batch filling 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 Redux state machine, a Redux-saga framework, and a Web workbench asynchronous calculation is connected into the framework;
s302: the Redux state machine of the analysis module synchronizes view visible region parameters and data parameters; the analysis module supplements full Level2 data to the aggregation service according to the conditions and receives push data of the aggregation service in real time;
s303: the analysis module performs throttling caching on data pushed by the aggregation service, calculates through a Web workbench, performs quantity and accumulation quantity aggregation calculation according to the transaction commission account book aggregation precision selected by a user, and updates a calculation result to a reduce state machine;
in a viable embodiment, the view refresh is 60fps (frames/second), then the reasonable throttle 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 throttle caching method of the analysis module comprises the following steps:
replacing the data frame received in the 16ms throttling time with the last data in the throttling time;
asynchronous calculation is carried out on the replaced data by adopting a Web worker;
the Web worker performs aggregation calculation of quantity and accumulation according to the data aggregation precision;
and updating the result after the aggregation calculation to a Redux state machine.
S304: after updating to the reduce state machine, the analysis module updates transaction commission account book data and span map data by a unidirectional data flow rendering module;
s305: after the rendering module is updated, the rendering module updates the DOM to the feedback module;
s306: after updating to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction commission account and span map data to the user through the UI component interface. Each UI layout change triggers the feedback module to recalculate.
Referring to fig. 4, fig. 4 shows a flow chart of the feedback module acquiring view visible region parameters and data parameters;
the method for acquiring the view visible region parameters and the data parameters by the feedback module comprises the following steps:
the constructor monitors DOM changes of the drawing area;
filling a target drawing area in a drawing area DOM, wherein the drawing area DOM changes, and a user view shows the change of the area;
local updating is realized according to the change of the user view display area; the local update content includes: the lowest bid interval and the highest bid interval.
The feedback module calculates the acquired visual visible region parameters and the data parameters by adopting a price window mechanism; the maximum data range that needs to be prepared; the computation 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:
drawing a zone DOM acquisition (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 returned element, and is the total height of the element content; drawing a DOM change of a region to enable a getBundingClientRact function to acquire a showHeight (display region height), and obtaining an enlarged data set through self-increasing adjustment of n price windows; where initial n=2, where n is a multiple of the change in the viewable area with user interaction/scrolling view; 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 update;
updating a data area distributed near the visible area according to a part of order sales trays displayed in the visible area of a browser end user; obtaining local update content. And the local updating content maintains a transaction commission account book in the browser.
In a feasible embodiment, the analysis module uses the scene to include precision aggregation and merging the scenes of the same price orders; when the analysis module is in the scene, the feedback module can not fill all the target drawing areas according to the price interval corresponding to a certain layout; when the feedback module updates the visual visible area parameters and the data parameters, triggering the internal drawing check of the feedback module;
if no unfilled region exists, updating through checking;
if the unfilled region exists, the feedback module calculates the filling range, enlarges the height parameter of the display region, and obtains an enlarged data set by self-increasing the adjustment price window of n; where initial n=2, which is a multiple of the change in the viewable area of the view with user interaction/scrolling.
In the process that the analysis module updates transaction commission account book data and span map data by the unidirectional data flow direction rendering module, a specific position updated by the analysis module to the rendering module is a reaction component of the rendering module, and the reaction component is used for calculating DOM update; synchronizing DOM update to a feedback module;
after updating transaction commission account book data and span map data by the analysis module through a unidirectional data stream to the rendering module; the method for updating the DOM to the feedback module by the rendering module comprises the following steps:
the rendering module draws a transaction commission account book and a span diagram; and the rendering module draws a transaction commission account book by adopting a virtual list algorithm and draws a span graph by adopting a DOM Canvas.
The virtual list algorithm is a dynamically rendered DOM structure which is established by the algorithm and is different from a universal standard DOM list in the control of element quantity, and the virtual list algorithm calculates a data set corresponding to a visible area of a current list relative to the full list data through the estimation of the full list data, the visible range of the current list, the user interaction state of a feedback module and the scrolling height of a user and the external height of the list; meanwhile, the DOM frames are combined, so that high-frequency data stream update is solved, and frame output is performed by using the display refresh frequency, so that a small part of views are quickly rendered, and a good fps index is achieved.
The principle of the virtual list algorithm is as follows:
the lower tables are estimated by constructing the Filtermask mask region, so that N lower tables are managed by one Filtermask,
applying the principle of the virtual list algorithm to the scene shown in the application;
the method for drawing the transaction commission account book comprises the following steps:
the rendering module draws two order forms of the buying disc and the selling disc simultaneously, and only obtains display items and cache items;
meanwhile, the hidden area data is only calculated to be high and reset to the height of the list, so that the height of the scroll bar is expanded, and the position of the scroll bar is positioned; the actual display effect is consistent with all data rendering;
the method for drawing the span graph comprises the following steps:
the rendering module draws a transaction commission account book and a span diagram;
the method for drawing the transaction commission account book comprises the following steps:
the rendering module draws two order forms of the buying disc and the selling disc simultaneously, and only obtains display items and cache items; meanwhile, the hidden area data is only calculated to be high and reset to the height of the list, so that the height of the scroll bar is expanded, and the position of the scroll bar is positioned; its actual display effect is consistent with the full data rendering.
The span graph drawing optimization algorithm principle is as follows:
the span graph is a two-dimensional area graph with the price as an X axis and the quantity as a Y axis; when the data volume is too dense, a large number of data points are corresponding to each pixel point in the two-dimensional area map, and the large number of data points have no meaning for 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 Canvas drawing efficiency is improved.
Since the span map is an area map, it is necessary to process a data point matrix of [ [ x1, y1], [ x2, y2], … ] ], which is a two-dimensional array.
The method for drawing the span graph comprises the following steps:
drawing the regional pixel length N according to the data point array length M and the area diagram X axis; if M is greater than N, randomly taking 3N data and forming an array K by scrambling the data; if M < = N; the subsequent steps are omitted;
adding the starting point [ x1,0] and the ending point [ xn,0] of the area diagram into K;
traversing each data element of K, calculating the distance Dis between the point and all other points, and recording the distance and index0, index1 of the two points to a new array R, wherein the elements of the new array R are Dis, index0, index 1;
the new array R is ordered in positive sequence according to Dis, if the two indexes have undeleted points, the undeleted points are recorded into a deleted array RM; the above procedure is looped until len (RM) =2n is found, and deletion can be ended;
traversing K, deleting points of index in RM, and sorting according to price to obtain simplified area map data.
Referring to fig. 5, fig. 5 is an aggregated service workflow diagram;
in a feasible embodiment, the aggregation service is deployed separately; the method for subscribing the full Level2 business plate data by the aggregation service from the application programming interface of the exchange end comprises the following steps:
the aggregation service includes: sub-services; the sub-service serves as a subscription service; the analysis module subscribes price window data parameters from the sub-service; the sub-service dynamically subscribes full 2 buying and selling disc data to an application programming interface of the exchange end according to a corresponding price window according to the subscribed parameter range;
when the full-Level 2 business turn-around data is obtained, the sub-service pushes the full-Level 2 business turn-around 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 includes: and subscribing the task management algorithm, wherein the subscribing task management algorithm adopts a modified LRU algorithm.
The LRU algorithm is used for task management, and real-time on-demand scheduling on-demand calculation is realized.
The present application has been described in detail in connection with specific embodiments and exemplary examples, but such description is not to be construed as limiting the present application. Those skilled in the art will appreciate that various equivalent substitutions, modifications and improvements may be made to the technical solution of the present application and its embodiments without departing from the spirit and scope of the present application, which falls within the scope of the present application, and the scope of the present application is to be determined by the appended claims.
Claims (9)
1. A transaction proxy account book 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 commission account book component, a feedback module DOM structure and a UI display component; the span diagram component and the transaction commission account book component are used for carrying out data interaction with a user; 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 a task queue by adopting a javascript asynchronous flow; the feedback module is used for drawing and calculating the overall layout of the page;
the rendering module includes: a reaction frame; the reaction framework is used for receiving a layout loading request of the feedback module and updating the DOM to the feedback module; receiving unidirectional data streams synchronized by the analysis module; the rendering module is used for drawing a transaction commission account book and a span diagram;
the parsing module includes: a Redux state machine and a Redux/Redux-saga framework; the framework is accessed with Web workbench asynchronous calculation; the Redux state machine is used for receiving the view visible region parameters and the data parameters transmitted by the feedback module, subscribing the full Level2 data to the aggregation service, receiving the push data of the aggregation service in real time, the Redux/Redux-saga framework throttles and caches the data pushed by the aggregation service, and the data is calculated through the Web Worker, and the Web Worker performs quantity and accumulation aggregation calculation according to the transaction commission account book aggregation precision selected by a user and updates the calculation result to the Redux state machine;
the aggregation service includes: socket.io server; the socket.io server is used for communicating with the analysis module; full/delta calibration and price screening of full Level2 data was performed.
2. The method for displaying the transaction consignment account book and the span map is used for the whole process from a browser end to a exchange end, and is characterized by comprising the following steps:
s101: a user enters a terminal of a transaction target from a browser end and requests to view transaction commission account book and span map data; the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analysis module and an aggregation service;
s102: the feedback module receives a customer viewing request, acquires target information, merging precision and view information, transmits the target information, merging precision and view information into the analysis module for processing, and simultaneously transmits the customer viewing request to the analysis module;
s103: the analysis module receives a user viewing request and subscribes full Level2 business plate data to the aggregation service; the transaction commission account book and span map data are constructed based on full Level2 business board data;
s104: the aggregation service subscribes full Level2 business plate data to an application programming interface of the exchange end;
s105: the exchange terminal receives the subscription information of the aggregation service, pushes the full Level2 business plate data to the aggregation service in real time through an application programming interface of the exchange terminal, 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, after the internal memory is put into the aggregation service, the aggregation service pushes real-time full-quantity Level2 business disc data to an analysis module; the analysis module receives the full Level2 business board data and processes the data to obtain transaction commission account book and span map data; the processing process comprises the following steps: calling Web workbench asynchronous calculation precision merging and span accumulating according to full Level2 business plate data;
s107: after processing, the analysis module updates a single data stream to the rendering module through the reduce frame;
s108: the rendering module synchronously updates the visible transaction commission account book and span map data to the feedback module;
s109: and the feedback module displays the real-time transaction commission account book and span map data to the user through the UI component interface.
3. The method for displaying a transaction commission account book and span map according to claim 2, wherein the method for subscribing the full Level2 sales data from the application programming interface of the exchange end by the aggregation service is as follows:
the aggregation service includes: sub-services; the sub-service serves as a subscription service; the analysis module subscribes price window data parameters from the sub-service; the sub-service dynamically subscribes full 2 buying and selling disc data to an application programming interface of the exchange end according to a corresponding price window according to the subscribed parameter range;
when the full-Level 2 business turn-around data is obtained, the sub-service pushes the full-Level 2 business turn-around data to the analysis module.
4. The transaction proxy ledger and span map display method of claim 2, wherein the aggregation service further comprises: and subscribing the task management algorithm, wherein the subscribing task management algorithm adopts a modified LRU algorithm.
5. The transaction proxy ledger and span map display method of claim 2, wherein the aggregated service is deployed separately.
6. A transaction commission account book and span map display method for a browser end, the method comprising:
s201: the user enters a transaction target terminal from a browser end to check transaction commission account book and span map data, and the transaction target terminal comprises: the system comprises a feedback module, a rendering module, an analyzing 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 updates the DOM to the feedback module,
s204: after updating, the feedback module acquires the view visible region parameter and the data parameter, and synchronizes the view visible region parameter and the data parameter to the analysis module, wherein the analysis module comprises: the system comprises a Redux state machine and a Redux-saga framework, wherein Web workbench asynchronous calculation is connected into the framework;
s205: the Redux state machine of the analysis module synchronizes view visible region parameters and data parameters; 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 push data of the aggregation service in real time, the analysis module throttles and caches the data pushed by the aggregation service, and calculates the data through a Web Worker, and the Web Worker calculates the aggregation of the quantity and the accumulation according to the aggregation precision of the transaction commission account book selected by the user; updating the calculation result to a Redux state machine of the analysis module;
s207: after updating to the reduce state machine, the analysis module updates transaction commission account book data and span map data by a unidirectional data flow rendering module;
s208: after the rendering module is updated, the rendering module updates the DOM to the feedback module;
s209: after updating to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction commission account and span map data to the user through the UI component interface.
7. The transaction proxy account book and span map display method according to claim 6, which is used for a browser, wherein the method further comprises:
s301: when the feedback module interacts with the user, the user scrolls to change the visible area, and at the moment, the feedback module checks whether the data filling meets the DOM layout, and if so, the current DOM layout is displayed; if not, executing batch complement;
the batch filling 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 Redux state machine and a Redux-saga framework, wherein Web workbench asynchronous calculation is connected into the framework;
s302: the Redux state machine of the analysis module synchronizes view visible region parameters and data parameters; the analysis module supplements full Level2 data to the aggregation service according to the conditions and receives push data of the aggregation service in real time;
s303: the analysis module performs throttling caching on data pushed by the aggregation service, calculates through a Web workbench, performs quantity and accumulation quantity aggregation calculation according to the transaction commission account book aggregation precision selected by a user, and updates a calculation result to a reduce state machine;
s304: after updating to the reduce state machine, the analysis module updates transaction commission account book data and span map data by a unidirectional data flow rendering module;
s305: after the rendering module is updated, the rendering module updates the DOM to the feedback module;
s306: after updating to the feedback module, the feedback module interacts with a user; and displaying the real-time transaction commission account and span map data to the user through the UI component interface.
8. The method for displaying the transaction commission account book and the span map according to claim 6, wherein the method for obtaining the view visible area parameter and the data parameter by the feedback module comprises the following steps:
the internal constructor of the feedback module monitors DOM changes of the drawing area;
filling a target drawing area in a drawing area DOM, wherein the drawing area DOM changes, and a user view shows the change of the area;
local updating is realized according to the change of the user view display area; the local update content includes: the lowest bid interval and the highest bid interval.
9. The transaction proxy account book and span map display method of claim 6, wherein when the rendering module is updated; the method for updating the DOM to the feedback module by the rendering module comprises the following steps:
the rendering module draws a transaction commission account book and a span diagram;
the method for drawing the transaction commission account book comprises the following steps:
the rendering module draws two order forms of the buying disc and the selling disc simultaneously, and only obtains display items and cache items; meanwhile, the hidden area data is only calculated to be high and reset to the height of the list, so that the height of the scroll bar is expanded, and the position of the scroll bar is positioned; the actual display effect is consistent with all data rendering;
the method for drawing the span graph comprises the following steps:
drawing the regional pixel length N according to the data point array length M and the area diagram X axis; if M is greater than N, randomly taking 3N data and forming an array K by scrambling the data; if M is less than or equal to N; the subsequent steps are omitted;
adding the starting point [ x1,0] and the ending point [ xn,0] of the area diagram into K;
traversing each data element of K, calculating the distance Dis between the point and all other points, and recording the distance and index0, index1 of the two points to a new array R, wherein the elements of the new array R are Dis, index0, index 1;
the new array R is ordered in positive sequence according to Dis, if the two indexes have undeleted points, the undeleted points are recorded into a deleted array RM; the above procedure is looped until len (RM) =2n is found, and deletion can be ended;
traversing K, deleting points of index in RM, and sorting according to 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 CN113031926A (en) | 2021-06-25 |
| CN113031926B true 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 |
|---|---|
| CN113031926A (en) | 2021-06-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA2465536C (en) | Methods and systems for preemptive and predictive page caching for improved site navigation | |
| AU2008206688B2 (en) | Method and system for creating IT-oriented server-based web applications | |
| CN101176079B (en) | Method for distributing computing between server and client | |
| US20040243928A1 (en) | Maintaining screen and form state in portlets | |
| CN109726074A (en) | Log processing method, device, computer equipment and storage medium | |
| US9805135B2 (en) | Systems and methods for updating rich internet applications | |
| WO2016026384A1 (en) | Client page display method, device and system | |
| US20100268694A1 (en) | System and method for sharing web applications | |
| CN103353886A (en) | Method and system for previewing webpage | |
| US10313746B2 (en) | Server, client and video processing method | |
| US20140180828A1 (en) | Information processing apparatus, information processing method, information processing program, and recording medium having stored therein information processing program | |
| CN105117491B (en) | Page push method and apparatus | |
| CN110083616A (en) | Page data processing method, device, equipment and computer readable storage medium | |
| CN104052809A (en) | Distribution control method and device for web testing | |
| US20140324954A1 (en) | Method for browsing webpage picture and client device therefor | |
| CN110717120A (en) | Webpage list display method and device | |
| CN105955714A (en) | Mixed development front end MVC frame implementation method and system | |
| US20110231250A1 (en) | System and Method for Displaying Advertisements on a User Device Based on User Preferences While Operative by the User | |
| US20140344074A1 (en) | Network content message placement management | |
| US11431634B2 (en) | Client device and resource manager load sharing | |
| CN113031926B (en) | Transaction commission account book and span diagram display system and method | |
| CA2567631A1 (en) | Displaying graphical textures | |
| CN113448649B (en) | Redis-based home page data loading server and method | |
| CN110020320A (en) | The method and apparatus for caching page pictures | |
| CN109429101A (en) | The desktop loading method and device of Interactive Internet TV |
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 |
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. |
|
| CB02 | Change of applicant information | ||
| 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. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |