Browser First Screen Loading via Cached Page Data and Network Diff
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Browser applications on mobile terminals face significant delays in loading the first screen of web pages due to time-consuming JavaScript parsing and execution, especially on mid-range to low-end smartphones, resulting in a poor user experience.
Innovation Solution
The method involves actively caching key page information at the front end and performing asynchronous updating and differential processing of this information in parallel, allowing for faster rendering of the first screen by comparing cached data with dynamically updated data from the network.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If JavaScript parsing and execution is performed to render the first screen, then the page can be dynamically rendered at client-end, but the loading time increases significantly
Solution Approach 1:
The patent applies preliminary action by pre-caching the complete page information (HTML, CSS, JavaScript) in the browser's local storage during the first visit. When returning to the page, the cached information is immediately used for rendering without requiring re-download, thus reducing loading time while maintaining front-end rendering capability.
Solution Approach 2:
The patent segments the page loading process into two parts: static page structure (cached locally) and dynamic content (updated asynchronously). By separating these components, the system can render the static portion immediately from cache while updating dynamic content in the background, significantly reducing the perceived loading time for the first screen.
2Speed
If complete page information is cached locally, then subsequent page loading speed improves, but storage space is consumed
Solution Approach 1:
The patent extracts only the essential page information (HTML structure, CSS styles, and critical JavaScript) needed for rendering the first screen and caches it locally. Non-essential resources are excluded from caching, thus improving loading speed while minimizing storage consumption.
Solution Approach 2:
The patent changes the storage parameter by using the browser's existing local storage mechanism rather than implementing a custom storage solution. This leverages the browser's optimized storage infrastructure, achieving fast page loading while efficiently managing storage space through the browser's built-in memory management.
3Loss of time
If asynchronous updating is performed in parallel with rendering, then first screen display time is reduced, but system complexity increases
Solution Approach 1:
The patent introduces an intermediary mechanism (event listener and diff algorithm) that mediates between the cached page information and the live network data. This intermediary layer handles the complexity of parallel updating by providing a standardized interface for detecting changes and applying updates, thus reducing wait time while managing system complexity through abstraction.
Solution Approach 2:
The patent creates a copy of the page information from local storage and performs asynchronous updating on this copy in parallel with the main rendering process. Any changes detected in the network data are applied to the copy, which is then merged with the original rendered page. This copying approach enables parallel processing without increasing the complexity of the main rendering thread.
Data Source
AI summary
Embodiments of the present application provide a method, system, and a storage medium for a browser application to load a target page's first screen. The method comprises: in response to a request to load a target page, obtaining page information of the target page from a local storage associated with the browser application; rendering the page information of the target page, and requesting first screen information of the target page through a network; comparing the first screen information obtained through the network with the page information of the target page to determine whether the page information of the target page is updated; and in response to the page information of the target page being determined as updated, continuing to render the target page's first screen based on the first screen information obtained through the network.