可在Tab标签页标题中动态显示加载耗时：1.打开Tab前记录开始时间并缓存；2.iframe加载完成后计算耗时，通过DOM操作或postMessage通知父页更新标题；3.支持跨域、过渡态提示及异常处理。
可以在 Tab 标签页标题中动态显示当前页面的加载耗时，核心思路是：在页面（iframe 或内嵌内容）加载完成时，计算耗时，并通过 layui.element 的 tabChange 或直接操作 DOM 更新对应 Tab 项的标题文本。
1. 记录页面开始加载时间
在打开新 Tab 之前（比如点击菜单触发 element.tabAdd 前），记录当前时间戳，保存到该 Tab 的标识（如 id 或 lay-id）对应的缓存中：
// 假设用 lay-id 作为唯一标识
const tabId = 'user-list';
const startTime = Date.now();
<p>// 缓存起来，例如挂到全局对象或用 Map 管理
window.tabLoadStart = window.tabLoadStart || new Map();
window.tabLoadStart.set(tabId, startTime);</p><p>// 添加 Tab（假设 content 是 iframe）
element.tabAdd('demo', {
title: <code>用户列表（加载中...）</code>,
content: '<iframe src="user.html" frameborder="0"></iframe>',
id: tabId
});
2. 在目标页面（iframe）中通知加载完成并计算耗时
在 user.html（即 Tab 加载的页面）中，通过 window.parent 向父页传递加载完成信号，并附带当前时间：
// user.html 内部（确保 DOM 和资源已就绪）
window.addEventListener('load', function() {
const endTime = Date.now();
const tabId = 'user-list'; // 需与父页一致，可通过 URL 参数、postMessage 或约定方式传入
const startTime = (window.parent.tabLoadStart || new Map()).get(tabId) || endTime;
<p>const duration = endTime - startTime;
const durationText = <code>${duration}ms</code>;</p><p>// 通知父页更新 Tab 标题
if (window.parent.layui && window.parent.layui.element) {
const $tabTitle = window.parent.$(<code>.layui-tab-title li[lay-id="${tabId}"]</code>);
if ($tabTitle.length) {
$tabTitle.html(<code>用户列表（${durationText}）</code>);
window.parent.layui.element.render('tab'); // 触发重新渲染（必要时）
}
}
});
3. 更健壮的做法：用 postMessage 跨域兼容
若 iframe 页面与主站跨域，不能直接访问 window.parent，需改用 postMessage：
- 主页面监听
message，收到后根据data.tabId查找并更新对应 Tab 标题 - iframe 页面在
load后调用parent.postMessage({ type: 'tabLoaded', tabId, duration }, '*') - 主页面需提前缓存
startTime并建立tabId → start time映射
4. 可选增强：显示“加载中…”过渡态 + 防止重复更新
避免多次 load 触发导致标题错乱，可加锁或只更新一次：
- 添加
data-loaded="true"属性标记已更新 - Tab 标题初始设为
用户列表（加载中...），成功后替换为耗时，失败则显示（加载失败） - 配合
iframe.onload和iframe.onerror处理异常情况
