A method and apparatus for table rendering

Abstract

The present application discloses a table rendering method, including: in response to a first operation triggered for a first table in a web page, obtaining first canvas cache data, wherein a first image of the first table is cached in the first canvas cache data. According to the first operation, determining newly added rendering content and content to be cancelled from rendering in the first table, and deleting the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data. Further, rendering the newly added rendering content of the second canvas cache data in the web page. Since the content cached in the second canvas cache data is an image and the efficiency of rendering an image is extremely high, therefore, by using this solution, the efficiency of rendering a table in a web page can be effectively improved, thereby avoiding problems such as interactive lag and white screen.

Description

Technical Field

[0001] This application relates to the field of computer technology, and particularly to a table rendering method and apparatus. Background Art

[0002] A table is a common form of data visualization. A user can view a table in a web page. When the user views the table in the web page, the user can perform a specific operation, such as scrolling the mouse or performing a swipe operation on the screen. When the user triggers the specific operation, the table content can be re-rendered so that the user can view the table content corresponding to the specific operation performed by the user.

[0003] Currently, for the method of rendering a table, if the amount of data in the table is large, when the user triggers the specific operation, there may be phenomena such as interactive lag or even a white screen. Therefore, there is an urgent need for a solution to solve this problem. Summary of the Invention

[0004] To solve or at least partially solve the above technical problems, embodiments of this application provide a table rendering method and apparatus.

[0005] In a first aspect, embodiments of this application provide a table rendering method, the method including:

[0006] In response to a first operation triggered for a first table in a web page, obtain first canvas cache data, where the first canvas cache data includes a first image of the first table;

[0007] Determine newly added rendering content and content to be cancelled from rendering in the first table according to the first operation;

[0008] Delete the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data;

[0009] Render the second canvas cache data and the newly added rendering content in the web page.

[0010] Optionally, the method further includes:

[0011] Obtain the size of the canvas;

[0012] Determine the table data that can be accommodated by the canvas according to the size of the canvas, and the data that can be accommodated by the canvas includes the first table;

[0013] Render the table data that can be accommodated by the canvas into the web page;

[0014] Based on the first table, save the first canvas cache data.

[0015] Optionally, determining the newly added rendering content and the content to be cancelled from rendering in the first table according to the first operation includes:

[0016] Determining the newly added rendering content and the content to be cancelled from rendering according to the operation distance corresponding to the first operation.

[0017] Optionally,

[0018] If the first operation is a swipe-up operation, the content to be cancelled from rendering is the first M rows of the first table, and the newly added rendering content includes at most the last M rows of the first target row in the table to be rendered. The first target row is the last row of the first table, and the first table is a part of the table to be rendered; or,

[0019] If the first operation is a swipe-down operation, the content to be cancelled from rendering is the last N rows of the first table, and the newly added rendering content includes at most the first N rows of the second target row in the table to be rendered. The first target row is the last row of the first table, and the second target row is the first row of the first table; or,

[0020] If the first operation is a left swipe operation, the content to be cancelled from rendering is the first P columns of the first table, and the newly added rendering content includes at most the last P columns of the first target column in the table to be rendered. The first target column is the last column of the first table; or,

[0021] If the first operation is a right swipe operation, the content to be cancelled from rendering is the last Q columns of the first table, and the newly added rendering content includes at most the first Q columns of the second target column in the table to be rendered. The second target column is the first column of the first table; where:

[0022] M, N, P, and Q are all integers greater than or equal to 1.

[0023] Optionally, the method further includes:

[0024] Obtaining third canvas cache data according to the second canvas cache data and the newly added rendering content. The third canvas cache data includes a second image, and the image content of the second image includes the table content included in the second canvas cache data and the newly added rendering content;

[0025] Caching the third canvas cache data.

[0026] Optionally, obtaining the first canvas cache data corresponding to the first table includes:

[0027] If the first canvas cache data is found in the cache, obtaining the first canvas cache data from the cache; or,

[0028] If the first canvas cache data is not found in the cache, the first canvas cache data is generated based on the first table.

