Предотвращение / удаление мерцания при загрузке первой страницы

Question

Я работал над созданным статическим веб-сайтом с помощью NuxtJS, где пользователь может выбрать, использовать ли темный режим или просто использовать селектор медиа-запросов CSS по умолчанию. Код для этого следующий:

<template>
  <div class="container">
    <vertical-nav />
    <!-- wrapper for content; when state is updated, only then is the class added -->
    <div id="content-wrapper" :class="colorScheme !== null ? colorScheme : ''">
      <nuxt />
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import VerticalNav from '@/components/VerticalNav.vue';

export default {
  components: {
    VerticalNav,
  },
  // Vuex state that stores ui preference, by default null
  computed: mapState(['colorScheme']),
  mounted() {
    // Vuex mutation to set initial state
    this.getPreferredColorScheme();
  },
  methods: mapMutations(['getPreferredColorScheme']),
};

Я заметил, что при загрузке первой страницы веб-страница будет мерцать / мигать, как показано на этой записи экрана. Обратите внимание, что это с отключенным кешем.

Дальнейшее расследование показывает, что это происходит только тогда, когда пользователь посещает сайт впервые, поскольку последующие посещения / обновления, похоже, не вызывают такого поведения. Я подозреваю, что это может быть связано с загрузкой в шрифтов и впоследствии перекомпоновки в соответствии с предложением этой воды осенью. Обратите внимание, чтоdisplay=swapздесь не используется и нежелательно. Кроме того, из данных профилировщика Chrome кажется, что вокруг мерцания браузер решает пересчитать стили и разметку всех узлов на странице (соответствующее время с 4,26 секунды до 4,32 секунды).

Я спрашиваю, это вспышка / мерцание невидимого текста, вызванная тем, как я добавляю дополнительный класс? Если проблема не в привязке класса, в чем причина и могу ли я что-нибудь с этим поделать?

РЕДАКТИРОВАТЬ: при дальнейшем осмотре такое поведение, похоже, происходит только в Chrome и может быть связано с имеющимися у меня собственными шрифтами. Firefox и Safari не поддерживают такую ​​перерисовку.

Answer 1

Это может быть много чего, было бы полезнее, если бы вы открыли инспектор, чтобы показать, что что-то не загружается.

При этом мерцание вызвано не загрузкой страницы, а вашим переключателем "Ночной режим", который переключается после загрузки страницы.

Если вы хотите, чтобы страница загружалась в "ночном режиме", возможно, подумайте о том, чтобы загрузить ее таким образом, а не запускать ее при загрузке.