Data display method, device, terminal device and storage medium

Abstract

The embodiment of the present application provides a data display method, apparatus, terminal device and storage medium, the method comprising: after loading a browser page, obtaining an off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread; transferring the off-screen Canvas object to the web page working thread; obtaining a Canvas context object through the web page working thread and based on the off-screen Canvas object; drawing the table data to be drawn on the Canvas canvas through the web page working thread and based on the Canvas context object to obtain a drawing result; and displaying the drawing result on the browser page through the main thread. The use of this application can reduce the performance overhead of the terminal device and reduce the problem of page freezes caused by the busy main thread.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a data display method, apparatus, terminal device, and storage medium. Background Art

[0002] Currently, for tables, such as long lists, rendering is mainly done on the visible area, that is, only the currently visible area is rendered. Figure 1a As shown, Figure 1a Elements 1 to 6 are the starting offset startOffset, and elements 15 to L are the ending offset endOffset. Figure 1a The visible area displays elements 7-14, with the position of element 7 being the start index and the position of element 14 being the end index. Specifically, the terminal device can obtain the size and position of the current visible area in real time, and calculate the data that needs to be displayed in the current visible area based on the size and position of the current visible area through the main thread to render it on the list, and then remove the data that has overflowed the current visible area from the list. However, the above process requires frequent operations on the Document Object Model (DOM) according to changes in the visible area, resulting in a large performance consumption of the terminal device, and executing the above operations through the main thread when the main thread is relatively busy may cause problems such as page freezes. Summary of the Invention

[0003] The embodiments of the present application provide a data display method, apparatus, terminal device, and storage medium, which can reduce the performance overhead of the terminal device and alleviate the problem of page freezes caused by the busy main thread.

[0004] In a first aspect, an embodiment of the present application provides a data display method, comprising:

[0005] After loading the browser page, obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread;

[0006] Pass the off-screen Canvas object into the web page worker thread;

[0007] Get the Canvas context object through the web worker thread and based on the off-screen Canvas object;

[0008] Drawing the table data to be drawn on the Canvas canvas through the webpage worker thread and according to the Canvas context object to obtain a drawing result;

[0009] The drawing result is displayed on the browser page through the main thread.

[0010] In a second aspect, an embodiment of the present application provides a data display device, comprising:

[0011] An acquisition module is used to acquire, through the main thread, an off-screen Canvas object corresponding to the Canvas object of the browser page after the browser page is loaded;

[0012] A processing module, configured to transfer the off-screen Canvas object to a webpage working thread;

[0013] The acquisition module is further configured to acquire a Canvas context object through a webpage worker thread and based on the off-screen Canvas object;

[0014] The processing module is further configured to draw the table data to be drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result;

[0015] A display module is used to display the drawing result on the browser page through the main thread.

[0016] In a third aspect, an embodiment of the present application provides a terminal device comprising a processor and a memory; wherein the memory is used to store a computer program, the computer program comprises program instructions, and the processor is configured to call the program instructions to execute the method described in the first aspect.

[0017] In a fourth aspect, an embodiment of the present application provides a computer storage medium, wherein program instructions are stored in the computer storage medium, and when the program instructions are executed, they are used to implement the method described in the first aspect.

[0018] To sum up, after loading the browser page, the terminal device can obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, and pass the off-screen Canvas object to the web page working thread; the terminal device can obtain the Canvas context object according to the off-screen Canvas object through the web page working thread, and draw the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain the drawing result, and then display the drawing result on the browser page through the main thread. This process can greatly reduce the performance loss of the terminal device and reduce the page jamming caused by the main thread being too busy. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0020] Figure 1a It is a long list showing the process diagram;

[0021] Figure 1b This is a schematic diagram of data transmission between a main thread and a worker thread provided in an embodiment of the present application;

[0022] Figure 2 This is a flow chart of a data display method provided in an embodiment of the present application;

[0023] Figure 3 This is a flow chart of another data display method provided in an embodiment of the present application;

[0024] Figure 4 This is a schematic structural diagram of a data display device provided in an embodiment of the present application;

[0025] Figure 5 This is a structural diagram of a terminal device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0026] The technical solutions in the embodiments of the present application will be described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of them. Based on the embodiments of the present application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0027] Because drawing tables, especially long lists, in HTML generates a large number of DOM nodes, this application avoids creating these nodes by using Canvas instead of HTML. Furthermore, since JavaScript is single-threaded, large computations can block the main thread, causing page lag. A busy main thread can also affect these data computations and rendering operations. Therefore, data computations, such as rendering, can be performed in threads separate from the main thread, such as web worker threads, to prevent page lag. For example, using HTML5's Web Workers API, a designated script can be run in a background thread that doesn't affect the main thread. However, this script doesn't include DOM manipulation code and doesn't support Canvas. Based on this, embodiments of this application provide a data display solution that can be applied to a terminal device. The terminal device can be equipped with a browser or an application with browser functionality. The terminal device can execute this data display solution using the browser or application with browser functionality. The browser or application with browser functionality supports the OffscreenCanvas feature, also known as the off-screen Canvas feature. This feature provides an object that can be rendered off-screen, namely the off-screen Canvas object described in embodiments of this application. The off-screen Canvas object can run in a Web Workers environment. Therefore, this application can implement data drawing based on the off-screen Canvas function and the web page working thread, such as the drawing of a table, and then display the drawing results to avoid the main thread affecting the drawing process, which helps to reduce the performance loss of the terminal device and prevent the page from freezing.