[0029] Optionally, the method further includes:

[0030] In response to a second operation triggered by the first content displayed in the first area of the first table in the web page, cancel rendering the first content in the first area, and re-render the second content obtained after processing the first content according to the second operation in the first area.

[0031] Optionally, rendering the second canvas cache data and the newly added rendering content in the web page includes:

[0032] Render the second canvas cache data and the newly added rendering content in the web page by using canvas.

[0033] In a second aspect, an embodiment of the present application provides a table rendering device, and the device includes:

[0034] A first obtaining unit, configured to obtain first canvas cache data in response to a first operation triggered by a first table in a web page, where the first canvas cache data includes a first image of the first table;

[0035] A first determining unit, configured to determine newly added rendering content and content to be cancelled from rendering in the first table according to the first operation;

[0036] A deleting unit, configured to delete the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data;

[0037] A first rendering unit, configured to render the second canvas cache data and the newly added rendering content in the web page.

[0038] Optionally, the device further includes:

[0039] A second obtaining unit, configured to obtain the size of the canvas;

[0040] A second determining unit, configured to determine the table data that can be accommodated by the canvas according to the size of the canvas, and the data that can be accommodated by the canvas includes the first table;

[0041] A second rendering unit, configured to render the table data that can be accommodated by the canvas into the web page;

[0042] A saving unit, configured to save the first canvas cache data based on the first table.

[0043] Optionally, the first determination unit is configured to:

[0044] Determine the newly added rendered content and the content to be cancelled from rendering according to the operation distance corresponding to the first operation.

[0045] Optionally,

[0046] If the first operation is a swiping-up operation, the content to be cancelled from rendering is the first M rows of the first table, and the newly added rendered content includes at most the last M rows of the first target row in the table to be rendered. The first target row is the last row of the first table, and the first table is a part of the table to be rendered; or,

[0047] If the first operation is a swiping-down operation, the content to be cancelled from rendering is the last N rows of the first table, and the newly added rendered content includes at most the first N rows of the second target row in the table to be rendered. The first target row is the last row of the first table, and the second target row is the first row of the first table; or,

[0048] If the first operation is a swiping-left operation, the content to be cancelled from rendering is the first P columns of the first table, and the newly added rendered content includes at most the last P columns of the first target column in the table to be rendered. The first target column is the last column of the first table; or,

[0049] If the first operation is a swiping-right operation, the content to be cancelled from rendering is the last Q columns of the first table, and the newly added rendered content includes at most the first Q columns of the second target column in the table to be rendered. The second target column is the first column of the first table; where:

[0050] M, N, P, and Q are all integers greater than or equal to 1.

[0051] Optionally, the apparatus further includes:

[0052] A third determination unit, configured to obtain third canvas cache data according to the second canvas cache data and the newly added rendered content. The third canvas cache data includes a second image, and the image content of the second image includes the table content included in the second canvas cache data and the newly added rendered content;

[0053] A cache unit, configured to cache the third canvas cache data.

[0054] Optionally, the first acquisition unit is configured to:

[0055] If the first canvas cache data is found in the cache, obtain the first canvas cache data from the cache; or,

[0056] If the first canvas cache data is not found in the cache, the first canvas cache data is generated based on the first table.

[0057] Optionally, the device further includes:

[0058] A cancellation unit, configured to cancel rendering the first content in the first area in response to a second operation triggered by the first content displayed in the first area of the first table on the web page;

[0059] A third rendering unit, configured to re-render the second content obtained after processing the first content according to the second operation in the first area.

[0060] Optionally, the first rendering unit is configured to:

[0061] Render the second canvas cache data and the newly added rendering content in the web page by using canvas.

[0062] In a third aspect, an embodiment of the present application provides a device, where the device includes a processor and a memory;

[0063] The processor is configured to execute instructions stored in the memory, so that the device executes the method described in any one of the above first aspects.

[0064] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, including instructions, where the instructions direct a device to execute the method described in any one of the above first aspects.

[0065] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when running on a computer, causes the computer to execute the method described in any one of the above first aspects.

