Webpage display method and related equipment

Abstract

The invention discloses a webpage display method and related equipment, content data of a to-be-displayed page can be obtained through a main thread of a current application, and the content data comprises chart data needing to be drawn and display data associated with the chart data; displaying the display data through the main thread; through a working thread of the current application, a first chart drawing area is created, and the first chart drawing area is a non-display area located outside a display area for displaying data; drawing in the first chart drawing area through the working thread to obtain a target chart corresponding to the chart data; and displaying the target chart through the main thread. According to the method and the device, the resource overhead during chart picture generation can be reduced, so that the display speed of the page chart picture is improved, and the content of the page chart picture can be quickly displayed.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a web page display method and related equipment. Background Art

[0002] With the rapid development of information technology and the popularization of its application, more and more users will use web pages to obtain the information they need, such as obtaining charts, pictures and other information through web pages.

[0003] There are currently two mainstream ways to generate images and charts. One is to generate charts and images on the server side. The generation process is as follows: the browser page initiates a request and carries relevant data. After receiving the request data, the server draws the relevant graphics and sends the graphic data to the browser as a response body. The page obtains the graphic data through the response body and renders it to the relevant position of the page.

[0004] The other is to generate chart images on the browser side. The generation process is: create a common canvas and a corresponding DOM structure in the main thread of the browser web page, process and calculate the data through JavaScript, and then operate the common canvas object drawing API to draw chart graphics on the common canvas, and bind various DOM events of related interactive behaviors.

[0005] However, in the process of generating charts and images through the above two methods, there may be a large number of page HTTP requests on the server side, resulting in high server resource overhead; on the browser side, since the drawing of graphics and the initialization of related interactive events and animation related functions are all performed in the main thread, the resource overhead is also large. When the resource overhead is large, the display speed of the page chart image will be reduced, which is not conducive to the rapid display of the page chart image. Summary of the invention

[0006] The embodiments of the present application provide a web page display method and related equipment. The related equipment may include a web page display device, an electronic device, a computer-readable storage medium and a computer program product, which can reduce the overhead when generating charts and images, thereby increasing the display speed of page charts and images, and facilitating the rapid display of page charts and images content.

[0007] The present application provides a web page display method, including:

[0008] Obtaining content data of the page to be displayed through the main thread of the current application, wherein the content data includes chart data to be drawn and display data associated with the chart data;

[0009] Displaying the display data through the main thread;

[0010] Creating a first chart drawing area through the working thread of the current application, where the first chart drawing area is a non-display area outside the display area of ​​the display data;

[0011] By means of the working thread, a target chart corresponding to the chart data is obtained by drawing in the first chart drawing area;

[0012] The target chart is displayed through the main thread.

[0013] Optionally, in some embodiments of the present application, there are multiple groups of chart data to be drawn, and before the target chart corresponding to the chart data is drawn in the first chart drawing area by the working thread, the method further includes:

[0014] Writing the plurality of groups of chart data to be drawn into the first array through the main thread;

[0015] The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes:

[0016] Through the working thread, multiple groups of the chart data in the first array are drawn in the first chart drawing area to obtain corresponding multiple target charts.

[0017] Optionally, in some embodiments of the present application, after drawing the plurality of groups of chart data in the first array in the first chart drawing area by the working thread to obtain the corresponding plurality of target charts, the method further includes:

[0018] Acquire multiple data link addresses corresponding to multiple target charts through the working thread, and write the multiple data link addresses into the second array;

[0019] The displaying of the target chart through the main thread includes:

[0020] The plurality of data link addresses in the second array are accessed through the main thread to display a plurality of target charts.

[0021] Optionally, in some embodiments of the present application, the first array is multiple, and the step of writing the multiple groups of chart data to be drawn into the first array through the main thread includes:

[0022] Writing the plurality of groups of the chart data to be drawn into the plurality of the first arrays respectively through the main thread, wherein the chart data in the plurality of the first arrays are non-repetitive;

[0023] The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes:

[0024] The plurality of chart data in the first array are drawn in the first chart drawing area through the working thread to obtain a plurality of corresponding target charts.

[0025] Optionally, in some embodiments of the present application, after drawing the plurality of chart data in the first array in the first chart drawing area by the working thread to obtain the corresponding plurality of target charts, the method further includes:

[0026] Obtaining, by means of the working thread, data link addresses of the chart data in a plurality of the first arrays, and writing the data link addresses corresponding to the same first arrays into a same second array, where the second arrays are multiple;

[0027] The displaying of the target chart through the main thread includes:

[0028] The data link addresses in the plurality of second arrays are accessed through the main thread according to the preset display priorities of the target charts to display the plurality of target charts.

[0029] Optionally, in some embodiments of the present application, creating a first chart drawing area through the working thread of the current application includes:

[0030] An off-screen canvas is created through the working thread, and the off-screen canvas is used as the first chart drawing area.

[0031] Optionally, in some embodiments of the present application, before creating an off-screen canvas by the worker thread and using the off-screen canvas as the first chart drawing area, the process further includes:

[0032] Identify, during runtime, whether the current application supports the off-screen canvas;

[0033] The step of creating an off-screen canvas by using the working thread and using the off-screen canvas as the first chart drawing area includes:

[0034] If the current application supports the off-screen canvas, an off-screen canvas is created through the working thread, and the off-screen canvas is used as the first chart drawing area.

[0035] Optionally, in some embodiments of the present application, after creating an off-screen canvas by the worker thread and using the off-screen canvas as the first chart drawing area, the method further includes:

[0036] If the current application does not support the off-screen canvas, creating a second chart drawing area through the main thread, where the second chart drawing area is another display area outside the display area for displaying data;

[0037] By means of the main thread, a target chart corresponding to the chart data is obtained by drawing in the second chart drawing area;

[0038] The target chart is displayed through the main thread.

[0039] Optionally, in some embodiments of the present application, there are multiple working threads, and creating a first chart drawing area through the working thread of the current application includes:

[0040] Creating a corresponding plurality of first chart drawing areas through the plurality of working threads of the current application;

[0041] The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes:

[0042] A target chart corresponding to the chart data is obtained by drawing in corresponding multiple first chart drawing areas through the multiple working threads.

[0043] Accordingly, an embodiment of the present application provides a web page display device, including:

[0044] A content data acquisition unit, used to acquire content data of a page to be displayed through the main thread of the current application, wherein the content data includes chart data to be drawn and display data associated with the chart data;

[0045] A display data display unit, used for displaying the display data through the main thread;

[0046] A chart area creating unit, configured to create a first chart drawing area through the working thread of the current application, wherein the first chart drawing area is a non-display area outside the display area of ​​the display data;

[0047] A target chart acquisition unit, configured to obtain a target chart corresponding to the chart data by drawing in the first chart drawing area through the working thread;

[0048] The target chart display unit is used to display the target chart through the main thread.

[0049] An electronic device provided in an embodiment of the present application includes a processor and a memory, wherein the memory stores a plurality of instructions, and the processor loads the instructions to execute the steps in the web page display method provided in the embodiment of the present application.

[0050] The embodiment of the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the steps in the web page display method provided in the embodiment of the present application are implemented.

[0051] In addition, an embodiment of the present application also provides a computer program product, including a computer program or instructions, which, when executed by a processor, implements the steps in the web page display method provided in the embodiment of the present application.

[0052] The embodiment of the present application provides a web page display method and related equipment, which can obtain content data of the page to be displayed through the main thread of the current application, the content data includes chart data to be drawn, and display data of the associated chart data; display the display data through the main thread; create a first chart drawing area through the working thread of the current application, the first chart drawing area is a non-display area outside the display area of ​​the display data; draw a target chart corresponding to the chart data in the first chart drawing area through the working thread; and display the target chart through the main thread. The present application can process chart data in the current application without going through the server side, and thus will not cause the problem of high server resource overhead due to a large number of page HTTP requests; because the chart drawing is performed in a non-display area outside the display area of ​​the display data, and the first chart drawing area is created through the working thread, the main thread is responsible for the display of the target chart and the display data, so that the drawing of graphics, and the initialization of related interactive events, animation related functions, etc. are not all performed in the main thread, so the resource overhead of the main thread of the application end will be reduced, and the impact on page performance will be reduced, and then the display speed of the page chart image will be improved, which is conducive to the rapid display of the page chart image. BRIEF DESCRIPTION OF THE DRAWINGS

[0053] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0054] Figure 1 It is a scene schematic diagram of the web page display method provided in the embodiment of the present application;

[0055] Figure 2 is a flow chart of a web page display method provided in an embodiment of the present application;

[0056] Figure 3 is a schematic diagram of a web page display target chart provided in an embodiment of the present application;

[0057] Figure 4 is another schematic diagram of a web page display target chart provided in an embodiment of the present application;

