Webpage rendering method and device for table, computer equipment and storage medium

Abstract

The invention discloses a webpage rendering method and device for a table, computer equipment and a storage medium. The method comprises the steps of obtaining to-be-displayed data; obtaining a current display window height, and calculating a table visual area height and a displayable data line number according to the current display window height; setting a cache region; monitoring an event that a user operates a window, and determining an offset; calculating a data offset line number according to the offset, and determining a rendering starting position of the to-be-displayed data and a rendering ending position of the to-be-displayed data; rendering the to-be-displayed data from the rendering starting position of the to-be-displayed data, rendering the to-be-displayed data to the rendering ending position of the to-be-displayed data, and caching the rendered data in a cache region; and displaying the rendered data in a smooth scrolling manner. By implementing the method provided by the invention, the performance and user experience of the table in a large-scale data scene can be improved, and the method is suitable for a front-end application scene which is large in data volume, frequent in real-time updating and high in interaction requirement.

Description

Technical Field

[0001] The present invention relates to a webpage rendering method, and more specifically to a webpage rendering method, device, computer equipment and storage medium for a table. Background Art

[0002] As digital transformation continues to advance, all industries are generating large amounts of data. How to efficiently and smoothly view and edit these large data tables on mobile or desktop terminals is becoming increasingly important. However, when the amount of data is huge and the table needs to support complex DOM (Document Object Model) functions, traditional table implementation methods often lead to increased browser CPU (Central Processing Unit) occupancy and significantly reduced performance. This situation will result in a poor user experience, manifested as page freezes and interaction delays.

[0003] Especially in scenarios where data is frequently updated, large amounts of system resources will be consumed when redrawing and recalculating tables with large amounts of data, which not only affects the response speed of the table, but also restricts the performance of the entire application, causing obvious discomfort to users. Therefore, optimizing the processing method of large data tables to improve the user interaction experience has become a technical challenge that needs to be solved urgently.

[0004] Therefore, it is necessary to design a new method to improve the performance and user experience of tables in large-scale data scenarios, which is suitable for front-end application scenarios with huge data volumes, frequent real-time updates and high interaction requirements. Summary of the invention

[0005] The purpose of the present invention is to overcome the defects of the prior art and provide a web page rendering method, device, computer equipment and storage medium for tables.

[0006] To achieve the above object, the present invention adopts the following technical solution: a webpage rendering method for a table, comprising:

[0007] Get the data to be displayed;

[0008] Obtain the current display window height, and calculate the table visible area height and the number of displayable data rows according to the current display window height;

[0009] Set up the cache area;

[0010] Monitor the events of user operation window and determine the offset;

[0011] Calculate the number of data offset rows according to the offset, and determine the rendering start position and rendering end position of the data to be displayed;

[0012] Rendering the data to be displayed from the rendering start position of the data to be displayed, and rendering to the rendering end position of the data to be displayed, and caching the rendered data in the buffer area;

[0013] Use smooth scrolling to display rendered data.

[0014] A further technical solution is: the obtaining of the current display window height, and the calculation of the table visible area height and the number of displayable data rows according to the current display window height, comprises:

[0015] Obtain the current display window height, and calculate the table height according to the current display window height;

[0016] Subtract the height of the fixed header from the table height to obtain the height of the visible area of ​​the table;

[0017] The ratio of the height of the visible area of ​​the table to the fixed height of each row of the table is calculated to obtain the number of rows of data that can be displayed.

[0018] A further technical solution is: monitoring the event of the user operating the window and determining the offset includes:

[0019] When a mouse scroll event is monitored, the offset in the visible area is calculated to obtain the offset; when a scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset.

[0020] A further technical solution is: when a mouse scrolling event is monitored, the offset in the visible area is calculated to obtain the offset, including:

[0021] When a mouse scrolling event is detected, the mouse scrolling offset is defined, and the vertical scrolling amount of the scroll wheel is accumulated each time the mouse is scrolled to obtain the final mouse scrolling offset.

[0022] Performing a boundary check according to the final mouse scroll offset to obtain a check result;

[0023] The offset in the visible area is determined according to the inspection result to obtain the offset.

[0024] A further technical solution is: when a scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset, including:

[0025] Record the top position of the current scroll bar and the vertical position when the mouse is pressed;

[0026] When a scroll bar drag event is detected, the vertical position of the current mouse is obtained to obtain the new vertical position;

[0027] The scroll bar offset is determined by the difference between the new vertical position and the vertical position when the mouse is pressed plus the current top position of the scroll bar;

[0028] Performing a boundary check according to the scroll bar offset to obtain a check result;

[0029] An offset is determined according to the inspection result.

[0030] A further technical solution is: the step of calculating the number of data offset rows according to the offset and determining the rendering start position and the rendering end position of the data to be displayed comprises:

[0031] Calculate the offset ratio according to the offset and the height of the visible area of ​​the table;

[0032] The number of rows to be skipped is calculated according to the offset ratio and the total amount of data in the table to obtain the number of data offset rows;

[0033] Calculate the rendering start position of the data to be displayed according to the number of data records currently displayed and the number of data offset rows;

[0034] The rendering end position of the data to be displayed is determined according to the rendering start position of the data to be displayed and the number of displayable data rows.

[0035] A further technical solution is: the method of displaying rendered data by smooth scrolling includes:

[0036] Smoothly scroll the table visualization area to display the rendered data, where the scroll distance is the product of the row height and the number of rows of data offset.

[0037] The present invention also provides a webpage rendering device for a table, comprising:

[0038] A data acquisition unit, used to acquire data to be displayed;

[0039] A calculation unit, used to obtain the current display window height, and calculate the height of the visible area of ​​the table and the number of data rows that can be displayed according to the current display window height;

[0040] A setting unit, used for setting a buffer area;

