如何安全在head中加载阻塞式A/B测试脚本，避免页面加载失败？

问题背景 #

我开发了一款A/B测试工具，要求站点所有者将脚本嵌入页面的<head>标签中。原本的脚本需要阻塞页面加载至执行完成——因为必须在<body>渲染前注入CSS、JS等影响页面外观的内容，所以无法使用defer属性。但我意识到，如果我的服务器出现宕机、响应缓慢或过载的情况，会直接导致客户的网站无法正常加载，这是绝对不能接受的问题，甚至让我考虑放弃这款工具。

站点所有者原本需要嵌入的脚本如下：

<script src="https://example.com/track.js?sid=4d95c9fz"></script>

脚本内部包含异步调用（比如数据库查询），这类操作同样不能耗时过久。

核心需求 #

我希望调整方案：给嵌入脚本添加async属性，同时修改脚本逻辑，实现二元执行逻辑：

• 要么在<body>开始渲染前，完成所有A/B测试相关内容的加载与注入
• 要么完全不执行任何注入操作，绝对不影响客户网站的正常加载

我可以修改嵌入代码以及track.ts（编译后为track.js）的逻辑，接受偶尔出现测试内容不注入的情况，但必须保证绝大多数场景下测试功能正常工作，且绝对保障客户网站的可用性。

可行解决方案 #

• 超时竞争机制：为脚本下载、执行过程以及所有异步API调用设置合理的超时阈值，一旦超时则立即终止所有注入操作
• DOM状态校验：添加async属性后，脚本执行时实时检查<body>是否尚未开始渲染，仅在满足条件时执行注入逻辑，否则直接放弃

修改后的示例脚本（track.js） #

// A/B测试追踪脚本示例
(async () => {
    const API_URL = 'https://api.example.com';
    const wid = 'some-website-uuid';
    // 可根据实际性能调整超时时间（建议1000-2000ms）
    const TIMEOUT_DURATION = 1500;
    // 标记是否终止注入操作
    let abortInjection = false;

    // 全局超时监听：到达时间后终止所有流程
    setTimeout(() => {
        abortInjection = true;
        console.log('脚本执行超时，放弃A/B测试注入');
    }, TIMEOUT_DURATION);

    // 校验body是否尚未渲染
    const canInject = () => {
        return !abortInjection && (document.readyState === 'loading' || !document.body);
    };

    // 注入加载样式（仅在允许时执行）
    const injectLoadingStyles = () => {
        if (!canInject()) return;
        const style = document.createElement('style');
        style.dataset.trackingLoading = '';
        style.textContent = '.tracking-loading { background: #fff; }';
        document.head.appendChild(style);
        if (document.body) document.body.classList.add('tracking-loading');
    };

    // 带超时的异步API请求
    const getHasTestSessionsRemaining = async () => {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_DURATION);
        
        try {
            const response = await fetch(
                `${API_URL}/tracking/has-test-sessions-remaining/${wid}`,
                { signal: controller.signal }
            );
            clearTimeout(timeoutId);
            if (!response.ok) throw new Error('API请求失败');
            const data = await response.json();
            return data.hasTestSessionsRemaining;
        } catch (err) {
            if (err.name === 'AbortError') {
                console.log('API请求超时，放弃A/B测试注入');
            } else {
                console.log('API请求失败，放弃A/B测试注入');
            }
            abortInjection = true;
            return false;
        }
    };

    // 主初始化逻辑
    const initialise = async () => {
        // 前置校验：若已终止或body已渲染，直接退出
        if (!canInject()) return;

        injectLoadingStyles();
        if (!canInject()) return;

        const hasSessions = await getHasTestSessionsRemaining();
        if (!canInject() || !hasSessions) {
            // 清理已注入的临时样式（如果存在）
            const styleEl = document.querySelector('style[data-tracking-loading]');
            if (styleEl) styleEl.remove();
            if (document.body) document.body.classList.remove('tracking-loading');
            console.log('无剩余测试会话或操作终止，放弃A/B测试注入');
            return;
        }

        // 执行变体内容注入（需每步校验状态）
        if (canInject()) {
            // ...此处添加变体CSS/JS注入、事件追踪等逻辑
            console.log('A/B测试追踪已成功初始化！');
        }
    };

    await initialise();
})();

调整后的嵌入代码 #

站点所有者需要嵌入的脚本更新为：

<script async src="https://example.com/track.js?sid=4d95c9fz"></script>

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