White‑Screen Detection and Performance Optimization for Front‑End Applications

Early web pages were static and suffered from poor performance; modern frameworks such as Angular, React, and Vue have introduced SPA architectures, raising user expectations for fast, stable page loads. Studies show that each second of delay reduces customer satisfaction by 16%, and the Apdex metric defines acceptable response times.

White‑screen time is defined as the interval from the moment a user enters a URL to the moment the browser begins rendering content. It can be normal (e.g., waiting for DNS, TCP, HTTP, and rendering) or abnormal (e.g., JavaScript crashes, resource errors, or SPA failures). The article classifies three white‑screen scenarios and explains why minimizing this interval is crucial for user perception.

Detection methods

1. Navigation Timing API – Provides precise timestamps such as navigationStart and responseStart . The white‑screen duration can be calculated as (responseStart || domLoading) - navigationStart . Example implementation:

let t;
const result = {};
const _performance = window.performance || window.msPerformance || window.webkitPerformance;
if (_performance) {
  if (_performance.getEntriesByType && _performance.getEntriesByType('navigation') && _performance.getEntriesByType('navigation')[0]) {
    t = _performance.getEntriesByType('navigation')[0];
  } else if (_performance.timing) {
    t = _performance.timing;
  }
  // Additional metrics such as DNS, FCP, TTFB, DOM load can be collected here.
  result.blankTime = (t.responseStart || t.domLoading) - t.navigationStart;
}

2. Data reporting – Uses an Image beacon to send metrics without cross‑origin issues:

var eventLogimg = new Image();
// url contains the serialized performance data
eventLogimg.src = url;

3. Headless‑browser simulation (Puppeteer) – Detects abnormal white screens by loading the page in a headless Chrome instance and checking for rendering failures:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

4. MutationObserver – Observes DOM changes and scores newly added elements; a low total score indicates a white screen. Example usage:

// Select the node to observe
const targetNode = document.getElementById('observation-id');
// Configuration of what to observe
const config = { attributes: true, childList: true, subtree: true };
// Callback executed on mutations
const callback = function(mutationsList, observer) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
};
// Create observer instance
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
// Later, stop observing
observer.disconnect();

5. Element‑point analysis – Uses document.elementsFromPoint to sample points across the viewport; if most sampled points return only container elements (e.g., html , body ), the page is considered blank:

// Detect white screen
const checkBlank = function () {
  if (!document.elementsFromPoint) { return; }
  const excludeElements = ['body', 'html'];
  let nothingElement = 0;
  let totalElement = 0;
  const getElements = (el) => (el && (el.classList && el.classList[0]) || el.id || el.localName) || '';
  const isWrap = (el) => {
    if (!el) return;
    totalElement++;
    if (excludeElements.indexOf(getElements(el)) >= 0) {
      nothingElement++;
    }
  };
  let elementsX, elementsY;
  for (let i = 1; i < 10; i++) {
    elementsX = document.elementsFromPoint(window.innerWidth * i / 10, window.innerHeight / 2);
    elementsY = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight * i / 10);
    isWrap(elementsX[0]);
    isWrap(elementsY[0]);
  }
  if (totalElement - nothingElement < 2) { return true; }
  return false;
};

The article also describes a monitoring system: SDKs embedded in pages report performance data to a log center; a scheduled job aggregates the data, stores it in a database, and presents it in a management console. For abnormal white screens, the backend service periodically runs the detection logic and triggers alerts via SMS or other channels.

In conclusion, tracking white‑screen time alongside other performance metrics (DNS lookup, TCP handshake, request latency, DOM parsing, etc.) enables front‑end engineers to identify bottlenecks, improve page load speed, and deliver a smoother user experience, ultimately adding value to the product and the business.