如何避免页面首次加载时JS修改CSS引发的闪烁问题

给你几个实用的解决办法，从根源上消除或缓解闪烁：

1. 用CSS视口单位替代JS初始设置 #

你的边框宽度完全基于视口宽度计算，直接用CSS的vw单位就能实现初始效果，不需要等JS加载：

修改CSS：

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: calc(100vw / 30) solid transparent;
    border-right: 100vw solid white;
}

JS只保留窗口 resize 监听即可（vw会自动跟随视口变化，甚至可以去掉resize监听，除非你后续有其他动态逻辑）：

function UpdateBannerFx()
{
    const banner = document.querySelector('.banner-bottom-fx');
    const borderRightWidth = window.innerWidth;
    const borderTopWidth = borderRightWidth / 30;

    banner.style.borderRightWidth = borderRightWidth + 'px';
    banner.style.borderTopWidth = borderTopWidth + 'px';
}

window.addEventListener('resize', UpdateBannerFx);

这个方案最彻底，页面加载瞬间就有斜切效果，完全消除闪烁。

2. 把JS内联放在目标元素后面 #

将脚本直接写在.banner-bottom-fx元素的下方，元素一渲染完成就执行脚本，不需要等整个DOM加载完毕：

<div class="banner-bottom-fx"></div>
<script>
function UpdateBannerFx()
{
    const banner = document.querySelector('.banner-bottom-fx');
    const borderRightWidth = window.innerWidth;
    const borderTopWidth = borderRightWidth / 30;

    banner.style.borderRightWidth = borderRightWidth + 'px';
    banner.style.borderTopWidth = borderTopWidth + 'px';
}

UpdateBannerFx();
window.addEventListener('resize', UpdateBannerFx);
</script>

这种方式能把闪烁时间压缩到几乎不可察觉。

3. 给CSS设置初始占位样式 #

如果不想改动JS结构，可以在CSS里先设置一个接近常用屏幕尺寸的初始边框值，让页面加载时先显示近似效果，JS加载后再修正为精确值：

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    /* 基于1920px宽屏幕的初始值，可根据你的用户群体调整 */
    border-top: 64px solid transparent;
    border-right: 1920px solid white;
}

初始效果和最终效果差异极小，视觉上基本看不到闪烁。

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