[0028] For example, the data display scheme involved in this application can be specifically as follows: after loading the browser page, obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread; pass the off-screen Canvas object to the web page working thread; obtain the Canvas context object through the web page working thread and based on the off-screen Canvas object; draw the table data to be drawn on the Canvas canvas through the web page working thread and based on the Canvas context object, obtain the drawing result, and display the drawing result on the browser page through the main thread. For example, the data transmission process between the main thread MainThread and the worker thread WorkerThread (such as the web page worker thread) can be seen in Figure 1b .like Figure 1bThe data transmission between the main thread and the worker thread can be realized based on the ping-pong mechanism. The data display solution of this application combines technologies such as OffscreenCanvas and Web Worker to realize the process of creating tables dynamically in real time on the web page. Compared with the data display solution with high terminal device performance overhead caused by frequent DOM operations, the data display solution of this application uses the web worker thread to draw the table data. The table drawing process is completely unaffected by the main thread, which can greatly reduce the performance overhead of the terminal device and significantly improve the computing speed and rendering speed of the terminal device.

[0029] The data display solution involved in this application can be applied to scenarios with tables, especially long lists, such as those with large data volumes or lists that cannot be paginated. Alternatively, the data display solution of this application can be applied to data display scenarios with higher security requirements, such as applications or pages with a security level higher than the preset level, asset data management platforms with high security requirements, applications or pages with security protection enabled, etc., which are not listed here one by one.

[0030] For example, in an application scenario, a user can use a browser of a terminal device to open a designated portal website. For example, the designated portal website here can be a portal website corresponding to an asset data management platform, which can provide asset management services. Then, the user can choose to click on a Uniform Resource Locator (URL) address based on the designated portal website to view the asset data table. The terminal device can send an access request for the URL address to the server corresponding to the designated portal website, and the server corresponding to the designated portal website can respond to the access request, obtain the resource information indicated by the URL address, and return the resource information indicated by the URL address to the terminal device. After receiving the resource information indicated by the URL address sent by the server, the terminal device can load the corresponding browser page based on the resource information, and after loading the browser page, obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread. Subsequently, the terminal device can pass the off-screen Canvas object to the webpage worker thread. The webpage worker thread obtains the Canvas context object based on the off-screen Canvas object. The webpage worker thread draws the table data to be drawn (here, the table data in the asset data table) on the Canvas canvas based on the Canvas context object, obtains the drawing result, and displays the drawing result on the browser page through the main thread. At this point, the user can see the rendered table on the browser page.

[0031] In addition, when the amount of data in the table is large, the real-time calculation of the position and data and the template splicing process are likely to block the main thread, causing the page to freeze, which gives the user a poor viewing experience and seriously affects the user experience. In some embodiments, the data display solution of the present application can be combined with OffscreenCanvas, Web Workers, requestAnimationFrame request animation frame and other technologies to realize the process of creating tables dynamically in real time on the web page. The API combined with requestAnimationFrame can make the drawing results follow the refresh rate of the display for rendering, while ensuring smooth browsing for users, further saving rendering costs and reducing performance overhead.

[0032] Optionally, the terminal device involved in this application may be a smartphone, tablet computer, notebook computer, desktop computer, laptop computer, etc., which is not limited in this application. It is understood that in some embodiments, the terminal device may also be called other names, such as terminal, user terminal, smart terminal, etc., which are not listed here one by one.

[0033] The following is a detailed description of the implementation details of the technical solution of the embodiment of the present application:

[0034] See also Figure 2 , is a flow chart of a data display method provided in an embodiment of the present application. Figure 2 As shown, the method may include the following steps:

[0035] S201. After loading a browser page, obtain an off-screen Canvas object corresponding to the Canvas object of the browser page through a main thread.

[0036] In an embodiment of the present application, a terminal device may load a browser page and, after loading the browser page, obtain an off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread. The Canvas object may represent an HTML canvas element. The main thread may be a JavaScript main thread, such as the JavaScript main thread corresponding to the browser page. A thread may be the smallest unit of CPU scheduling.

[0037] In one embodiment, the terminal device can create a Canvas tag on the browser page through the main thread, obtain the Canvas object of the browser page through the Canvas tag, and then call the control transfer method of the Canvas object to obtain the off-screen Canvas object corresponding to the Canvas object.

[0038] The Canvas tag can be used to define graphics, such as tables, pictures, etc. Optionally, the control transfer method can be a transferControlToOffscreen method. When the transferControlToOffscreen method is called, the returned value is the off-screen Canvas object corresponding to the Canvas object.

