记录–代码刚上线，页面就白屏了

// 获取关键节点 const criticalNodes = Array.from(document.querySelectorAll('.critical-node'));  // 检测节点渲染 function checkNodesRendered() {   let allNodesRendered = true;      for (const node of criticalNodes) {     if (node.offsetHeight === 0 || node.clientHeight === 0) {       allNodesRendered = false;       break;     }   }      return allNodesRendered; }  // 判断页面状态 if (checkNodesRendered()) {   // 关键节点已经渲染，页面不是白屏   console.log("页面不是白屏");   // 可以进行后续操作 } else {   // 关键节点未渲染，页面是白屏   console.log("页面是白屏");   // 可以进行相应处理 }  // 在页面加载完成后调用检测函数 window.addEventListener('load', checkNodesRendered);

优点

1.简单易懂：代码相对简洁，易于理解和实现。

2.快速检测：代码通过检测关键节点的渲染状态来快速判断页面是否为白屏，方便进行后续处理。

3.可扩展性：示例代码可以根据实际需求进行修改和扩展，例如添加其他检测条件或特定行为。

缺点

1. 局限性：示例代码仅仅关注关键节点是否渲染，但并不能涵盖所有可能的页面白屏情况。
2. 不适用于异步加载：如果页面中的关键节点是通过异步加载或延迟加载的方式渲染的，示例代码可能无法正确判断页面状态。
3. 可能的误判：某些情况下，即使关键节点已经渲染，它们的高度可能仍为0。这可能导致误判，将页面错误地视为白屏。

观察FP/FCP

PerformanceObserver观察FP/FCP指标，出现该指标判断为非白屏

代码实现

const observer = new PerformanceObserver((list) => {   const entries = list.getEntries();   entries.forEach(entry => {     if (entry.name === 'first-paint') {       // 处理FP指标       console.log('First Paint:', entry.startTime);       // 进行白屏判断       if (/* 根据需求判断是否为白屏 */) {         console.log('白屏！');       }     } else if (entry.name === 'first-contentful-paint') {       // 处理FCP指标       console.log('First Contentful Paint:', entry.startTime);       // 进行白屏判断       if (/* 根据需求判断是否为白屏 */) {         console.log('白屏！');       }     }   }); });  observer.observe({ entryTypes: ['paint'] });

优点

1. 通过观察FP和FCP指标，可以精确地确定页面加载过程中是否出现白屏，以及白屏持续的时间。这对于优化网页加载速度和用户体验非常有帮助。
2. PerformanceObserver提供了一个直接的、标准化的接口来监测性能指标，使开发者能够更方便地收集和分析网页性能数据。

缺点

1. 依赖于浏览器对PerformanceObserver的支持，在某些旧版本或不常见的浏览器中可能无法正常工作。
2. 只通过FP和FCP来判断白屏可能不够全面，因为白屏可能涉及其他因素，如网络延迟、脚本执行等。因此，需要结合其他性能指标和实际场景来综合评估页面的加载情况。

基于视窗坐标采集法

基于视窗坐标采集元素，如果所有元素是包裹元素，则判断是白屏

1.页面中间取17个采样点（如下图），利用 elementsFromPoint api 获取该坐标点下的 HTML 元素

2、定义属于容器元素的集合，如 ['html', 'body', '#app', '#root']

3、判断17这个采样点是否在该容器集合中。说白了，就是判断采样点有没有内容；如果没有内容，该点的 dom 元素还是容器元素，若17个采样点都没有内容则算作白屏

const samplePoints = [   { x: 100, y: 100 }, // 示例采样点1   { x: 200, y: 200 }, // 示例采样点2   // 添加更多采样点... ];  const containerElements = ['html', 'body', '#app', '#root']; // 定义容器元素集合  function hasContentAtSamplePoints() {   for (const point of samplePoints) {     const elements = document.elementsFromPoint(point.x, point.y);     const hasContent = elements.some(element => !isContainerElement(element));     if (!hasContent) {       return false; // 该采样点没有内容     }   }   return true; // 所有采样点都有内容 }  function isContainerElement(element) {   // 判断元素是否属于容器元素集合的逻辑，例如根据元素的标签名或选择器进行判断   return containerElements.includes(element.tagName.toLowerCase()) || containerElements.includes(element.id); }  // 调用函数判断是否存在白屏状态 const isWhiteScreen = !hasContentAtSamplePoints();  if (isWhiteScreen) {   console.log('白屏状态'); } else {   console.log('非白屏状态'); }

优点

1. 快速确定白屏状态：通过采样点的方式，可以快速检查页面中是否存在白屏状态，而无需遍历整个页面。
2. 简单实现：实现起来相对简单，只需要使用 elementsFromPoint API 获取元素并进行判断。

缺点

1. 采样点数量和位置选择：在示例中，我们选择了固定数量和位置的采样点，但这可能并不能涵盖所有情况。正确选择采样点的数量和位置是必要的，以保证准确性和可靠性。
2. 容器元素定义的准确性：需要准确定义容器元素集合，以确保正确判断哪些元素属于容器元素。容器元素集合的定义可能会因页面结构变化而需要定期更新维护。
3. 采样点是否具有代表性：通过采样点判断白屏状态，需要确保采样点能够代表页面的关键区域和内容。如果关键区域未覆盖到，或者采样点无法代表页面的典型情况，可能会导致误判。

图像检测

基于图像像素色值对比方案，白色大于阈值判断为白屏

代码实现

function isWhiteScreen(imageData) {   const threshold = 200;   const pixels = imageData.data;   const length = pixels.length;    for (let i = 0; i < length; i += 4) {     const red = pixels[i];     const green = pixels[i + 1];     const blue = pixels[i + 2];     const alpha = pixels[i + 3];          // 将 RGB 转换为灰度值     const grayscale = (red + green + blue) / 3;          // 如果灰度值低于阈值，则返回 false     if (grayscale < threshold) {       return false;     }   }      // 如果所有像素的灰度值都高于阈值，则返回 true   return true; }  // 获取页面截图，可以通过其他方式获取 imageData const imageData = ...;  // 调用函数判断页面是否为白屏 const isWhite = isWhiteScreen(imageData);  if (isWhite) {   console.log("页面出现白屏"); } else {   console.log("页面正常"); }