[0066] Compared with the prior art, the embodiments of the present application have the following advantages:

[0067] An embodiment of the present application provides a table rendering method, including: in response to a first operation triggered for a first table on a web page, obtaining first canvas cache data, where a first image of the first table is cached in the first canvas cache data. Additionally, according to the first operation, new rendering content and content to be cancelled from rendering in the first table can be determined, and the content to be cancelled from rendering is deleted from the first canvas cache data to obtain second canvas cache data. Further, the new rendering content of the second canvas cache data is rendered on the web page. Since the content cached in the second canvas cache data is an image and the efficiency of rendering an image is extremely high, therefore, using this solution, the rendering duration is mainly affected by the new rendering content, and the data volume of the new rendering content is much smaller than the data volume that the entire canvas can accommodate. Therefore, using this solution, the efficiency of rendering a table on a web page can be effectively improved, thereby avoiding problems such as interaction lag and white screen. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] To more clearly illustrate the technical solutions in the embodiments of the present application or in the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only some embodiments recorded in the present application. For those of ordinary skill in the art, without creative efforts, other drawings can be obtained based on these drawings.

[0069] Figure 1 It is a schematic flowchart of a table rendering method provided by an embodiment of the present application;

[0070] Figure 2 It is a schematic flowchart of another table rendering method provided by an embodiment of the present application;

[0071] Figure 3a It is a schematic diagram of the first table displayed on the web page;

[0072] Figure 3b It is a schematic diagram of a third image provided by an embodiment of the present application;

[0073] Figure 3c It is a schematic diagram of the content of a table provided by an embodiment of the present application;

[0074] Figure 4 It is a schematic structural diagram of a table rendering device provided by an embodiment of the present application. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0075] To enable those skilled in the art to better understand the solution of this application, the following will clearly and completely describe the technical solution in the embodiments of this application with reference to the accompanying drawings in the embodiments of this application. Obviously, the described embodiments are only a part of the embodiments of this application, rather than all the embodiments. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of this application.

[0076] The inventor of this application has found through research that currently, in one example, when rendering a table in a web page, a DOM-based rendering method can be adopted. However, when adopting the DOM-based rendering method, a large number of nodes need to be managed. Therefore, its rendering rate is slow. Especially when the user triggers an interaction operation related to the table, there will be a phenomenon of interaction jamming or even a white screen. In another example, canvas can be used to render the table in the web page. When using canvas to render the table in the web page, the number of nodes it manages is small. Therefore, its rendering speed is fast.

[0077] Whether using canvas to render the table in the web page or using the DOM-based rendering method to render the table in the web page, when the user triggers an interaction operation on the table, there may be a phenomenon of interaction jamming or even a white screen. This is because once the user triggers an operation on the table, it is necessary to re-render each cell displayed in the page, and each time a cell is rendered, an interface for table rendering needs to be called. When the number of cells displayed in the page is large, the rendering rate is correspondingly low. Among them, the interface for table rendering can be understood as an interface for drawing content onto the canvas.

[0078] To solve the above problems, the embodiments of this application provide a table rendering method and device.

[0079] The following will, with reference to the accompanying drawings, detail various non-limiting embodiments of this application.

[0080] Exemplary method

[0081] See Figure 1 , which is a schematic flowchart of a table rendering method provided by an embodiment of this application. In one example, this method can be applied to an application program capable of rendering a table. In this embodiment, the method may, for example, include the following steps S101 - S104.

[0082] S101: In response to a first operation triggered on a first table in a web page, obtain first canvas cache data, where the first canvas cache data includes a first image of the first table.

[0083] In the embodiments of the present application, the first canvas buffer data may be the canvas buffer data saved during the previous rendering operation. The content corresponding to the first canvas buffer data is the first image of the first table, that is: the content corresponding to the first canvas buffer data is the first table in image format.

[0084] In one example, the first canvas buffer data may be stored when the first table is initially rendered in the web page. For this case, the first canvas buffer data can be saved through Figure 2 the steps S201 - S204 shown. Figure 2 It is a schematic flowchart of another table rendering method provided by the embodiments of the present application.