[0039] In one embodiment, the terminal device can create a Canvas tag on the browser page through the main thread and set the Canvas tag's identity ID and other attributes. For example, the ID here can be set to myCanvas. Then, the terminal device can select the Canvas tag through the DOM selector in the JavaScript script to obtain the Canvas object of the browser page. The JavaScript script here can refer to the JavaScript script corresponding to the browser page. After that, the terminal device can call the transferControlToOffscreen method of the Canvas object to obtain the off-screen Canvas object corresponding to the Canvas object. Thus, the off-screen Canvas object is obtained.

[0040] S202: Transfer the off-screen Canvas object to the webpage working thread.

[0041] In the embodiment of the present application, after obtaining the off-screen Canvas object, the terminal device can transfer the off-screen Canvas object to the web page working thread through the main thread.

[0042] In one embodiment, the terminal device can create a new JavaScript file. For example, the JavaScript file is myworker.js. The JavaScript file can run in the web page worker thread. The terminal device can instantiate a web page work object based on the JavaScript file, and then pass the off-screen Canvas object to the web page worker thread corresponding to the web page work object through the main thread. Here, the terminal device can pass the off-screen Canvas object to the web page worker thread corresponding to the web page work object through the postMessage method of the web page work object. The postMessage method can achieve cross-domain access, that is, it can achieve the function of passing the off-screen Canvas object to the web page worker thread corresponding to the web page work object.

[0043] S203: Obtain a Canvas context object through the webpage worker thread and according to the off-screen Canvas object.

[0044] The Canvas context object provides methods for drawing. The Canvas context object may include information such as context type, such as 2d, context attributes, and the like.

[0045] In one embodiment, when a terminal device obtains an incoming off-screen Canvas object, it can obtain the incoming off-screen Canvas object through an onmessage event based on a JavaScript file. That is, the webpage worker thread can obtain the off-screen Canvas object passed in by the main thread by listening to the onmessage event. Subsequently, the terminal device can obtain the Canvas context object through the getContext method of the off-screen Canvas object. For example, the terminal device can obtain a CanvasRenderingContext2D object through the getContext("2d") method of the off-screen Canvas object and determine that object as the Canvas context object.

[0046] S204: Draw the table data to be drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result.

[0047] The embodiment of the present application draws the table data to be drawn through the web page worker thread, which essentially moves a large amount of calculation process to the web page worker thread for execution. This processing method releases the resources of the main thread and brings more idle time to the main thread.

[0048] In one embodiment, the terminal device draws the table data to be drawn on the Canvas canvas according to the Canvas context object through the web page working thread, and the method for obtaining the drawing result can be: the terminal device calls the table drawing function through the web page working thread to draw the table data to be drawn on the Canvas canvas according to the Canvas context object, and obtains the drawing result. Among them, the table drawing function is a function for drawing table data on the Canvas canvas. For example, the function name of the table drawing function can be the renderTable function, and the input parameters of the table drawing function can include parameters such as the Canvas context object and the table data. In one embodiment, the table drawing function can be written according to the CanvasAPI and the table requirements.

[0049] In one embodiment, the terminal device can also draw the table data together with the table anti-counterfeiting information. The table access information here can be one-dimensional or two-dimensional coding information, or it can also be watermark information, such as a watermark image. Specifically, the terminal device can obtain the preset table anti-counterfeiting information through the main thread, and pass the table anti-counterfeiting information to the web page working thread. After that, the web page working thread can draw the table data to be drawn and the table anti-counterfeiting information on the Canvas canvas according to the Canvas context object to obtain the drawing result. Similarly, the terminal device can also call the table drawing function through the web page working thread to draw the table data to be drawn and the anti-counterfeiting information on the Canvas canvas according to the Canvas context object to obtain the drawing result. The embodiment of the present application draws the table data together with the anti-counterfeiting information, so that the anti-counterfeiting information cannot be modified or deleted in the debugging panel of the browser, which increases the effective support for data security and improves the security of data display.

[0050] In response to data security issues, the mainstream solution is to use the https protocol to transmit data, add watermark information to the background of the page list, disable the page copy function, etc., to prevent the transmitted data from being tampered with. However, even if the page copy function is disabled, users can still obtain this data by viewing the page source code or viewing the code and the data packet information of the relevant request through the browser development debugging tool. Moreover, since the watermark information is usually a background image, users can modify or delete it through the browser development debugging tool, which has limited improvement on data security. However, the embodiment of the present application draws the table data and watermark information on the Canvas canvas through the web page worker thread to obtain the drawing result, and displays the drawing result on the browser page through the main thread. In this way, the user can only see the Canvas tag in the page source code and browser debugging tool. At this time, the table data and watermark information do not exist in the form of DOM nodes, but are drawn on the Canvas canvas. Neither the table data nor the watermark information can be easily tampered with, and the security has obvious advantages over the traditional html table-based solution.

