Время в верхней части экрана (FCP) и время на белом экране (FP)

оптимизация производительности

1. Аннотация

Недавно я обнаружил, что сделал так много оптимизаций на первом экране, я всегда считаю время белого экрана и время первого экрана вместе, то есть дом не отображается до открытия страницы, поэтому я классифицирую его как первое экранное время. С точки зрения времени, профессиональную точку здесь можно разделить на два этапа: первый экран и белый экран, В этой статье мы поговорим о разнице между ними и методе расчета.

2. Зачем нужно рассчитывать время первого экрана и время белого экрана?

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

3. Что такое первый экран и белый экран?

Поговорим о белом экране и первом экране.

1. Первая краска

Когда браузер начинает отображать страницу, срабатывает белый экран.В это время, если вы установите цвет фона, вы можете увидеть цвет фона страницы.

白屏示例图

Белый экран запускается перед загрузкой страницы, в течение которого пользователю не предоставляется никакой контент или информация. В то время как цвет фона заканчивается быстро, загрузка фактического контента и взаимодействий может занять много времени, поэтому длинный белый экран может заставить пользователей думать, что наша страница непригодна или плохо используется. Веб-страницы можно оптимизировать, правильно настроив структуру страницы.

2. Первая содержательная краска

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

首屏示例图

Над сгибом определяется пользовательский опыт веб-страницы, поскольку он отмечает, когда фактический контент загружается на страницу, а не только изменение состояния страницы. Поскольку основное внимание уделяется контенту, эта метрика может понять, когда пользователи получают потребляемую информацию, такую ​​как текст, визуальные эффекты и т. д., что более полезно, чем оценка взаимодействия с пользователем посредством фоновых изменений или изменений стиля.

В-четвертых, расчет времени первого экрана и времени белого экрана

1. Расчет времени белого экрана

Добавьте скрипт в начало тега head для записи времени начала белого экрана. Перед концом тега head добавьте скрипт для расчета времени белого экрана. Некоторые браузеры могут вызывать Performance API для получения времени окончания белого экрана, но некоторые его не поддерживают, поэтому методы расчета делятся на два типа:

// 支持 Performance API
firstPaint =  firstPaintEnd - performance.timing.navigationStart;
// 不支持 Performance API，在 page onload 中计算结束时间 pageStartTime
firstPaint =  firstPaintEnd - pageStartTime;

2. Расчет времени первого экрана

Для расчета времени первого экрана необходимо использовать две переменные: одна — это начало первого экрана, другая — конец первого экрана, а первый экран — это также время окончания белого экрана, поэтому его можно рассчитанный вышеуказанным методом, время окончания первого экрана должно быть страницей Первый экран рисуется, но это нелегко определить Мы знаем, что на странице ресурсы изображения часто загружаются после сравнения, поэтому мы можем посчитать, загружается изображение с самой медленной загрузкой на первом экране.После загрузки запишите время окончания.

// 计算首屏加载最慢的图片是否加载完成
const img = new Image();
img.src = src;
img.onload = () => {
  firstPaintContentEnd = Date.now();
};

const onload = () => {
  firstPaintContentStart = Date.now();
}

firstPaintContent = firstPaintContentEnd - firstPaintContentStart;

5. Должен ли я считать время над фолдом или время на белом экране?

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

  • Для простых веб-страниц с меньшей интерактивностью загрузка происходит относительно быстро, поэтому разница между ними незначительна, поэтому вы можете выбрать метод расчета в соответствии со своими предпочтениями.

  • Для больших и сложных страниц вы обнаружите, что из-за необходимости иметь дело с более сложными элементами время белого экрана и время в верхней части страницы сильно различаются. быть более полезным.

6. Опираясь на изложенную выше теорию, напишите небольшое демо для замены белого экрана

<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>demo</title>
    <style>
      .static {
        width: 100%;
        height: 100%;
        background: url(./img/skeleton.png) no-repeat;
        background-size: 100% 100%;
        animation: bg-animation 3s infinite;
      }
      @keyframes bg-animation {
        from {
          opacity: .075;
        }
        40% {
          opacity: .82;
        }
        60% {
          opacity: .165;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
    <script>
      startTime = Date.now();
    </script>
  </head>

  <body>
    <noscript>
      <strong
        >We're sorry but flash-experiment doesn't work properly without
        JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div class="static" id="static"></div>
    <div id="app"></div>
    <script>
      window.onload = () => {
        startEnd = Date.now();
        firstPaint = startEnd - startTime;
        console.log(firstPaint);
        removeDom();
      }
      function removeDom() {
        const div = document.querySelector('#static');
        document.querySelector('body').removeChild(div);
      }
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>

впервые опубликовано в личномблог, Пожалуйста, укажите источник

Категории