[0041] A monitoring unit is used to monitor the events of user operation of the window and determine the offset;

[0042] A position determination unit, used to calculate the number of data offset rows according to the offset, and determine the rendering start position and the rendering end position of the data to be displayed;

[0043] A rendering cache unit, used to render the data to be displayed from a rendering start position of the data to be displayed, and to render to a rendering end position of the data to be displayed, and cache the rendered data in a cache area;

[0044] A display unit is used to display rendered data using smooth scrolling.

[0045] The present invention further provides a computer device, which includes a memory and a processor. The memory stores a computer program, and the processor implements the above method when executing the computer program.

[0046] The present invention also provides a storage medium, wherein the storage medium stores a computer program, and the computer program implements the above method when executed by a processor.

[0047] The beneficial effects of the present invention compared with the prior art are as follows: the present invention obtains the data to be displayed and the current window height, calculates the height of the visible area to determine the number of data rows that can be displayed; monitors scrolling and dragging events, calculates the rendering start position according to the offset and renders the data, and caches the rendered data at the same time; specifically, by dynamically calculating the table height and the visible area, combined with the management of the number of data rows, this method can only render the data in the current visible area, thereby significantly reducing the rendering burden, and the on-demand loading method reduces memory usage and processing time, improves performance, and in addition, setting a cache area can quickly respond to user operations and enhance the interactive experience. Overall, this method is particularly suitable for large-scale data scenarios, can be updated in real time and meet the needs of efficient interaction.

[0048] The present invention is further described below in conjunction with the accompanying drawings and specific embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying any creative work.

[0050] Figure 1 A schematic diagram of an application scenario of a webpage rendering method for a table provided in an embodiment of the present invention;

[0051] Figure 2 A schematic diagram of a flow chart of a web page rendering method for a table provided in an embodiment of the present invention;

[0052] Figure 3 A schematic diagram of a sub-process of a webpage rendering method for a table provided in an embodiment of the present invention;

[0053] Figure 4 A schematic diagram of a sub-process of a webpage rendering method for a table provided in an embodiment of the present invention;

[0054] Figure 5 A schematic diagram of a sub-process of a webpage rendering method for a table provided in an embodiment of the present invention;

[0055] Figure 6 A schematic diagram of a sub-process of a webpage rendering method for a table provided in an embodiment of the present invention;

[0056] Figure 7 A schematic block diagram of a web page rendering device for a table provided in an embodiment of the present invention;

[0057] Figure 8 A schematic block diagram of a computing unit of a webpage rendering device for a table provided in an embodiment of the present invention;

[0058] Fig. 9 A schematic block diagram of a monitoring unit of a webpage rendering device for a table provided in an embodiment of the present invention Figure 1 ;

[0059] Fig.10 A schematic block diagram of a monitoring unit of a webpage rendering device for a table provided in an embodiment of the present invention Figure 2 ;

[0060] Fig.11 A schematic block diagram of a position determination unit of a webpage rendering device for a table provided in an embodiment of the present invention

[0061] Fig.12 A schematic block diagram of a computer device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0062] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0063] It should be understood that when used in this specification and the appended claims, the terms "include" and "comprises" indicate the presence of described features, integers, steps, operations, elements and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or combinations thereof.

[0064] It should also be understood that the terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in the specification of the present invention and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0065] It should be further understood that the term "and / or" used in the present description and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0066] See also Figure 1 and Figure 2 , Figure 1 A schematic diagram of an application scenario of a web page rendering method for a table provided in an embodiment of the present invention. Figure 2 A schematic flow chart of a web page rendering method for a table provided in an embodiment of the present invention. The web page rendering method for a table is applied in a server. The server interacts with the terminal, and obtains the data to be displayed by initiating an asynchronous request, and obtains the current window and table height to calculate the visible area and the number of rows that can be displayed; then listens to scrolling and dragging events, obtains the offset and calculates the number of data offset rows; then determines the rendering start position of the data to be displayed and the rendering end position of the data to be displayed according to the offset; the rendered data will be cached to improve performance; finally, a smooth scrolling effect is used to display the data. Based on virtual table technology, by optimizing data processing and rendering mechanisms, the performance and user experience of tables in large-scale data scenarios are significantly improved. This technology is particularly suitable for front-end application scenarios with large amounts of data, frequent real-time updates, and high interaction requirements.

[0067] Figure 2 FIG. 1 is a flow chart of a webpage rendering method for a table provided by an embodiment of the present invention. Figure 2 As shown, the method includes the following steps S110 to S180.

[0068] S110: Obtain data to be displayed.

[0069] In this embodiment, the data to be displayed is table data that needs to be presented in a web page.

[0070] Specifically, by requesting the API (Application Programming Interface) of the backend service through standard HTTP and processing the response in the callback interface, dynamic loading and display of data can be achieved; the status code of the HTTP response is checked through response.status. If the status code is 200, indicating that the request is successful, the requested data is saved to the variable tableData.

[0071] Through asynchronous requests, the user interface will not freeze due to waiting for data, and a seamless interactive experience can be achieved. Asynchronous requests allow the browser to handle multiple tasks at the same time, thereby improving page loading speed and response efficiency. Data is requested only when needed, avoiding unnecessary data transmission, reducing server burden and bandwidth consumption. When processing responses, different logical processing can be performed according to different status codes (such as 200, 404, etc.), which can respond to various situations more flexibly. The latest data can be obtained in real time through asynchronous requests instead of relying on page refreshes, making the application more dynamic and interactive.

[0072] S120, obtaining the current display window height, and calculating the table visible area height and the number of displayable data rows according to the current display window height.

[0073] In this embodiment, the current display window height refers to the height of the content area that the user can see in the browser.