[0051] In one embodiment, the present application can also draw a slider control corresponding to the table data on the Canvas canvas. The slider control can be, for example, a slider button, which can be, for example, a slider button for sliding up and down. When the slider control is moved on the Canvas canvas, the offset (i.e., position change) of the table data on the Canvas canvas can be calculated based on the displacement and speed of the movement. Then, the terminal device can redraw the table data to be drawn on the Canvas canvas based on the offset of the table data on the Canvas canvas through the webpage worker thread. Specifically, the method for drawing the slider control corresponding to the table data on the Canvas canvas is as follows: the terminal device can draw the table data to be drawn and the corresponding scroll bar control on the Canvas canvas according to the Canvas context object when the table data to be drawn cannot be completely drawn based on the Canvas canvas to obtain a drawing result. Similarly, the terminal device can also call a table drawing function when the table data to be drawn cannot be completely drawn based on the Canvas canvas to draw the table data to be drawn and the corresponding scroll bar control on the Canvas canvas according to the Canvas context object to obtain a drawing result.

[0052] In one embodiment, the terminal device may determine that the table data to be drawn cannot be completely drawn based on the Canvas canvas when the amount of table data to be drawn is greater than the amount of data that the Canvas canvas can draw, or the terminal device may determine that the table data to be drawn cannot be completely drawn based on the Canvas canvas when the height (or width) occupied by the table data to be drawn is greater than the height (or width) of the Canvas canvas. In one embodiment, the terminal device may draw the table data, the slider control corresponding to the table data, and the watermark information on the Canvas canvas in combination with the aforementioned methods, and the embodiments of the present application will not be described in detail here.

[0053] S205: Display the drawing result on the browser page through the main thread.

[0054] In an embodiment of the present application, after the terminal device obtains the drawing result through the web page working thread, it can render the drawing result on the browser page through the main thread.

[0055] In one embodiment, after the terminal device obtains the drawing result through the web page worker thread, it can call the commit method through the web page worker thread to send the drawing result to the main thread. Here, in addition to using the commit method, the embodiment of the present application can also use other methods to send the drawing result to the main thread, and the embodiment of the present application does not limit this. The main thread can obtain the drawing result in this way and render the drawing result on the browser page, thereby realizing the process of displaying the drawing result on the browser page.

[0056] visible, Figure 2 In the embodiment shown, after loading the browser page, the terminal device can obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, and pass the off-screen Canvas object to the web page working thread; the terminal device can obtain the Canvas context object based on the off-screen Canvas object through the web page working thread, and draw the table data to be drawn on the Canvas canvas based on the Canvas context object to obtain the drawing result, and then display the drawing result on the browser page through the main thread. This process can greatly reduce the performance loss of the terminal device and reduce the page jamming caused by the main thread being too busy.

[0057] See also Figure 3 , is a flow chart of another data display method provided in an embodiment of the present application. Figure 3 As shown, the method may include the following steps:

[0058] S301. After loading a browser page, obtain an off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread.

[0059] S302: Transfer the off-screen Canvas object to the webpage working thread.

[0060] S303: Obtain a Canvas context object through the webpage worker thread and according to the off-screen Canvas object.

[0061] Among them, steps S301 to S303 can be found in Figure 2 The relevant descriptions of step S201 and step S203 in the embodiment are not repeated here in the embodiment of the present application.

[0062] S304: Establish a web socket connection with the target server through the web worker thread.

[0063] S305 : Acquire table data to be drawn from the target server based on the web socket connection.

[0064] The embodiment of the present application combines WebSocket technology to establish and maintain a full-duplex persistent encrypted connection with the target server in the web page working thread. Compared with traditional http / https solutions, the present application can save the time spent on establishing a connection for each request, allowing the terminal device to obtain data at a higher rate.

[0065] In one embodiment, the terminal device may establish a WebSocket connection with a target server via the WebSocket Secure (WSS) protocol in a JavaScript file, and then the terminal device may obtain the table data to be drawn from the target server based on the WebSocket connection. The target server may be a server used by the terminal device to obtain data such as the table data.

[0066] In one embodiment, the target server may be a node in a blockchain, that is, the terminal device may obtain data such as table data from the blockchain node, and the table data and other data may be stored in the blockchain to improve the reliability of the obtained data.

[0067] In one embodiment, the terminal device obtains the table data to be drawn from the target server based on the web socket connection in the following manner: the terminal device may send a data acquisition request to the target server based on the web socket connection, and the data acquisition request carries request parameters. Optionally, the request parameters may be parameters for obtaining table data, for example, the parameters may include a row identifier (such as a row ID or row number) of the table, and / or a column identifier (such as a column ID or row number), and / or an identifier of the table, etc., which are not listed here. Then, based on the web socket connection, the table data queried according to the request parameters is received and returned by the target server, and the queried table data is determined as the table data to be drawn.

[0068] In one embodiment, a terminal device can instantiate a WebSocket object and establish a network socket connection with a target server based on a URL address configured using the WSS protocol. Data transmitted between the terminal device and the target server, such as the request parameter data type mentioned above, can be binary. After establishing a network socket connection with the target server, the terminal device can use the send method of the WebSocket object to send a data retrieval request to the target server.

[0069] In one embodiment, the terminal device can use the callback function of the message event when receiving data sent by the target server to process the data returned by the target server. For example, the callback function when receiving the table data sent by the target server is the table drawing function. In one embodiment, the terminal device can complete the call to the table drawing function by executing the requestAnimationFrame method, and then realize the process of drawing the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain the drawing result. The requestAnimationFrame method can make the rendering frequency of the browser page consistent with the refresh frequency of the display.

