Web Browser Scrolling for Large Hosted Data Sets
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web applications that execute within a web browser face limitations in presenting large data models, such as large spreadsheets, due to consistency requirements and performance constraints, which restrict flexibility and responsiveness, especially when users need to scroll through extensive data sets.
Innovation Solution
A model-view-controller (MVC) approach is employed, where the entire spreadsheet is stored and managed, with portions rendered into a document object model (DOM) based on user interaction, allowing for smooth scrolling by maintaining a buffer area and fetching additional data as needed, and coordinating between client and server models to optimize rendering and user interaction.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If the entire spreadsheet is rendered into the DOM for the browser, then the user can access all data, but the performance and responsiveness deteriorate due to the large size of the data model
Solution Approach 1:
The spreadsheet data model is divided into multiple portions or ranges. Instead of rendering the entire large data model at once, only the currently visible portion (viewport) is rendered into the DOM. This segmentation allows the application to maintain high performance while still providing access to all data through incremental loading as the user scrolls or navigates through different portions of the spreadsheet.
2Productivity
If only a portion of the spreadsheet is rendered into the DOM, then the performance improves, but the user cannot access the entire data set
Solution Approach 1:
The system pre-renders a buffer area around the currently visible viewport portion. This buffer includes adjacent rows and columns that are likely to be viewed next, so when the user scrolls or navigates, the data is already available in the DOM without requiring additional rendering time. This preliminary action maintains both high performance and complete data accessibility.
3Ease of operation
If the spreadsheet is made editable in the browser, then user interaction improves, but the consistency and reliability worsen due to potential data loss
Solution Approach 1:
The system implements continuous feedback mechanisms where browser events (such as blur events on input cells) trigger automatic saving of changes back to the server. This feedback loop ensures that user edits are persisted reliably, maintaining data consistency between the browser-based editable view and the server-hosted data model, thereby resolving the contradiction between ease of operation and reliability.
Data Source
AI summary
A computer-implemented method of presenting an electronic document via a web browser includes maintaining on a computing device a client data model of the electronic document, the client data model comprising data that defines content of the electronic document and formatting of the content of the electronic document, and rendering a first sub-portion of content of the electronic document from the client data model to a document object model (DOM) for the web browser. The method also includes providing the DOM to the web browser, for the web browser to display a view of the electronic document from the DOM.