[0085] S201: Obtain the size of the canvas.

[0086] In the embodiments of the present application, the size of the canvas may be a preset size or a size determined based on the structure of the web page and the size of the display screen. The embodiments of the present application do not make specific limitations. In the embodiments of the present application, the size of the canvas may include, for example, the width and height of the canvas.

[0087] S202: Determine the table data that the canvas can accommodate according to the size of the canvas. The data that the canvas can accommodate includes the first table.

[0088] In the embodiments of the present application, after obtaining the size of the canvas, the number of cells that the canvas can accommodate can be determined according to the size of the canvas and the size of the cells in the table, and further, according to the number of cells that the canvas can accommodate, the table data that the canvas can accommodate can be determined from the table to be rendered. In the embodiments of the present application, the size of the cell may include the width and height of the cell.

[0089] In one example, the data that the canvas can accommodate may be, for example, the first table currently displayed on the aforementioned web page. In one example, the first table may be a part of the table to be rendered. In another example, if the canvas can accommodate the entire table to be rendered, the first table may be the table to be rendered itself.

[0090] S203: Render the table data that the canvas can accommodate into the web page.

[0091] After obtaining the table data that can be accommodated by the canvas, the table data that can be accommodated by the canvas can be rendered to the web page. In one example, the canvas can be used to render the table data that can be accommodated by the canvas to the web page. When using the canvas for table rendering, the number of nodes to be managed is relatively small, and correspondingly, the table rendering rate is relatively high. In one example, when using the canvas to render the table data that can be accommodated by the canvas to the web page, each cell can call an interface for table rendering once.

[0092] S204: Based on the first table, save the first canvas cache data.

[0093] After rendering the table data that can be accommodated by the canvas to the web page, the first canvas cache data can be generated based on the first table currently displayed on the web page. As an example, based on the table content of the first table, the first table in image format can be generated, so as to obtain the first canvas cache data.

[0094] In the embodiments of the present application, there are two implementation manners for obtaining the first canvas cache data corresponding to the first table in specific implementation.

[0095] In one implementation manner, if the first canvas cache data has been stored in the cache, for example, the first canvas cache data is stored in the cache by using the above S201 - S204, then the cache can be searched first. If the first canvas cache data is found in the cache, the first canvas cache data can be obtained (read) from the cache.

[0096] In another implementation manner, if the first canvas cache data is not stored in the cache, the first canvas cache data can be generated based on the first table currently displayed on the web page. For example, based on the table content of the first table, the first table in image format can be generated, so as to obtain the first canvas cache data. In other words, if the first canvas cache data is not found in the cache, the first canvas cache data can be generated based on the first table currently displayed on the web page.

[0097] In the embodiments of the present application, the first operation may be a sliding operation. The user can trigger this sliding operation on the touch screen or touch pad, or can also trigger this sliding operation by means of mouse scrolling. The sliding operation mentioned here can be any one of the up - sliding operation, down - sliding operation, left - sliding operation, and right - sliding operation.

[0098] S102: Determine the newly added rendering content and the content to be cancelled from rendering in the first table according to the first operation.

[0099] In one example, the newly added rendering content and the content to be cancelled from rendering can be determined according to the operation parameters of the first operation. The embodiments of the present application do not specifically limit the operation parameters of the first operation. In one example, the operation parameters of the first operation can be the operation distance of the first operation. For example, when the first operation is a sliding operation, the operation distance of the first operation can be the sliding distance of the sliding operation.

[0100] Regarding the newly added rendering content and the content to be cancelled from rendering, it should be noted that:

[0101] If the first operation is an upward sliding operation, the content to be cancelled is the first M rows of the first table, where M is an integer greater than or equal to 1. Correspondingly, the newly added rendering content can include at most M rows. For the convenience of description, the last row of the first table is referred to as the first target row. Then, the newly added rendering content can include at most the M rows after the first target row in the table to be rendered. As an example, if the number of rows after the first target row in the table to be rendered is greater than or equal to M, the newly added rendering content can include the M rows after the first target row. As another example, if the number of rows after the first target row in the table to be rendered is less than M, for example, there are still M' rows after the first target row in the table to be rendered, the newly added rendering content can include the M' rows after the first target row. Here, M' is an integer less than M and greater than 0.

