Incremental DOM Updating via Differential Storage
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Traditional DOM updating techniques are inefficient and memory-intensive, particularly for devices with limited resources like tablet computers and mobile phones, as they require substantial heap memory allocation and can trigger garbage collection, preventing the use of templates and causing delays in dynamic user interface updates.
Innovation Solution
The technique involves transforming the actual DOM tree directly without creating an additional virtual DOM tree, using a single virtual DOM tree to identify and apply updates, reducing heap memory allocation and enabling flexible handling of source document elements with conditional classes and attributes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If traditional DOM updating techniques are used to ensure complete DOM tree synchronization, then update reliability is improved, but memory consumption increases and garbage collection is triggered
Solution Approach 1:
The patent extracts only the modified portions from the DOM tree and stores them in a differential format, rather than maintaining complete DOM tree copies. This selective extraction reduces memory consumption while preserving update reliability by tracking only the necessary changes.
Solution Approach 2:
The patent applies different storage strategies to different parts of the DOM tree: modified nodes are stored in detail with full information, while unchanged nodes are represented by references to their parent nodes. This local differentiation optimizes memory usage by allocating resources only where changes occur.
2Loss of information
If traditional DOM updating techniques allocate substantial heap memory to track all DOM changes, then update completeness is improved, but device performance deteriorates due to garbage collection
Solution Approach 1:
The patent extracts only the essential modification information from DOM changes and stores differences rather than complete node data. This extraction approach maintains update completeness by capturing all necessary change information while reducing memory allocation that would trigger garbage collection.
Solution Approach 2:
The patent performs preliminary processing of DOM changes by immediately converting them into differential format and storing only the essential modification data. This preliminary action prevents accumulation of large memory allocations that would trigger garbage collection, thereby maintaining update speed.
3Measurement precision
If a virtual DOM tree is created to track DOM updates, then update accuracy is improved, but memory consumption increases
Solution Approach 1:
The patent extracts only the modification differences from DOM updates and stores them in a compact differential format, rather than creating and maintaining a complete virtual DOM tree. This extraction approach maintains update accuracy by capturing precise change information while significantly reducing memory consumption.
Solution Approach 2:
The patent creates simplified copies of only the modified nodes in differential format, rather than copying the entire DOM tree. These differential copies contain only the essential modification information needed for accurate updates, reducing memory usage while preserving update precision.
4Reliability
If complete DOM tree copies are maintained for updating, then update reliability is improved, but devices with limited resources experience performance degradation
Solution Approach 1:
The patent extracts only the modification information from DOM changes and stores differences rather than complete tree copies. This extraction reduces the computational energy required for memory allocation and garbage collection, making updates feasible on resource-constrained devices while maintaining reliability.
Solution Approach 2:
The patent applies differential storage only to modified nodes rather than maintaining complete copies of the entire DOM tree. This local approach reduces overall memory usage and energy consumption for memory management, enabling reliable updates on devices with limited resources.
Data Source
AI summary
Computer-implemented techniques can include obtaining a document object model (DOM) tree having a plurality of elements arranged in a plurality of nodes, the DOM tree being generated from a source document for a web page, rendering the web page using the DOM tree, based on an update to the web page, obtaining, by the computing device, a virtual DOM tree having a plurality of virtual elements; establishing a pointer indicative of a current location in the virtual DOM tree, for each specific virtual element of the plurality of virtual elements, determining whether the specific virtual element corresponds to the update and when the specific virtual element corresponds to the update, based on the pointer, obtaining a modified DOM tree by transforming a particular DOM element in the DOM tree corresponding to the specific virtual element, and re-rendering the web page using the modified DOM tree.