[0074] The height of the table's visible area refers to the height of the table portion that is actually visible in the user's browser window. This does not include any toolbars, titles, or other interface elements, and only focuses on the table content area that the user can directly view. The number of rows that can be displayed refers to the number of table rows that can be fully displayed in the current visible area. This number depends on the height of each row and the total height of the table's visible area.

[0075] In one embodiment, see Figure 3 , the above-mentioned step S120 may include steps S121 to S123.

[0076] S121, obtaining the current display window height, and calculating the table height according to the current display window height;

[0077] In this embodiment, the table height refers to the height of the entire table, which can be calculated according to the current display window height.

[0078] Specifically, the system interface windows.innerHeight is called to obtain the current display window height WH. In web design, window.innerHeight is a property used to obtain the current browser window height. Window.innerHeight returns the visible height of the browser window, usually in pixels. It does not include browser interface elements such as toolbars and address bars. By obtaining the current window height, the elements in the page can be dynamically adjusted, such as adjusting the height of a chart or table according to the browser size to ensure a good user experience.

[0079] In addition, the table height can be calculated by multiplying the current display window height WH by a certain ratio. For example, if the table is set to occupy 50% of the window height, the formula TH=WH*0.5 can be used.

[0080] Setting the table height dynamically can ensure that the table looks good and is easy to read on different screen sizes or devices.

[0081] In short, by getting the current window height and setting the table height according to the ratio, you can effectively improve the responsiveness and user experience of the web page and make it adapt to a variety of devices and window sizes.

[0082] S121. Subtract the height of the fixed header from the height of the table to obtain the height of the visible area of ​​the table.

[0083] In this embodiment, the height of the visible area of ​​the table refers to the height of the table content area that the user can see when the fixed header is removed. The specific calculation method is: VH = TH-fixed header height, where VH refers to the height of the visible area of ​​the table, and TH refers to the table height.

[0084] S122, calculating a ratio between the height of the visible area of ​​the table and the fixed height of each row of the table to obtain the number of displayable data rows.

[0085] In this embodiment, the table row height RH refers to the height of each row, which is usually fixed and can be set according to the CSS style.

[0086] The number of displayable data rows Count can be calculated by dividing the height of the visible area VH by the height of each row RH: Count = Math.floor (VH / RH).

[0087] For example: the table height TH is 600 pixels; the fixed header height is 100 pixels; the row height RH is 40 pixels

[0088] Then the height of the visible area of ​​the table is VH=600-100=500 pixels; the number of data rows that can be displayed is Count=Math.floor(500 / 40)=12 rows.

[0089] Calculating the height of the visible area and the number of displayable rows can help developers optimize the layout of the table so that users can easily view and use table data on different devices and window sizes.

[0090] In responsive design, the displayed content of the table can be dynamically adjusted according to the window changes to ensure that the table is always in the best state. By accurately controlling the number of visible rows, the number of scrolling times for users can be reduced, making it easier for them to quickly find the information they need. Rendering only visible rows can improve page performance, especially when the amount of data is large. Through virtual scrolling technology, only the currently visible part can be loaded, thereby reducing the number of DOM elements. By calculating the number of displayable rows through clear logic, the code is more modular and easy to maintain, making subsequent modifications and upgrades simple.

[0091] S130: Set a cache area.

[0092] In this embodiment, the cache area is set, and the number of cache rows can also be set to determine the number of data items rendered in the table.

[0093] Set the number of cache lines. When caching rendered content, you can cache according to the set number of cache lines.

[0094] Specifically, the cache area can refer to an area used to store preloaded or temporary data to improve data access speed. This cache can reduce direct requests to the data source each time it is rendered, thereby improving performance. By caching data in memory, it can be accessed quickly without having to fetch data from the backend server or database each time. This allows users to have a smoother experience when operating tables (such as scrolling, searching).

[0095] In table rendering, the number of cache lines usually refers to the number of independent data rows that can be stored in the cache. Each row of data may correspond to a cache line, and the specific implementation can be divided as needed.

[0096] By setting the appropriate number of cache lines, you can control the amount of data loaded each time you render, avoiding performance degradation caused by loading too much data at one time. Only render the current visible area or the data lines that the user needs, maintaining rendering efficiency and responsiveness.

[0097] S140: Monitor events of user operation of the window and determine an offset.

[0098] In this embodiment, the offset refers to the movement distance of the content relative to the visible area (or container) when the user interacts with the interface.

[0099] Specifically, when a mouse scrolling event is monitored, the offset in the visible area is calculated to obtain the offset; when a scroll bar dragging event is monitored, the offset of the scroll bar is calculated to obtain the offset.

[0100] In addition, other events may also be monitored. Any event that causes the content in the window to shift belongs to the monitoring event of this embodiment.

[0101] When the user scrolls with the mouse wheel, the offset is the distance the content moves in the vertical or horizontal direction. When the user drags the scroll bar, the offset is calculated based on the distance between the scroll bar's current position and its starting position.

[0102] In one embodiment, see Figure 4 , the above-mentioned step S140 may include steps S141 to S143.

[0103] S141. When a mouse scrolling event is monitored, a mouse scrolling offset is defined, and the scrolling amount of the scroll wheel in the vertical direction is accumulated each time the mouse is scrolled to obtain a final mouse scrolling offset.

[0104] In this embodiment, the final mouse scrolling offset refers to the result obtained by adding the scrolling amount of the scroll wheel in the vertical direction to the mouse scrolling offset each time the mouse is scrolled.

[0105] Specifically, in the implementation, you first need to add an event listener to the table or its container to capture the wheel event. This can be done through the addEventListener method in JavaScript.

[0106] When the user rolls the mouse wheel, the event is triggered and an event object (event) is passed, which contains relevant information about the scrolling, such as event.deltaY, which indicates the scroll amount in the vertical direction.