[0102] If the first operation is a downward sliding operation, the content to be cancelled is the last N rows of the first table, where N is an integer greater than or equal to 1. Correspondingly, the newly added rendering content can include at most N rows. For the convenience of description, the first row of the first table is referred to as the second target row. Then, the newly added rendering content can include at most the N rows before the second target row in the table to be rendered. As an example, if the number of rows before the second target row in the table to be rendered is greater than or equal to N, the newly added rendering content can include the N rows before the second target row. As another example, if the number of rows before the second target row in the table to be rendered is less than N, for example, there are still N' rows before the second target row in the table to be rendered, the newly added rendering content can include the N' rows before the second target row. Here, N' is an integer less than N and greater than 0.

[0103] If the first operation is a left swipe operation, the content to be cancelled is the first P columns of the first table, where P is an integer greater than or equal to 1. Correspondingly, the newly added rendered content can include at most P columns. For ease of description, the last column of the first table is referred to as the first target column. Then, the newly added rendered content can include at most the P columns after the first target column in the table to be rendered. As an example, if the number of columns after the first target column in the table to be rendered is greater than or equal to P, the newly added rendered content can include the P columns after the first target column. As another example, if the number of columns after the first target column in the table to be rendered is less than P, for example, there are still P' columns after the first target column in the table to be rendered, the newly added rendered content can include the P' columns after the first target column. Here, P' is an integer less than P and greater than 0.

[0104] If the first operation is a right swipe operation, the content to be cancelled is the last Q columns of the first table, where Q is an integer greater than or equal to 1. Correspondingly, the newly added rendered content can include at most Q columns. For ease of description, the first column of the first table is referred to as the second target column. Then, the newly added rendered content can include at most the Q columns before the second target column in the table to be rendered. As an example, if the number of columns before the second target column in the table to be rendered is greater than or equal to Q, the newly added rendered content can include the Q columns before the second target column. As another example, if the number of columns before the second target column in the table to be rendered is less than Q, for example, there are still Q' columns before the second target column in the table to be rendered, the newly added rendered content can include the Q' columns before the second target column. Here, Q' is an integer less than Q and greater than 0.

[0105] S103: Delete the content to be cancelled from the first canvas cache data to obtain second canvas cache data.

[0106] After determining the content to be cancelled, the content to be cancelled can be deleted from the first canvas cache data to obtain second canvas cache data. The second canvas cache data includes a third image, and the third image is an image obtained by cropping the image corresponding to the content to be cancelled from the aforementioned first image.

[0107] S104: Render the second canvas cache data and the newly added rendered content on the web page.

[0108] After obtaining the second canvas cache data, the second canvas cache data and the newly added rendering content can be rendered in the web page. In one example, the second canvas cache data and the newly added rendering content can be drawn onto a canvas to achieve rendering of the second canvas cache data and the newly added rendering content in the web page.

[0109] Since the content cached in the second canvas cache data is the third image, and the efficiency of rendering an image is extremely high. In a specific example, to render the third image, only one call to the table rendering interface is required. Therefore, with this solution, the rendering duration is mainly affected by the newly added rendering content. In a specific example, when rendering the newly added rendering content, the table rendering interface can be called separately for each cell in the newly added rendering content. And the data volume of the newly added rendering content is much smaller than the data volume that the entire canvas can accommodate. Therefore, with this solution, the efficiency of rendering a table in a web page can be effectively improved, thereby avoiding problems such as interactive lag and white screen.

[0110] In one example, when specifically implemented, S104 can use canvas to render the second canvas cache data and the newly added rendering content in the web page. When using canvas for table rendering, the number of nodes to be managed is relatively small, and correspondingly, the table rendering rate is relatively high.