[0058] Figure 5 is a schematic diagram of the relationship between the display display area and the first chart drawing area provided in an embodiment of the present application;

[0059] Figure 6 is a data transmission flow chart of the web page display method provided in an embodiment of the present application;

[0060] Figure 7 This is another flow chart of data transmission of the web page display method provided in the embodiment of the present application;

[0061] Figure 8 It is a flowchart of the preparation work before creating a canvas in the web page display method provided in the embodiment of the present application;

[0062] Fig. 9 is another flow chart of the web page display method provided in an embodiment of the present application;

[0063] Fig.10 is a structural schematic diagram of a web page display device provided in an embodiment of the present application;

[0064] Fig.11 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0065] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0066] The embodiment of the present application provides a web page display method and related equipment, and the related equipment may include a web page display device, an electronic device, a computer-readable storage medium and a computer program product. The web page display device may be integrated in an electronic device, and the electronic device may be a terminal or a server.

[0067] like Figure 1 As shown, the web page display method is executed by terminals together as an example. The web page display system provided in the embodiment of the present application includes a terminal 10 and a server 11, etc. The terminal 10 and the server 11 are connected via a network, such as a wired or wireless network connection, etc., wherein the web page display device can be integrated in the terminal.

[0068] Among them, the terminal 10 can be used to: obtain content data of the page to be displayed through the main thread of the current application, the content data includes chart data to be drawn, and display data associated with the chart data; display the display data through the main thread; create a first chart drawing area through the working thread of the current application, the first chart drawing area is a non-display area located outside the display area of ​​the display data; draw a target chart corresponding to the chart data in the first chart drawing area through the working thread; display the target chart through the main thread. Among them, the terminal 10 can include a mobile phone, an intelligent voice interaction device, a smart home appliance, a vehicle-mounted terminal, an aircraft, a tablet computer, a laptop computer, or a personal computer (PC, Personal Computer), etc. A client can also be set on the terminal 10, and the client can be an application client or a browser client, etc.

[0069] Among them, the server 11 can be used to: receive content data sent by the terminal 10, the content data includes chart data to be drawn, and display data associated with the chart data; and also to receive a target chart sent by the terminal 10. Among them, the server 11 can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The web page display method or device disclosed in this application, wherein multiple servers can be composed of a blockchain, and the server is a node on the blockchain.

[0070] It should be noted that the description order of the following embodiments is not intended to limit the preferred order of the embodiments.

[0071] This embodiment will be described from the perspective of a web page display device. The web page display device may be integrated into an electronic device, which may be a server, a terminal or other device.

[0072] This embodiment can be applied to various scenarios such as cloud technology, artificial intelligence, smart transportation, and assisted driving.

[0073] like Figure 2 As shown, the specific process of the web page display method can be as follows:

[0074] 101. Obtain content data of the page to be displayed through the main thread of the current application. The content data includes chart data to be drawn and display data associated with the chart data.

[0075] Among them, the current application can be any application that can perform graphics drawing, such as a browser or other client-side chart drawing tools, etc., which can display data such as numbers, text, and charts. Of course, the data that can be displayed can be of multiple types, and this embodiment does not limit this.

[0076] The content data of the page to be displayed refers to the data that needs to be presented on the page that the current application needs to display, including the chart data that needs to be drawn, and the display data of the associated chart data. Among them, the display data refers to the data directly displayed on the page to be displayed, such as non-chart data such as serial number, name, percentage, etc. The chart data is the corresponding parameters in the display data. For example, if the chart to be drawn is a trend chart, the chart data is the parameters in the display data that can reflect the trend of the trend chart, such as time and the output value corresponding to the time, etc. The specific chart can be drawn according to the actual needs and the corresponding display data.

[0077] Specifically, refer to Figure 3 , which is a schematic diagram of a specific scene of the web page display method provided in the embodiment of the present application, wherein the ranking, dimension, dimension value, current period daily average, comparison period daily average, fluctuation, volatility, contribution, and the data values ​​below the above titles corresponding to the above titles are all display data, and the data required for the generated trend chart is the chart data, and the generated trend chart is the chart to be displayed. Each set of display data has a corresponding set of chart data. Of course, the display data, the corresponding chart data, and the corresponding chart can be set according to the actual situation, and this embodiment does not limit this.

[0078] 102. Display data through the main thread.

[0079] When it is necessary to display a page through the current application, the display data is displayed on the page to be displayed through the main thread of the current application. That is, the chart data corresponding to the display data is not displayed in the main thread when the chart is displayed. That is, the main thread is only responsible for displaying the display data.

[0080] Reference Figure 3 That is, the ranking, dimension, dimension value, current period daily average, comparison period daily average, volatility, volatility, contribution and the data values ​​below the above titles are displayed through the main thread. Of course, the display form can be presented in the form of a table, of course, it can also be as follows Figure 4 As shown, it is presented in the form of a tree diagram. Similarly, the display method can be various, and this embodiment does not limit this.

[0081] 103. Create a first chart drawing area through a worker thread of the current application. The first chart drawing area is a non-display area outside a display area for displaying data.

[0082] Of course, in order to quickly display the display data and the charts corresponding to the chart data, it is necessary to operate outside the main thread, that is, to create the first chart drawing area through the working thread of the current application.

[0083] The first chart drawing area is a non-display area outside the display area for displaying data. Specifically, refer to Figure 5 , the display content presented in area B, area C, ..., area G is the display area of ​​the page to be displayed, area B is located in area A, area A represents the page to be displayed, that is, the area on the page to be displayed that can be observed by sight can be the display area.

[0084] For the browser, the entire page of the browser is the page to be displayed, which is area A represented by Figure X3. Figure 5 Region B, region C, region D, etc. in the figure represent the regions to be displayed on the page to be displayed and the corresponding content information data. For example, the content of region B can be the corresponding Figure 3 In the content, area C can be corresponding to Figure 4 The content in.

[0085] The non-display area corresponds to a virtual logical area that is invisible to the eyes in the current application. This logical area is located in the working thread. Through the above method, it is not necessary to put all processing operations in the main thread. When there are many charts drawn, it can reduce the impact on the performance of the application page, thereby improving the user experience of the page.

[0086] 104. Draw a target chart corresponding to the chart data in the first chart drawing area through the working thread.

[0087] That is, through the working thread, the corresponding chart drawing program is executed in the first chart drawing area according to the chart data, and the target chart corresponding to each chart data is drawn according to the chart data, wherein the target chart is the chart that needs to be displayed on the display page, referring to Figure 3 , where the trend chart is the target chart.

[0088] In a specific embodiment, the first chart drawing area is an off-screen canvas. Creating the first chart drawing area through a working thread of the current application includes: creating an off-screen canvas through the working thread, and using the off-screen canvas as the first chart drawing area.

[0089] Mainstream client-side chart drawing tools (such as echarts.js) need to be instantiated every time a graph is drawn. In addition to drawing the graph, it also includes the initialization of related interactive events and animation related functions, which is expensive and not suitable for batch generation of a large number of charts and graphics. Therefore, in order to reduce the number of instantiations when drawing a chart and reduce resource overhead, the chart data is packaged before drawing the target chart.

[0090] Specifically, in a specific embodiment, there are multiple groups of chart data to be drawn, and before the step of "obtaining a target chart corresponding to the chart data in the first chart drawing area through a working thread", the following step is also included:

[0091] Through the main thread, multiple groups of chart data to be drawn are written into the first array.

[0092] That is, in the main thread, firstly, an array (i.e., the first array) is obtained, and the array is used to store the chart data to be drawn. Of course, the array can be obtained by real-time creation, pre-creation and instant retrieval, or any other method, which is not limited in the present embodiment. When the array is obtained, the chart data to be drawn are written into the first array one by one. After all the chart data to be drawn are written into the first array, the subsequent operation steps are performed on the first array.

[0093] For example, refer to Figure 6 In the main thread, assume that there are 4 groups of chart data that need to be drawn, which are recorded as single group chart data 1, single group chart data 2, single group chart data 3, and single group chart data 4 respectively. Then, in the main thread, these four chart data are stored one by one in the original array (i.e., the first array), that is, the original data includes single group chart data 1, single group chart data 2, single group chart data 3, and single group chart data 4, which means that the chart data that need to be drawn are packaged and processed uniformly.

[0094] Furthermore, in order to reduce the number of instantiations and reduce resource overhead, a target chart corresponding to the chart data is drawn in the first chart drawing area through a working thread, including:

[0095] Through the working thread, multiple groups of chart data in the first array are drawn in the first chart drawing area to obtain corresponding multiple target charts.

