<h1>一、前 言</h1> 

最近在项目中遇到了页面加载速度优化的问题，为了提高秒开率等指标，我决定从eebi报表入手，分析一下当前项目的性能监控体系。

通过查看报表中的cost_time、is_first等字段，我开始了解项目的性能数据采集情况。为了更好地理解这些数据的含义，我深入研究了相关SDK的源码实现。

在分析过程中，我发现采集到的cost_time参数实际上就是FMP（First Meaningful Paint） 指标。于是我对FMP的算法实现进行了梳理，了解了它的计算逻辑。

本文将分享我在性能优化过程中的一些思考和发现，希望能对关注前端性能优化的同学有所帮助。

二、什么是FMP

FMP (First Meaningful Paint) 首次有意义绘制，是指页面首次绘制有意义内容的时间点。与 FCP (First Contentful Paint) 不同，FMP 更关注的是对用户有实际价值的内容，而不是任何内容的首次绘制。

三、FMP 计算原理

3.1核心思想

FMP 的核心思想是：通过分析视口内重要 DOM 元素的渲染时间，找到对用户最有意义的内容完成渲染的时间点。

3.2FMP的三种计算方式

• 新算法 FMP (specifiedValue) 基于用户指定的 DOM 元素计算通过fmpSelector配置指定元素计算指定元素的完整加载时间

• 传统算法 FMP (value) 基于视口内重要元素计算选择权重最高的元素取所有参考元素中最晚完成的时间

• P80 算法 FMP (p80Value) 基于 P80 百分位计算取排序后80%位置的时间更稳定的性能指标

3.3新算法vs传统算法

传统算法流程

• 遍历整个DOM树
• 计算每个元素的权重分数
• 选择多个重要元素
• 计算所有元素的加载时间
• 取最晚完成的时间作为FMP

新算法（指定元素算法）流程

核心思想： 直接指定一个关键 DOM 元素，计算该元素的完整加载时间作为FMP。

传统算法详细步骤

第一步：DOM元素选择

// 递归遍历 DOM 树，选择重要元素
selectMostImportantDOMs(dom: HTMLElement = document.body): void {
  const score = this.getWeightScore(dom);

  if (score > BODY_WEIGHT) {
    // 权重大于 body 权重，作为参考元素
    this.referDoms.push(dom);
  } else if (score >= this.highestWeightScore) {
    // 权重大于等于最高分数，作为重要元素
    this.importantDOMs.push(dom);
  }

  // 递归处理子元素
  for (let i = 0, l = dom.children.length; i < l; i++) {
    this.selectMostImportantDOMs(dom.children[i] as HTMLElement);
  }
}

第二步：权重计算

// 计算元素权重分数
getWeightScore(dom: Element) {
  // 获取元素在视口中的位置和大小
  const viewPortPos = dom.getBoundingClientRect();
  const screenHeight = this.getScreenHeight();

  // 计算元素在首屏中的可见面积
  const fpWidth = Math.min(viewPortPos.right, SCREEN_WIDTH) - Math.max(0, viewPortPos.left);
  const fpHeight = Math.min(viewPortPos.bottom, screenHeight) - Math.max(0, viewPortPos.top);

  // 权重 = 可见面积 × 元素类型权重
  return fpWidth * fpHeight * getDomWeight(dom);
}

权重计算公式：

权重分数 = 可见面积 × 元素类型权重

元素类型权重：

• OBJECT, EMBED, VIDEO: 最高权重
• SVG, IMG, CANVAS: 高权重
• 其他元素: 权重为 1

第三步：加载时间计算

getLoadingTime(dom:&nbsp;HTMLElement,&nbsp;resourceLoadingMap:&nbsp;Record<string, any>):&nbsp;number&nbsp;{
&nbsp;&nbsp;// 获取 DOM 标记时间
&nbsp;&nbsp;const&nbsp;baseTime =&nbsp;getMarkValueByDom(dom);

&nbsp;&nbsp;// 获取资源加载时间
&nbsp;&nbsp;let&nbsp;resourceTime =&nbsp;0;
&nbsp;&nbsp;if&nbsp;(RESOURCE_TAG_SET.indexOf(tagType) &gt;=&nbsp;0) {
&nbsp; &nbsp;&nbsp;// 处理图片、视频等资源
&nbsp; &nbsp;&nbsp;const&nbsp;resourceTiming = resourceLoadingMap[resourceName];
&nbsp; &nbsp; resourceTime = resourceTiming ? resourceTiming.responseEnd&nbsp;:&nbsp;0;
&nbsp; }

&nbsp;&nbsp;// 返回较大值（DOM 时间 vs 资源时间）
&nbsp;&nbsp;return&nbsp;Math.max(resourceTime, baseTime);
}

第四步：FMP值计算

calcValue(resourceLoadingMap: Record<string, any>, isSubPage: boolean =&nbsp;false): void {
&nbsp;&nbsp;// 构建参考元素列表（至少 3 个元素）
&nbsp;&nbsp;const&nbsp;referDoms =&nbsp;this.referDoms.length &gt;=&nbsp;3&nbsp;
&nbsp; &nbsp; ?&nbsp;this.referDoms&nbsp;
&nbsp; &nbsp; : [...this.referDoms, ...this.importantDOMs.slice(this.referDoms.length -&nbsp;3)];

&nbsp;&nbsp;// 计算每个元素的加载时间
&nbsp;&nbsp;const&nbsp;timings = referDoms.map(dom =&gt;&nbsp;this.getLoadingTime(dom, resourceLoadingMap));

&nbsp;&nbsp;// 排序时间数组
&nbsp;&nbsp;const&nbsp;sortedTimings = timings.sort((t1, t2) =&gt; t1 - t2);

&nbsp;&nbsp;// 计算最终值
&nbsp;&nbsp;const&nbsp;info = getMetricNumber(sortedTimings);
&nbsp;&nbsp;this.value = info.value; &nbsp; &nbsp; &nbsp; &nbsp;// 最后一个元素的时间（最晚完成）
&nbsp;&nbsp;this.p80Value = info.p80Value; &nbsp;// P80 百分位时间
}