[0070] S306 , drawing the table data to be drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result.

[0071] S307: Display the drawing result on the browser page through the main thread.

[0072] Among them, step S306 and step S307 can be found in Figure 2 The relevant descriptions of step S204 and step S205 in the embodiment are not repeated here in the embodiment of the present application.

[0073] Optionally, there may be one or more web page worker threads. If there are multiple web page worker threads, a web page worker thread may be selected from the multiple web page worker threads according to certain rules to perform operations such as data drawing. Further, optionally, the rule may be a selection rule based on the working status of the web page worker thread, and / or a selection rule based on a web page worker thread flag, and / or a selection rule based on the busyness of the web page worker thread, and / or a selection rule based on the hardware resources of the terminal device, etc., which are not listed here one by one.

[0074] For example, in one embodiment, the terminal device can determine the first web page working thread that is in an idle state from multiple web page working threads. For example, the multiple web page working threads include web page working thread 1, web page working thread 2, web page working thread 3, and web page working thread 4. The working status of web page working thread 1 is idle, the working status of web page working thread 2 is busy, the working status of web page working thread 3 is busy, and the working status of web page working thread 4 is busy. The terminal device can determine web page working thread 1 as the first web page working thread from these four web page working threads. Accordingly, after the terminal device obtains the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, it can pass the off-screen Canvas object to the first web page working thread, and obtain the Canvas context object through the first web page working thread and based on the off-screen Canvas object; the terminal device draws the table data to be drawn on the Canvas canvas through the first web page working thread and based on the Canvas context object, obtains the drawing result, and displays the drawing result on the browser page through the main thread. Compared to Figure 2 In the embodiment, the above process can avoid opening only one web page work thread and doing all the work in this web page work thread, which may cause the web page work thread to be blocked, the page to be stuck, and the browser to consume too much resources.

[0075] Thus, the terminal device can establish a web socket connection with the target server through the first web worker thread and obtain the table data to be drawn from the target server based on the web socket connection. Similarly, the terminal device can perform other operations performed by the aforementioned web worker thread through the first web worker thread, such as drawing watermark information, etc., which will not be described in detail in this embodiment of the present application.

[0076] For another example, in one embodiment, the terminal device may obtain a flag bit of each web page worker thread among multiple web page worker threads, and determine whether the web page worker thread is in an idle state based on the flag bit of each web page worker thread. In one embodiment, when the terminal device determines that any web page worker thread is executing a drawing task (the drawing task may include drawing table data to be drawn on a Canvas canvas through the web page worker thread and based on the Canvas context object), a tag indicating that the web page worker thread is not idle may be added to the web page worker thread.

[0077] For another example, in an embodiment, the terminal device may determine a second web page working thread with a busyness level value less than a preset value from multiple web page working threads. For example, the multiple web page working threads include Web Page Working Thread 1, Web Page Working Thread 2, Web Page Working Thread 3, and Web Page Working Thread 4. The busyness level value of Web Page Working Thread 1 is a, the busyness level value of Web Page Working Thread 2 is b, the busyness level value of Web Page Working Thread 3 is c, and the busyness level value of Web Page Working Thread 4 is d, where a < b < c < d. The terminal device may determine Web Page Working Thread 1 as the second web page working thread from these 4 web page working threads. Correspondingly, after the terminal device obtains the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, it may pass the off-screen Canvas object into the second web page working thread, and obtain the Canvas context object according to the off-screen Canvas object through the second web page working thread; the terminal device uses the second web page working thread and according to the Canvas context object, draws the table data to be drawn on the Canvas canvas, obtains a drawing result, and displays the drawing result on the browser page through the main thread. Compared with Figure 2 the embodiment, adopting the above process can avoid the problems of web page working thread blocking, page freezing, and excessive consumption of browser resources caused by having only one web page working thread and doing all work in this web page working thread.

[0078] Thereby, the terminal device may establish a web socket connection with the target server through the second web page working thread, and based on the web socket connection, obtain the table data to be drawn from the target server. Similarly, the terminal device may execute other operations performed by the aforementioned web page working thread through the second web page working thread, such as drawing watermark information, etc., which are not elaborated in this embodiment of the present application.

[0079] In an embodiment, the terminal device may obtain the busyness level value of each web page working thread in multiple web page working threads, and determine a second web page working thread with a busyness level value less than a preset value from the multiple web page working threads according to the busyness level value of each web page working thread. In an embodiment, the terminal device may determine at least one web page working thread with a busyness level value less than a preset value from the multiple web page working threads according to the busyness level value of each web page working thread, and determine the web page working thread with the smallest busyness level value from the at least one web page working thread as the second web page working thread. Alternatively, the terminal device may determine at least one web page working thread with a busyness level value less than a preset value from the multiple web page working threads according to the busyness level value of each web page working thread, and determine any web page working thread from the at least one web page working thread as the second web page working thread.