[0107] Define a variable startOffset to store the current scroll offset, which can be called the mouse scroll offset.

[0108] In the event handling function, startOffse is updated by accumulating event.deltaY to obtain the final mouse scroll offset.

[0109] S142: Perform a boundary check according to the final mouse scroll offset to obtain a check result.

[0110] In this embodiment, the checking result refers to the result obtained by checking whether the current scrolling exceeds the top and bottom boundaries.

[0111] Specifically, the top boundary check is performed by checking whether the final mouse scroll offset is less than 0. If it is less than 0, it means that the user tried to scroll up beyond the top boundary of the content, and the final mouse scroll offset needs to be reset to 0:

[0112] The bottom bounds check is done by checking if the final mouse scroll offset exceeds the maximum scrollable height (usually the height of the content minus the height of the viewport). If so, the final mouse scroll offset is set to the maximum scrollable height.

[0113] S143. Determine the offset in the visible area according to the inspection result to obtain the offset.

[0114] In this embodiment, the final mouse scroll offset adjusted by the inspection result is the offset within the visible area. The updated final mouse scroll offset t is used to adjust the displayed content of the table to ensure that the user sees the correct data.

[0115] Implement a smooth scrolling experience that allows users to more naturally navigate through data without worrying about accidentally scrolling beyond the boundaries of the content. By limiting the scroll range, you can prevent the table from visually "jumping" or showing blank portions, providing a more consistent interface. By controlling the scroll offset, you can reduce the browser's rendering burden, especially when dealing with large data sets, avoiding unnecessary content loading and redrawing.

[0116] In one embodiment, see Figure 5 , the above-mentioned step S140 may include steps S141 ′ to S145 ′.

[0117] S141', record the top position of the current scroll bar and the vertical position when the mouse is pressed.

[0118] In this embodiment, first, an event listener is added to the scroll bar to monitor the mousemove and mouseup event listeners so as to trigger the corresponding processing functions when the mouse is moved and released. When the user presses the mouse, the top position (top) of the current scroll bar and the vertical position (clientY) when the mouse is pressed are recorded.

[0119] S142', when a scroll bar drag event is monitored, the current vertical position of the mouse is obtained to obtain a new vertical position.

[0120] In this embodiment, the new vertical position refers to the vertical position of the mouse when the scroll bar drag event occurs.

[0121] S143', determine the scroll bar offset according to the difference between the new vertical position and the vertical position when the mouse is pressed plus the top position of the current scroll bar.

[0122] In this embodiment, the scroll bar offset refers to the result obtained by adding the difference between the new vertical position and the vertical position when the mouse is pressed to the top position of the current scroll bar.

[0123] Specifically, in the processing function of the mousemove event, the vertical position of the current mouse (newClientY) is obtained, and the new scroll bar offset (y) is calculated, where y=top+(newClientY-clientY).

[0124] S144', perform a boundary check according to the scroll bar offset to obtain a check result.

[0125] In this embodiment, the checking result refers to the result obtained by checking whether the current drag exceeds the top boundary.

[0126] S145', determining an offset according to the inspection result.

[0127] Specifically, if y is less than 0, reset the scroll bar offset to 0 to prevent the scroll bar from exceeding the top boundary.

[0128] The custom scrollbar dragging function allows users to browse content more freely, providing a more intuitive and flexible operation method. By calculating the new position in real time, users can quickly locate in long content without having to click the scrollbar to make small adjustments each time. When dragging the scrollbar, users can see immediate feedback, which enhances the smoothness and operability of the interaction. Bounds checking is implemented to ensure that the scrollbar does not exceed the visible area, thus avoiding unnecessary visual clutter and user confusion.

[0129] S150: Calculate the number of data offset rows according to the offset, and determine a rendering start position and a rendering end position of the data to be displayed.

[0130] In this embodiment, the number of data offset rows refers to the number of rows that need to be skipped in the current visible area due to user scrolling or dragging.

[0131] The rendering start position of the data to be displayed refers to the row number where the new data starts to be rendered, that is, in the table, from which row the data is rendered for the user to view.

[0132] In one embodiment, see Figure 6 , the above-mentioned step S150 may include steps S151 to S154.

[0133] S151. Calculate an offset ratio according to the offset and the height of the visible area of ​​the table.

[0134] In this embodiment, the offset ratio refers to the value of the relative position of the current scrolling or dragging position in the visible area.

[0135] Specifically, the calculation formula of the offset ratio (Factor) is: Factor=Offset / VH.

[0136] S152: Calculate the number of rows to be skipped according to the offset ratio and the total data volume of the table to obtain the number of data offset rows.

[0137] In this embodiment, the number of rows to be skipped DeltaRow is obtained by multiplying the offset ratio by the total data volume of the table.

[0138] S153, calculating the rendering start position of the data to be displayed according to the number of data records currently displayed and the number of data offset rows;

[0139] S154: Determine an end position of rendering of the data to be displayed according to the start position of rendering of the data to be displayed and the number of rows of data that can be displayed.

[0140] In this embodiment, the offset ratio of the window is consistent with the data offset ratio. The data offset row number DeltaRow is obtained by multiplying the offset ratio by the total data volume of the table tableData. Then, according to the number of rows of the currently displayed data records, the data offset row number DeltaRow is added to obtain the final offset data starting index to obtain the rendering starting position of the data to be displayed. Then, according to the number of displayable data rows, the rendering end position of the data to be displayed is obtained, which is specifically the rendering starting position of the data to be displayed + the number of displayable data rows - 1.

[0141] By only rendering the data rows in the visible area, the number of DOM nodes is reduced, and the responsiveness and smoothness of the page are improved. Memory usage is reduced, and only necessary data is kept in memory, especially when dealing with large data sets. Users can scroll and view data quickly without having to wait for the entire data set to load. This approach makes the data loading experience smoother. The size of the visible area or the amount of data rendered each time can be easily adjusted to meet the needs of different devices and screen sizes. Combined with the real-time data update mechanism, the same method can continue to be used to calculate the number of offset rows to ensure that users see the latest data.