[0111] In one example, after executing S104, the third canvas cache data can be obtained based on the second canvas cache data and the newly added rendering content, and the third canvas cache data can be further cached. The third canvas cache data includes a second image, and the image content of the second image includes the table content included in the second canvas cache data and the newly added rendering content. In one example, based on the third image, the image corresponding to the newly added rendering content can be spliced to obtain the third canvas cache data including the second image. In another example, after executing S104, the second image can be generated based on the table content displayed in the web page to obtain the third canvas cache data. Caching the third canvas cache data can render the table in the web page based on the third canvas cache data when the user triggers an interactive operation on the table displayed in the web page next time.

[0112] In one example, the user can trigger a second operation on the first content displayed in the first area of the first table in the web page. Correspondingly, in the embodiment of the present application, the client can respond to the second operation, cancel rendering the first content in the first area, and re-render the second content obtained after processing the first content according to the second operation in the first area.

[0113] The embodiment of the present application does not specifically limit the first area, and the first area may include one or more cells. For example, the first area may be a cell included in a row, or a cell corresponding to a column, etc., which are not listed here one by one.

[0114] The embodiment of the present application does not specifically limit the second operation. The second operation may be, for example, setting the display style of the first content, for example, setting the cell background of the first content, or setting the font of the first content, and so on.

[0115] With this solution, when a user triggers an operation on the first content of the first area, there is no need to re-render the entire first table. Instead, the rendering content corresponding to the first area is re-rendered, thereby effectively improving the rendering efficiency. Accordingly, it avoids interaction freezes, white screens, and other phenomena, thereby improving the user experience.

[0116] To facilitate understanding of the present solution, the solution of the embodiment of the present application is briefly introduced below with reference to specific examples.

[0117] See also Figure 3a , which is a schematic diagram of the first table displayed on the web page, such as Figure 3a As shown, the first table displayed in the current webpage is the first 14 rows of the table to be rendered. Correspondingly, the image content of the first image included in the first canvas cache data cached in the cache is Figure 3a The table contents of the first 14 rows are shown.

[0118] The user triggers a swipe up operation, and according to the swipe up distance of the user, it is determined that the content to be rendered is the first row of the first table; correspondingly, the content to be rendered is the fifteenth row of the image to be rendered.

[0119] The first row in the first image is cut off to obtain the second canvas buffer data including the third image, such as Figure 3b As shown, Figure 3b A schematic diagram of a third image provided in an embodiment of the present application. The image content of the third image includes rows 2 to 14 of the first table.

[0120] Furthermore, the third image is drawn into the canvas, and the aforementioned row 15 is drawn into the canvas. At this point, the table content rendered in the web page is as follows: Figure 3c As shown, Figure 3c A schematic diagram of the contents of a table provided in an embodiment of the present application.

[0121] Figures 3a to 3c It is only shown for the convenience of understanding the present solution and does not constitute a limitation on the embodiments of the present application. Figures 3a to 3cIn it, the content in the table is represented by "XXX".

[0122] Exemplary device

[0123] Based on the method provided in the above embodiments, the embodiments of the present application further provide a device. The following introduces the device with reference to the accompanying drawings.

[0124] See Figure 4 , this figure is a schematic structural diagram of a table rendering device provided by an embodiment of the present application. The device 400 may specifically include, for example: a first acquisition unit 401, a first determination unit 402, a deletion unit 403, and a first rendering unit 404.

[0125] The first acquisition unit 401 is configured to acquire first canvas cache data in response to a first operation triggered for a first table in a web page. The first canvas cache data includes a first image of the first table.

[0126] The first determination unit 402 is configured to determine newly added rendering content and content to be cancelled from rendering in the first table according to the first operation.

[0127] The deletion unit 403 is configured to delete the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data.

[0128] The first rendering unit 404 is configured to render the second canvas cache data and the newly added rendering content in the web page.

[0129] Optionally, the device further includes:

[0130] A second acquisition unit, configured to acquire the size of the canvas;

[0131] A second determination unit, configured to determine the table data that the canvas can accommodate according to the size of the canvas. The data that the canvas can accommodate includes the first table;