[0080] In one embodiment, the terminal device may determine the busyness value of each webpage worker thread based on the number of drawing tasks being executed by each webpage worker thread (a drawing task may, for example, be drawing table data to be drawn on a Canvas canvas by the webpage worker thread and based on the Canvas context object). In one embodiment, the terminal device may determine the busyness value corresponding to the number of drawing tasks being executed by each webpage worker thread based on the corresponding relationship between the number of tasks and the busyness value.

[0081] In one embodiment, when there is no first web page worker thread in an idle state among the multiple web page worker threads or there is no second web page worker thread whose busyness value is less than a preset value among the multiple web page worker threads, the terminal device can randomly select a web page worker thread from the multiple web page worker threads. Accordingly, after the terminal device obtains the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, it can pass the off-screen Canvas object to the randomly selected web page worker thread, and obtain the Canvas context object based on the off-screen Canvas object through the first web page worker thread; the terminal device draws the table data to be drawn on the Canvas canvas through the randomly selected web page worker thread and based on the Canvas context object, obtains the drawing result, and displays the drawing result on the browser page through the main thread.

[0082] In one embodiment, the terminal device can also plan and schedule the work of the web page worker thread based on the thread pool and the hardware resources of the terminal device. Specifically, the terminal device can determine the number of web page worker threads that can be created based on the number of central processing units of the terminal device, create this number of child threads, and build a thread pool based on this number of web page worker threads. Subsequently, the terminal device can traverse the thread pool to determine the first web page worker thread that is in an idle state from multiple web page worker threads, or determine the second web page worker thread that is in a busy state value less than a preset value from multiple web page worker threads. This process implemented based on the thread pool can avoid the need to constantly create new worker threads and delete the workload brought by the worker threads after the worker threads are completed each time the data display solution is executed.

[0083] visible, Figure 3 In the embodiment shown, the terminal device can establish a web socket connection with the target server through the web working thread, and obtain the table data to be drawn from the target server based on the web socket connection. Compared with the traditional http / https connection establishment solution, the embodiment of the present application can save the time of establishing a connection for each request and improve the efficiency of obtaining data.

[0084] See also Figure 4, is a structural diagram of a data display device provided in an embodiment of the present application. The data display device can be set in the terminal device mentioned above, or can execute some or all of the steps executed by the terminal device. Specifically, the data display device may include: an acquisition module 401, a processing module 402 and a display module 403. Among them,

[0085] The acquisition module 401 is used to acquire the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread after the browser page is loaded.

[0086] The processing module 402 is configured to transfer the off-screen Canvas object to the webpage working thread.

[0087] The acquisition module 401 is further configured to acquire a Canvas context object through the webpage worker thread and according to the off-screen Canvas object.

[0088] The processing module 402 is further configured to draw the table data to be drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result.

[0089] The display module 403 is configured to display the drawing result on the browser page through the main thread.

[0090] In an optional implementation, the acquisition module 401 is further configured to acquire the form anti-counterfeiting information through the main thread.

[0091] In an optional implementation, the processing module 402 is further configured to transmit the table anti-counterfeiting information to the webpage working thread.

[0092] In an optional implementation, the processing module 402 draws the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain a drawing result, which is specifically used to:

[0093] According to the Canvas context object, the table data to be drawn and the table anti-counterfeiting information are drawn on the Canvas canvas to obtain a drawing result.

[0094] In an optional implementation, the processing module 402 draws the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain a drawing result, which is specifically used to:

[0095] In the case that the table data to be drawn cannot be completely drawn based on the Canvas canvas, the table data to be drawn and the scroll bar control corresponding to the table data are drawn on the Canvas canvas according to the Canvas context object to obtain a drawing result.

[0096] In an optional implementation, the processing module 402 is further configured to establish a web socket connection with a target server through the web worker thread; and obtain the table data to be drawn from the target server based on the web socket connection.

[0097] In an optional implementation, the processing module 402 obtains the table data to be drawn from the target server based on the web socket connection, specifically for:

[0098] Sending a data acquisition request to the target server based on the web socket connection, wherein the data acquisition request carries request parameters;

[0099] Based on the web socket connection, the table data returned by the target server and queried according to the request parameters is received, and the queried table data is determined as the table data to be drawn.

[0100] In an optional implementation, the processing module 402 draws the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain a drawing result, which is specifically used to:

[0101] Calling a table drawing function by executing a method for requesting an animation frame, so as to draw the table data to be drawn on the Canvas canvas according to the Canvas context object, and obtaining a drawing result;

[0102] The method for requesting animation frames is used to make the rendering frequency of the browser page consistent with the refresh frequency of the display.

[0103] In an optional implementation, the acquisition module 401 acquires the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, specifically for:

[0104] Create a Canvas tag on the browser page through the main thread, and obtain the Canvas object of the browser page through the Canvas tag;

[0105] Call the control transfer method of the Canvas object to obtain the off-screen Canvas object corresponding to the Canvas object.

[0106] visible, Figure 4In the embodiment shown, after loading the browser page, the data display device can obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, and pass the off-screen Canvas object to the web page working thread; the data display device can obtain the Canvas context object according to the off-screen Canvas object through the web page working thread, and draw the table data to be drawn on the Canvas canvas according to the Canvas context object to obtain the drawing result, and then display the drawing result on the browser page through the main thread. This process can greatly reduce the performance loss of the data display device and reduce the page jamming caused by the main thread being too busy.

