Progressive Loading for Web Spreadsheet Viewports
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web-based spreadsheet applications face performance issues due to connection speed and bandwidth limitations, leading to adverse user experiences when downloading data on demand, especially during navigation within the spreadsheet.
Innovation Solution
Implementing progressive loading in web-based spreadsheet applications by determining the viewport and preloaded area dimensions on a user device, requesting and caching relevant data, and updating the cache without accessing the server for new UI renderings, thereby reducing network traffic and improving user experience.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of energy
If data is downloaded on demand from the server, then network bandwidth is reduced, but user experience deteriorates due to loading delays during navigation
Solution Approach 1:
The system performs preliminary actions by downloading and caching spreadsheet data in advance of when it is needed. When a user accesses a spreadsheet, the system proactively downloads data for the current viewport and surrounding areas, storing it in a cache. This preliminary action ensures that when users navigate to adjacent areas, the data is already available locally, eliminating loading delays and maintaining smooth user experience while reducing the need for continuous network access.
2Ease of operation
If all spreadsheet data is downloaded initially, then user experience is improved with seamless navigation, but network bandwidth consumption increases
Solution Approach 1:
The system segments the spreadsheet data into distinct regions: the current viewport area and surrounding areas. Instead of downloading the entire spreadsheet at once, only the necessary segments are downloaded initially. The cache is structured to hold data for the current viewport and adjacent regions, allowing the system to load data in manageable segments as users navigate, rather than requiring all data to be available upfront.
Solution Approach 2:
The system applies local quality by optimizing data availability specifically for the user's current location and expected navigation paths. The cache prioritizes storing data for the viewport and surrounding areas that are most likely to be accessed next. This localized approach ensures high-quality user experience in the immediate viewing area without the overhead of maintaining all spreadsheet data in memory or requiring continuous network access for distant areas.
3Loss of energy
If data is cached locally, then network traffic is reduced, but device memory usage increases
Solution Approach 1:
The system applies partial action by caching only the portion of data that is currently needed (viewport) and potentially needed soon (surrounding areas). It does not cache the entire spreadsheet unless necessary. The cache size is dynamically managed to hold approximately one viewport's worth of data plus surrounding areas, balancing the benefits of reduced network traffic against the cost of device memory usage. This partial caching approach provides sufficient performance improvement without excessive memory consumption.
Data Source
AI summary
Concepts and technologies are described herein for progressive loading for web-based spreadsheet applications. In accordance with the concepts and technologies disclosed herein, a user device can access data from a remote source such as a server computer. The user device can determine dimensions of a viewport corresponding to a viewable portion of the data, a window associated with the viewport, and a preloaded area associated with the window. The user device can request the data associated with the window and the preloaded area and store the data in a cache associated with the user device. The cached data can be used by the user device to generate UIs for displaying the spreadsheet. If the user device detects movement of the viewport, the user device can render a new UI in response to the movement. The user device also can be configured to update and/or clean the cache.