[0096] After multiple groups of chart data are packaged and written into the first array in the main thread, the first array is sent to the worker thread through information interaction (Worker.postMessage), and then the worker thread draws the target chart for the chart data in the first array on the off-screen canvas, so that each group of chart data can generate a target chart. When all the chart data are drawn through the off-screen canvas, multiple target charts can be obtained.

[0097] The specific method is to create an OffscreenCanvas object in the worker thread, and then execute a JavaScript script to obtain the drawing context of the OffscreenCanvas object in the JavaScript script and perform drawing operations through the drawing context. The drawing context provides a set of methods and properties for drawing elements such as graphics, text, and images on the canvas. You can use the drawing context to create paths, set styles, draw shapes, fills, and strokes, etc.

[0098] Specifically, the drawing context can be a 2D context or a WebGL context. The 2D context (CanvasRenderingContext2D) is used for 2D drawing operations, including drawing rectangles, circles, lines, text, etc. The WebGL context (WebGLRenderingContext) is a drawing context based on OpenGL ES, which is used for high-performance 3D drawing operations. The selection of the drawing context can be based on actual needs, which is not limited in this embodiment.

[0099] Furthermore, in one embodiment of the present application, in order to reduce the number of instantiations, after the step of "drawing multiple groups of chart data in the first array in the first chart drawing area through a working thread to obtain corresponding multiple target charts", it also includes:

[0100] A plurality of data link addresses corresponding to a plurality of target charts are obtained through the working thread, and the plurality of data link addresses are written into the second array.

[0101] After obtaining multiple target charts, the target charts are converted into data link addresses (DataURL) by toDataurlURL, and the obtained multiple data link addresses are written into the second array.

[0102] For example, refer to Figure 6, after converting the chart data in the original array into data link addresses one by one through the working thread, the data link addresses are stored in the result array (the second array), and the single group of chart data 1, the single group of chart data 2, the single group of chart data 3, and the single group of chart data 4 in the original array are converted into chart data link address 1, chart data link address 2, chart data link address 3, and chart data link address 4 respectively, then chart data link address 1, chart data link address 2, chart data link address 3, and chart data link address 4 are all written into the result array, that is, the result array includes the data link addresses corresponding to all the chart data in the original array.

[0103] Among them, the target chart is displayed through the main thread, including:

[0104] Through the main thread, multiple data link addresses in the second array are accessed to display multiple target charts.

[0105] Specifically, refer to Figure 6 In the process of generating data link addresses, the original array is traversed by the worker thread. If the original array has not been traversed, that is, there are still chart data in the original array that have not been converted into data link addresses, the conversion process will continue until all chart data have been converted and written into the result array. If the original array has been traversed, that is, all target data in the original array have been converted into data link addresses and written into the result array.

[0106] Reference Figure 6 , when all target data have completed the conversion of data link addresses and written into the result array, the worker thread and the main thread exchange information (self.postMessage) to send the result array to the main thread, and then the main thread accesses the data link addresses in the result array one by one, so as to display the target chart on the page to be displayed. The specific display form of the target chart can be <img src＝"DataURL"> Of course, it can also be presented in any other way that can be converted into a visual chart through a data link address, and this embodiment does not limit this. Through the above method, it is not necessary to instantiate each time a graphic is drawn, which can reduce resource overhead and further improve the speed of displaying charts on the page.

[0107] Of course, the position of the final presented chart corresponds to the corresponding display data, such as Figure 3 and Figure 4 As shown, a trend chart (target chart) corresponds to one display data. As for the display position of the target chart on the page to be displayed, taking Canvas as an example, it can be determined in the following way:

[0108] Create a Canvas element in the page to display the generated chart. For example, you can add a <canvas>Label:

[0109] <canvas id＝"chartcanvas">< / canvas>

[0110] Use JavaScript to get a reference to the Canvas element and obtain its 2D drawing context:

[0111] const canvas=document.getElementById('chartCanvas');

[0112] const context=canvas.getContext('2d');

[0113] Determine the position and size of the Canvas element in the page layout. You can use CSS styles or JavaScript to set the position and size of the Canvas element. For example, you can use CSS styles to place the Canvas element in a specific container and set its width and height:

[0114] #chartCanvas{

[0115] width:500px;

[0116] height:300px;

[0117] }

[0118] Alternatively, you can use JavaScript to dynamically set the width and height of the Canvas element:

[0119] canvas.width = 500;

[0120] canvas.height = 300;

[0121] Draw the generated chart on the Canvas element. Use the Canvas drawing context to perform drawing operations and draw the generated chart on the Canvas:

[0122] / / Draw the chart on the Canvas

[0123] / / ...

[0124] Finally, you can display the Canvas element at the appropriate location in the page to show the generated chart.

[0125] Through the above steps, you can determine the display position of the generated chart on the page. Of course, you can also make appropriate adjustments and style settings based on the page layout and needs.

[0126] Furthermore, in some embodiments, in order to meet different needs and reduce resource overhead and improve the display speed of charts compared to traditional chart display modes, the first array can be multiple, and multiple groups of chart data to be drawn are written into the first array through the main thread, including:

[0127] Through the main thread, multiple groups of chart data to be drawn are written into multiple first arrays respectively, and the chart data in the multiple first arrays are not repeated;

[0128] By using the working thread, a target chart corresponding to the chart data is drawn in the first chart drawing area, including:

[0129] Through the working thread, a plurality of chart data in the first array are drawn in the first chart drawing area to obtain a corresponding plurality of target charts.

[0130] Specifically, refer to Figure 7 In the process of writing the chart data into the first array, the chart data can be written in a dispersed manner. For example, there are 10 groups of chart data, numbered as chart data 1, chart data 2, chart data 3, ..., chart data 10; the first array has 5 groups, numbered as original array 1, original array 2, ..., original array 5. At this time, the corresponding relationship of writing the chart data into the first array can be that original array 1 includes chart data 1, chart data 2 and chart data 3, original array 2 includes chart data 4 and chart data 6, original array 3 includes chart data 10, original array 4 includes chart data 5 and chart data 9, and original array 5 includes chart data 7 and chart data 8. Of course, the chart data in the first array can be arranged arbitrarily, and the number can be set arbitrarily, which is not limited in this embodiment.

[0131] After writing chart data into multiple first arrays, the first arrays can be sent to the working thread, and then the chart data in the multiple first arrays are drawn by the working thread. After drawing is completed, it is converted into the corresponding data link address, written into the second array, and then sent to the main thread for display.

[0132] Further, see Figure 7 , after drawing the chart data in the first array in the first chart drawing area through the working thread to obtain the corresponding multiple target charts, it also includes:

[0133] The data link addresses of the chart data in the plurality of first arrays are obtained through the working thread, and the data link addresses corresponding to the same first arrays are written into the same second array, where there are a plurality of second arrays.

[0134] Specifically, there are multiple second arrays, and the second arrays correspond to the first arrays. When the chart data in the multiple first arrays are drawn through the working thread and converted into corresponding data link addresses after the drawing is completed, the data link address corresponding to the same first array is written into the same second array.

[0135] For example, original array 1 corresponds to result array 1, original array 2 corresponds to result array 2, original array 3 corresponds to result array 3, original array 4 corresponds to result array 4, original array 5 corresponds to result array 5 (the result array is the second array). Chart data 1, chart data 2 and chart data 3 in original array 1 are converted into data link address 1, data link address 2 and data link address 3. Then data link address 1, data link address 2 and data link address 3 are written into result array 1 accordingly. The corresponding relationships of other arrays are similar.

[0136] Then, display the target chart through the main thread, including:

[0137] Through the main thread, the data link addresses in the plurality of second arrays are accessed according to the preset display priorities of the target charts to display the plurality of target charts.

[0138] That is, after the target data in each result array is written and sent to the main thread, the main thread can access the data link addresses in multiple second arrays according to the preset display priority of the target chart, where the display priority can be the priority of the target chart itself or the priority of the preset result array.

[0139] As for the priority of the target chart itself, it can be set according to the properties of the target chart itself. For example, the priority of the target chart can be preset based on at least one of the company name, company output value, province, and change rate, and these target charts and chart data can be marked. When the corresponding mark is identified, it can be displayed preferentially according to the mark.

[0140] For example, the priority mark of chart data 1 is 1, the priority mark of chart data 7 is 2, ..., the priority mark of chart data 10 is 10, and the priority levels represented by the priority marks 1, 2, 3, ..., 10 are from large to small, then the order in which the main thread displays the data link addresses in the access result array is to first access and display chart data 1 in result array 1, then access and display chart data 7 in result array 5, ..., and finally display chart data 10 in result array 3. Of course, the priority level represented by the priority mark can also be gradually increased from 1 to 10, which can be set according to actual conditions, and this embodiment does not limit this.

