The synchronization process relies on three primary stages to update the user's viewport cleanly:
The "Refresh" mode is frequently used in surveillance systems where bandwidth is limited or when the viewing device (like an old browser) cannot support continuous MJPEG streaming.
// Update logic to handle variable intervals this.onFrameComplete = () => const nextFrameTime = this.calculateNextFrameTime(); scheduleRefresh(nextFrameTime); ;
Soft glass hums. The gallery dims and a single frame breathes light into the hush — ViewerFrame mode, switched on. viewerframe mode refresh new
A standard page reload is insufficient because it often reuses the browser or session cache. You must pass explicit headers or parameters indicating a "new" data request. javascript
: Only trigger a new frame refresh for elements inside the user’s current field of view (Viewport Frustum Culling).
So, what makes ViewerFrame mode so special? For starters, it offers a range of benefits that can enhance your overall visual experience. Some of the most significant advantages of ViewerFrame mode include: The synchronization process relies on three primary stages
When an application triggers a "refresh new" command within this mode, it forces the system to discard the existing frame hierarchy and rebuild the view using the latest dataset. This process is vastly different from a standard browser refresh because it operates entirely within the application’s virtual memory, avoiding a full page reload. Key Mechanics of the "Refresh New" Cycle
// Pre-fetch next frame this.prefetchNext();
class RealTimeStreamMode constructor(viewerFrame) this.frame = viewerFrame; this.buffers = [null, null, null]; this.activeBuffer = 0; this.displayBuffer = 0; this.pendingBuffer = 2; A standard page reload is insufficient because it
Complex dashboards tracking live financial tickers or IoT sensor arrays utilize viewerframe containers to isolate heavy charting libraries. Refreshing the frame independently keeps the rest of the webpage highly responsive. Troubleshooting Common Issues
if (newHash !== this.contentHash) // Content actually changed - perform full refresh this.frame.renderComplete(newContent); this.contentHash = newHash; else // No changes - skip refresh entirely this.frame.touch(); // Just update activity timestamp
class RefreshDebouncer constructor(viewerFrame, delay = 16) this.frame = viewerFrame; this.delay = delay; this.timeout = null; this.pending = false;