AJAX Partitioning to Eliminate Web Page Flicker
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
AJAX-based web applications experience page flicker and reduced interactivity during navigation, as they reload entire pages, leading to inefficient use of resources and increased network traffic.
Innovation Solution
The system divides a webpage into multiple partitions with parent-child relationships, where the client manages and updates only changed data by comparing pointers, using Asynchronous JavaScript and Extensible Markup Language (AJAX) to request and populate new data asynchronously, allowing local control and scalability.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Speed
If AJAX is used to update webpage content asynchronously, then interactivity and response speed are improved, but page flicker occurs during navigation
Solution Approach 1:
The webpage is divided into multiple partitions with parent-child relationships, allowing independent updating of specific sections without reloading the entire page. This segmentation enables targeted content updates that eliminate page flicker while maintaining asynchronous loading benefits.
Solution Approach 2:
The system pre-loads data in the background using AJAX before it is needed for display. Data is fetched asynchronously and prepared in advance, then seamlessly integrated into the appropriate partitions when ready, preventing visible loading states and flicker.
2Reliability
If entire pages are reloaded during navigation, then data consistency is maintained, but network traffic and server load increase
Solution Approach 1:
The system extracts and updates only the specific data partitions that have changed, rather than reloading entire pages. By comparing pointers and identifying modified sections, it retrieves minimal necessary data from the server, reducing network traffic while maintaining data consistency for updated content.
Solution Approach 2:
Instead of performing a complete page reload, the system performs partial updates by transmitting and applying only the changed data portions. This partial action approach maintains consistency for modified elements while avoiding the overhead of full page recreation.
3Loss of information
If entire pages are reloaded during navigation, then content freshness is ensured, but interactivity and user experience deteriorate
Solution Approach 1:
By dividing the page into independent partitions, the system allows users to interact with already-loaded sections while new content loads in the background. This segmentation maintains interactivity during data updates, preventing full page reloads that would block user actions.
Solution Approach 2:
The system maintains continuous user interaction capability by loading and updating content in the background without interrupting the user workflow. AJAX requests proceed asynchronously while users continue to interact with the page, ensuring both content freshness and uninterrupted interactivity.
Data Source
AI summary
A web page is rendered under the control of a client. A content server divides a webpage in multiple empty partitions. Each of the partitions has an associated pointer to data that can populate the partition. When data changes, the content server transmits pointers for all data for all of the partitions, including new pointers to new changed data. If an old pointer to old data is the same as a new pointer to the new data, the client ignores the new pointer. If the new pointer and the old pointer are different, then the client uses the new pointer to obtain the new data for that particular partition.