如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

我在CSS和JavaScript的加载顺序之间遇到了一点小问题.

基本上，正在发生的事情是，我有一个蓝色背景的div，我的css应用了一个"剪切"，对角切片.当页面第一次加载时(或CTRL + CTRL + R)，"cut"在很短但很明显的持续时间内不会出现，然后在JavaScript加载后出现.

我有这个CSS

.banner-bottom-fx 
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 0 solid transparent; /* changes via JavaScript */
    border-right: 0 solid white; /* changes via JavaScript */
}

上边框和右边框的值通过此脚本更改的位置

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';
}

document.addEventListener("DOMContentLoaded", function() 
{
    UpdateBannerFx();
    // Update border widths when window is resized
    window.addEventListener('resize', UpdateBannerFx);
});

我知道"闪烁"是由于我的CSS styles.css，它在我的头文件中加载，然后是JavaScript从main. js加载到页脚.有什么方法可以防止这种闪烁？