为什么每次添加或删除新的 class 时，通过 css 自定义 属性 分配的伪元素中的背景图像都会被提取和呈现？

Question

我在文档正文中有以下 html，CSS 和 Javascript 代码：

const bgContainer = document.querySelector('.bg-container');
bgContainer.addEventListener('mouseover', () => {
  bgContainer.classList.add('test');
});
bgContainer.addEventListener('mouseout', () => {
  bgContainer.classList.remove('test');
});

.bg-container {
  height: 50vh;
  position: relative;
  --background: url('https://specials-images.forbesimg.com/imageserve/513343414/960x0.jpg?fit=scale');
}

.bg-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
  background-size: cover;
  background-image: var(--background);
}

<div class="bg-container"></div>

每次我将鼠标悬停在背景容器内外时，都会获取并渲染背景图像，从而导致布局发生快速变化。为什么会发生这种情况，我该如何避免这种情况？

Answer 1

问题是由于我打开 Chrome 开发工具时禁用了缓存。启用缓存可解决问题。