[0142] With this approach, large amounts of data can be managed and presented efficiently while maintaining good performance and user experience.

[0143] S160 , rendering the data to be displayed from the rendering start position of the data to be displayed, and rendering to the rendering end position of the data to be displayed, and buffering the rendered data in a buffer area.

[0144] In this embodiment, a large data set is split into small batches of data and rendered only when the user needs it. For example, when the user scrolls the table, the system only renders the data in the current visible area instead of loading all the data at once. This method can effectively reduce the initial loading time.

[0145] As the user scrolls, new data is dynamically loaded into the viewport. Each time the user scrolls, the data range that should be displayed is calculated based on the current scroll position, and the data is obtained from the backend or read from the cache.

[0146] When the user has not yet viewed certain data, the system can render the data in advance and store it in the cache. When the user needs the data, it can be quickly obtained from the cache without having to render it again. This method greatly reduces rendering time and optimizes performance.

[0147] S170: Display the rendered data.

[0148] In this embodiment, the table visualization area is smoothly scrolled to display the rendered data, wherein the scrolling distance is the product of the row height and the number of data offset rows.

[0149] Smooth scrolling technology ensures that users can browse data smoothly when scrolling. The scrolling distance can be calculated by multiplying the row height (RH) and the number of offset rows (DeltaRow), so as to accurately control the display effect of the table.

[0150] Since data is rendered only when needed, CPU and memory usage are significantly optimized, which means that users can get a good operating experience even on low-configuration devices.

[0151] Users can quickly see the data they need without getting frustrated waiting for it to render. Smooth scrolling and instant data response allow users to operate more efficiently.

[0152] It reduces the CPU and memory pressure caused by rendering a large amount of data at one time, thereby improving the stability and responsiveness of the system.

[0153] This progressive rendering and caching approach allows the application to maintain good performance when processing larger data sets and adapt to growing data demands.

[0154] Even when there are network delays or other impacts, users can access data smoothly, enhancing application reliability.

[0155] Through the above strategies, the data rendering and caching mechanism not only improves performance, but also significantly improves the user's interactive experience, making large-scale data processing more efficient and user-friendly.

[0156] The method of this embodiment monitors multiple events and has a wide coverage. By rendering only the data in the visible area, the resource consumption during page loading is significantly reduced, so that users can see the required information faster. A caching mechanism is adopted to avoid repeated rendering of the same data, reduce the burden on the system, and thus improve the response speed and stability of the application. The combination of smooth scrolling and dynamic loading of data ensures that users will not encounter freezes when scrolling, improves the overall interactive experience, and adapts to rapidly changing data scenarios. The loading speed and response performance of the table under large-scale data are significantly improved, and the user waiting time is reduced. The system resource consumption is reduced, and the page freezes and crashes caused by the rendering of large amounts of data are avoided. A smooth user interaction experience is provided to meet the needs of table operations in complex business scenarios.

[0157] The method of this embodiment adopts progressive rendering technology, and only calculates the visible area and the number of data rows to be displayed according to the height of the current display window. This method avoids loading all data at once, thereby reducing memory usage and network request burden, and improving page response speed.

[0158] By setting up a cache to store rendered data, the overhead of repeated rendering can be effectively reduced. When the user scrolls or interacts, the system can quickly obtain data from the cache without re-requesting or parsing the data, thereby improving the user experience.

[0159] By monitoring user actions (such as mouse scrolling and scroll bar dragging) and intelligently calculating the offset, data loading and rendering can respond to user actions instantly. This real-time feedback improves the smoothness of interaction, reduces waiting time, and enhances the user's sense of operation.

[0160] By subtracting the fixed header height, accurately calculating the visual area height, and combining it with the fixed height of each row, we can ensure that only necessary data is rendered. This refined processing not only improves performance, but also ensures that users can always see relevant data and avoid information overload.

[0161] When displaying rendered data, smooth scrolling technology is used so that users do not feel abrupt or stuck when browsing large amounts of data. This natural scrolling effect improves the overall visual experience and makes it easier for users to browse and interpret information.

[0162] When calculating the offset and scroll bar position, boundary checking ensures the security and stability of the data, avoids errors or crashes caused by out-of-range, and further enhances the reliability of the application.

[0163] This method can adapt to scenarios with huge data volumes, frequent real-time updates, and high interactive requirements. Whether it is dynamically increasing data or frequent user operations, it can adapt quickly, making the front-end application more scalable and stable.

[0164] The above-mentioned webpage rendering method for tables obtains the data to be displayed and the current window height, calculates the height of the visible area to determine the number of data rows that can be displayed; listens to scrolling and dragging events, calculates the rendering start position according to the offset and renders the data, and caches the rendered data at the same time; specifically, by dynamically calculating the table height and visible area, combined with the management of the number of data rows, only the data in the current visible area is rendered, thereby significantly reducing the rendering burden, and the on-demand rendering and loading method reduces memory usage and processing time, improves performance, and in addition, setting a cache area can quickly respond to user operations and enhance the interactive experience. Overall, this method is particularly suitable for large-scale data scenarios, can be updated in real time and meet the needs of efficient interaction.

[0165] Figure 7 FIG. 3 is a schematic block diagram of a webpage rendering device 300 for a table provided in an embodiment of the present invention. Figure 7 As shown, corresponding to the above webpage rendering method for a table, the present invention also provides a webpage rendering device 300 for a table. The webpage rendering device 300 for a table includes a unit for executing the above webpage rendering method for a table, and the device can be configured in a server. Figure 7 The webpage rendering device 300 for tables includes a data acquisition unit 301, a calculation unit 302, a setting unit 303, a monitoring unit 304, a position determination unit 305, a rendering cache unit 306 and a display unit 307.

