页面加载时间测试：如何设置网页固定延迟15秒加载？

有两种无需依赖外部资源的嵌入代码方案，均可稳定实现需求，仅需要添加到你需要延迟加载的那个页面的代码中即可：

方案1：同步阻塞加载（最适配「固定加载耗时15秒」要求） #

该方案直接阻塞浏览器的页面解析、资源加载流程，浏览器的DOMContentLoaded、load等加载完成事件都会严格延后15秒触发，和真实弱网慢加载的表现完全一致。
将以下代码插入到页面<head>标签的最顶部即可：

<script>
const delayStartTime = Date.now();
// 同步循环阻塞15秒，期间页面不会加载任何后续内容
while (Date.now() - delayStartTime < 15 * 1000) {}
</script>

方案2：非阻塞延迟渲染（适合需保留后台逻辑运行的场景） #

该方案不会阻塞JS主线程的其他任务，仅隐藏页面内容15秒后再展示，用户感知的加载时长为15秒，可自行搭配加载动画使用：

<script>
// 先隐藏全部页面内容
document.documentElement.style.visibility = 'hidden';
setTimeout(() => {
  // 15秒后展示内容，触发加载完成事件
  document.documentElement.style.visibility = 'visible';
  window.dispatchEvent(new Event('load'));
}, 15 * 1000);
</script>

注意事项 #

• 仅将上述代码添加到需要延迟加载的页面即可，另一个需要快速加载的页面不要添加任何相关代码
• 如果需要做性能测试、加载逻辑对比类的场景，优先选择方案1，表现更贴近真实慢加载场景

内容的提问来源于stack exchange，提问作者Daniel Gardner