[0132] A second rendering unit, configured to render the table data that the canvas can accommodate into the web page;

[0133] A saving unit, configured to save the first canvas cache data based on the first table.

[0134] Optionally, the first determination unit 402 is configured to:

[0135] Determine the newly added rendering content and the content to be cancelled from rendering according to the operation distance corresponding to the first operation.

[0136] Optionally,

[0137] If the first operation is a swiping-up operation, the content to be cancelled from rendering is the first M rows of the first table, and the newly added content to be rendered includes at most the last M rows of the first target row in the table to be rendered. The first target row is the last row of the first table, and the first table is a part of the table to be rendered; or,

[0138] If the first operation is a swiping-down operation, the content to be cancelled from rendering is the last N rows of the first table, and the newly added content to be rendered includes at most the first N rows of the second target row in the table to be rendered. The first target row is the last row of the first table, and the second target row is the first row of the first table; or,

[0139] If the first operation is a swiping-left operation, the content to be cancelled from rendering is the first P columns of the first table, and the newly added content to be rendered includes at most the last P columns of the first target column in the table to be rendered. The first target column is the last column of the first table; or,

[0140] If the first operation is a swiping-right operation, the content to be cancelled from rendering is the last Q columns of the first table, and the newly added content to be rendered includes at most the first Q columns of the second target column in the table to be rendered. The second target column is the first column of the first table; where:

[0141] M, N, P, and Q are all integers greater than or equal to 1.

[0142] Optionally, the device further includes:

[0143] A third determination unit, configured to obtain third canvas cache data according to the second canvas cache data and the newly added content to be rendered. The third canvas cache data includes a second image, and the image content of the second image includes the table content included in the second canvas cache data and the newly added content to be rendered;

[0144] A cache unit, configured to cache the third canvas cache data.

[0145] Optionally, the first obtaining unit 401 is configured to:

[0146] If the first canvas cache data is found in the cache, obtain the first canvas cache data from the cache; or,

[0147] If the first canvas cache data is not found in the cache, generate the first canvas cache data based on the first table.

[0148] Optionally, the device further includes:

[0149] A cancellation unit, configured to cancel rendering the first content in the first area in response to a second operation triggered by the first content displayed in the first area of the first table in the web page;

[0150] A third rendering unit, configured to re-render the second content obtained after processing the first content according to the second operation in the first area.

[0151] Optionally, the first rendering unit 404 is configured to:

[0152] Render the second canvas cache data and the newly added rendering content in the web page by using canvas.

[0153] Since the device 400 is the device corresponding to the method provided in the above method embodiment, the specific implementation of each unit of the device 400 is the same concept as that of the above method embodiment. Therefore, for the specific implementation of each unit of the device 400, reference may be made to the description part of the above method embodiment, and details are not described herein again.

[0154] An embodiment of the present application further provides a device, where the device includes a processor and a memory;

[0155] The processor is configured to execute instructions stored in the memory, so that the device executes the table rendering method provided in the above method embodiment.

[0156] An embodiment of the present application provides a computer-readable storage medium, including instructions, where the instructions instruct the device to execute the table rendering method provided in the above method embodiment.

[0157] An embodiment of the present application further provides a computer program product, when the computer program product runs on a computer, it causes the computer to execute the table rendering method provided in the above method embodiment.

[0158] After considering the specification and practicing the invention disclosed herein, those skilled in the art will readily conceive of other embodiments of the present application. The present application is intended to cover any variations, uses, or adaptations of the present application, which follow the general principles of the present application and include known common knowledge or conventional technical means in the technical field not disclosed in the present disclosure. The specification and embodiments are only regarded as exemplary, and the true scope and spirit of the present application are pointed out by the following claims.

[0159] It should be understood that the present application is not limited to the exact structures described above and shown in the drawings, and various modifications and changes can be made without departing from its scope. The scope of the present application is only limited by the appended claims.

[0160] The above are only the preferred embodiments of the present application and are not intended to limit the present application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present application shall be included within the protection scope of the present application.