[0141] Taking the priority of the result array as an example, the priority of the original array can be set in advance. After the setting is completed, the priority of the result array corresponding to the original array is the same. For example, the priority of the result array is from large to small, namely result array 3, result array 2, result array 4, result array 5, and result array 1. At this time, the display order of the target chart is to give priority to accessing result array 3, and access the chart data in result array 3 one by one, that is, chart data 10. After accessing result array 3, access result array 2, and access chart data 4 and chart data 6 in result array 2 one by one. And so on, complete the access to all result arrays, and then realize the display of the target chart.

[0142] In some embodiments, the target chart is displayed through the main thread, and the data link addresses in the multiple second arrays can be accessed in any order. The specific access order can be set according to actual conditions.

[0143] Furthermore, in another embodiment, there may be multiple working threads, and creating a first chart drawing area through the working thread of the current application includes:

[0144] Creating corresponding multiple first chart drawing areas through multiple working threads of the current application;

[0145] By using the working thread, a target chart corresponding to the chart data is drawn in the first chart drawing area, including:

[0146] A target chart corresponding to the chart data is obtained by drawing in corresponding first chart drawing areas through multiple working threads.

[0147] That is, when creating a working thread, multiple working threads can be created according to actual needs. When a target chart needs to be drawn, the chart data can be written into multiple sets of first arrays, and then the multiple sets of first arrays can be sent to different working threads to draw the target chart.

[0148] For example, there are three working threads, namely working thread 1, working thread 2 and working thread 3, then original array 1, original array 2, original array 3 and original array 4 can be sent to working thread 1 for processing, original array 5, original array 6 and original array 7 can be sent to working thread 2 for processing, and the remaining original arrays can be sent to working thread 3 for processing. After the three working threads complete the processing and obtain their respective result arrays, they are sent to the main thread to display the target chart.

[0149] Of course, in this embodiment, the number and order of the original arrays allocated to the working threads can be set randomly, and of course they can also be allocated according to a preset priority. The preset priority can be set according to actual needs, and this embodiment does not limit this.

[0150] Compared with traditional chart display, the operation of displaying charts through multiple working threads can process chart data in the current application without going through the server, thus avoiding the problem of high server resource overhead due to the large number of HTTP requests for the page; since the chart is drawn in a non-display area outside the display area of ​​the display data, and the first chart drawing area is created by the working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics and the initialization of related interactive events and animation related functions are not all performed in the main thread, so the resource overhead of the main thread of the application end will be reduced, and the impact on page performance will be reduced, thereby increasing the display speed of page charts and images, which is conducive to the rapid display of page charts and images.

[0151] 105. Display the target chart through the main thread.

[0152] After the target chart is obtained, the working thread transmits the target chart to the main thread, and then the main thread displays the target chart in the display area of ​​the page to be displayed.

[0153] Specifically, when all target data have completed the conversion of data link addresses and written into the result array, the worker thread and the main thread exchange information (self.postMessage) to send the result array to the main thread, and then the main thread accesses the data link addresses in the result array one by one, so as to display the target chart on the page to be displayed. The specific display form of the target chart can be <img src＝"DataURL"> Of course, it can also be presented in any other way that can be converted into a visual chart through a data link address, and this embodiment does not limit this.

[0154] The present application can process chart data in the current application without going through the server side, and thus will not cause the problem of high server resource overhead due to the large number of HTTP requests for the page. Moreover, since it does not need to go through the server and does not require human cooperation on the server side, the operation can be completed independently on the application side. Since the chart is drawn in a non-display area outside the display area for displaying data, and the first chart drawing area is created by a working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics and the initialization of related interactive events and animation related functions are not all performed in the main thread, so the resource overhead of the main thread of the application side will be reduced, and the impact on page performance will be reduced, thereby increasing the display speed of page chart images, which is conducive to the rapid display of page chart images.

[0155] For some applications, there may be incompatibility with off-screen canvas. In this case, in order to successfully display the target chart, you can use the normal canvas (Canvas) and message panel (MessageChannel) to downgrade the off-screen rendering to be compatible with browsers or other applications that do not support offscreenCanvas. At the same time, shield the underlying details, reduce coupling, reduce implementation complexity, and improve maintainability.

[0156] Therefore, refer to Figure 8 In another embodiment, before the step of "creating an off-screen canvas through a working thread and using the off-screen canvas as the first chart drawing area", it also includes:

[0157] Identify whether the current application supports off-screen canvas at runtime;

[0158] Create an off-screen canvas through a working thread and use the off-screen canvas as the first chart drawing area, including:

[0159] If the current application supports off-screen canvas, the off-screen canvas is created through the working thread, and the off-screen canvas is used as the first chart drawing area.

[0160] Specifically, first execute the CreateWorker method, and then identify whether the current application supports off-screen canvas at runtime. This can be achieved in the following ways: 1. Check whether the global object has the OffscreenCanvas class; 2. Use the transferControlToOffscreen method of the HTMLCanvasElement object to check; 3. Use feature detection; 4. Use the Modernizr library to detect; 5. Use the Modernizr library to detect whether the browser supports OffscreenCanvas. Through the above methods, a function return value of the result of the CreateWorker method execution can be obtained, and the function return value can be used to determine whether the application supports off-screen canvas.

[0161] 1. Check whether the OffscreenCanvas class exists in the global object. In browsers that support Offscreen Canvas, the OffscreenCanvas class is available. The detection code is as follows:

[0162] if(typeof OffscreenCanvas!=='undefined'){

[0163] / / Browser supports Offscreen Canvas

[0164] }else{

[0165] / / The browser does not support Offscreen Canvas

[0166] }

[0167] 2. Use the transferControlToOffscreen method of the HTMLCanvasElement object to check. This method will throw an exception in browsers that do not support Offscreen Canvas. The detection code is as follows:

[0168] var canvas=document.createElement('canvas');

[0169] if(typeof canvas.transferControlToOffscreen===='function'){

[0170] / / Browser supports Offscreen Canvas

[0171] }else{

[0172] / / The browser does not support Offscreen Canvas

[0173] }

[0174] 3. Use feature detection: You can determine whether Offscreen Canvas is supported by detecting whether the browser supports the OffscreenCanvas class. You can use the following code to detect it:

[0175] if(typeof OffscreenCanvas!=='undefined'){

[0176] / / Browser supports Offscreen Canvas

[0177] }else{

[0178] / / The browser does not support Offscreen Canvas

[0179] }

[0180] 4. Use Modernizr library for detection: Modernizr is a JavaScript library for detecting browser function support. It can easily detect Offscreen Canvas. You can use the following code for detection:

[0181] if(Modernizr.webgl&&Modernizr.webworkers&&Modernizr.transferables){

[0182] / / Browser supports Offscreen Canvas

[0183] }else{

[0184] / / The browser does not support Offscreen Canvas

[0185] }

[0186] 5. Use the Modernizr library to detect whether the browser supports Offscreen Canvas. Modernizr is a JavaScript library used to detect browser function support, which can facilitate function detection.

[0187] First, you need to introduce the Modernizr library into the page. You can download the latest version of the library file from the official website and then include it in the HTML file. The code is as follows:

[0188] <script src＝"path to modernizr.js">< / script>

[0189] Once the Modernizr library is loaded, you can use the Modernizr object to detect whether the browser supports Offscreen Canvas. In this case, you can check the Modernizr.offscreen property as follows:

[0190] if (Modernizr.offscreen) {

[0191] / / Browser supports Offscreen Canvas

[0192] }else{

[0193] / / The browser does not support Offscreen Canvas

[0194] }

[0195] Using the Modernizr library can simplify the process of feature detection, and it also provides other feature detection functions that can be used as needed. It should be understood that you need to ensure that the library file is correctly imported before using Modernizr.

[0196] Of course, the above detection methods are only a few of several examples that can be implemented. In the actual detection process, the methods in the above examples can be used, or any other achievable methods can be used. That is, in this embodiment, the method for detecting whether Offscreen Canvas is supported is not limited.

[0197] If the current application supports off-screen canvas, an off-screen canvas is created through a working thread, and the off-screen canvas is used as the first chart drawing area. That is, the function return value obtained is the case of supporting off-screen canvas, so the working thread can be created normally at this time, and the off-screen canvas is created in the working thread, and the subsequent target chart display steps are executed. Similarly, if the current application supports off-screen canvas, there must be a case where the current application does not support off-screen canvas, so,

[0198] After creating an off-screen canvas through a working thread and using the off-screen canvas as the first chart drawing area, the following further includes:

[0199] If the current application does not support off-screen canvas, a second chart drawing area is created through the main thread, and the second chart drawing area is another display area located outside the display area for displaying data;

[0200] Through the main thread, a target chart corresponding to the chart data is drawn in the second chart drawing area;

[0201] Display the target chart through the main thread.

