JavaScript禁用提示渲染闪烁问题及优化方案咨询

方案1：使用原生<noscript>标签（推荐） #

这是浏览器原生支持的标准方案，仅在JS禁用时渲染标签内的内容，从根源避免闪烁问题。

修改后的代码：

<html>
<head>
</head>
<body class="fixed-left">
    <div id="totalBody">
        //Code here
    </div>

    <noscript>
        <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; display: flex; align-items: center; justify-content: center;">
            <h4>Error: please enable JavaScript</h4>
        </div>
    </noscript>
</body>
</html>

逻辑说明：默认直接显示页面主体内容，仅当JS禁用时，<noscript>内的警告层才会覆盖页面，完全不会出现闪烁。

方案2：CSS+内联脚本提前控制显示状态 #

如果不想使用<noscript>，可以通过初始样式标记+头部内联脚本的方式，提前切换显示状态：

<html>
<head>
    <style>
        #warningJS {
            width: 100%;
            height: 60vh;
            display: table;
        }
        /* JS禁用时的显示规则 */
        .no-js #warningJS { display: table; }
        .no-js #totalBody { display: none; }
        /* JS启用时的默认规则 */
        #warningJS { display: none; }
        #totalBody { display: block; }
    </style>
    <script>
        // 页面加载第一时间移除标记类，确保警告不显示
        document.documentElement.classList.remove('no-js');
    </script>
</head>
<body class="fixed-left no-js">
    <div id="warningJS">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td align="center" valign="middle">
                    <h4>Error: please enable JavaScript</h4>
                </td>
            </tr>
        </table>
    </div>

    <div id="totalBody">
        //Code here
    </div>
</body>
</html>

逻辑说明：初始给页面加no-js标记类，让警告显示、主体隐藏；头部内联脚本会在页面渲染前执行，移除标记类切换显示状态，几乎不会出现闪烁。

原代码闪烁原因 #

原代码中警告层默认display:block，主体默认隐藏，虽然JS会切换状态，但如果浏览器加载/执行JS有延迟（如网络慢、脚本阻塞），就会先渲染出警告内容，之后才被隐藏，从而产生闪烁。

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