Здравствуйте, мне семнадцать.
Небольшая начальная школа Мори, которая бросила вызов написать 100 ценных статей.
Ага, это второй. 😝
что такое производительность
В жизни мы часто используемпредставлениеЭто слово описывает, насколько хорош или плох объект.
Например, когда мы говорим, что автомобиль имеет хорошие характеристики, мы обычно имеем в виду, что автомобиль имеет быстрое ускорение, длительное время автономной работы, высокий коэффициент безопасности и хороший опыт вождения.
Итак, когда мы используем производительность для описания интернет-продукта, о чем мы говорим?
- Скорость загрузки выше сгиба
- Реагирование на действия пользователя
- Плавность действий пользователя
Представление
Когда мы описываем автомобиль, ускоряющийся быстро, насколько быстро это быстро? Некоторые говорят, что это выглядит быстро, но это правда, что о скорости ускорения можно судить по зрению. Но такие суждения слишком субъективны, варьируются от человека к человеку и не могут быть измерены. Поэтому отрасль сформулировала некоторые объективные, профессиональные и измеримые показатели. Например, скорость автомобиля описывается временем 100 метров. Точно так же существуют некоторые профессиональные показатели эффективности интернет-продуктов, с помощью которых можно четко представить эффективность продукта.
FCP(First Contentful Paint)
衡量页面开始加载到页面中第一个元素被渲染之间的时间。元素包含文本、图片、canvas等。
Получить метрики
истинное измерение
Самый простой способ черезweb_vitalsэта JS-библиотека.
import { getFCP } from 'web-vitals';
// 可以发送到监控系统
getFCP(console.log);
Конечно, вы также можетеPaint Timing API, студенты, которые заинтересованы, могут попробовать это.
лабораторное измерение
пройти черезpagespeed,lighthouseИли Chrome Devtools может легко просматривать FCP
LCP(Largest Contentful Paint)
衡量标准视口内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。
стандартный
Согласно предложению Google, чтобы предоставить пользователям лучший опыт работы с продуктом, LCP должен быть ниже 2,5 с.
Получить метрики
истинное измерение
Самый простой способ черезweb_vitalsэта JS-библиотека.
import { getLCP } from 'web-vitals';
// 可以发送到监控系统
getLCP(console.log);
Конечно, вы также можетеPaint Timing API, студенты, которые заинтересованы, могут попробовать это.
лабораторное измерение
-
web vitals chrome extension
Время LCP, отображаемое плагином, составляет около 1,71 с.
Время LCP, отображаемое производительностью, также составляет около 1,71 с.
-
Время LCP, показанное pageSpeed, составляет 4,4 с. (Лично невероятно)
FID(First Input Delay)
测量从用户第一次与页面交互的时间到浏览器实际上能够响应这种交互的时间。交互包括用户点击一个链接或者一个按钮等。
Как показано, между FCP и TTI есть три длинных задачи (желтые полосы). Если пользователь попытается взаимодействовать со страницей в это время (например, щелкнет ссылку), между получением клика и основным потоком будет задержка. быть в состоянии ответить. задержка. Это время задержки и есть FID.
стандартный
Согласно предложению Google, чтобы предоставить пользователям лучший опыт работы с продуктом, LCP должен быть ниже 100 мс.
Получить метрики
истинное измерение
Самый простой способ черезweb_vitalsэта JS-библиотека.
import { getFID } from 'web-vitals';
// 可以发送到监控系统
getFID(console.log);
Конечно, вы также можетеEvent Timing API, студенты, которые заинтересованы, могут попробовать это.
лабораторное измерение
-
web vitals chrome extension
Дисплеи модуля FID Time около 4,08 мс.
анализ данных
Распределение данных FID отличается от других показателей. Между FCP и TTI, сгенерированным FID, посмотрите на обе стороны с TTI в центре.Чем раньше взаимодействие происходит на левой стороне (например, маленькая буква A), тем дольше время FID, тем хуже взаимодействие с пользователем; правая сторона (например, маленькая B), время FID равно 0, опыт хороший.
Однако обычно мы уделяем больше внимания пользователям с плохим опытом (например, Xiao A), поэтому рекомендуется анализировать P95 и P98 данных отслеживания.
TTI(Time to Interactive)
测量页面所有资源加载成功并能够可靠地快速响应用户输入的时间。
Получить метрики
истинное измерение
Самый простой способ — через Performance API.
const timing = performance.timing
const TTITime = timing.loadEventEnd - timing.navigationStart
// 可以发送到监控系统
console.log(TTITime);
лабораторное измерение
- lightHouse
TBT (общее время блокировки)
衡量从FCP到TTI之间主线程被阻塞时长的总和。
Задачи, выполняемые основным потоком, делятся на длинные задачи и короткие задачи. Задача с указанной продолжительностью более 50 мс является длинной задачей, а задача менее 50 мс — короткой задачей. Время более 50 мс в длинной задаче считается «блокировкой», поэтому TBT представляет собой сумму времени блокировки во всех длинных задачах.
На картинке выше есть три длинных задачи и две короткие задачи.
Длительность TBT составляет 200+40+105=345 мс.
Получить метрики
лабораторное измерение
实际测量：线上环境用户实际操作产生的数据。
实验室测量：开发人员通过工具测量的数据。
Выше приведены основные показатели, на которые необходимо обращать внимание при проведении исследований.
В следующей статье мы начинаем анализировать производительность продуктов, за которые мы отвечаем?
Мне семнадцать, увидимся в следующий раз.
Добро пожаловать, чтобы следоватьБлог семнадцатиИ публичный номер "Техническая жизнь Seventeen"