Claims

1. A table rendering method, characterized in that, The method includes: In response to a first operation triggered for a first table in a web page, obtaining first canvas cache data, where the first canvas cache data includes a first image of the first table; Determining newly added rendering content and content to be cancelled from rendering in the first table according to the first operation; Deleting the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data, where the second canvas cache data includes a third image, and the third image is an image obtained by cropping the image corresponding to the content to be cancelled from rendering from the first image; Rendering the second canvas cache data and the newly added rendering content in the web page, where rendering the third image only requires invoking an interface for table rendering once.

2. The method according to claim 1, wherein The method further includes: Obtaining the size of the canvas; Determining the table data that can be accommodated by the canvas according to the size of the canvas, and the data that can be accommodated by the canvas includes the first table; Rendering the table data that can be accommodated by the canvas into the web page; Saving the first canvas cache data based on the first table.

3. The method according to claim 1, wherein The determining the newly added rendering content and the content to be cancelled from rendering in the first table according to the first operation includes: Determining the newly added rendering content and the content to be cancelled from rendering according to the operation distance corresponding to the first operation.

4. The method according to claim 1, wherein if the first operation is a swiping-up operation, the content to be cancelled from rendering is the first M rows of the first table, and the newly added rendering content includes at most the last M rows of the first target row in the table to be rendered, the first target row is the last row of the first table, and the first table is a part of the table to be rendered; or, if the first operation is a swiping-down operation, the content to be cancelled from rendering is the last N rows of the first table, and the newly added rendering content includes at most the first N rows of the second target row in the table to be rendered, the first target row is the last row of the first table, and the second target row is the first row of the first table; or, if the first operation is a swiping-left operation, the content to be cancelled from rendering is the first P columns of the first table, and the newly added rendering content includes at most the last P columns of the first target column in the table to be rendered, the first target column is the last column of the first table; or, if the first operation is a swiping-right operation, the content to be cancelled from rendering is the last Q columns of the first table, and the newly added rendering content includes at most the first Q columns of the second target column in the table to be rendered, the second target column is the first column of the first table; where: M, N, P, and Q are all integers greater than or equal to 1.

5. The method according to claim 1, characterized in that, The method further includes: Obtaining third canvas cache data according to the second canvas cache data and the newly added rendering content, where the third canvas cache data includes a second image, and the image content of the second image includes the table content included in the second canvas cache data and the newly added rendering content; Caching the third canvas cache data.

6. The method according to claim 1, wherein The obtaining the first canvas cache data corresponding to the first table includes: If the first canvas cache data is found in the cache, obtain the first canvas cache data from the cache; or, If the first canvas cache data is not found in the cache, generate the first canvas cache data based on the first table.

7. The method according to claim 1, wherein The method further includes: In response to a second operation triggered by the first content displayed in the first area of the first table on the web page, cancel rendering the first content in the first area, and re-render the second content obtained after processing the first content according to the second operation in the first area.

8. The method according to claim 1, wherein The rendering of the second canvas cache data and the newly added rendering content on the web page includes: Use canvas to render the second canvas cache data and the newly added rendering content on the web page.

9. A table rendering device, characterized in that, The device includes: A first obtaining unit, configured to obtain first canvas cache data in response to a first operation triggered by a first table on a web page, where the first canvas cache data includes a first image of the first table; A first determining unit, configured to determine newly added rendering content and content to be cancelled from rendering in the first table according to the first operation; A deleting unit, configured to delete the content to be cancelled from rendering from the first canvas cache data to obtain second canvas cache data, where the second canvas cache data includes a third image, and the third image is an image obtained by cropping the image corresponding to the content to be cancelled from rendering from the first image; A first rendering unit, configured to render the second canvas cache data and the newly added rendering content on the web page, where only one interface for table rendering needs to be called to render the third image.

10. A table rendering device, characterized in that, The device includes a processor and a memory; The processor is configured to execute instructions stored in the memory to cause the device to execute the method according to any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, Including instructions that direct the device to execute the method according to any one of claims 1 to 8.

Images