[0107] See also Figure 5 , is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. The terminal device may be the terminal device mentioned above, or may perform the functions performed by the terminal device in the above embodiment. Figure 5 The terminal device in this embodiment may include one or more processors 501 and a memory 502. The processor 501 and the memory 502 are connected via a bus or other means. The memory 502 may be used to store a computer program, which includes program instructions. The processor 501 is configured to execute the program instructions stored in the memory 502 to implement the various methods described above.

[0108] The memory 502 may include a volatile memory, such as a random-access memory (RAM); the memory 502 may also include a non-volatile memory, such as a flash memory, a solid-state drive (SSD), etc.; the memory 502 may also include a combination of the above types of memory.

[0109] In one embodiment, the processor 501 may be a central processing unit (CPU), or may be another general-purpose processor, i.e., a microprocessor or any conventional processor. The memory 502 may include a read-only memory and a random access memory. Therefore, the processor 501 and the memory 502 are not limited herein.

[0110] Optionally, the terminal device may further include an input device and / or an output device. The input device may be a keyboard, a touch screen, a receiver, etc.; the output device 903 may include a display, a speaker, a transmitter, etc.

[0111] For example, the processor 501 may call the program instructions stored in the memory 502 to perform the following steps:

[0112] After loading the browser page, obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread;

[0113] The off-screen Canvas object is passed to the webpage worker thread; and a Canvas context object is obtained according to the off-screen Canvas object through the webpage worker thread;

[0114] Drawing the table data to be drawn on the Canvas canvas through the webpage worker thread and according to the Canvas context object to obtain a drawing result;

[0115] The drawing result is displayed on the browser page through the main thread.

[0116] In one embodiment, the processor 501 calls the program instructions stored in the memory 502 and is further configured to execute:

[0117] Get the form anti-counterfeiting information through the main thread;

[0118] The form anti-counterfeiting information is transferred to the web page working thread.

[0119] In one embodiment, when drawing the table data to be drawn on the Canvas canvas according to the Canvas context object and obtaining the drawing result, the processor 501 calls the program instructions stored in the memory 502, specifically for:

[0120] According to the Canvas context object, the table data to be drawn and the table anti-counterfeiting information are drawn on the Canvas canvas to obtain a drawing result.

[0121] In one embodiment, when drawing the table data to be drawn on the Canvas canvas according to the Canvas context object and obtaining the drawing result, the processor 501 calls the program instructions stored in the memory 502, specifically for:

[0122] In the case that the table data to be drawn cannot be completely drawn based on the Canvas canvas, the table data to be drawn and the scroll bar control corresponding to the table data are drawn on the Canvas canvas according to the Canvas context object to obtain a drawing result.

[0123] In one embodiment, the processor 501 calls the program instructions stored in the memory 502 and is further configured to execute:

[0124] Establishing a web socket connection with a target server through the web worker thread;

[0125] Based on the web socket connection, table data to be drawn is obtained from the target server.

[0126] In one embodiment, when obtaining the table data to be drawn from the target server based on the web socket connection, the processor 501 calls the program instructions stored in the memory 502 and is further configured to execute:

[0127] Sending a data acquisition request to the target server based on the web socket connection, wherein the data acquisition request carries request parameters;

[0128] Based on the web socket connection, the table data returned by the target server and queried according to the request parameters is received, and the queried table data is determined as the table data to be drawn.

[0129] In one embodiment, when drawing the table data to be drawn on the Canvas canvas according to the Canvas context object and obtaining the drawing result, the processor 501 calls the program instructions stored in the memory 502, specifically for:

[0130] Calling a table drawing function by executing a method for requesting an animation frame, so as to draw the table data to be drawn on the Canvas canvas according to the Canvas context object, and obtaining a drawing result;

[0131] The method for requesting animation frames is used to make the rendering frequency of the browser page consistent with the refresh frequency of the display.

[0132] In one embodiment, when obtaining the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread, the processor 501 calls the program instructions stored in the memory 502, specifically for:

[0133] Create a Canvas tag on the browser page through the main thread, and obtain the Canvas object of the browser page through the Canvas tag;

[0134] Call the control transfer method of the Canvas object to obtain the off-screen Canvas object corresponding to the Canvas object.

[0135] It should be noted that the specific working processes of the terminal devices and units described above can be referred to the relevant descriptions in the aforementioned embodiments and will not be repeated here.

[0136] An embodiment of the present invention further provides a computer (readable) storage medium storing a computer program, wherein the computer program includes program instructions. When the program instructions are executed by a processor, some or all of the steps performed in the above method embodiment are performed. Optionally, the computer storage medium may be volatile or non-volatile.

[0137] The present application also provides a computer program product or computer program, which includes program instructions that may be stored in a computer-readable storage medium. A processor of a computer device reads the program instructions from the computer-readable storage medium and executes the program instructions, causing the computer to perform some or all of the steps performed in the above-described data presentation method, which are not further described herein.