[0202] Among them, the second chart drawing area refers to other display areas outside the display area of ​​the display data, that is, other visible display areas outside the display area for displaying the display data on the page to be displayed, that is, the display area and other display areas are both visible areas.

[0203] Specifically, the second chart drawing area refers to a normal canvas (Canvas). If the current application does not support off-screen canvas, a MessageChannel message channel new MessageChannel() is created, and then the two ports of the message channel are regarded as the main thread and the web worker thread to simulate the communication between the main thread and the web worker thread.

[0204] When the obtained function return value does not support off-screen canvas, a simulated working thread (Mock's Web Worker) is created through the message channel. Through the virtual working thread, when the main thread sends a message to the working thread, when there is no real working thread, there is no need to consider whether the application supports off-screen canvas. The upper layer execution can be realized, that is, the canvas is created to display the target chart, and no other special processing is required. It can shield the details of the lower layer, reduce coupling, reduce implementation complexity, and improve maintainability.

[0205] After the ordinary canvas (i.e., the second chart drawing area) is created through the main thread, the target chart corresponding to the chart data can be drawn on the ordinary canvas, and then the target chart is displayed through the main thread. The chart display process is realized through the main thread, which is a well-known prior art and will not be described in detail here.

[0206] Therefore, through the above-mentioned embodiment, even if there is a situation where the off-screen canvas is incompatible, the target chart can still be displayed normally, and it can be compatible with browsers or other applications that do not support offscreenCanvas, while shielding the underlying details, reducing coupling, reducing implementation complexity, and improving maintainability.

[0207] According to the method described in the above embodiment, the following will be further described in detail by taking the content sorting device being specifically integrated in a terminal as an example.

[0208] The present application embodiment provides a content sorting method, such as Fig. 9 As shown, the specific process of the content sorting method can be as follows:

[0209] 201. The terminal obtains content data of a page to be displayed through the main thread of the browser. The content data includes chart data to be drawn and display data associated with the chart data.

[0210] The data that can be displayed may be of various types, which is not limited in this embodiment.

[0211] The content data of the page to be displayed refers to the data that needs to be presented on the page that the browser needs to display, including the chart data that needs to be drawn, and the display data of the associated chart data. Among them, the display data refers to the data directly displayed on the page to be displayed, such as non-chart data such as serial number, name, percentage, etc. The chart data is the corresponding parameters in the display data. For example, if the chart to be drawn is a trend chart, the chart data is the parameters in the display data that can reflect the trend of the trend chart, such as time and the output value corresponding to the time, etc. The specific chart can be drawn according to the actual needs and the corresponding display data.

[0212] 202. The terminal displays the display data through the main thread.

[0213] When a page needs to be displayed through a browser, the display data is displayed on the page to be displayed through the main thread of the browser. That is, the chart data corresponding to the display data is not displayed in the main thread when the chart is displayed. That is, the main thread is only responsible for displaying the display data.

[0214] 203. The terminal creates an off-screen canvas through a browser's worker thread.

[0215] Of course, in order to quickly display the display data and the charts corresponding to the chart data, it is necessary to operate outside the main thread, that is, to create an off-screen canvas through the browser's working thread.

[0216] For the browser, the off-screen canvas corresponds to a virtual logical area that is invisible to the browser. This logical area is located in the working thread. Through the above method, it is not necessary to place all processing operations in the main thread. When there are many charts drawn, the impact on the performance of the application page can be reduced, thereby improving the user experience of the page.

[0217] 204. The terminal draws a target chart corresponding to the chart data on an off-screen canvas through a working thread.

[0218] That is, through the working thread, the corresponding chart drawing program is executed on the off-screen canvas according to the chart data, and the target chart corresponding to each chart data is drawn according to the chart data, wherein the target chart is the chart that needs to be displayed on the display page.

[0219] Mainstream client-side chart drawing tools (such as echarts.js) need to be instantiated every time a graph is drawn. In addition to drawing the graph, it also includes the initialization of related interactive events and animation related functions, which is expensive and not suitable for batch generation of a large number of charts and graphics. Therefore, in order to reduce the number of instantiations when drawing a chart and reduce resource overhead, the chart data is packaged before drawing the target chart.

[0220] Specifically, in a specific embodiment, there are multiple groups of chart data to be drawn. Before obtaining a target chart corresponding to the chart data by drawing on an off-screen canvas through a working thread, the following steps are also included:

[0221] Through the main thread, multiple groups of chart data to be drawn are written into the first array.

[0222] That is, in the main thread, firstly, an array (i.e., the first array) is obtained, and the array is used to store the chart data to be drawn. Of course, the array can be obtained by real-time creation, pre-creation and instant retrieval, or any other method, which is not limited in the present embodiment. When the array is obtained, the chart data to be drawn are written into the first array one by one. After all the chart data to be drawn are written into the first array, the subsequent operation steps are performed on the first array.

[0223] Furthermore, in order to reduce the number of instantiations and resource overhead, a target chart corresponding to the chart data is drawn on an off-screen canvas through a worker thread, including:

[0224] Through the working thread, multiple groups of chart data in the first array are drawn on the off-screen canvas to obtain corresponding multiple target charts.

[0225] After multiple groups of chart data are packaged and written into the first array in the main thread, the first array is sent to the worker thread through information interaction (Worker.postMessage), and then the worker thread draws the target chart for the chart data in the first array on the off-screen canvas, so that each group of chart data can generate a target chart. When all the chart data are drawn through the off-screen canvas, multiple target charts can be obtained.

[0226] The specific method is to create an OffscreenCanvas object in the worker thread, and then execute a JavaScript script to obtain the drawing context of the OffscreenCanvas object in the JavaScript script and perform drawing operations through the drawing context. The drawing context provides a set of methods and properties for drawing elements such as graphics, text, and images on the canvas. You can use the drawing context to create paths, set styles, draw shapes, fills, and strokes, etc.

[0227] Specifically, the drawing context can be a 2D context or a WebGL context. The 2D context (CanvasRenderingContext2D) is used for 2D drawing operations, including drawing rectangles, circles, lines, text, etc. The WebGL context (WebGLRenderingContext) is a drawing context based on OpenGL ES, which is used for high-performance 3D drawing operations. The selection of the drawing context can be based on actual needs, which is not limited in this embodiment.

[0228] Furthermore, in one embodiment of the present application, in order to reduce the number of instantiations, after drawing multiple groups of chart data in the first array on an off-screen canvas through a worker thread to obtain corresponding multiple target charts, the method further includes:

[0229] A plurality of data link addresses corresponding to a plurality of target charts are obtained through the working thread, and the plurality of data link addresses are written into the second array.

[0230] After obtaining multiple target charts, the target charts are converted into data link addresses (DataURL) by toDataurlURL, and the obtained multiple data link addresses are written into the second array.

[0231] Among them, the target chart is displayed through the main thread, including:

[0232] Through the main thread, multiple data link addresses in the second array are accessed to display multiple target charts.

[0233] Specifically, in the process of generating the data link address, the original array is traversed by the worker thread. If the original array has not been traversed, that is, there are still chart data in the original array that have not been converted into data link addresses, the conversion process will continue until all chart data have been converted and written into the result array. If the original array has been traversed, that is, all target data in the original array have been converted into data link addresses and written into the result array. It should be understood that each time a target chart is drawn, converted into a data connection address and written into the second array, before drawing the next target chart, the canvas needs to be cleared to ensure the accuracy of the generated target chart.

[0234] When all target data have completed the conversion of data link addresses and written into the result array, the worker thread and the main thread exchange information (self.postMessage) to send the result array to the main thread, and then the main thread accesses the data link addresses in the result array one by one, so as to display the target chart on the page to be displayed. The specific display form of the target chart can be <img src＝"DataURL"> Of course, it can also be presented in any other way that can be converted into a visual chart through a data link address, and this embodiment does not limit this. Through the above method, it is not necessary to instantiate each time a graphic is drawn, which can reduce resource overhead and further improve the speed of displaying charts on the page.

[0235] Of course, the position of the final presented chart corresponds to the corresponding display data. One trend chart (target chart) corresponds to one display data. As for the display position of the target chart on the page to be displayed, taking Canvas as an example, it can be determined in the following way:

[0236] Create a Canvas element in the page to display the generated chart. For example, you can add a <canvas>Label:

[0237] <canvas id＝"chartcanvas">< / canvas>

[0238] Use JavaScript to get a reference to the Canvas element and obtain its 2D drawing context:

[0239] const canvas=document.getElementById('chartCanvas');

[0240] const context=canvas.getContext('2d');

[0241] Determine the position and size of the Canvas element in the page layout. You can use CSS styles or JavaScript to set the position and size of the Canvas element. For example, you can use CSS styles to place the Canvas element in a specific container and set its width and height:

[0242] #chartCanvas{

[0243] width:500px;

[0244] height:300px;

[0245] }

