ESP8266网页在Firefox刷新时抖动问题求助

问题背景 #

使用ESP8266以太网盾开发传感器数据展示网页，在线编辑器中运行正常，但部署后在Firefox浏览器刷新时频繁出现页面抖动（Edge无此问题）。尝试过position: absolute定位但需要内容默认居中，寻求稳定的解决方法。

核心原因分析 #

1. 全页刷新触发重排：meta http-equiv='refresh'触发全页重载时，Firefox渲染引擎会先渲染空页面，再逐步加载元素，引发布局跳动
2. 图片加载延迟：外部图片加载前后尺寸变化，带动容器整体位移
3. Flex布局渲染差异：Firefox在处理100vh高度的flex容器时，存在短暂的计算偏差

可行解决方案 #

方案1：固定容器与图片的最小尺寸 #

给容器和图片设置明确的最小尺寸，避免内容加载过程中布局突变：

.container {
    background-color: #EFEFEF;
    padding: 25px;
    border-radius: 10px;
    /* 添加最小宽高，防止加载时收缩 */
    min-width: 300px;
    min-height: 500px;
}
.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 80%;
    /* 给图片设置固定占位尺寸 */
    min-height: 100px;
    /* 灰色占位背景 */
    background-color: #ccc;
}

方案2：用JS异步刷新替代全页重载 #

取消<meta http-equiv='refresh' content='5'>，改用JavaScript定时更新内容，避免全页刷新的抖动：

<!-- 移除原有的meta refresh标签 -->
<script>
// 每隔5秒更新传感器数据
setInterval(() => {
    // 替换为ESP8266的数据接口
    fetch('/sensor-data')
        .then(res => res.text())
        .then(data => {
            // 根据实际数据结构更新页面内容，示例为替换表格内容
            document.querySelectorAll('table tbody').forEach(tbody => {
                tbody.innerHTML = data;
            });
        })
        .catch(err => console.log('更新失败:', err));
}, 5000);
</script>

方案3：优化Flex布局稳定性 #

调整body的布局属性，添加渲染优化参数：

body {
    background-color: #044a88;
    display: flex;
    font-family: 'Trebuchet MS', sans-serif;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    /* 防止滚动条闪烁 */
    overflow: hidden;
    /* 告诉浏览器提前优化渲染 */
    will-change: transform;
}

方案4：嵌入本地图片资源 #

如果图片固定，将其转为Base64编码嵌入HTML，避免外部加载延迟：

<!-- 替换原img标签为Base64格式（示例，实际替换为你的图片编码） -->
<img class='logo' src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/..." alt="Logo">

推荐组合方案 #

优先采用方案2（JS异步刷新） + 方案1（固定最小尺寸），既能避免全页刷新的抖动，又能防止内容加载时的布局突变，同时保留页面居中需求。

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