Deferred UI Component Rendering via Bootstrap Code
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Dynamic user interface components in network pages often incur a performance penalty due to the loading of client-side code, which can delay the rendering of other features, even if they are infrequently used, leading to suboptimal user experience.
Innovation Solution
The proposed solution involves delaying the loading of control code associated with user interface components until a user interacts with them, using a minimal bootstrap code to render an initial view and subsequently loading the control code to enable full functionality, thereby deferring the performance overhead until necessary.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If client-side code is loaded immediately to enable full functionality of user interface components, then the components can perform all intended functions, but the initial page rendering time increases and user experience deteriorates
Solution Approach 1:
The patent divides client-side code into two segments: bootstrap code (minimal code for initial rendering) and control code (full functionality code). The bootstrap code is executed immediately to render the user interface, while the control code is loaded and executed later when user interaction is detected, thus resolving the contradiction between immediate functionality and fast initial rendering
Solution Approach 2:
The patent performs preliminary action by pre-rendering the user interface structure using bootstrap code before the full control code is available. This allows the page to display immediately with basic functionality, and the enhanced functionality is added subsequently through control code execution, thereby reducing initial rendering time while maintaining adaptability
2Adaptability or versatility
If control code is loaded for all user interface components, then complete functionality is available, but computational resources and memory usage increase
Solution Approach 1:
The patent applies local quality by providing different code execution levels to different user interface components based on their usage patterns. Frequently interacted-with components receive full control code execution, while rarely used components remain in a simplified state, optimizing the balance between functionality and resource consumption across different parts of the system
Solution Approach 2:
The patent uses partial action by loading and executing only the necessary portion of control code (bootstrap code) initially, rather than the complete control code suite. Full functionality is partially implemented through bootstrap code, and the remaining functionality is added on-demand, reducing initial computational resource usage while maintaining the option for complete functionality
Data Source
AI summary
Disclosed are various embodiments for improving user interface rendering performance. A network page is received from one or more servers, where the network page includes code that renders a graphical placeholder for a user interface component. The code that renders the graphical placeholder for the user interface component is executed. Code that renders an updated view of the user interface component is received from the server(s) in response to a scrolling action or a viewport manipulation bringing the graphical placeholder for the user interface component into view. The code that renders the updated view of the user interface component is executed.