Начните с классического вопроса интервью
(Часть содержания этой статьи организована из интернет-статей)
Что происходит с момента ввода пользователем URL-адреса до загрузки страницы?
- Разрешение DNS (разрешение доменных имен, преобразование URL-адресов в соответствующие IP-адреса)
- отправить HTTP-запрос
- Соответствующие возвращаемые данные HTTP на стороне сервера
- Браузер получает данные ответа, анализирует содержимое ответа и отображает проанализированный результат пользователю.
Какова производительность интерфейса
Это разделение производительности я почерпнул из статьи, которую мы в основном обсуждаем здесь.мониторинг производительности
Мониторинг производительности внешнего интерфейса — ключевые показатели
- выше сгиба
- время белого экрана
- Общее время загрузки страницы
Сначала обзор производительности браузера
Спектакль, который мы проходимwindow.preformance.timingСвойство, чтобы получить параметры, связанные с производительностью
window.preformance.timing (записывает метку времени каждого состояния страницы)
Так что же означают эти параметры и каковы механизмы их срабатывания?
давайте переведем это
【Prompt for unload】- 用户跳转行为（在地址栏输入url后按回车，或者点击a标签跳转等）
navigationStart、startTime // 当前浏览器窗口的前一个网页关闭开始执行的时间戳
unloadStart // 前一个页面unload触发开始时间戳
【unload】- 前一个页面unload时间
unloadEnd // 前一个页面unload触发结束时间戳
redirectStart // 返回第一个HTTP跳转开始时的时间戳如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0
【redirect】- 重定向
redirectEnd // 返回最后一个HTTP跳转结束时（即跳转回应的最后一个字节接受完成时）的时间戳,如果没有跳转，或者不是同一个域名内部的跳转，则返回值为0
fetchStart // 返回浏览器准备使用HTTP请求读取文档时的时间戳。该事件在网页查询本地缓存之前发生
【App cache】- 网页查询本地缓存
domainLookupStart // 返回域名查询开始时的时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值
【DNS】- 域名查询
domainLookupEnd // 返回域名查询结束时的时间戳。如果使用持久连接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值
connectStart // 返回建立TCP链接开始向服务器发送时的时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值
【TCP】
secureConnectionStart // 它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0
connectEnd // 返回浏览器与服务器之间的连接建立时的时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束
回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0
requestStart // 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳
【Request】 - 网络请求
responseStart // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳
【Response】
responseEnd // 返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳
domLoading // 返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的时间戳
【Processing】
domInteractive // 返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳
domContentLoadedEventStart // 返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、所有脚本开始运行时）的时间戳
domContentLoadedEventEnd // 返回当前网页所有需要执行的脚本执行完成时的时间戳
domComplete // 返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的时间戳
loadEventStart // 返回当前网页load事件的回调函数开始时的时间戳。如果该事件还没有发生，返回0
【onLoad】- window.onLoad触发
loadEventEnd // 返回当前网页load事件的回调函数运行结束时的时间戳。如果该事件还没有发生，返回0。通过while循环持续判断直到loadEventEnd>0则表示完全加载完毕了！网络不再有任何数据请求、dom也渲染完毕了
Уведомление
Поскольку window.preformance.timing находится на разных этапах, сохраняется исправленный объект параметра, поэтому рекомендуется читать данные о производительности и создавать отчеты window.onload.
получение ключевых данных
- Время над сгибом: более хлопотно рассчитать, что будет подробно описано позже.
- Время белого экрана: responseEnd - navigationStart
- Общее время загрузки страницы: loadEventEnd - navigationStart
Другие данные:
- Разрешение DNS требует времени: domainLookupEnd - domainLookupStart
- Длительное TCP-соединение: connectEnd - connectStart
- Требует много времени для первого запроса пакета: responseEnd - responseStart
- интерпретация dom занимает много времени: domComplete - domInteractive
- Время действия пользователя: domContentLoadedEventEnd - navigationStart
- ...
Расчет времени первого экрана
В настоящее время первое экранное время в отрасли неоднородно, и существуют общие методы для следующих расчетов:
- Используйте время загрузки последнего изображения на первом экране в качестве времени первого экрана (Подходит для элементов первого экрана, которые будут отображаться сервером.)
Метод: привязать событие onload ко всем изображениям на странице, чтобы записать время загрузки изображения; в window.onload вычислить offsetTop каждого изображения; собрать данные изображения, соответствующие высоте первого экрана, и рассчитать максимальное время загрузки
- Метод сравнения схожести изображений определяет время первого экрана путем сравнения трендов изменения пикселей последовательных снимков экрана (Сценарии, подходящие для асинхронного рендеринга данных запроса)
Метод: используйте подключаемый модуль html2canvas для захвата экрана каждые 100 мс; затем получите центральную точку каждой сетки в сетке из девяти квадратов экрана и добавьте пиксели красного канала, чтобы получить значение, и отслеживайте, загружается первый экран, постоянно делая скриншоты и сравнивая суммарное значение. (Метод сравнения схожести изображений скриншотов является наиболее научным и интуитивно понятным, но он потребляет запущенные ресурсы локального устройства. Более того, из-за более сложных операций это повлияет на производительность выполнения скрипта логики страницы)
- Обозначение тега модуля в верхней части страницы (большинство страниц отображаются асинхронно)
- Используйте время триггера onLoad или domReady для представления времени первого экрана.
Как мы рассчитываем выше сгиба
Сначала мы должны ввести метод window.performance.getEntries(), потому что он будет использоваться позже.
window.performance.getEntries()
После звонка будут получены ресурсы загрузки страницы и информация о сетевых запросах.
После получения это массив, который содержит все статические ресурсы и информацию, связанную с сетевыми запросами страницы, мы получаем атрибуты каждого элемента через initiatorType
"xmlhttprequest" представляет запрос интерфейса
Метод расчета первого экрана
- По умолчанию: domContentLoadedEventEnd - navigationStart
- Если элементы Vue в монтируемом времени запуска рассчитываются как точка отсечения.
- Если это реактивный проект, время срабатывания componentDidMount используется в качестве точки разделения вычислений.
- Пройдите все содержимое window.performance.getEntries(), отфильтруйте все содержимое запроса, выданное до монтирования, и componentDidMount, если есть xmlhttprequest, используйте последнее время возврата в качестве первого времени экрана
- Если это проект ssr, напрямую используйте метод расчета по умолчанию (domContentLoadedEventEnd — navigationStart).
У вас могут возникнуть вопросы, а мы не включаем время рендеринга и загрузки изображения в расчет времени первого экрана?
Действительно, мы делаем это с двумя предпосылками:
- Обычно мы думаем, что время рендеринга браузера будет быстро
- Изображения загрузки страницы должны быть перехвачены (эта сфера деятельности осуществляется собственным контролем)
Итак, этот первый экранный расчет, больше похожий на "Данные первого экрана начните время рендеринга(поскольку все данные, необходимые для рендеринга первого экрана, уже получены)
Будет определенная степень ошибки, когда изображение слишком большое или слишком большое
Почему мы это делаем?
- Максимально приближенное к реальному время загрузки в верхней части страницы
- Завершите сбор данных, не тратя слишком много времени на загрузку верхней части страницы браузера.
В настоящее время методы расчета времени в верхней части страницы различны для каждой компании, но принятый метод расчета должен быть наиболее близким к времени в верхней части с учетом того, что он соответствует фактической ситуации в соответствующих компаниях. .
Фактически, точность данных и эксплуатация данных сбора данных сбора данных являются игрой. Для компаний вы должны выбрать наиболее подходящий путь.