[0166] A data acquisition unit 301 is used to acquire data to be displayed; a calculation unit 302 is used to acquire the current display window height, and calculate the height of the visible area of ​​the table and the number of data rows that can be displayed according to the current display window height; a setting unit 303 is used to set a buffer area; a monitoring unit 304 is used to monitor events of user operation windows and determine an offset; a position determination unit 305 is used to calculate the number of data offset rows according to the offset, and determine the rendering start position and the rendering end position of the data to be displayed; a rendering cache unit 306 is used to render the data to be displayed from the rendering start position of the data to be displayed, and render to the rendering end position of the data to be displayed, and cache the rendered data in the cache area; a display unit 307 is used to display the rendered data using smooth scrolling.

[0167] In one embodiment, if Figure 8 As shown, the calculation unit 302 includes a table height calculation subunit 3021, a visible area height calculation subunit 3022 and a displayable data row number determination subunit 3023.

[0168] The table height calculation subunit 3021 is used to obtain the current display window height and calculate the table height based on the current display window height; the visible area height calculation subunit 3022 is used to subtract the height of the fixed table header from the table height to obtain the table visible area height; the displayable data row number determination subunit 3023 is used to calculate the ratio of the table visible area height and the fixed height of each row of the table to obtain the number of displayable data rows.

[0169] In one embodiment, the monitoring unit 304 is used to calculate the offset in the visible area to obtain the offset when monitoring a mouse scrolling event; and calculate the offset of the scroll bar to obtain the offset when monitoring a scroll bar dragging event.

[0170] In one embodiment, if Fig. 9 As shown, the monitoring unit 304 includes a defining subunit 3041 , a first checking subunit 3042 and a first determining subunit 3043 .

[0171] The definition subunit 3041 is used to define the mouse scroll offset when a mouse scroll event is monitored, and to accumulate the scroll amount of the scroll wheel in the vertical direction each time the mouse is scrolled to obtain a final mouse scroll offset; the first inspection subunit 3042 is used to perform a boundary check based on the final mouse scroll offset to obtain a check result; the first determination subunit 3043 is used to determine the offset within the visible area based on the check result to obtain an offset.

[0172] In one embodiment, if Fig.10 As shown, the monitoring unit 304 also includes a recording subunit 3044 , a position acquisition subunit 3045 , an offset determination subunit 3046 , a second checking subunit 3047 and a second determination subunit 3048 .

[0173] The recording subunit 3044 is used to record the top position of the current scroll bar and the vertical position when the mouse is pressed; the position acquisition subunit 3045 is used to acquire the current vertical position of the mouse when monitoring the scroll bar drag event to obtain a new vertical position; the offset determination subunit 3046 is used to determine the scroll bar offset based on the difference between the new vertical position and the vertical position when the mouse is pressed plus the top position of the current scroll bar; the second checking subunit 3047 is used to perform a boundary check based on the scroll bar offset to obtain a check result; the second determination subunit 3048 is used to determine the offset based on the check result.

[0174] In one embodiment, if Fig.11As shown, the position determination unit 305 includes a ratio calculation subunit 3051, an offset row number determination subunit 3052, a start position determination subunit 3053 and an end position determination subunit 3054.

[0175] The ratio calculation subunit 3051 is used to calculate the offset ratio according to the offset and the height of the visible area of ​​the table; the offset row number determination subunit 3052 is used to calculate the number of rows to be skipped according to the offset ratio and the total data volume of the table to obtain the number of data offset rows; the starting position determination subunit 3053 is used to calculate the rendering starting position of the data to be displayed according to the number of data records currently displayed combined with the number of data offset rows; the ending position determination subunit 3054 is used to determine the rendering ending position of the data to be displayed according to the rendering starting position of the data to be displayed and the number of data rows that can be displayed.

[0176] In one embodiment, the display unit 307 is used to smoothly scroll the table visualization area to display the rendered data, wherein the scrolling distance is the product of the row height and the number of data offset rows.

[0177] It should be noted that those skilled in the art can clearly understand that the specific implementation process of the above-mentioned web page rendering device 300 for tables and each unit can refer to the corresponding description in the aforementioned method embodiment, and for the convenience and brevity of description, it will not be repeated here.

[0178] The webpage rendering device 300 for tables can be implemented in the form of a computer program. Fig.12 Runs on the computer device shown.

[0179] See also Fig.12 , Fig.12 5 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device 500 may be a server, wherein the server may be an independent server or a server cluster composed of multiple servers.

[0180] See also Fig.12 The computer device 500 includes a processor 502 , a memory and a network interface 505 connected via a system bus 501 , wherein the memory may include a non-volatile storage medium 503 and an internal memory 504 .

[0181] The non-volatile storage medium 503 can store an operating system 5031 and a computer program 5032. The computer program 5032 includes program instructions, and when the program instructions are executed, the processor 502 can execute a webpage rendering method for a table.

[0182] The processor 502 is used to provide computing and control capabilities to support the operation of the entire computer device 500 .

[0183] The internal memory 504 provides an environment for the operation of the computer program 5032 in the non-volatile storage medium 503. When the computer program 5032 is executed by the processor 502, the processor 502 can execute a webpage rendering method for a table.

[0184] The network interface 505 is used to communicate with other devices over the network. Fig.12 The structure shown in the figure is merely a block diagram of a portion of the structure related to the solution of the present application, and does not constitute a limitation on the computer device 500 to which the solution of the present application is applied. The specific computer device 500 may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0185] The processor 502 is used to run the computer program 5032 stored in the memory to implement the following steps:

