Shadow DOM Page Preview Rendering for Load Latency
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web page loading times are often delayed due to various factors such as connection speed, server load, page size, embedded objects, and processing power, leading to a frustrating user experience, even when using intermediary systems to offload processing.
Innovation Solution
Implementing a system that generates page previews by modifying the page code to use the shadow DOM framework, allowing browsers to render a preview image for a set period before loading the actual page, thereby reducing the noticeable delay and preserving user interactions.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of time
If the page is loaded directly from the server, then the page content is displayed, but the user experiences a noticeable delay before the page is fully displayed
Solution Approach 1:
The system performs preliminary actions by generating and displaying a preview of the page content before the actual page is fully loaded. The preview is created by rendering a simplified version of the page with placeholder content, allowing users to see what the page will contain before the complete page finishes loading from the server.
Solution Approach 2:
The patent introduces an intermediary mechanism between the server and the user interface - a preview rendering system that creates a preliminary version of the page. This intermediary preview layer masks the loading delay by displaying available content structure and placeholders while the actual content is being retrieved and processed.
2Loss of information
If the page size is increased to include more content, then the page provides more information, but the loading time increases
Solution Approach 1:
The page loading process is segmented into multiple phases: first, the preview structure is rendered with placeholder content; second, the actual page content is loaded in the background; third, the preview is replaced with the complete page. This segmentation allows the user interface to display something immediately while the full content loads asynchronously.
Solution Approach 2:
The system performs partial action by displaying a preview version of the page that contains the structural framework and placeholder elements, which is sufficient to give users an immediate view of the page layout and available content areas, while the complete page content loads in the background without blocking the user interface.
3Adaptability or versatility
If embedded objects are included in the page, then the page functionality is enhanced, but the loading time increases due to separate retrieval requirements
Solution Approach 1:
The preview rendering system performs preliminary action by creating a simplified version of the page that includes placeholder representations of embedded objects. These placeholders indicate where embedded content will appear without requiring the actual embedded objects to be loaded and processed, thus maintaining functionality representation while avoiding the time cost of loading complex embedded elements in advance.
Data Source
AI summary
A content server retrieves the code and other content of a page and generates a preview of the page. The page preview could be an image that depicts a snapshot of the page, such as a screenshot, or an image map that includes links selectable by a user. The content server further modifies the original code used to load the page such that the modified code instructs a browser application to render and display the page preview for a first period of time and to render and display the actual page in place of the page preview after the first period of time. The content server may use the shadow document object model (DOM) framework to provide the page preview.