[0246] Alternatively, you can use JavaScript to dynamically set the width and height of the Canvas element:

[0247] canvas.width = 500;

[0248] canvas.height = 300;

[0249] Draw the generated chart on the Canvas element. Use the Canvas drawing context to perform drawing operations and draw the generated chart on the Canvas:

[0250] / / Draw the chart on the Canvas

[0251] / / ...

[0252] Finally, you can display the Canvas element at the appropriate location in the page to show the generated chart.

[0253] Through the above steps, you can determine the display position of the generated chart on the page. Of course, you can also make appropriate adjustments and style settings based on the page layout and needs.

[0254] Furthermore, in some embodiments, in order to meet different needs and reduce resource overhead and improve the display speed of charts compared to traditional chart display modes, the first array can be multiple, and multiple groups of chart data to be drawn are written into the first array through the main thread, including:

[0255] Through the main thread, multiple groups of chart data to be drawn are written into multiple first arrays respectively, and the chart data in the multiple first arrays are not repeated;

[0256] Through the working thread, the target chart corresponding to the chart data is drawn on the off-screen canvas, including:

[0257] The chart data in the plurality of first arrays are drawn on an off-screen canvas through a working thread to obtain a plurality of corresponding target charts.

[0258] Specifically, in the process of writing the chart data into the first array, the chart data can be written in a dispersed manner. For example, there are 10 groups of chart data, numbered as chart data 1, chart data 2, chart data 3, ..., chart data 10 respectively; the first array has 5 groups, numbered as original array 1, original array 2, ..., original array 5 respectively. Then, the corresponding relationship of writing the chart data into the first array at this time can be that original array 1 includes chart data 1, chart data 2 and chart data 3, original array 2 includes chart data 4 and chart data 6, original array 3 includes chart data 10, original array 4 includes chart data 5 and chart data 9, and original array 5 includes chart data 7 and chart data 8. Of course, the chart data in the first array can be arranged arbitrarily, and the number can also be set arbitrarily, which is not limited in this embodiment.

[0259] After writing chart data into multiple first arrays, the first arrays can be sent to the working thread, and then the chart data in the multiple first arrays are drawn by the working thread. After drawing is completed, it is converted into the corresponding data link address, written into the second array, and then sent to the main thread for display.

[0260] Furthermore, after drawing the chart data in the plurality of first arrays on the off-screen canvas through the working thread to obtain the corresponding plurality of target charts, the method further includes:

[0261] The data link addresses of the chart data in the plurality of first arrays are obtained through the working thread, and the data link addresses corresponding to the same first arrays are written into the same second array, where there are a plurality of second arrays.

[0262] Specifically, there are multiple second arrays, and the second arrays correspond to the first arrays. When the chart data in the multiple first arrays are drawn through the working thread and converted into corresponding data link addresses after the drawing is completed, the data link address corresponding to the same first array is written into the same second array.

[0263] For example, original array 1 corresponds to result array 1, original array 2 corresponds to result array 2, original array 3 corresponds to result array 3, original array 4 corresponds to result array 4, original array 5 corresponds to result array 5 (the result array is the second array). Chart data 1, chart data 2 and chart data 3 in original array 1 are converted into data link address 1, data link address 2 and data link address 3. Then data link address 1, data link address 2 and data link address 3 are written into result array 1 accordingly. The corresponding relationships of other arrays are similar.

[0264] Then, display the target chart through the main thread, including:

[0265] Through the main thread, the data link addresses in the plurality of second arrays are accessed according to the preset display priorities of the target charts to display the plurality of target charts.

[0266] That is, after the target data in each result array is written and sent to the main thread, the main thread can access the data link addresses in multiple second arrays according to the preset display priority of the target chart, where the display priority can be the priority of the target chart itself or the priority of the preset result array.

[0267] As for the priority of the target chart itself, it can be set according to the properties of the target chart itself. For example, the priority of the target chart can be preset based on at least one of the company name, company output value, province, and change rate, and these target charts and chart data can be marked. When the corresponding mark is identified, it can be displayed preferentially according to the mark.

[0268] For example, the priority mark of chart data 1 is 1, the priority mark of chart data 7 is 2, ..., the priority mark of chart data 10 is 10, and the priority levels represented by the priority marks 1, 2, 3, ..., 10 are from large to small, then the order in which the main thread displays the data link addresses in the access result array is to first access and display chart data 1 in result array 1, then access and display chart data 7 in result array 5, ..., and finally display chart data 10 in result array 3. Of course, the priority level represented by the priority mark can also be gradually increased from 1 to 10, which can be set according to actual conditions, and this embodiment does not limit this.

[0269] Taking the priority of the result array as an example, the priority of the original array can be set in advance. After the setting is completed, the priority of the result array corresponding to the original array is the same. For example, the priority of the result array is from large to small, namely result array 3, result array 2, result array 4, result array 5, and result array 1. At this time, the display order of the target chart is to give priority to accessing result array 3, and access the chart data in result array 3 one by one, that is, chart data 10. After accessing result array 3, access result array 2, and access chart data 4 and chart data 6 in result array 2 one by one. And so on, complete the access to all result arrays, and then realize the display of the target chart.

[0270] In some embodiments, the target chart is displayed through the main thread, and the data link addresses in the multiple second arrays can be accessed in any order. The specific access order can be set according to actual conditions.

[0271] Furthermore, in another embodiment, there may be multiple working threads, and creating an off-screen canvas through the working thread of the browser includes:

[0272] Create multiple off-screen canvases through multiple working threads of the browser;

[0273] Through the working thread, the target chart corresponding to the chart data is drawn on the off-screen canvas, including:

[0274] Through multiple working threads, a target chart corresponding to the chart data is drawn on corresponding multiple off-screen canvases.

[0275] That is, when creating a working thread, multiple working threads can be created according to actual needs. When a target chart needs to be drawn, the chart data can be written into multiple sets of first arrays, and then the multiple sets of first arrays can be sent to different working threads to draw the target chart.

[0276] For example, there are three working threads, namely working thread 1, working thread 2 and working thread 3, then original array 1, original array 2, original array 3 and original array 4 can be sent to working thread 1 for processing, original array 5, original array 6 and original array 7 can be sent to working thread 2 for processing, and the remaining original arrays can be sent to working thread 3 for processing. After the three working threads complete the processing and obtain their respective result arrays, they are sent to the main thread to display the target chart.

[0277] Of course, in this embodiment, the number and order of the original arrays allocated to the working threads can be set randomly, and of course they can also be allocated according to a preset priority. The preset priority can be set according to actual needs, and this embodiment does not limit this.

[0278] Compared with traditional chart display, the operation of displaying charts through multiple working threads can process chart data in the browser without going through the server, thus avoiding the problem of high server resource overhead due to the large number of HTTP requests for the page; since the chart is drawn in a non-display area outside the display area of ​​the display data, and the first chart drawing area is created by the working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics and the initialization of related interactive events and animation related functions are not all performed in the main thread, so the resource overhead of the main thread of the application end will be reduced, and the impact on page performance will be reduced, thereby increasing the display speed of page charts and images, which is conducive to the rapid display of page charts and images.

[0279] 205. The terminal displays the target chart through the main thread.

[0280] After the target chart is obtained, the working thread transmits the target chart to the main thread, and then the main thread displays the target chart in the display area of ​​the page to be displayed.

[0281] Specifically, when all target data have completed the conversion of data link addresses and written into the result array, the worker thread and the main thread exchange information (self.postMessage) to send the result array to the main thread, and then the main thread accesses the data link addresses in the result array one by one, so as to display the target chart on the page to be displayed. The specific display form of the target chart can be <img src＝"DataURL"> Of course, it can also be presented in any other way that can be converted into a visual chart through a data link address, and this embodiment does not limit this.

[0282] The present application can process chart data in the browser without going through the server, and thus will not cause the problem of high server resource overhead due to the large number of HTTP requests for the page. Moreover, since it does not need to go through the server and does not require human cooperation on the server side, the operation can be completed independently on the application side. Since the chart is drawn in a non-display area outside the display area for display data, and the first chart drawing area is created by a working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics and the initialization of related interactive events and animation related functions are not all performed in the main thread, so the resource overhead of the main thread of the application side will be reduced, and the impact on page performance will be reduced, thereby increasing the display speed of page chart images, which is conducive to the rapid display of page chart images.

[0283] For some applications, there may be incompatibility with off-screen canvas. In this case, in order to successfully display the target chart, you can use the normal canvas (Canvas) and message panel (MessageChannel) to downgrade the off-screen rendering to be compatible with browsers or other applications that do not support offscreenCanvas. At the same time, shield the underlying details, reduce coupling, reduce implementation complexity, and improve maintainability.

