DOM Caching with Delta Renderer for Partial UI Updates
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing data processing systems face performance challenges due to limitations in communication speed, bandwidth, and time-consuming client-server roundtrips, leading to inefficient rendering of user interface pages and potential user experience issues like flickering screens.
Innovation Solution
Implementing document object model (DOM) caching and validation techniques, including the use of a delta renderer to apply changes directly to the DOM hierarchy and setting a dirty flag for invalid cached representations, allowing for partial updates without re-rendering the entire page and reducing client-server communication.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If the whole UI page is re-rendered when a UI element changes, then the DOM is updated to reflect the change, but the rendering time increases and causes screen flickering
Solution Approach 1:
The patent divides the UI page into multiple view components, each with its own DOM representation. When a change occurs, only the affected view's DOM is updated rather than re-rendering the entire page. This segmentation allows selective updating of specific DOM portions, reducing rendering time and eliminating full-page flicker while maintaining accurate DOM synchronization for the changed elements.
2Loss of energy
If layout, style, and content are transmitted separately to the client, then bandwidth usage is optimized, but client-server roundtrips are required for presentation updates
Solution Approach 1:
The patent transmits the complete UI page structure (layout, style, and content) to the client in advance during the initial page load. The client then maintains a local DOM representation that can be updated without requiring additional server roundtrips. This preliminary action stores necessary rendering data locally, enabling fast updates through client-side DOM manipulation while optimizing bandwidth usage.
3Adaptability or versatility
If the client is responsible for rendering screen presentations, then presentation flexibility is improved, but computation time at the client increases
Solution Approach 1:
The patent segments the rendering workload by dividing the UI into multiple views, each with its own controller and DOM representation. The client renders only the necessary view portions based on user interaction and change events, rather than computing and rendering the entire UI page. This selective rendering approach maintains presentation flexibility while significantly reducing client-side computation time and resource usage.
Data Source
AI summary
Methods and apparatus, including computer program products, implementing techniques for document object model caching and validation. A client identifies a change of a user interface (UI) element that references a node of the DOM hierarchy. The client determines whether the change of the UI element can be applied to the DOM hierarchy by using an update function, for example, a delta renderer. If so, the client finds in the DOM hierarchy the node that is referenced by the UI element and modifies at least one attribute related to the node according to the change by using the update function. Otherwise, the client sets a dirty flag.