Это седьмая статья в этой серии, последняя:Стандарты веб-производительности
Следующий предварительный просмотр: сетевая загрузка в процессе рендеринга страницы
Как измерить производительность веб-страницы всегда было сложной проблемой для веб-разработчиков.
Первоначально мы использовали Time to First Byte, DomContentLoaded и Load для измерения хода загрузки документа, но они не отражают непосредственно визуальное восприятие пользователя.
Чтобы измерить визуальный опыт пользователя, в веб-стандартах определены некоторые показатели производительности, и эти показатели производительности стандартизированы и реализованы основными браузерами, такими как First Paint и First Contentful Paint. Есть также некоторые показатели производительности, предложенные Группой сообщества веб-инкубатора (WICG), такие как самая большая содержательная отрисовка, время до взаимодействия, первая задержка ввода, первый простой ЦП. Кроме того, есть First Meaningful Paint и Speed Index, предложенные Google, и First Screen Paint, предложенные Baidu.
Эти индикаторы не связаны между собой, но постоянно развиваются в целях, ориентированных на пользователя, некоторые больше не рекомендуются, некоторые реализованы с помощью различных инструментов тестирования, а некоторые могут использоваться в качестве общих стандартов API, предоставляемые основными браузерами, которые можно использовать для измерения в производственных условиях.
Я разделил эти метрики на три категории: связанные с загрузкой документов, связанные с представлением контента и связанные с интерактивным откликом, и на основе этих метрик я выделил наиболее важные основные метрики для пользователей.
Источники, определения и методы измерения этих показателей описаны ниже.
🐹 Загрузка документов, связанных
Временная шкала процесса загрузки документа показана на рисунке Здесь в основном представлены три показателя: TTFB, DCL и Время загрузки.
Время до первого байта (TTFB)
Время с момента, когда браузер запрашивает страницу, до момента, когда он получает первый байт, включая запросы DNS, соединения TCP и соединения SSL.
DomContentLoaded (DCL)
Когда срабатывает событие DomContentLoaded. Когда **HTMLПосле того, как документ полностью загружен и проанализирован, DOMContentLoaded** События запускаются без ожидания загрузки таблиц стилей, изображений и подкадров.
Нагрузка(л)
Время, когда срабатывает событие onLoad. Событие onLoad запускается только после загрузки всех ресурсов на странице (таких как изображения, CSS).
🦊 Представление контента, связанное с
Такие метрики, как Load или DOMContentLoaded, не отражают визуальный опыт пользователя, поскольку их момент времени не обязательно соответствует моменту времени, когда пользователь видит содержимое на экране.
Нам нужны некоторые метрики, которые могут отражать скорость, с которой отображается содержимое страницы.
Первая краска (FP)
Стандартизирован рабочей группой Web Performance в W3C. Paint Timingпредложено в.
определение
Загрузить в браузер с самого началапервый нарисованный пиксельВремя отображения, когда страница впервые визуально меняется на экране. Но это изменение может быть простым обновлением цвета фона или ненавязчивым контентом, оно не указывает на целостность контента страницы и может сообщать о времени, когда видимый контент не отображался.
Примечание: First Paint не включает фоновую краску по умолчанию, но включает фоновую краску не по умолчанию.
Это первый критический момент, когда разработчик заботится о загрузке страницы — когда браузер начинает рендерить страницу. **
Метод измерения
function getFirstPaint() {
let firstPaints = {};
if (typeof performance.getEntriesByType === 'function') {
let performanceEntries = performance.getEntriesByType('paint') || [];
performanceEntries.forEach((entry) => {
if (entry.name === 'first-paint') {
firstPaints.firstPaint = entry.startTime;
} else if (entry.name === 'first-contentful-paint') {
firstPaints.firstContentfulPaint = entry.startTime;
}
});
} else {
if (chrome && chrome.loadTimes) {
let loadTimes = window.chrome.loadTimes();
let {firstPaintTime, startLoadTime} = loadTimes;
firstPaints.firstPaint = (firstPaintTime - startLoadTime) * 1000;
} else if (performance.timing && typeof performance.timing.msFirstPaint === 'number') {
let {msFirstPaint, navigationStart} = performance.timing;
firstPaints.firstPaint = msFirstPaint - navigationStart;
}
}
return firstPaints;
}
Первая содержательная краска (FCP)
Стандартизирован рабочей группой Web Performance в W3C. Paint Timingпредложено в.
определение
браузерПервый контент рисования из DOM, содержимое должно быть текстом, изображениями (включая фоновые), небелым холстом или SVG, а также текстом с загрузкой веб-шрифтов.
Это первый раз, когда пользователи видят содержимое страницы, но само наличие контента не означает, что это полезный контент (например, заголовки, панели навигации и т. д.), а также не означает, что пользователи могут потреблять контент.
Кроме того, загрузка шрифтов является важным фактором в FCP, шрифты обычно представляют собой большие файлы, загрузка которых занимает некоторое время, а некоторые браузеры скрывают текст до тех пор, пока шрифты не будут загружены. Чтобы текст оставался видимым во время загрузки веб-шрифта, можно временно отобразить системный шрифт.
Следующее,font-display: swap; Текст, указывающий браузеру использовать этот шрифт, должен немедленно отображаться с использованием системного шрифта. После установки пользовательского шрифта системный шрифт будет заменен.
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap;
}
Метод измерения
Посмотрите, как рассчитывается первая краска.
Первая значимая краска (FMP)
Google вTime to First Meaningful Paint: a layout-based approach предложено в.
определение
страницыВремя отображения основного контента на экране, что является лучшим показателем воспринимаемого пользователем опыта загрузки, но все же не идеально.
Определение основного контента варьируется от страницы к странице, например, для сообщений в блоге основным содержанием является заголовок и аннотация, для страниц поиска основным содержанием являются результаты поиска, а для страниц электронной коммерции основным содержанием являются изображения. содержание.
Так что используйтеМаксимальное количество загруженных макетов и веб-шрифтовМомент используется как приблизительное время для отрисовки основного контента.
Метод измерения
По мере загрузки и анализа веб-страниц объекты макета постепенно добавляются в дерево макетов. Для момента времени, когда основной контент отображается на экране,Оценивается способом подсчета количества объектов макетаиз,алгоритмМаксимальный момент (количество объектов макета, добавленных в дерево макета / max(1, высота страницы / высота экрана)) используется в качестве точки времени FMP.Если шрифт загружается во время макета, время изменения макета будет отложено. пока шрифт не отобразится.Используйте это, чтобы угадать, когда основное содержимое страницы отображается на экране.
Этот метод расчета слишком чувствителен к небольшим различиям в загрузке страницы и может легко привести к противоречивым результатам. Кроме того, определение метрики зависит от деталей реализации конкретного браузера, что означает, что ее нельзя стандартизировать и реализовать во всех веб-браузерах.
FMP устарел в Lighthouse 6.0, рекомендуется использоватьLargest Contentful Paint заменять.
Самая большая содержательная краска (LCP)
группой сообщества веб-инкубатора (WICG) по адресуLargest Contentful Paint APIявляется нестандартизированной мерой веб-производительности.
определение
Отображается самый большой элемент контента в видимой области.Время до экрана, чтобы оценить, как долго основной контент страницы виден пользователю.
Для расчета максимального элемента содержимого см.Largest Contentful PaintСпецификация, эта спецификация предоставляет API для получения времени LCP (если браузер реализует этот API, то это делает браузер Chrome).
Метод измерения
try {
const po = new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
const lastEntry = entries[entries.length - 1];
// 优先取 renderTime，如果没有则取 loadTime
let lcp = lastEntry.renderTime || lastEntry.loadTime;
window.perfData.push({
'LCP', lcp
});
});
po.observe({type: 'largest-contentful-paint'});
} catch (e) {
// Do nothing
}
Индекс скорости (СИ)
Google вwebpagetest.orgпредложено в.
определение
Это мера того, насколько быстро контент в видимой области страницы заполняется, и может быть измерена путем расчета среднего времени, в течение которого отображается контент в видимой области страницы.
Метод измерения
Сначала снимите видео загрузки страницы в браузере, а затем посчитайте процент заполнения страницы для каждого 100-миллисекундного интервала скриншота страницы, можно получить такую кривую (вертикальная ось — завершение заполнения контента в видимом площадь страницы, а по оси абсцисс время).
И пример 1, и пример 2 на рисунке заполнены за 10 секунд, но пример 1 заполнен на 80% за 2 секунды, а пример 2 заполнен только на 80% за 8 секунд.
Размер заштрихованной области на рисунке (т. е. часть над кривой процентного заполнения время-контент) может указывать скорость заполнения содержимого страницы в видимой области.Чем меньше область, тем выше скорость заполнения.
Если он измеряется во времени, его можно рассчитать следующим образом, чтобы представить среднее время, в течение которого отображается контент в видимой области страницы.
Example 1：Speed Index = (80% * 2) + （20% * 10）= 3.6
Example 2：Speed Index = (80% * 8) + （20% * 10）= 8.4
Это среднее время можно использовать для сравнения производительности полного представления содержимого в верхней части экрана пользователю, но оно не рассчитывает момент, когда содержимое в верхней части экрана полностью представлено, и его нельзя учитывать. как показатель, измеряемый временем.
Первая экранная краска (FSP)
Предложено Baidu в стандарте W3CFirst Screen Paintпредложено в.
определение
С момента начала загрузки страницы и до момента, когда весь контент выше сгиба будет отрисован, пользователь может видеть все содержимое выше сгиба.
Если LCP — это наиболее приблизительное время, когда пользователь может увидеть эффективный контент, то в момент времени FSP пользователь видел весь контент в видимой области, что можно назвать наиболее подходящим индикатором для измерения пользовательского контента. визуальный опыт.
Кроме того, основная проблема, влияющая на полноту рендеринга содержимого верхней части экрана, заключается в том, чтобы избежать рендеринга горизонтальных и вертикальных элементов за пределами экрана, которые блокируют рендеринг содержимого верхней части экрана. Например, в процессе разработки, если код списка содержимого размещен перед кодом навигации, браузер сначала отобразит содержимое списка, а затем визуализирует навигацию.Если содержимое списка за пределами экрана очень длинное, это серьезно повлияет на время, необходимое для отображения навигации внутри сгиба на экране.
Метод измерения
В настоящее время нет четкого официального стандарта для расчета этого показателя.Для страниц Weex Alibaba собирает стабильное время последнего просмотра на первом экране как время рендеринга всего контента на первом экране.
🐷 Интерактивная отзывчивость
Время до интерактивности (TTI)
группой сообщества веб-инкубатора (WICG) по адресуTime To InteractiveОн предлагается в , который является нестандартизированной метрикой производительности.
определение
Указывает, что страница впервыеполностью интерактивныйНа данный момент браузер может постоянно реагировать на ввод пользователя. Момент времени, когда достигается полностью интерактивное состояние, — это когда завершается последняя длинная задача (Long Task), а сеть и основной поток простаивают в течение следующих 5 секунд.
С точки зрения определения, китайское название больше подходит для устойчивого времени взаимодействия или плавного времени взаимодействия.
Длинные задачи — это задачи, выполнение которых занимает более 50 мс.
Метод измерения
Расчет TTI основан на наблюдении за тем, простаивают ли длинная задача и основной поток, чего в настоящее время нет в спецификации стандарта веб-производительности, но оно реализовано в некоторых инструментах мониторинга производительности.
Кроме того, Google предоставляет API для сбора TTI:tti-polyfill
const ttiPolyfill = require('tti-polyfill');
ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
window.perfData.push({
'tti': tti
});
});
Первый простой ЦП (FCI)
Индикатор First Interactive был предложен группой сообщества Network Incubator и использовался в различных инструментах. Эта метрика называется First CPU Idle (FCI) в LightHouse.
определение
В первый раз страница может реагировать на ввод пользователя.
И FCI, и TTI — это время, когда страница может реагировать на ввод пользователя. FCI происходит вПользователь может начатьПри взаимодействии со страницей TTI возникает, когдаПользователи полностью способны (устойчиво)при взаимодействии со страницей. Как определить момент первого интерактивного и плавного взаимодействия можно использовать в GoogleFirst Interactive and Consistently InteractiveРегистрироваться.
Метод измерения
Это не метрика в веб-стандарте, метод расчета этой метрики реализован в Lighthouse.
Но в Lighthouse 6.0 FCI объявлен устаревшим, потому что, хотя FCI обеспечивает более содержательную меру, чем TTI, разница недостаточна, чтобы оправдать сохранение двух одинаковых мер. Рекомендуется рассмотреть возможность использованияTotal Blocking Timeи ТТИ.
Задержка первого ввода (FID)
Эта метрика была предложена группой сообщества веб-инкубатора (WICG) и использовалась в различных инструментах.
определение
Время от первого взаимодействия пользователя со страницей (например, щелчок по ссылке, нажатие кнопки и т. д.) до момента, когда браузер фактически может реагировать на это взаимодействие.
Задержка ввода возникает из-за того, что основной поток браузера занят другими делами, поэтому он не может ответить пользователю. Распространенной причиной этого является то, что браузер занят синтаксическим анализом и выполнением больших файлов JavaScript, загруженных приложением.
Первая задержка ввода обычно возникает между первой отрисовкой содержимого (FCP) и временем взаимодействия (TTI), потому что страница уже отобразила некоторый контент, но еще не может надежно взаимодействовать.
Если пользователь взаимодействует со страницей, когда основной поток максимально загружен, задержка ответа будет больше, а если взаимодействие со страницей происходит, когда основной поток бездействует, браузер может ответить немедленно. Таким образом, для индикатора FID нам нужно сосредоточиться на общем распределении значений FID, а не на отдельном значении.
Метод измерения
Разработано группой WICG.Event TimingAPI для сбора FID указан в спецификации (не веб-стандарт), и возможность его использования в продакшене зависит от того, реализуют ли его основные браузеры.
Кроме того, Google предоставляет JS-библиотеку.GitHub.com/Google CHROM…Используется для измерения FID.
Кадров в секунду (FPS)
определение
Частота кадров — это скорость, с которой видеоустройство создает изображения (или кадры), используяКоличество кадров в секунду, которые можно перерисовать(Кадры в секунду, FPS) представление.
Перерисовка может потребовать пересчета стиля, верстки и отрисовки.Если время отрисовки каждого кадра на экран больше 16,7 мс, то количество отрисовок кадров в секунду будет меньше 60 кадров, и человеческий глаз может почувствовать, что страница застревает, поэтому FPS Это очень важный показатель для измерения плавности приложения.60 кадров в секунду - это цель плавности страницы, которая может обеспечить бюджет времени 16,7 мс для каждого рисования.
Поскольку частота кадров связана с перерисовкой страницы, мы можем задать два вопроса:
- При каких обстоятельствах будет срабатывать перекраска?
FPS чаще всего можно увидеть в фильмах и играх, но теперь он широко используется в качестве показателя для измерения производительности веб-сайтов и веб-приложений.
В веб-производительности FPS чаще всего используется для измерения производительности анимации: если FPS слишком низкий, анимация будет заикаться.
FPS также можно использовать в качестве общего показателя скорости отклика страницы при взаимодействии с ней пользователя. Например, если наведение курсора мыши на элемент страницы запускает выполнение JavaScript для обновления страницы, это может вызвать перекомпоновку и перерисовку, которые необходимо выполнять во фреймах, и если браузеру требуется слишком много времени для обработки фрейма, быть заморозить феномен Дейтона.
Другой пример: если прокрутка страницы вызывает множество сложных обновлений страницы, а браузер не может поддерживать приемлемую частоту кадров, прокрутка будет медленной или прерывистой.
- Как сократить время перекраски?
Для перерисовки на экран может потребоваться начать с построения DOM-дерева, пересчета стилей, макетов, отрисовки и т. д. Нам нужно максимально избегать запуска этих процессов. Например, использование CSS для изменения свойства непрозрачности не приведет к повторному макет, который может сократить время рисования.
Поэтому при реализации анимации рекомендуется использовать низкопроизводительные свойства CSS вместо JavaScript для установки элементов.
Метод измерения
Чтобы узнать о методе измерения FPS, обратитесь к этой статье технического отдела Ali Tao.Оптимизация производительности беспроводной сети: тест FPS. Лучший упомянутый способ - использоватьFrame Timing API Измерение FPS реализуется браузером, но, поскольку спецификация определения этого API все еще находится в стадии разработки, реализация браузера отсутствует. В настоящее время большинство приобретений онлайн-систем используют requestAnimationFrame для измерения FPS.
Прежде чем страница будет перерисована, браузер выполнит функцию ввода, переданную в requestAnimationFrame, которая обычно используется для достижения согласованной покадровой анимации. Но мы можем получить частоту отрисовки страницы вычислением в этой функции, так что можно вычислить FPS.
Пример выглядит следующим образом:
// 代码示例来自：《无线性能优化：FPS 测试》
var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
var now = performance.now();
var fs = (now - lastFameTime);
lastFameTime = now;
var fps = Math.round(1000/fs);
frame++;
if (now > 1000 + lastTime){
var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
frame = 0;
lastTime = now;
};
window.requestAnimationFrame(loop);
}
🎯 Основные показатели
При открытии страницы пользователи могут видеть такой процесс изменения: белый экран → основное изображение → появляется некоторый контент → появляется весь контент над сгибом, но картинка все еще загружается → появляется весь контент над сгибом, а картинка был загружен. .
Как правило, когда большая часть контента представлена на первом экране, пользователь начинает взаимодействовать со страницей, например, нажимая, проводя пальцем вниз и т. д.
Если эти изменения обрабатываются до того, как появится весь контент на первом экране, если время будет долгим, пользовательский опыт будет очень плохим. Нам нужно оптимизировать эти процессы, чтобы контент в верхней части экрана отображался как можно скорее.Конечно, пользовательский опыт без этих процессов, показывающих контент непосредственно в верхней части экрана, является лучшим.
Мы можем измерить эти ключевые точки изменения с помощью нескольких основных показателей, которые могут быть аппроксимированы некоторыми показателями производительности, которые мы представили ранее.
| Основные показатели взаимодействия с пользователем | определение | Метрики |
|---|---|---|
| время белого экрана | Когда на странице появляется контент, это белый экран, прежде чем контент исчезнет. | ФП или ФКП |
| выше сгиба | Время, когда содержимое видимой области было полностью отрисовано | FSP |
| интерактивное время | Первый раз, когда пользователь может взаимодействовать со страницей | FCI |
| гладкое время взаимодействия | Первый раз пользователь может продолжать взаимодействовать со страницей | TTI |
Что касается английских названий интерактивного времени и гладкого интерактивного времени, я думаю, что Time To First Interactive (TTFI) и Time To Consistently Interactive (TTCI) являются более подходящими. Определения FCI и TTI - это время первого взаимодействия и время устойчивого взаимодействия, но английские названия не так легко понять.
Но в GoogleFirst Interactive and First Consistently InteractiveСтатья начинается с акцента на: 👉Обновление [25 июля 2018 г.]: мы переименовали эти показатели, чтобы упростить обмен сообщениями с внешними разработчиками. Первый интерактив теперь называется первым бездействием ЦП, а время до последовательного взаимодействия называется временем до взаимодействия (TTI). В этой статье по-прежнему используется старое название.
В настоящее время не существует единого метода измерения и сбора FSP и FCI в онлайн-производственной среде, но мы можем измерить его в офлайн-лабораторной среде. Общая практика заключается в том, чтобы посетить страницу, щелкнуть или провести пальцем по странице, когда страница открыта, и записать видео этого процесса и разрезать видео на n изображений в секунду (например, 10 изображений, 1 кадр каждые 100 мс). ) картинки, Затем используйте алгоритм для расчета изменения содержимого страницы, например:
- 1. Используйте алгоритм OCR (оптическое распознавание символов) для расчета изменения количества байтов текста на картинке.Когда количество байтов мало, это можно определить как состояние белого экрана.Когда количество байтов стабильно, это означает, что содержимое первого экрана стабильно. Проведите вперед и назад, пока количество байтов не изменится. Когда количество байтов изменяется, страница становится интерактивной и пролистываемой. Проведите вперед и назад три раза, когда количество байтов изменится, что указывает на плавное взаимодействие со страницей.
- 2. Посмотрите на каждый пиксель изображения, сравните его с окончательным изображением и рассчитайте процент совпадающих пикселей для каждого кадра.
- 3. Получите гистограмму цветов изображения (по одной для красного, зеленого и синего) и посмотрите на общее распределение цветов на странице. Мы вычисляем разницу между начальной гистограммой (для первого видеокадра) и конечной гистограммой (для последнего видеокадра) и используем эту разницу в качестве базовой линии. Разница между гистограммой каждого кадра в видео и первой гистограммой сравнивается с базовой линией, чтобы определить «полноту» видеокадра.
Каждый из трех методов имеет свои преимущества и недостатки:
- Первый способ не может отслеживать смену картинок без текста на экране.
- Второй способ не подходит для ситуации, когда веб-страница будет перетекать в процессе загрузки.
- Третий метод очень чувствителен к конечному состоянию и вычисляет прогресс на основе конечного изображения, что не подходит для ситуации, когда на странице есть воспроизведение видео и карусельные изображения.
Для этих ключевых моментов времени для измерения пользовательского опыта Google также дает 4 показателя, которые отражают пользовательский опыт, подробные описания можно просмотреть.Ориентированные на пользователя показатели производительности.
| Пользовательский опыт | Обратная связь со страницы пользователю | Метрики |
|---|---|---|
| Это случается? | Навигация началась успешно? Сервер отвечает? | Первая отрисовка (FP)/первая отрисовка контента (FCP) |
| Это полезно? | Было ли отрендерено достаточно контента для взаимодействия с пользователем? | Первая эффективная краска (FMP) / Время элемента главного героя |
| он годен или нет? | Может ли пользователь взаимодействовать со страницей или страница все еще загружается? | Время взаимодействия (TTI) |
| Это приятно? | Является ли взаимодействие плавным и естественным, без задержек и заиканий? | долгая задача |
📝 Резюме
Мы рассмотрели метрики, связанные с загрузкой документа, с самого начала, но такие метрики, как Load или DOMContentLoaded, не отражают визуальный опыт пользователя, поскольку их время не обязательно соответствует моменту, когда пользователь видит содержимое на экране.
Первая отрисовка и первая отрисовка с содержанием. Эти ориентированные на пользователя показатели производительности сосредоточены на начальном времени отрисовки и могут использоваться для измерения времени, в течение которого страница становится белой. Но он не учитывает важность того, что рисуется, например, если на странице отображается индикатор загрузки, то момент времени, зафиксированный FP и FCP, не является тем, что больше всего волнует пользователя, и пользователь все равно будет думать страница недоступна.
Первая осмысленная отрисовка и самая крупная отрисовка по содержанию могут помочь нам измерить опыт загрузки пользователей, которые видят часть страницы или основной контент после первоначальной отрисовки.
А Speed Index и First Screen Paint могут помочь нам измерить опыт загрузки пользователей, которые видят весь контент в верхней части экрана.
Первый простой ЦП и время до взаимодействия могут помочь нам измерить первое интерактивное и устойчивое интерактивное время после загрузки страницы, а также могут получить время задержки пользовательского ввода путем измерения индикатора первой задержки ввода, чтобы оценить реакцию пользователя на операции.
А количество кадров в секунду (FPS) может помочь нам измерить плавность (беглость) взаимодействия со страницей.
Наконец, с учетом пользователя в качестве центра предлагаются четыре основных показателя для измерения пользовательского опыта: время белого экрана, время первого экрана, время интерактивного взаимодействия и время плавного интерактивного взаимодействия (также известное как устойчивое интерактивное время).
Итак, как оптимизировать производительность страницы и ускорить ее отображение? Нам нужно понять процесс рендеринга страницы, о котором я расскажу в следующем разделе.
💫 мышление
В 2014 году Baidu представила Рабочей группе по веб-производительности предложение по оптимизации рендеринга в верхней части страницы. Эта спецификация используется для увеличения скорости, с которой мобильные пользователи фактически воспринимают отображение контента в верхней части страницы. Основное содержание спецификации состоит в следующем:
После того, как код веб-страницы проанализирован, он должен пройти этапы компоновки и рисования, прежде чем его можно будет отобразить пользователю на экране. Экраны мобильных устройств небольшие, и обычно короткий код может заполнить весь экран, и эта часть контента является той областью контента, которую пользователь фактически воспринимает в первую очередь.
Когда код страницы состоит из двух сегментов, A и B, код A может представлять все содержимое первого экрана.Когда A завершает синтаксический анализ веб-контента (parse), он не может немедленно завершить макет (макет) и операцию рисования ( краска).
Ядро переходит из состояния синтаксического анализа в состояние макета Существует несколько условий срабатывания, включая количество проанализированных токенов, время анализа и время задержки.
Есть также несколько необходимых условий для перехода ядра из состояния компоновки в состояние рисования, которые предотвращают преждевременный выход ядра из процесса компоновки и переход к фактической стадии рисования экрана.
Все эти ограничения не в полной мере учитывают размер контента на первом экране мобильного телефона и важный приоритет фактического восприятия пользователем представления контента. В сложной среде мобильной сети это ограничение оказывает большее влияние на скорость просмотра.
Определив спецификацию оптимизации рендеринга в верхней части страницы, веб-разработчики могут указать браузеру заранее отображать соответствующий контент в верхней части страницы (ядро может определить положение верхней части страницы самостоятельно, или разработчик может указать положение верхней части страницы), тем самым ускоряя отображение верхней части страницы, значительно сокращая время, в течение которого пользователи впервые видят небелую экранную страницу.
<!--指示浏览器自行决定首屏判断机制，进行首屏内容提前绘制优化。-->
<meta name="render-optimize-policy" content="first-screen-advance [;enable]">
Конкретные планы можно найти по адресу:
- Темы китайской группы интересов W3C:Предложение по оптимизации рендеринга первого экрана
- Представление участника W3C:First Screen Paint
Что ж, предыстория этого мысленного вопроса немного длинна. Рассмотрим следующие вопросы:
- Это предложение так и не стало стандартом W3C. Как вы думаете, в чем причина?
- Время завершения рендеринга первого экрана — важный показатель, но единой схемы измерения нет, есть ли у вас схема измерения первого экранного времени?
Вы можете обсудить в области комментариев.
😇 Серия
- предисловие
- Что такое веб-производительность?
- Зачем заботиться о веб-производительности?
- История оптимизации веб-производительности
- Рабочая группа W3C и веб-производительности
- стандарт производительности
- Представление
- Загрузка процесса рендеринга страницы
- Стратегия оптимизации
- Загрузка производительности
- производительность рендеринга
- Практика оптимизации
- Как устранить проблемы с производительностью загрузки?
- Как устранить проблемы с производительностью рендеринга?
- инструмент для тестирования производительности
- Нет механизма снижения производительности
- проводить исследования
- Оптимизация производительности и искусственный интеллект
- Влияние размера изображения на память, FPS, CPU