如何让JavaScript在页面内容加载前执行以隐藏指定链接

我搭建了一个网站，设置为当访问者来自瑞士（CH）时，顶部的两个链接会隐藏。但目前链接隐藏速度过慢，会出现脚本执行的视觉过程。请问是否有办法让脚本在页面内容可见前执行，提前隐藏这些链接？

当前使用的脚本：

const url = (() => {
    const protocol = "https";
    const domain = "freeipapi.com";
    const endpoint = "api/json/";
    return `${protocol}://${domain}/${endpoint}`;
})();

const fetchLocationData = async () => {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();

        const countryCode = data.countryCode;

        // Introduce complex DOM manipulation
        const elements = [...document.querySelectorAll(`[data-hide-by-country="${countryCode}"]`)];
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            await new Promise(resolve => setTimeout(resolve, 100)); // Simulate delay
            element.style.display = "none";
        }

        return data;
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
        return null;
    }
}

(async () => {
    await fetchLocationData();
})();

核心解决方案：提前控制元素可见性 #

要避免视觉闪烁，关键是让页面在渲染时就知道是否要显示目标元素，而非渲染后再修改。以下是两种可行方案：

方案一：CSS预隐藏 + 异步脚本控制显示（推荐） #

这种方式既不阻塞页面加载，又能完全避免闪烁：

1. 在<head>中添加内联CSS，默认隐藏需要控制的元素：

<style>
[data-hide-by-country="CH"] {
    display: none !important;
}
</style>

2. 修改脚本逻辑，确认用户不是瑞士访客时再恢复元素显示，同时删除原脚本中模拟延迟的代码：

<script>
const url = `https://freeipapi.com/api/json/`;

const fetchLocationData = async () => {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        const countryCode = data.countryCode;

        // 仅对非瑞士访客显示元素
        if (countryCode !== 'CH') {
            document.querySelectorAll('[data-hide-by-country="CH"]').forEach(el => {
                el.style.display = ''; // 移除行内隐藏样式，恢复默认显示
            });
        }
        return data;
    } catch (error) {
        console.error('获取位置数据失败:', error);
        // 出错时默认显示元素（可根据业务需求调整）
        document.querySelectorAll('[data-hide-by-country="CH"]').forEach(el => el.style.display = '');
        return null;
    }
}

(async () => {
    await fetchLocationData();
})();
</script>

3. 将上述CSS和脚本都放在<head>标签内，页面加载时会先应用隐藏规则，等异步请求完成后再根据访客国家决定是否显示元素，全程无视觉闪烁。

方案二：同步请求直接生成CSS（不推荐） #

如果必须在页面渲染前完成判断，可以使用同步请求（但会阻塞页面加载，可能延长白屏时间）：

<script>
const url = `https://freeipapi.com/api/json/`;
let countryCode = '';

try {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, false); // 同步请求，会阻塞页面
    xhr.send();
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        countryCode = data.countryCode;
    }
} catch (error) {
    console.error('获取位置数据失败:', error);
}

// 直接在<head>中写入控制样式
if (countryCode === 'CH') {
    document.write(`<style>[data-hide-by-country="CH"] { display: none !important; }</style>`);
}
</script>

将该脚本放在<head>最前面，页面渲染时会直接应用对应的显示/隐藏规则，不会出现闪烁，但同步请求会影响页面加载性能，仅在极端场景使用。

额外优化点 #

• 彻底删除原脚本中的await new Promise(resolve => setTimeout(resolve, 100))代码，这是模拟延迟的测试代码，会拖慢实际隐藏速度。
• 可通过localStorage缓存访客国家信息，下次访问时直接读取缓存，无需重复请求API，进一步提升响应速度。

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