Asynchronous Interface Rendering for White Screen Reduction
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
In big data scenarios, rendering interfaces after data processing often leads to rendering blockage and prolonged white screen occurrences due to the large volume of data processed, causing rendering time to be too long and affecting user experience.
Innovation Solution
An asynchronous rendering method that groups primitives into synchronous and asynchronous groups based on their functions, using separate rendering processes to improve rendering speed and user experience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If synchronous rendering process is used for all primitives, then rendering order is simple and easy to control, but rendering speed is slow and user experience deteriorates due to prolonged white screen occurrences
Solution Approach 1:
The rendering process is segmented into two independent parallel processes: synchronous rendering process and asynchronous rendering process. The synchronous process handles primitives requiring strict rendering order (e.g., UI controls, interactive elements), while the asynchronous process handles primitives where rendering order is less critical (e.g., background data visualizations, static elements). This segmentation allows different parts of the interface to be rendered simultaneously, improving overall rendering speed while maintaining order control for critical elements.
2Quantity of substance
If large volume of data is processed for rendering, then data completeness is improved, but rendering time becomes too long causing rendering blockage
Solution Approach 1:
Data processing and preparation are performed in advance before the rendering phase. The system pre-processes large volumes of data, organizing them into structured formats and pre-computing visualization elements. This preliminary action reduces the actual rendering time by eliminating complex data processing during the rendering phase, allowing the renderer to simply display pre-processed data without blockage.
Solution Approach 2:
The system implements progressive rendering where critical interface elements are rendered first with sufficient quality, and less critical elements are rendered subsequently or with reduced detail. This partial action approach ensures that the most important parts of the interface appear quickly to users, while remaining data can be processed and rendered in the background without causing visible blockage.
3Manufacturing precision
If rendering is performed after complete data processing, then data accuracy is ensured, but white screen occurrences are prolonged
Solution Approach 1:
Data validation, verification, and accuracy checks are performed as preliminary actions before the rendering phase begins. The system completes all necessary data processing, validation, and accuracy verification in advance, so that when rendering starts, the data is already confirmed to be accurate. This eliminates the need to wait for data processing during rendering, preventing prolonged white screens while ensuring data accuracy.
4Stability of the object's composition
If synchronous rendering process is used, then rendering consistency is maintained, but user interaction responsiveness deteriorates
Solution Approach 1:
The rendering system is segmented into synchronous and asynchronous processes where the synchronous rendering process handles only those primitives that require strict rendering order and consistency (e.g., interactive UI elements, user-facing controls). The asynchronous process handles background rendering of less critical elements. This segmentation maintains rendering consistency for interactive elements while improving user interaction responsiveness by not blocking the UI thread with heavy rendering tasks.
Data Source
Figure 1
Figure 2~3
Figure 4
AI summary
The present disclosure provides an asynchronous rendering method and apparatus, a device and a storage medium. The asynchronous rendering method is applied to a rendering engine, the rendering engine includes a synchronous rendering process and an asynchronous rendering process. The method includes: grouping (S101) primitives in an interface to be rendered to a plurality of primitive groups based on functions corresponding to each primitive of the primitives; determining (S 102) rendering flags corresponding to each of the plurality of primitive groups, wherein the rendering flags include a synchronous rendering flag and an asynchronous rendering flag; and rendering (S103) primitive groups based on the rendering flags corresponding to each of the plurality of primitive groups, wherein a primitive group with the synchronous rendering flag is rendered by the synchronous rendering process, and a primitive group with the asynchronous rendering flag is rendered by the asynchronous rendering process.