[0138] In this document, "plurality" refers to two or more. "And / or" describes a relationship between associated objects, indicating that three possible relationships exist. For example, "A and / or B" can mean: A exists alone, A and B exist simultaneously, or B exists alone. The character " / " generally indicates an "or" relationship between the associated objects.

[0139] Those skilled in the art will appreciate that all or part of the processes in the above-described method embodiments can be implemented by instructing related hardware through a computer program. The program can be stored in a computer storage medium, which can be a computer-readable storage medium. When the program is executed, it can include the processes in the above-described method embodiments. The storage medium can be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0140] The above disclosure is only part of the embodiments of the present application, and it is certainly not intended to limit the scope of the rights of the present application. Ordinary technicians in this field can understand that all or part of the processes of the above embodiments and equivalent changes made in accordance with the claims of the present application are still within the scope covered by the present application.

Claims

1. A data display method, characterized in that: include: After loading the browser page, obtain the off-screen Canvas object corresponding to the Canvas object of the browser page through the main thread; Pass the off-screen Canvas object into the web page worker thread; Get the Canvas context object through the web worker thread and based on the off-screen Canvas object; Establishing a web socket connection with a target server through the web worker thread; Based on the websocket connection, obtaining table data to be drawn from the target server; Obtaining form anti-counterfeiting information through the main thread; Transferring the form anti-counterfeiting information to the webpage working thread; In a case where the table data to be drawn cannot be completely drawn based on the Canvas canvas, the table data to be drawn, the table anti-counterfeiting information, and a scroll bar control corresponding to the table data are drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result, wherein the table data to be drawn are drawn together with the table anti-counterfeiting information, so that the table anti-counterfeiting information cannot be modified or deleted in the debugging panel of the browser; the table data to be drawn is drawn by calling a table drawing function by executing a method of requesting animation frames, and the method of requesting animation frames is used to make the rendering frequency of the browser page consistent with the refresh frequency of the display; the scroll bar control is used to indicate the offset of the table data on the Canvas canvas, and the table data drawn on the Canvas canvas corresponds to the offset indicated by the scroll bar control; The drawing result is displayed on the browser page through the main thread.

2. The method according to claim 1, characterized in that The acquiring the table data to be drawn from the target server based on the web socket connection includes: Sending a data acquisition request to the target server based on the web socket connection, wherein the data acquisition request carries request parameters; Based on the web socket connection, the table data returned by the target server and queried according to the request parameters is received, and the queried table data is determined as the table data to be drawn.

3. The method according to claim 1, characterized in that The obtaining, through the main thread, an off-screen Canvas object corresponding to the Canvas object of the browser page includes: Create a Canvas tag on the browser page through the main thread, and obtain the Canvas object of the browser page through the Canvas tag; Call the control transfer method of the Canvas object to obtain the off-screen Canvas object corresponding to the Canvas object.

4. A data display device, characterized in that: include: An acquisition module, configured to acquire, through a main thread, an off-screen Canvas object and table anti-counterfeiting information corresponding to the Canvas object of the browser page after the browser page is loaded; A processing module, configured to transfer the off-screen Canvas object and the table anti-counterfeiting information to a webpage working thread; The acquisition module is further configured to acquire a Canvas context object through a webpage worker thread and based on the off-screen Canvas object; The processing module is further configured to establish a web socket connection with a target server through the web worker thread; and obtain table data to be drawn from the target server based on the web socket connection; The processing module is further configured to draw the table data to be drawn on the Canvas canvas through the webpage working thread and according to the Canvas context object to obtain a drawing result; The processing module, when drawing the table data to be drawn on the Canvas canvas through the web page working thread and according to the Canvas context object, is specifically used to: when the table data to be drawn cannot be completely drawn based on the Canvas canvas, draw the table data to be drawn, the table anti-counterfeiting information and the scroll bar control corresponding to the table data on the Canvas canvas through the web page working thread and according to the Canvas context object to obtain a drawing result, wherein the table data to be drawn is drawn together with the table anti-counterfeiting information, so that the table anti-counterfeiting information cannot be modified or deleted in the debugging panel of the browser; the table data to be drawn is drawn by calling a table drawing function by executing a method of requesting animation frames, and the method of requesting animation frames is used to make the rendering frequency of the browser page consistent with the refresh frequency of the display; the scroll bar control is used to indicate the offset of the table data on the Canvas canvas, and the table data drawn on the Canvas canvas corresponds to the offset indicated by the scroll bar control; A display module is used to display the drawing result on the browser page through the main thread.

5. A terminal device, characterized in that: The method comprises a processor and a memory; wherein the memory is used to store a computer program, the computer program includes program instructions, and the processor is configured to call the program instructions to execute the method according to any one of claims 1 to 3.

6. A computer storage medium, characterized in that The computer storage medium stores program instructions, which, when executed, are used to implement the method according to any one of claims 1 to 3.

7. A computer program product comprising program instructions, characterized in that The program instructions are stored in a computer-readable storage medium, and are suitable for being read and executed by a processor of a computer device, so that the computer device implements the method according to any one of claims 1 to 3.

Images