[0284] Therefore, in another embodiment, before creating the off-screen canvas by the working thread, the method further includes:

[0285] Identify whether the browser supports off-screen canvas at runtime;

[0286] Specifically, first execute the CreateWorker method, and then identify whether the browser supports off-screen canvas at runtime. This can be achieved in the following ways: 1. Check whether the global object has the OffscreenCanvas class; 2. Use the transferControlToOffscreen method of the HTMLCanvasElement object to check; 3. Use feature detection; 4. Use the Modernizr library to detect; 5. Use the Modernizr library to detect whether the browser supports OffscreenCanvas. Through the above methods, a function return value of the result of the CreateWorker method execution can be obtained, and the function return value can be used to determine whether the application supports off-screen canvas.

[0287] 1. Check whether the OffscreenCanvas class exists in the global object. In browsers that support Offscreen Canvas, the OffscreenCanvas class is available. The detection code is as follows:

[0288] if(typeof OffscreenCanvas!=='undefined'){

[0289] / / Browser supports Offscreen Canvas

[0290] }else{

[0291] / / The browser does not support Offscreen Canvas

[0292] }

[0293] 2. Use the transferControlToOffscreen method of the HTMLCanvasElement object to check. This method will throw an exception in browsers that do not support Offscreen Canvas. The detection code is as follows:

[0294] var canvas=document.createElement('canvas');

[0295] if(typeof canvas.transferControlToOffscreen===='function'){

[0296] / / Browser supports Offscreen Canvas

[0297] }else{

[0298] / / The browser does not support Offscreen Canvas

[0299] }

[0300] 3. Use feature detection: You can determine whether Offscreen Canvas is supported by detecting whether the browser supports the OffscreenCanvas class. You can use the following code to detect it:

[0301] if(typeof OffscreenCanvas!=='undefined'){

[0302] / / Browser supports Offscreen Canvas

[0303] }else{

[0304] / / The browser does not support Offscreen Canvas

[0305] }

[0306] 4. Use Modernizr library for detection: Modernizr is a JavaScript library for detecting browser function support. It can easily detect Offscreen Canvas. You can use the following code for detection:

[0307] if(Modernizr.webgl&&Modernizr.webworkers&&Modernizr.transferables){

[0308] / / Browser supports Offscreen Canvas

[0309] }else{

[0310] / / The browser does not support Offscreen Canvas

[0311] }

[0312] 5. Use the Modernizr library to detect whether the browser supports Offscreen Canvas. Modernizr is a JavaScript library used to detect browser function support, which can facilitate function detection.

[0313] First, you need to introduce the Modernizr library into the page. You can download the latest version of the library file from the official website and then include it in the HTML file. The code is as follows:

[0314] <script src＝"path to modernizr.js">< / script>

[0315] Once the Modernizr library is loaded, you can use the Modernizr object to detect whether the browser supports Offscreen Canvas. In this case, you can check the Modernizr.offscreen property as follows:

[0316] if (Modernizr.offscreen) {

[0317] / / Browser supports Offscreen Canvas

[0318] }else{

[0319] / / The browser does not support Offscreen Canvas

[0320] }

[0321] Using the Modernizr library can simplify the process of feature detection, and it also provides other feature detection functions that can be used as needed. It should be understood that you need to ensure that the library file is correctly imported before using Modernizr.

[0322] Of course, the above detection methods are only a few of several examples that can be implemented. In the actual detection process, the methods in the above examples can be used, or any other achievable methods can be used. That is, in this embodiment, the method for detecting whether Offscreen Canvas is supported is not limited.

[0323] If the browser supports off-screen canvas, the off-screen canvas is created through the working thread, that is, the function return value obtained is the case of supporting off-screen canvas, so the working thread can be created normally at this time, and the off-screen canvas is created in the working thread, and the subsequent target chart display steps are executed. Similarly, if there is a browser that supports off-screen canvas, there must be a browser that does not support off-screen canvas, so,

[0324] After creating the off-screen canvas via a worker thread, also include:

[0325] If the browser does not support off-screen canvas, a normal canvas is created through the main thread. The normal canvas is a display area outside the display area for displaying data.

[0326] Through the main thread, draw the target chart corresponding to the chart data on the ordinary canvas;

[0327] Display the target chart through the main thread.

[0328] Among them, the common canvas refers to other display areas outside the display area for displaying data, that is, other visible display areas outside the display area for displaying display data on the page to be displayed, that is, the display area and other display areas are both visible areas.

[0329] If the browser does not support off-screen canvas, create a MessageChannel newMessageChannel(), and then treat the two ports of the message channel as the main thread and the web worker thread to simulate the communication between the main thread and the web worker thread.

[0330] When the obtained function return value does not support off-screen canvas, a simulated working thread (Mock's Web Worker) is created through the message channel. Through the virtual working thread, when the main thread sends a message to the working thread, when there is no real working thread, there is no need to consider whether the application supports off-screen canvas. The upper layer execution can be realized, that is, the canvas is created to display the target chart, and no other special processing is required. It can shield the details of the lower layer, reduce coupling, reduce implementation complexity, and improve maintainability.

[0331] After the ordinary canvas (i.e., the second chart drawing area) is created through the main thread, the target chart corresponding to the chart data can be drawn on the ordinary canvas, and then the target chart is displayed through the main thread. The chart display process is realized through the main thread, which is a well-known prior art and will not be described in detail here.

[0332] Therefore, through the above-mentioned embodiment, even if there is a situation where the off-screen canvas is incompatible, the target chart can still be displayed normally, and it can be compatible with browsers or other applications that do not support offscreenCanvas, while shielding the underlying details, reducing coupling, reducing implementation complexity, and improving maintainability.

[0333] Furthermore, in another embodiment, before determining that the browser does not support off-screen canvas, it is determined whether the browser configuration enables the off-screen rendering function. If the off-screen rendering function is not enabled, a normal canvas is created through the main thread. If the off-screen rendering function is enabled and the browser supports off-screen canvas, the off-screen canvas is created through the worker thread. If the off-screen rendering function is enabled but the browser does not support off-screen canvas, a normal canvas is created through the main thread. In the above manner, the browser can more accurately determine whether a worker thread can be created.

[0334] In order to better implement the above method, the present application embodiment also provides a web page display device, such as Fig.10 As shown, the web page display device may include a content data acquisition unit 301, a display data display unit 302, a chart area creation unit 303, a target chart acquisition unit 304, and a target chart display unit 305, as follows:

[0335] (1) Content data acquisition unit 301;

[0336] The content data acquisition unit is used to acquire the content data of the page to be displayed through the main thread of the current application, wherein the content data includes chart data to be drawn and display data associated with the chart data.

[0337] (2) display data display unit 302;

[0338] The display data display unit is used to display the display data through the main thread.

[0339] (3) chart area creation unit 303;

[0340] The chart area creating unit is used to create a first chart drawing area through the working thread of the current application, where the first chart drawing area is a non-display area outside the display area of ​​the display data.

[0341] (4) target chart acquisition unit 304;

[0342] The target chart acquisition unit is used to obtain a target chart corresponding to the chart data by drawing in the first chart drawing area through the working thread.

[0343] (5) target chart display unit 305;

[0344] The target chart display unit is used to draw a target chart corresponding to the chart data in the first chart drawing area through the working thread.

[0345] As can be seen from the above, in this embodiment, the content data acquisition unit 301 can acquire the content data of the page to be displayed through the main thread of the current application, and the content data includes the chart data to be drawn and the display data of the related chart data; the display data display unit 302 displays the display data through the main thread; the chart area creation unit 303 creates a first chart drawing area through the working thread of the current application, and the first chart drawing area is a non-display area located outside the display area of ​​the display data; the target chart acquisition unit 304 draws the target chart corresponding to the chart data in the first chart drawing area through the working thread; the target chart display unit 305 displays the target chart through the main thread. The present application can process chart data in the current application without going through the server side, and thus will not cause the problem of high server resource overhead due to the large number of HTTP requests for the page. Moreover, since it does not need to go through the server and does not require human cooperation on the server side, the operation can be completed independently on the application side. Since the chart is drawn in a non-display area outside the display area for displaying data, and the first chart drawing area is created by a working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics and the initialization of related interactive events and animation related functions are not all performed in the main thread, so the resource overhead of the main thread of the application side will be reduced, and the impact on page performance will be reduced, thereby increasing the display speed of page chart images, which is conducive to the rapid display of page chart images.

[0346] The present application also provides an electronic device, such as Fig.11 As shown, it shows a schematic diagram of the structure of an electronic device involved in an embodiment of the present application, and the electronic device may be a terminal or a server, etc. Specifically:

[0347] The electronic device may include components such as a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, a power supply 403, and an input unit 404. Those skilled in the art will appreciate that Figure 4 The electronic device structure shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0348] The processor 401 is the control center of the electronic device, and uses various interfaces and lines to connect various parts of the entire electronic device. By running or executing software programs and / or modules stored in the memory 402, and calling data stored in the memory 402, the processor 401 performs various functions of the electronic device and processes data. Optionally, the processor 401 may include one or more processing cores; preferably, the processor 401 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 401.