新算法详细步骤

第一步：配置指定元素

// 通过全局配置指定 FMP 目标元素
const { fmpSelector = "" } = SingleGlobal?.getOptions?.();

配置示例：

// 初始化时配置
init({
  fmpSelector: '.main-content',  // 指定主要内容区域
  // 或者
  fmpSelector: '#hero-section',  // 指定首屏区域
  // 或者
  fmpSelector: '.product-list'   // 指定产品列表
});

第二步：查找指定元素

if (fmpSelector) {
  // 使用 querySelector 查找指定的 DOM 元素
  const $specifiedEl = document.querySelector(fmpSelector);

  if ($specifiedEl && $specifiedEl instanceof HTMLElement) {
    // 找到指定元素，进行后续计算
    this.specifiedDom = $specifiedEl;
  }
}

查找逻辑：

• 使用document.querySelector()查找元素
• 验证元素存在且为 HTMLElement 类型
• 保存元素引用到specifiedDom

第三步：计算指定元素的加载时间

// 计算指定元素的完整加载时间
this.specifiedValue = this.getLoadingTime(
  $specifiedEl,
  resourceLoadingMap
);

加载时间计算包含：

• DOM 标记时间

// 获取 DOM 元素的基础标记时间
const baseTime = getMarkValueByDom(dom);

• 资源加载时间

let resourceTime = 0;
// 处理直接资源（img, video, embed 等）
const tagType = dom.tagName.toUpperCase();
if (RESOURCE_TAG_SET.indexOf(tagType) >= 0) {
  const resourceName = normalizeResourceName((dom as any).src);
  const resourceTiming = resourceLoadingMap[resourceName];
  resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
}
// 处理背景图片
const bgImgUrl = getDomBgImg(dom);
if (isImageUrl(bgImgUrl)) {
  const resourceName = normalizeResourceName(bgImgUrl);
  const resourceTiming = resourceLoadingMap[resourceName];
  resourceTime = resourceTiming ? resourceTiming.responseEnd : 0;
}

• 综合时间计算

// 返回 DOM 时间和资源时间的较大值
return Math.max(resourceTime, baseTime);

第四步：FMP值确定

// 根据是否有指定值来决定使用哪个 FMP 值
if (specifiedValue === 0) {
  // 如果没有指定值，回退到传统算法
  fmp = isSubPage ? value - diffTime : value;
} else {
  // 如果有指定值，使用指定值
  fmp = isSubPage ? specifiedValue - diffTime : specifiedValue;
}

决策逻辑：

• 如果 specifiedValue > 0：使用指定元素的加载时间
• 如果 specifiedValue === 0：回退到传统算法

第五步：子页面时间调整

// 子页面的 FMP 值需要减去时间偏移
if (isSubPage) {
  fmp = specifiedValue - diffTime;
  // diffTime = startSubTime - initTime
}

新算法的优势

精确性更高

• 直接针对业务关键元素
• 避免权重计算的误差
• 更贴近业务需求

可控性强

• 开发者可以指定关键元素
• 可以根据业务场景调整
• 避免算法自动选择的偏差

计算简单

• 只需要计算一个元素
• 不需要复杂的权重计算
• 性能开销更小

业务导向

• 直接反映业务关键内容的加载时间
• 更符合用户体验评估需求
• 便于性能优化指导

3.4关键算法

P80 百分位计算

export function getMetricNumber(sortedTimings: number[]) {
  const value = sortedTimings[sortedTimings.length - 1];  // 最后一个（最晚）
  const p80Value = sortedTimings[Math.floor((sortedTimings.length - 1) * 0.8)];  // P80
  return { value, p80Value };
}

元素类型权重

const IMPORTANT_ELEMENT_WEIGHT_MAP = {
  SVG: IElementWeight.High,      // 高权重
  IMG: IElementWeight.High,      // 高权重
  CANVAS: IElementWeight.High,   // 高权重
  OBJECT: IElementWeight.Highest, // 最高权重
  EMBED: IElementWeight.Highest, // 最高权重
  VIDEO: IElementWeight.Highest   // 最高权重
};

四、时间标记机制

4.1DOM变化监听

// MutationObserver 监听 DOM 变化
private observer = new MutationObserver((mutations = []) => {
  const now = Date.now();
  this.handleChange(mutations, now);
});

4.2时间标记

// 为每个 DOM 变化创建性能标记
mark(count);  // 创建 performance.mark(`mutation_pc_${count}`)
// 为 DOM 元素设置标记
setDataAttr(elem, TAG_KEY, `${mutationCount}`);

4.3标记值获取

// 根据 DOM 元素获取标记时间
getMarkValueByDom(dom: HTMLElement) {
  const markValue = getDataAttr(dom, TAG_KEY);
  return getMarkValue(parseInt(markValue));
}

五、资源加载考虑

5.1资源类型识别

图片资源:  标签的 src属性

视频资源: 

背景图片: CSS background-image属性

嵌入资源: , 

                                                                                </div>

Source link