[0186] Acquire the data to be displayed; acquire the current display window height, and calculate the height of the visible area of ​​the table and the number of data rows that can be displayed according to the current display window height; set a buffer area; monitor the events of the user operating the window, and determine the offset; calculate the number of data offset rows according to the offset, and determine the rendering start position of the data to be displayed and the rendering end position of the data to be displayed; render the data to be displayed from the rendering start position of the data to be displayed, and render to the rendering end position of the data to be displayed, and cache the rendered data in the buffer area; use smooth scrolling to display the rendered data.

[0187] In one embodiment, the processor 502 implements the following steps when implementing the step of obtaining the height of the current display window and calculating the height of the visible area of ​​the table and the number of rows of data that can be displayed according to the height of the current display window:

[0188] Get the current display window height, and calculate the table height based on the current display window height; subtract the height of the fixed table header from the table height to get the table visible area height; calculate the ratio of the table visible area height to the fixed height of each row of the table to get the number of data rows that can be displayed.

[0189] In one embodiment, the processor 502 implements the following steps when implementing the step of monitoring the event of the user operating the window and determining the offset:

[0190] When a mouse scroll event is monitored, the offset in the visible area is calculated to obtain the offset; when a scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset.

[0191] In one embodiment, when the processor 502 implements the step of calculating the offset in the visible area to obtain the offset when a mouse scrolling event is monitored, the processor 502 specifically implements the following steps:

[0192] When a mouse scrolling event is monitored, a mouse scrolling offset is defined, and the scrolling amount of the scroll wheel in the vertical direction is accumulated each time the mouse is scrolled to obtain a final mouse scrolling offset; a boundary check is performed based on the final mouse scrolling offset to obtain a check result; and an offset within the visible area is determined based on the check result to obtain an offset.

[0193] In one embodiment, when the processor 502 implements the step of calculating the offset of the scroll bar to obtain the offset when the scroll bar drag event is monitored, the processor 502 specifically implements the following steps:

[0194] Record the top position of the current scroll bar and the vertical position when the mouse is pressed; when a scroll bar drag event is monitored, obtain the current vertical position of the mouse to obtain a new vertical position; determine the scroll bar offset based on the difference between the new vertical position and the vertical position when the mouse is pressed plus the top position of the current scroll bar; perform a boundary check based on the scroll bar offset to obtain a check result; determine the offset based on the check result.

[0195] In one embodiment, when the processor 502 implements the step of calculating the number of data offset rows according to the offset and determining the rendering start position and the rendering end position of the data to be displayed, the processor 502 specifically implements the following steps:

[0196] The offset ratio is calculated according to the offset and the height of the visible area of ​​the table; the number of rows that need to be skipped is calculated according to the offset ratio and the total data volume of the table to obtain the number of data offset rows; the rendering starting position of the data to be displayed is calculated according to the number of data records currently displayed and the number of data offset rows; the rendering ending position of the data to be displayed is determined according to the rendering starting position of the data to be displayed and the number of data rows that can be displayed.

[0197] In one embodiment, when the processor 502 implements the step of displaying the rendered data by smooth scrolling, the processor 502 specifically implements the following steps:

[0198] Smoothly scroll the table visualization area to display the rendered data, where the scroll distance is the product of the row height and the number of rows of data offset.

[0199] It should be understood that in the embodiment of the present application, the processor 502 may be a central processing unit (CPU), and the processor 502 may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0200] It can be understood by those skilled in the art that all or part of the processes in the method for implementing the above embodiment can be completed by instructing the relevant hardware through a computer program. The computer program includes program instructions, and the computer program can be stored in a storage medium, which is a computer-readable storage medium. The program instructions are executed by at least one processor in the computer system to implement the process steps of the embodiment of the above method.

[0201] Therefore, the present invention also provides a storage medium. The storage medium may be a computer-readable storage medium. The storage medium stores a computer program, wherein when the computer program is executed by a processor, the processor executes the following steps:

[0202] Acquire the data to be displayed; acquire the current display window height, and calculate the height of the visible area of ​​the table and the number of data rows that can be displayed according to the current display window height; set a buffer area; monitor the events of the user operating the window, and determine the offset; calculate the number of data offset rows according to the offset, and determine the rendering start position of the data to be displayed and the rendering end position of the data to be displayed; render the data to be displayed from the rendering start position of the data to be displayed, and render to the rendering end position of the data to be displayed, and cache the rendered data in the buffer area; use smooth scrolling to display the rendered data.

[0203] In one embodiment, when the processor executes the computer program to implement the steps of obtaining the height of the current display window and calculating the height of the visible area of ​​the table and the number of rows of data that can be displayed according to the height of the current display window, the processor specifically implements the following steps:

[0204] Get the current display window height, and calculate the table height based on the current display window height; subtract the height of the fixed table header from the table height to get the table visible area height; calculate the ratio of the table visible area height to the fixed height of each row of the table to get the number of data rows that can be displayed.

[0205] In one embodiment, when the processor executes the computer program to implement the step of monitoring the event of the user operating the window and determining the offset, the processor specifically implements the following steps:

[0206] When a mouse scroll event is monitored, the offset in the visible area is calculated to obtain the offset; when a scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset.

[0207] In one embodiment, when the processor executes the computer program to implement the step of calculating the offset in the visible area to obtain the offset when a mouse scrolling event is monitored, the processor specifically implements the following steps:

[0208] When a mouse scrolling event is monitored, a mouse scrolling offset is defined, and the scrolling amount of the scroll wheel in the vertical direction is accumulated each time the mouse is scrolled to obtain a final mouse scrolling offset; a boundary check is performed based on the final mouse scrolling offset to obtain a check result; and an offset within the visible area is determined based on the check result to obtain an offset.

[0209] In one embodiment, when the processor executes the computer program to implement the step of calculating the offset of the scroll bar to obtain the offset when a scroll bar drag event is monitored, the processor specifically implements the following steps:

