DOM Virtualization for Web Browser Startup Latency
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web browsers experience unacceptably long startup wait times in higher-latency networks due to the need to receive dependent resources associated with multiple links and URLs before completing webpage rendering, which is not efficiently addressed by current technologies.
Innovation Solution
The virtualization of the Document Object Model (DOM) in web browsers allows for optimized delivery of webpage content through segmentation and reprioritization of downloaded information, using a client-server system that intercepts and processes network messages and DOM interactions to alter the delivery order and granularity of resources, such as images, without requiring user or publisher changes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If the web browser waits to receive all dependent resources before rendering the webpage, then the completeness and reliability of the rendered content is improved, but the startup wait time becomes unacceptably long in high-latency networks
Solution Approach 1:
The patent segments the dependent resources into different priority levels (critical vs. non-critical resources). Critical resources required for initial webpage rendering are delivered first, while non-critical resources are delivered subsequently. This segmentation allows the browser to render the webpage structure and critical content without waiting for all resources, thereby reducing startup wait time while maintaining reliability of essential content display.
Solution Approach 2:
The patent implements preliminary action by pre-delivering critical resources before the browser completes rendering of the main webpage content. The system identifies and prioritizes resources that are essential for initial webpage display, delivering them in advance so that the browser can begin rendering immediately without blocking on resource availability. This preliminary delivery of critical resources resolves the contradiction by ensuring reliability of essential content while minimizing startup wait time.
2Manufacturing precision
If the browser receives all dependent resources before rendering, then the quality and completeness of the rendered webpage is improved, but the rendering speed deteriorates due to network latency
Solution Approach 1:
The patent applies local quality by differentiating the delivery quality and timing for different types of resources. Critical resources (such as CSS files, JavaScript required for rendering, and above-fold images) are delivered with high priority and immediate quality, while non-critical resources (such as below-fold images, videos, and optional content) are delivered with lower priority and deferred timing. This local quality differentiation ensures that the essential webpage structure and content are rendered with high quality and speed, while maintaining overall webpage completeness.
3Loss of information
If the browser waits for all links and URLs to load dependent resources, then the completeness of the webpage content is improved, but the user experience deteriorates due to long wait times
Solution Approach 1:
The patent implements dynamics by making the resource delivery process adaptive and flexible rather than static and sequential. The system dynamically adjusts the delivery order and timing of resources based on their priority classification. Critical resources are delivered immediately to enable fast webpage rendering and good user experience, while non-critical resources are delivered dynamically as bandwidth and time permit. This dynamic approach ensures that the webpage content remains complete while significantly improving user experience by reducing perceived wait times.
Data Source
AI summary
A method of updating a document object model (DOM) is disclosed. A message is received from a web browser requesting for information to update the DOM. A dummy response message is sent to the web browser, wherein the dummy response message does not include the information to update the DOM, and wherein the dummy response message causes the web browser to create a dummy node in the DOM. A request message is received from a client as part of a client-server protocol, wherein the request message requests at least a portion of the information to be sent to the client. A first response message is sent including at least a portion of the information to the client, wherein the first response message is processed by the client to determine a first update to the DOM, and wherein the first update is applied to the DOM.