A parallel paging calculation rendering method, device and computer equipment in a big data scene
By employing a parallel pagination rendering method, dynamically measuring component height and segmenting in parallel, and listening to page scroll events to achieve incremental rendering, the low rendering efficiency and memory consumption issues of Word reports in big data scenarios are resolved, ensuring component format integrity and efficient rendering.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- LIANYI TECHNOLOGY CO LTD
- Filing Date
- 2026-01-26
- Publication Date
- 2026-05-29
Smart Images
Figure CN122111547A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of data rendering technology, and in particular to a parallel pagination computing rendering method, apparatus and computer equipment for big data scenarios. Background Technology
[0002] Currently, with the widespread application of low-code platforms in enterprise digital transformation, Word reports, as the core carrier of data presentation and business reporting, face the contradiction between "large data volume" and "efficient front-end rendering".
[0003] In existing technologies, traditional front-end Word report rendering adopts the "full loading + one-time rendering" mode. When the report contains tens of thousands of tables, extremely long texts, or massive amounts of data with multiple charts, it will cause the number of nodes to surge, memory usage to exceed the browser's limit, and cause page lag, white screen, or even crash.
[0004] Regarding the aforementioned technologies, the inventors discovered that existing big data scenarios suffer from slow response times and low rendering efficiency in report data rendering. Summary of the Invention
[0005] To adapt to massive amounts of report data and improve rendering efficiency, this application provides a parallel pagination calculation and rendering method, apparatus, and computer equipment for big data scenarios.
[0006] Firstly, this application provides a parallel pagination calculation and rendering method for big data scenarios.
[0007] This application is achieved through the following technical solution: A parallel pagination calculation and rendering method for big data scenarios includes the following steps: Initialize the component model and pagination configuration parameters; When a page request to be rendered is received, the height of different types of components is predicted, and the effective height of the corresponding components is determined. Based on the effective height of the component, the corresponding component is cut into segments to generate pagination fragments; Based on the pagination fragment, only the text nodes of the first page are calculated and generated, and the pagination content of the first page is rendered; Listen for page scroll events; When the page scrolls to the preset area of the current page, the text node of the next page is calculated and generated based on the pagination fragment, and the pagination content of the next page is rendered.
[0008] In a preferred embodiment, this application can be further configured such that the step of cutting the corresponding component based on its effective height to generate pagination fragments includes: Calculate the height of each row and the row merging information to obtain the initial parameters; Determine the remaining height of the current page based on the initial parameters; The first height is obtained by subtracting the header height from the remaining height of the current page. Traverse the rows; Based on the row merging information, the maximum height of the row is obtained; Determine whether the first height and the maximum height of the row exceed the preset page height; If the first height and the maximum height of the row exceed the page height, the excess row content will be moved to the next page, and the remaining height of the current page will be updated.
[0009] In a preferred embodiment, this application can be further configured such that: the step of determining whether the first height and the maximum height of the row exceed a preset page height includes, If the first height and the maximum height of the row are less than or equal to the page height, the row content is added to the current page, and the row traversal continues.
[0010] In a preferred embodiment, this application can be further configured such that the step of predicting the height of different types of components includes... When a text component is detected, a temporary hidden node is created, and the style and text content of the text component are inserted. The visible height of the element and the total height of the element content are obtained from the temporary hidden node, and the maximum value of the two is taken as the effective height of the text component. When a table component is detected, a temporary hidden node is created, the table is traversed, and the height of the row of the merged unit cell and the height of the table header are added together to obtain the effective height of the table component. When a chart component is detected, the chart instance is initialized and rendered to a temporary hidden container, and the effective height of the chart component is obtained from the temporary hidden container.
[0011] In a preferred embodiment, this application can be further configured to include the following steps: Store the pagination results and establish a mapping relationship between the pagination results in key-value form; The key is the page number index, and the value is the list of pagination components and the page height.
[0012] In a preferred embodiment, this application may be further configured such that, prior to the step of rendering the pagination content of the next page, the following steps are also included: Hide the rendered content of the current page; When the page scrolls back to the previous page, switch to the corresponding hidden page content and unhide it.
[0013] Secondly, this application provides a parallel paging computing and rendering device for big data scenarios.
[0014] This application is achieved through the following technical solution: A parallel paging computation and rendering device for big data scenarios includes, The initial module is used to initialize the component model and pagination configuration parameters; The component height module is used to predict the height of different types of components and determine the effective height of the corresponding components when a page request to be rendered is received. The segmentation module is used to cut the corresponding component based on the effective height of the component and generate pagination fragments; The listener module is used to listen for page scroll events; The rendering module is used to calculate and generate only the text nodes of the first page based on the pagination fragment, and render the pagination content of the first page; when the page scrolls to the preset area position of the current page, it calculates and generates the text nodes of the next page based on the pagination fragment, and renders the pagination content of the next page.
[0015] Thirdly, this application provides a computer device.
[0016] This application is achieved through the following technical solution: A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of any of the above-described parallel paging computation and rendering methods for big data scenarios.
[0017] Fourthly, this application provides a computer-readable storage medium.
[0018] This application is achieved through the following technical solution: A computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of any of the above-described parallel paging computation and rendering methods for big data scenarios.
[0019] Fifthly, this application provides a computer program product.
[0020] This application is achieved through the following technical solution: A computer program product includes a computer program that, when executed by a processor, implements the steps of any of the above-described parallel paging computation and rendering methods for big data scenarios.
[0021] In summary, compared with the prior art, the beneficial effects of the technical solution provided in this application include at least the following: Initialize component models and pagination configuration parameters to adapt to the component-based structure of low-code Word reports. When a page request to be rendered is received, predict the height of different types of components and determine the effective height of the corresponding components. Dynamic measurement of component height avoids slicing errors caused by fixed heights. Based on the effective height of the components, the corresponding components are sliced to generate pagination fragments, ensuring the integrity of the format of the sliced components, such as unbroken table rows, semantic continuity of text paragraphs, and no cross-page charts. Based on the pagination fragments, only the text nodes of the first page are calculated and generated, and the pagination content of the first page is rendered. By rendering only the pagination content within the currently visible area, the number of initial nodes is greatly reduced, which helps to avoid exceeding the browser's memory limit and reduces page lag, white screen, or even crashes. Listen for page scroll events. When the page scrolls to the preset area of the current page, based on the pagination fragments, calculate and generate the text nodes of the next page, and render the pagination content of the next page. This achieves scroll loading and incremental pagination rendering, improving rendering efficiency and adapting to massive amounts of report data. Attached Figure Description
[0022] Figure 1 This is a schematic diagram illustrating the overall process of a parallel pagination calculation and rendering method in a big data scenario, provided as an exemplary embodiment of this application.
[0023] Figure 2 This application provides a flowchart of the intelligent slicing process for a table component in a parallel pagination calculation and rendering method for big data scenarios, which is yet another exemplary embodiment of this application.
[0024] Figure 3 This is a performance comparison chart between this application and traditional full-rendering. Detailed Implementation
[0025] This specific embodiment is merely an explanation of this application and is not intended to limit it. After reading this specification, those skilled in the art can make modifications to this embodiment without contributing any inventive step, but such modifications are protected by patent law as long as they fall within the scope of the claims of this application.
[0026] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0027] Furthermore, the term "and / or" in this article is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this article, unless otherwise specified, generally indicates that the preceding and following related objects have an "or" relationship.
[0028] Word reports face a contradiction between "large data volumes" and "efficient front-end rendering," resulting in the following shortcomings: 1. Full-load rendering performance bottleneck: Traditional front-end Word report rendering adopts the "full loading + one-time rendering" mode. When the report contains tens of thousands of tables of data, extremely long text (such as paragraphs of more than a thousand words), or multiple charts (such as nested ECharts / HighCharts), it will cause the number of DOM nodes to increase dramatically, memory usage to exceed the browser limit, and cause page lag, white screen or even crash. 2. Crude pagination logic: Existing pagination is mostly based on "fixed number of rows / fixed height" cutting, without considering complex scenarios such as table merged cells (rowspan / colspan), text wrapping, and dynamic chart height. This can easily lead to problems such as "table row truncation", "text splitting", and "chart distortion across pages", which damages the integrity of the report format. 3. Lack of dynamic data adaptation: In big data scenarios, report data is often updated in real time (such as real-time statistical data and dynamic filtering results). Existing algorithms cannot respond to data changes and adjust the pagination structure in real time, requiring a full re-render, which leads to response delay. 4. Poor adaptability to low-code platforms: In low-code platforms, most report components are generated through visual configuration. Existing algorithms are not integrated with the "component-based and configurable" characteristics of low-code, and cannot be compatible with the unified pagination logic of different types of components (such as text, tables, charts, and images). Pagination logic needs to be developed separately for each component, resulting in high development costs.
[0029] To address the issues of front-end lag, rendering delay, and memory overflow when generating low-code Word reports with massive amounts of data, such as tables with tens of thousands of rows, extremely long text paragraphs, and multiple nested charts, this application proposes a front-end pagination rendering algorithm based on "dynamic height measurement - intelligent component segmentation - incremental rendering - cache reuse." This algorithm enables efficient, accurate, and dynamic rendering of low-code Word reports in big data scenarios, resolving the issues of front-end rendering performance and format integrity for large-volume reports.
[0030] The embodiments of this application will now be described in further detail with reference to the accompanying drawings.
[0031] Reference Figure 1This application provides a parallel pagination calculation and rendering method for big data scenarios. The main steps of the method are described below.
[0032] S1: Initialize component models and pagination configuration parameters; S2: When a page request to be rendered is received, predict the height of different types of components and determine the effective height of the corresponding components; S3: Based on the effective height of the component, the corresponding component is cut into segments to generate pagination fragments; S4: Based on the pagination fragment, calculate and generate only the text nodes of the first page, and render the pagination content of the first page; S5: Listen for page scroll events; S6: When the page scrolls to the preset area of the current page, calculate and generate the text node of the next page according to the pagination fragment, and render the pagination content of the next page.
[0033] Specifically, the front-end framework can be React or Vue. Taking React as an example, a standardized component model for low-code Word reports is defined, including component type (text / table / chart / image), pagination configuration parameters (such as table data source, text style, chart configuration, and position information: page index and component offset within the page).
[0034] In this embodiment, the user performs visual configuration of component models and pagination configuration parameters through a low-code platform, for example: Basic page parameters: Paper size (A4 / A3, default A4: width 210mm → 816px, height 297mm → 1123px), page margins (pagePadding: top / bottom / left / right, default 20px / 20px / 30px / 30px). Content height threshold: Calculate the effective content height of the page: contentHeight = page height - top margin - bottom margin (e.g., for A4, the default contentHeight = 1123 - 20 - 20 = 1083px). Cache configuration: Set the "component height cache pool" (heightCache) and the "pagination result cache pool" (pageCache), with the cache validity period being the current report session cycle.
[0035] Next, when a page request to be rendered is received, the effective height of the component is obtained by using the "pre-rendering + real DOM measurement" method for different types of components, and the component height is dynamically measured.
[0036] Using the component's effective height (contentHeight) as a constraint, each component is intelligently segmented to generate pagination fragments.
[0037] Based on the pagination fragment, only the text nodes of the first page are calculated and generated, and the pagination content of the first page is rendered. By rendering only the pagination content of the "first page," the pagination content within the currently visible area is rendered first, generating the corresponding DOM nodes (including Word report borders, footers, watermarks, etc.) and inserting them into the page container (id="printWrapper"). This differs from existing technologies that pre-calculate all pagination and then only display the current page DOM while retaining the calculation results of all pagination. The backend does not need to perform full data processing and pagination calculations, reducing initial memory usage and significantly reducing rendering performance consumption at startup.
[0038] Listen for page scroll events and calculate the scroll position and the height of the visible area.
[0039] When the page scrolls to the preset current page area, in this embodiment, when the scroll reaches the bottom of the current page and the distance from the visible area is ≤200px, incremental rendering of the next page is triggered. Based on the pagination fragment, the text node of the next page is calculated and generated, and the pagination content of the next page is rendered, so as to realize the on-demand calculation and rendering of subsequent pagination.
[0040] In one embodiment, the step of predicting the height of different types of components includes, When a text component is detected, a temporary hidden node is created, and the style and text content of the text component are inserted. The visible height of the element and the total height of the element content are obtained from the temporary hidden node, and the maximum value of the two is taken as the effective height of the text component. When a table component is detected, a temporary hidden node is created, the table is traversed, and the height of the row of the merged unit cell and the height of the table header are added together to obtain the effective height of the table component. When a chart component is detected, the chart instance is initialized and rendered to a temporary hidden container, and the effective height of the chart component is obtained from the temporary hidden container.
[0041] Specifically, for different types of components, the component height is dynamically measured, and the specific logic is as follows: When a text component is detected: Create a temporary hidden DOM node (style: position:absolute; visibility:hidden;top:-9999px), and copy the style of the text component (font size, line height, width, padding, etc.). Insert text content (including HTML tags such as...) `` The text component's height is determined by its offsetHeight, which is the visible height of the element (including the content area, padding, and border, but excluding the margin and scrollbar content), and its scrollHeight, which is the total height of the element's content (including content that is not visible due to overflow, and also including padding but excluding margin and scrollbar). By taking the maximum of the two, we can cover two scenarios: "content does not overflow" (offsetHeight and scrollHeight are approximately equal) and "content overflows" (scrollHeight is greater than offsetHeight), thus accurately determining the true height of the text component and obtaining its effective height. Store the effective height of the text component (textHeight) in heightCache with the key "component ID + content hash value" to avoid duplicate measurements.
[0042] When a table component is detected: Handling merged cells in a table: Traverse the table DOM, record the row height and header height (content) of the rowspan (row merging) cells, and measure the actual height of the merged cells by "temporary DOM copying + content filling"; The physical meaning of "temporary DOM copying" is to create a virtual DOM node in the browser memory that is completely identical in structure and style to the original table's merged cells (this node is not inserted into the page rendering tree and is only used for calculation). Its essence is to reproduce the real rendering environment of the merged cells on the page. Since the height of the merged cells (such as rowspan>1) is affected by the number of merged rows, and not just the height of the merged cell content, it is necessary to create a temporary DOM to measure the real height of the merged cells. Row height measurement for merged cells: For each row (tr) in the table tbody, get the actual row height using getBoundingClientRect().height to adapt to the scenario of "row height auto-adaptation caused by content wrapping"; Table header height measurement: Measure the header row height (headerHeight) separately. Total table height (tableTotalHeight) = headerHeight + sum of all row heights + table border height.
[0043] When a chart component is detected: For chart components such as ECharts / HighCharts, first initialize the chart instance and render it to a temporary hidden container, then obtain the actual height of the rendered chart (chartHeight) using chart.getDom().offsetHeight; If the chart configuration includes "Dynamic data loading" (such as asynchronous data request), the height will be remeasured after the data loading is complete to ensure height accuracy.
[0044] Performing "pre-render measurement" on each component to obtain the actual DOM height can avoid the cutting errors caused by fixed heights.
[0045] Reference Figure 2 In one embodiment, the step of segmenting the corresponding component based on its effective height to generate pagination fragments includes: Calculate the height of each row and the row merging information to obtain the initial parameters; Determine the remaining height of the current page based on the initial parameters; The first height is obtained by subtracting the header height from the remaining height of the current page. Traverse the rows; Based on the row merging information, the maximum height of the row is obtained; Determine whether the first height and the maximum height of the row exceed the preset page height; If the first height and the maximum height of the row exceed the page height, the content of the row that exceeds the limit will be moved to the next page, and the remaining height of the current page will be updated. If the first height and the maximum height of the row are less than or equal to the page height, the row content is added to the current page, and the row traversal continues.
[0046] Based on the effective height of the component (the effective content height of the page, contentHeight), each component is intelligently segmented to generate pagination fragments. The specific logic is as follows: Text component segmentation: Input: the actual height of the text component (textHeight), and the remaining height of the current page (remainingHeight, initially contentHeight); If textHeight ≤ remainingHeight, place the entire text component into the current page and update remainingHeight = remainingHeight - textHeight; If textHeight > remainingHeight, segment based on "paragraph semantics": by The text is split by tags, the height of each paragraph is calculated, and the largest set of paragraphs with "cumulative height ≤ remainingHeight" is found and used as the text fragment for the current page. The remaining paragraphs are stored as new text components in the "pagination queue" and their height and splitting are recalculated on the next page.
[0047] Segmentation of table components: Input: table header height (headerHeight), row height list (rowHeights), and remaining height (remainingHeight) of the current page; If headerHeight > remainingHeight, the current page cannot accommodate the table header. Create a new page and place the table header and the first row on the new page. Otherwise, calculate the "number of rows that can be accommodated": starting from the first row, accumulate the row height and find the maximum k that satisfies headerHeight + sum(rowHeights[0..k]) ≤ remainingHeight; calculate the current page table fragment: including the table header + the first k rows, and set tableFragment.currentPage = true; process the remaining rows: if the number of remaining rows > 0, create a new table fragment (excluding the table header, only containing the remaining rows), store it in the "paging queue", and reuse the table header height (read from heightCache) when rendering the next page.
[0048] like Figure 2 The pagination diagram using a table component illustrates the splitting logic of a merged cell table, highlighting the core design features of "reusing table headers" and "not truncating rows".
[0049] Segmentation of chart components: If the chart component height (chartHeight) exceeds the remainingHeight, a new page will be created, and the entire chart will be placed on the new page. If the chart needs to be associated with the "title / description text," the "title + chart" height will be calculated as a whole to ensure that the associated content is on the same page. Note that the chart cannot be split to avoid distortion across pages.
[0050] By designing a unified pagination logic for different types of components, such as text, tables, and charts, the system ensures that the format of the components remains intact after pagination. For example, table rows are not truncated, text paragraphs are semantically continuous, and charts do not span pages. Furthermore, the system combines the algorithm with the low-code "component-based and configurable" characteristics to achieve a unified pagination logic that is compatible with different types of components. This eliminates the need to develop separate pagination logic for each type of component, thus reducing development costs.
[0051] In one embodiment, the height of different types of components is predicted to determine the effective height of the corresponding components. When the corresponding components are cut based on their effective height, a parallel task-based calculation method is adopted to calculate the dynamic height of the components and intelligently cut the components in parallel. Finally, the total height of the components and pagination information are uniformly summarized to accelerate front-end rendering and pagination export.
[0052] Furthermore, since each chapter needs to be left blank and occupy a separate page, the large report can be split into smaller reports based on the chapters. According to the chapters of business logic, the overall height of the components in the preset area can be calculated in parallel and the components can be intelligently cut. Finally, the calculation results of multiple tasks are merged to calculate the total height of the components and pagination information, thereby accelerating pagination export and front-end rendering effects.
[0053] In one embodiment, a parallel pagination calculation and rendering method for big data scenarios further includes the following steps: Store the pagination results and establish a mapping relationship between the pagination results in key-value form; The key is the page number index, and the value is the list of pagination components and the page height.
[0054] By recording pagination results in the pageCache with the key "page index" and the value "pagination component list + page height", the pageCache stores the calculated pagination results and establishes a mapping relationship to avoid repeated calculation and rendering of subsequent pagination results, thereby reducing the response latency during rendering.
[0055] To reuse height cache: heightCache adopts a "key-value pair + expiration strategy". When the component content has not changed (the hash value is consistent), the cached height is directly reused, reducing DOM operations and improving rendering performance.
[0056] In one embodiment, content in non-visible areas is temporarily stored in a "cache pool" to reduce the number of initial DOM nodes and reduce memory usage.
[0057] In one embodiment, for paginated content in non-visible areas that exceeds "3 pages", the corresponding DOM nodes are destroyed but the pagination calculation results are retained. The content is then re-rendered when needed next time, balancing memory usage and rendering speed to achieve memory optimization.
[0058] In one embodiment, a "visible area priority + scroll loading" mode is adopted. When the data is updated, the stored pagination content and component height data are read from the pageCache. If they exist, they are rendered directly. Only the height of the changed components and pagination fragments need to be recalculated, avoiding a full redraw and improving the response speed of dynamic data in the report.
[0059] Specifically, when report data is updated in real time, such as when low-code platform filter conditions change or backend data is pushed, pagination is adjusted using the following logic: Listen for changes in component data sources (such as table dataSource, text content), calculate the data hash value and compare it with the old value to detect and locate the changed component; Dynamic height measurement is re-executed only for changed components, and the heightCache is updated to achieve incremental height calculation; Starting from the page containing the changed component, re-execute component splitting, generate pagination fragments, update the affected page fragments, keep the pageCache unchanged for unchanged pages, and adjust the pagination structure.
[0060] When updating pagination, a "fade-in / fade-out" animation can be used to achieve a smooth transition rendering, avoid page jumps, and improve the user experience.
[0061] In one embodiment, before the step of rendering the pagination content of the next page, the method further includes: Hide the rendered content of the current page; When the page scrolls back to the previous page, switch to the corresponding hidden page content and unhide it.
[0062] To implement the "previous page rollback" function, the rendered content of the previous page is not destroyed. It is hidden by display: none. When rolling back, it switches to display: block to restore the corresponding page rendering content, thereby reducing redraws and improving the rendering speed of dynamic data in reports.
[0063] pageCache supports "page index-pagination fragment" mapping. By reusing the pagination result cache, the rendered DOM can be reused directly when scrolling back the page, avoiding repeated cutting and rendering.
[0064] Verification has shown that, in scenarios such as teacher and student profile reports (dynamically generated text reports exceeding 100 pages) and undergraduate assessment rectification reports (multiple charts + extremely long analytical text), the use of "incremental rendering + cache reuse" reduces the number of DOM nodes by more than 70%, memory usage by 60%, and rendering time from "minutes" to "milliseconds," supporting smooth rendering of hundreds of pages of data and achieving fast front-end rendering.
[0065] A dedicated splitting logic was designed for merged cells, text semantics, and chart integrity. After pagination, the report format is complete, without "row truncation" or "text splitting" issues, and conforms to Word document formatting standards.
[0066] It supports real-time data updates and component style changes, only incrementally recalculates the affected pagination, and monitors Word reports exported from the dashboard in real time. Data is updated every 5 minutes, and the algorithm adjusts pagination in real time to avoid full redrawing. The response latency is less than 3000ms, meeting the real-time reporting needs of big data scenarios and realizing real-time data visualization reports.
[0067] Standardized component models and configurable parameters can be seamlessly integrated into low-code platforms, eliminating the need to develop separate pagination logic for different components and improving development efficiency by 80%.
[0068] For example, a component-based Word report generation platform supports drag-and-drop configuration of text, tables, and ECharts chart components, including 5000 rows of table data, 100 ECharts charts, and more than 100 pages of text. Users generate Word reports by dragging and dropping configurations, and the algorithm automatically handles the pagination logic of different components, eliminating the need for coding and achieving a low-code report generation platform.
[0069] Reference Figure 3 This algorithm has significant advantages over traditional full-scale rendering in terms of memory usage and rendering time in scenarios with "50, 100, and 200 pages of Word documents", thus improving front-end rendering performance.
[0070] In summary, a parallel pagination calculation and rendering method for big data scenarios is proposed to adapt to low-code Word by initializing component models and pagination configuration parameters. The report employs a component-based structure. Upon receiving a page request to be rendered, it predicts the height of different types of components, determines the effective height of the corresponding components, and avoids slicing errors caused by fixed heights through dynamic measurement of component height. Based on the effective height of the components, the corresponding components are sliced to generate pagination fragments, ensuring the integrity of the format of the sliced components, such as unbroken table rows, semantic continuity of text paragraphs, and no cross-page charts. According to the pagination fragments, only the text nodes of the first page are calculated and generated, and the pagination content of the first page is rendered. By rendering only the pagination content within the currently visible area, the number of initial nodes is greatly reduced, which helps to avoid exceeding the browser's memory limit and reduces page lag, white screen, or even crashes. It listens for page scrolling events, and when the page scrolls to the preset area of the current page, it calculates and generates the text nodes of the next page according to the pagination fragments, and renders the pagination content of the next page. This achieves scroll loading and incremental pagination rendering, improving rendering efficiency and adapting to massive report data, especially suitable for large-scale output scenarios such as enterprise-level reports, data visualization reports, and multi-dimensional analysis documents.
[0071] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.
[0072] This application embodiment also provides a parallel paging computation and rendering apparatus for big data scenarios, which corresponds one-to-one with the parallel paging computation and rendering method for big data scenarios described in the above embodiments. This parallel paging computation and rendering apparatus for big data scenarios includes... The initial module is used to initialize the component model and pagination configuration parameters; The component height module is used to predict the height of different types of components and determine the effective height of the corresponding components when a page request to be rendered is received. The segmentation module is used to cut the corresponding component based on the effective height of the component and generate pagination fragments; The listener module is used to listen for page scroll events; The rendering module is used to calculate and generate only the text nodes of the first page based on the pagination fragment, and render the pagination content of the first page; when the page scrolls to the preset area position of the current page, it calculates and generates the text nodes of the next page based on the pagination fragment, and renders the pagination content of the next page.
[0073] For specific limitations on a parallel paging computation and rendering device in a big data scenario, please refer to the limitations on a parallel paging computation and rendering method in a big data scenario mentioned above, which will not be repeated here.
[0074] The modules in the parallel paging computing and rendering device for the aforementioned big data scenario can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in the processor of a computer device in hardware form or independent of it, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.
[0075] In one embodiment, a computer device is provided, which may be a server. The computer device includes a processor, memory, a network interface, and a database connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface is used to communicate with external terminals via a network connection. When the computer program is executed by the processor, it implements any of the parallel paging computation and rendering methods described above for big data scenarios.
[0076] In one embodiment, a computer-readable storage medium is provided, including a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, it implements any of the above-described parallel paging computation and rendering methods for big data scenarios.
[0077] In one embodiment, a computer program product is provided, which includes a computer program that, when executed by a processor, implements any of the above-described parallel paging calculation and rendering methods for big data scenarios.
[0078] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. When executed, the computer program may include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
[0079] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above.
Claims
1. A parallel pagination calculation and rendering method for big data scenarios, characterized in that, Includes the following steps, Initialize the component model and pagination configuration parameters; When a page request to be rendered is received, the height of different types of components is predicted, and the effective height of the corresponding components is determined. Based on the effective height of the component, the corresponding component is cut into segments to generate pagination fragments; Based on the pagination fragment, only the text nodes of the first page are calculated and generated, and the pagination content of the first page is rendered; Listen for page scroll events; When the page scrolls to the preset area of the current page, the text node of the next page is calculated and generated based on the pagination fragment, and the pagination content of the next page is rendered.
2. The parallel pagination calculation and rendering method in a big data scenario according to claim 1, characterized in that, The step of segmenting the corresponding component based on its effective height to generate pagination fragments includes: Calculate the height of each row and the row merging information to obtain the initial parameters; Determine the remaining height of the current page based on the initial parameters; The first height is obtained by subtracting the header height from the remaining height of the current page. Traverse the rows; Based on the row merging information, the maximum height of the row is obtained; Determine whether the first height and the maximum height of the row exceed the preset page height; If the first height and the maximum height of the row exceed the page height, the excess row content will be moved to the next page, and the remaining height of the current page will be updated.
3. The parallel pagination calculation and rendering method in a big data scenario according to claim 2, characterized in that, The step of determining whether the first height and the maximum height of the row exceed the preset page height includes, If the first height and the maximum height of the row are less than or equal to the page height, the row content is added to the current page, and the row traversal continues.
4. The parallel pagination calculation and rendering method in a big data scenario according to claim 1, characterized in that, The steps for predicting the height of different types of components include: When a text component is detected, a temporary hidden node is created, and the style and text content of the text component are inserted. The visible height of the element and the total height of the element content are obtained from the temporary hidden node, and the maximum value of the two is taken as the effective height of the text component. When a table component is detected, a temporary hidden node is created, the table is traversed, and the height of the row of the merged unit cell and the height of the table header are added together to obtain the effective height of the table component. When a chart component is detected, the chart instance is initialized and rendered to a temporary hidden container, and the effective height of the chart component is obtained from the temporary hidden container.
5. The parallel pagination calculation and rendering method for big data scenarios according to any one of claims 1-4, characterized in that, It also includes the following steps, Store the pagination results and establish a mapping relationship between the pagination results in key-value form; The key is the page number index, and the value is the list of pagination components and the page height.
6. The parallel pagination calculation and rendering method in a big data scenario according to claim 5, characterized in that, Before the step of rendering the pagination content of the next page, the method further includes: Hide the rendered content of the current page; When the page scrolls back to the previous page, switch to the corresponding hidden page content and unhide it.
7. A parallel paging computation and rendering device for big data scenarios, characterized in that, include, The initial module is used to initialize the component model and pagination configuration parameters; The component height module is used to predict the height of different types of components and determine the effective height of the corresponding components when a page request to be rendered is received. The segmentation module is used to cut the corresponding component based on the effective height of the component and generate pagination fragments; The listener module is used to listen for page scroll events; The rendering module is used to calculate and generate only the text nodes of the first page based on the pagination fragment, and render the pagination content of the first page; When the page scrolls to the preset area of the current page, the text node of the next page is calculated and generated based on the pagination fragment, and the pagination content of the next page is rendered.
8. A computer device, characterized in that, The method includes a memory, a processor, and a computer program stored in the memory, wherein the processor executes the computer program to implement the steps of the method according to any one of claims 1 to 6.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the method according to any one of claims 1 to 6.
10. A computer program product, characterized in that, It includes a computer program that, when executed by a processor, implements the steps of the method according to any one of claims 1 to 6.