[0349] The memory 402 can be used to store software programs and modules. The processor 401 executes various functional applications and data processing by running the software programs and modules stored in the memory 402. The memory 402 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 402 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 402 may also include a memory controller to provide the processor 401 with access to the memory 402.

[0350] The electronic device also includes a power supply 403 for supplying power to each component. Preferably, the power supply 403 can be logically connected to the processor 401 through a power management system, so as to manage charging, discharging, power consumption and other functions through the power management system. The power supply 403 can also include one or more DC or AC power supplies, recharging systems, power failure detection circuits, power converters or inverters, power status indicators and other arbitrary components.

[0351] The electronic device may further include an input unit 404, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal input related to user settings and function control.

[0352] Although not shown, the electronic device may further include a display unit, etc., which will not be described in detail herein. Specifically in this embodiment, the processor 401 in the electronic device will load the executable files corresponding to the processes of one or more application programs into the memory 402 according to the following instructions, and the processor 401 will run the application programs stored in the memory 402, thereby realizing various functions, as follows:

[0353] Through the main thread of the current application, content data of the page to be displayed is obtained, the content data including chart data to be drawn and display data associated with the chart data; the display data is displayed through the main thread; through the working thread of the current application, a first chart drawing area is created, the first chart drawing area is a non-display area located outside the display area of ​​the display data; through the working thread, a target chart corresponding to the chart data is drawn in the first chart drawing area; and the target chart is displayed through the main thread.

[0354] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0355] As can be seen from the above, this embodiment can obtain the content data of the page to be displayed through the main thread of the current application, the content data includes the chart data to be drawn, and the display data of the associated chart data; display the display data through the main thread; create a first chart drawing area through the working thread of the current application, the first chart drawing area is a non-display area outside the display area of ​​the display data; through the working thread, draw the target chart corresponding to the chart data in the first chart drawing area; display the target chart through the main thread. This application can process the chart data in the current application without going through the server side, and thus will not cause the problem of high server resource overhead due to the large number of page HTTP requests; because the chart drawing is performed in the non-display area outside the display area of ​​the display data, and the first chart drawing area is created by the working thread, the main thread is responsible for the display of the target chart and the display data, which means that the drawing of graphics, and the initialization of related interactive events, animation related functions, etc. are not all performed in the main thread, so it will reduce the resource overhead of the main thread of the application end, and reduce the impact on page performance, and thus increase the display speed of page chart images, which is conducive to the rapid display of page chart images.

[0356] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0357] To this end, an embodiment of the present application provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions can be loaded by a processor to execute the steps in any of the web page display methods provided in the embodiments of the present application. For example, the instructions can execute the following steps:

[0358] Obtain content data of a page to be displayed through a main thread of the current application, the content data including chart data to be drawn and display data associated with the chart data; display the display data through the main thread; create a first chart drawing area through a working thread of the current application, the first chart drawing area being a non-display area outside a display area of ​​the display data; draw a target chart corresponding to the chart data in the first chart drawing area through the working thread; and display the target chart through the main thread.

[0359] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0360] The computer-readable storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0361] Since the instructions stored in the computer-readable storage medium can execute the steps in any one of the web page display methods provided in the embodiments of the present application, the beneficial effects that can be achieved by any one of the web page display methods provided in the embodiments of the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0362] According to one aspect of the present application, a computer program product or a computer program is provided, the computer program product or the computer program including computer instructions, the computer instructions being stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the methods provided in various optional implementations of the above-mentioned web page display aspect.

[0363] The web page display method and related equipment provided in the embodiments of the present application are introduced in detail above. The principles and implementation methods of the present application are explained in this article using specific examples. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for technical personnel in this field, according to the ideas of the present application, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present application.< / canvas> < / canvas>

Claims

1. A web page display method, characterized in that: include: Obtaining content data of the page to be displayed through the main thread of the current application, wherein the content data includes chart data to be drawn and display data associated with the chart data; Displaying the display data through the main thread; Creating a first chart drawing area through the working thread of the current application, where the first chart drawing area is a non-display area outside the display area of ​​the display data; By means of the working thread, a target chart corresponding to the chart data is obtained by drawing in the first chart drawing area; The target chart is displayed through the main thread.

2. The display method according to claim 1, characterized in that: There are multiple groups of chart data to be drawn. Before obtaining a target chart corresponding to the chart data in the first chart drawing area through the working thread, the method further includes: Writing the plurality of groups of chart data to be drawn into the first array through the main thread; The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes: Through the working thread, multiple groups of the chart data in the first array are drawn in the first chart drawing area to obtain corresponding multiple target charts.

3. The display method according to claim 2, characterized in that: After the working thread draws the plurality of groups of chart data in the first array in the first chart drawing area to obtain the corresponding plurality of target charts, the method further includes: Acquire multiple data link addresses corresponding to multiple target charts through the working thread, and write the multiple data link addresses into the second array; The displaying of the target chart through the main thread includes: The plurality of data link addresses in the second array are accessed through the main thread to display a plurality of target charts.

4. The display method according to claim 2, characterized in that: The first array is multiple, and the multiple groups of chart data to be drawn are written into the first array through the main thread, including: Writing the plurality of groups of the chart data to be drawn into the plurality of the first arrays respectively through the main thread, wherein the chart data in the plurality of the first arrays are non-repetitive; The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes: The plurality of chart data in the first array are drawn in the first chart drawing area through the working thread to obtain a plurality of corresponding target charts.

5. The display method according to claim 4, characterized in that: After drawing the plurality of chart data in the first array in the first chart drawing area through the working thread to obtain a plurality of corresponding target charts, the method further includes: Obtaining, by means of the working thread, data link addresses of the chart data in a plurality of the first arrays, and writing the data link addresses corresponding to the same first arrays into a same second array, where the second arrays are multiple; The displaying of the target chart through the main thread includes: The data link addresses in the plurality of second arrays are accessed through the main thread according to the preset display priorities of the target charts to display the plurality of target charts.

6. The display method according to claim 1, characterized in that: The step of creating a first chart drawing area through the working thread of the current application includes: An off-screen canvas is created through the working thread, and the off-screen canvas is used as the first chart drawing area.

7. The display method according to claim 6, characterized in that: Before creating an off-screen canvas by the working thread and using the off-screen canvas as the first chart drawing area, the method further includes: Identify, during runtime, whether the current application supports the off-screen canvas; The step of creating an off-screen canvas by using the working thread and using the off-screen canvas as the first chart drawing area includes: If the current application supports the off-screen canvas, an off-screen canvas is created through the working thread, and the off-screen canvas is used as the first chart drawing area.

8. The display method according to claim 7, characterized in that: After creating an off-screen canvas by the working thread and using the off-screen canvas as the first chart drawing area, the method further includes: If the current application does not support the off-screen canvas, creating a second chart drawing area through the main thread, where the second chart drawing area is another display area outside the display area for displaying data; By means of the main thread, a target chart corresponding to the chart data is obtained by drawing in the second chart drawing area; The target chart is displayed through the main thread.

9. The display method according to claim 1, characterized in that: There are multiple working threads, and creating a first chart drawing area through the working threads of the current application includes: Creating a corresponding plurality of first chart drawing areas through the plurality of working threads of the current application; The step of drawing a target chart corresponding to the chart data in the first chart drawing area through the working thread includes: A target chart corresponding to the chart data is obtained by drawing in corresponding multiple first chart drawing areas through the multiple working threads.

10. A web page display device, characterized in that: include: A content data acquisition unit, used to acquire content data of a page to be displayed through a main thread of the current application, wherein the content data includes chart data to be drawn and display data associated with the chart data; A display data display unit, used for displaying the display data through the main thread; A chart area creating unit, configured to create a first chart drawing area through the working thread of the current application, wherein the first chart drawing area is a non-display area outside the display area of ​​the display data; A target chart acquisition unit, configured to obtain a target chart corresponding to the chart data by drawing in the first chart drawing area through the working thread; The target chart display unit is used to display the target chart through the main thread.

11. An electronic device, characterized in that: It comprises a memory and a processor; the memory stores an application program, and the processor is used to run the application program in the memory to execute the operations in the web page display method according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor to execute the steps in the web page display method according to any one of claims 1 to 9.

13. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the steps of the web page display method described in any one of claims 1 to 9 are implemented.

Images