[0210] Record the top position of the current scroll bar and the vertical position when the mouse is pressed; when a scroll bar drag event is monitored, obtain the current vertical position of the mouse to obtain a new vertical position; determine the scroll bar offset based on the difference between the new vertical position and the vertical position when the mouse is pressed plus the top position of the current scroll bar; perform a boundary check based on the scroll bar offset to obtain a check result; determine the offset based on the check result.

[0211] In one embodiment, when the processor executes the computer program to implement the step of calculating the number of data offset rows according to the offset and determining the rendering start position and the rendering end position of the data to be displayed, the processor specifically implements the following steps:

[0212] The offset ratio is calculated according to the offset and the height of the visible area of ​​the table; the number of rows that need to be skipped is calculated according to the offset ratio and the total data volume of the table to obtain the number of data offset rows; the rendering starting position of the data to be displayed is calculated according to the number of data records currently displayed and the number of data offset rows; the rendering ending position of the data to be displayed is determined according to the rendering starting position of the data to be displayed and the number of data rows that can be displayed.

[0213] In one embodiment, when the processor executes the computer program to implement the step of displaying the rendered data using smooth scrolling, the processor specifically implements the following steps:

[0214] Smoothly scroll the table visualization area to display the rendered data, where the scroll distance is the product of the row height and the number of rows of data offset.

[0215] The storage medium may be a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disk, etc., which are computer-readable storage media that can store program codes.

[0216] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0217] In the several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of each unit is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0218] The steps in the method of the embodiment of the present invention can be adjusted in order, combined and deleted according to actual needs. The units in the device of the embodiment of the present invention can be combined, divided and deleted according to actual needs. In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0219] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, terminal, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention.

[0220] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of various equivalent modifications or substitutions within the technical scope disclosed by the present invention, and these modifications or substitutions should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. A web page rendering method for a table, characterized in that: include: Get the data to be displayed; Obtain the current display window height, and calculate the table visible area height and the number of displayable data rows according to the current display window height; Set up the cache area; Monitor the events of user operation window and determine the offset; Calculating the number of data offset rows according to the offset, and determining the rendering start position and the rendering end position of the data to be displayed according to the height of the visible area of ​​the table and the number of data rows that can be displayed; Rendering the data to be displayed from the rendering start position of the data to be displayed, and rendering to the rendering end position of the data to be displayed, and caching the rendered data in the buffer area; Displays the rendered data.

2. The webpage rendering method for a table according to claim 1, characterized in that: The obtaining of the current display window height, and calculating the table visible area height and the number of displayable data rows according to the current display window height, includes: Obtain the current display window height, and calculate the table height according to the current display window height; Subtract the height of the fixed header from the table height to obtain the height of the visible area of ​​the table; The ratio of the height of the visible area of ​​the table to the fixed height of each row of the table is calculated to obtain the number of rows of data that can be displayed.

3. The webpage rendering method for a table according to claim 1, characterized in that: The monitoring of the user operating window event and determining the offset includes: When a mouse scroll event is monitored, the offset in the visible area is calculated to obtain the offset; when a scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset.

4. The webpage rendering method for a table according to claim 3, characterized in that: When a mouse scrolling event is monitored, the offset in the visible area is calculated to obtain the offset, including: When a mouse scrolling event is detected, the mouse scrolling offset is defined, and the vertical scrolling amount of the scroll wheel is accumulated each time the mouse is scrolled to obtain the final mouse scrolling offset. Performing a boundary check according to the final mouse scroll offset to obtain a check result; The offset in the visible area is determined according to the inspection result to obtain the offset.

5. The webpage rendering method for a table according to claim 3, characterized in that: When the scroll bar drag event is monitored, the offset of the scroll bar is calculated to obtain the offset, including: Record the top position of the current scroll bar and the vertical position when the mouse is pressed; When a scroll bar drag event is detected, the vertical position of the current mouse is obtained to obtain the new vertical position; The scroll bar offset is determined by the difference between the new vertical position and the vertical position when the mouse is pressed plus the current top position of the scroll bar; Performing a boundary check according to the scroll bar offset to obtain a check result; An offset is determined according to the inspection result.

6. The webpage rendering method for a table according to claim 1, characterized in that: The step of calculating the number of data offset rows according to the offset and determining the rendering start position and the rendering end position of the data to be displayed includes: Calculate the offset ratio according to the offset and the height of the visible area of ​​the table; The number of rows to be skipped is calculated according to the offset ratio and the total amount of data in the table to obtain the number of data offset rows; Calculate the rendering start position of the data to be displayed according to the number of data records currently displayed and the number of data offset rows; The rendering end position of the data to be displayed is determined according to the rendering start position of the data to be displayed and the number of displayable data rows.

7. The webpage rendering method for a table according to claim 6, characterized in that: The display of rendered data includes: Smoothly scroll the table visualization area to display the rendered data, where the scroll distance is the product of the row height and the number of rows of data offset.

8. A web page rendering device for a table, characterized in that: include: A data acquisition unit, used to acquire data to be displayed; A calculation unit, used to obtain the current display window height, and calculate the height of the visible area of ​​the table and the number of data rows that can be displayed according to the current display window height; A setting unit, used for setting a buffer area; A monitoring unit is used to monitor the events of user operation of the window and determine the offset; A position determination unit, used to calculate the number of data offset rows according to the offset, and determine the rendering start position and the rendering end position of the data to be displayed; A rendering cache unit, used to render the data to be displayed from a rendering start position of the data to be displayed, and to render to a rendering end position of the data to be displayed, and cache the rendered data in a cache area; A display unit is used to display rendered data using smooth scrolling.

9. A computer device, characterized in that: The computer device comprises a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

10. A storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images