Viewport Display Virtual List Rendering Optimization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing display technologies face performance issues when rendering large-scale images and videos, as they often require rendering all elements in a list simultaneously, leading to increased memory usage and slower page loading times, affecting user experience.
Innovation Solution
Implementing a virtual list display method where only elements within the viewport are rendered, with the controller determining the elements to be displayed based on user interactions, updating the list by replacing minimum elements and adding or subtracting elements accordingly, and sorting them to optimize rendering performance.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If all elements in a list are rendered simultaneously, then complete list display is achieved, but memory usage increases and page loading time slows down
Solution Approach 1:
The list is divided into multiple pages, with only the current page's elements being rendered in the viewport. The virtual list component calculates which elements should be displayed based on the current page number and viewport capacity, rendering only those specific elements rather than the entire list. This segmentation approach maintains complete list accessibility while dramatically reducing rendering time and memory usage.
2Reliability
If all elements in a list are rendered simultaneously, then complete list display is achieved, but memory usage increases
Solution Approach 1:
The list data is segmented into pages, and only the current page's elements are rendered at any given time. The virtual list component manages this by calculating the start and end indices of elements to render based on the current page number and the number of elements per page, thereby minimizing memory allocation to only what is currently visible.
Solution Approach 2:
The rendering behavior changes based on the page number parameter. When the page number changes, the component recalculates which elements should be rendered and updates only those specific elements. This parameter-driven approach ensures that memory usage dynamically adapts to the current display state rather than maintaining all elements in memory simultaneously.
3Ease of manufacture
If elements are updated by replacing all rendered elements, then list updates are simple, but rendering performance deteriorates
Solution Approach 1:
Instead of uniformly replacing all rendered elements during updates, the component applies local quality updates by identifying and rendering only the specific elements that have changed. The update mechanism calculates which element indices need to be refreshed based on the page number change, and selectively renders only those localized changes rather than performing a complete list re-render.
4Productivity
If the virtual list renders only viewport elements, then memory usage and rendering time are reduced, but element management complexity increases
Solution Approach 1:
The virtual list component serves multiple functions within a single implementation: it calculates which elements to render based on page number, manages the rendering of those specific elements, handles updates when page number changes, and ensures smooth transitions. This multi-functional design consolidates what could be separate complex mechanisms into a unified component that handles all virtual list management tasks efficiently.
Data Source
AI summary
Disclosed is a viewport display method and display apparatus. The method includes: receiving a user operation for continuously moving out of a viewport by causing a selector position on a boundary element of the viewport; determining first element numbers that correspond to elements in a virtual list in which the boundary element is located according to the user operation; determining second element numbers that correspond to to-be-displayed elements on the virtual list according to the first element numbers and the direction of the selector moving out of the viewport; sorting the second element numbers; updating a virtual list rendered by the elements that correspond to the first element numbers by utilizing the sorted second element numbers; and controlling total elements in the updated virtual list to be displayed in the viewport.