предисловие
Всем привет, я Акула~
Это 2022 для Акулыпервый разСтатья Почему первая статья должна быть написана на фронтендепозиционирование производительностиНа самом деле, все старые фанаты знают о статье об оптимизации производительности.Еще в июне прошлого года я говорил, что различные вещи будут завершены в течение полугода.Это также личное сообщение от фаната перед кануном Нового года. Я спросил, когда будет опубликована статья по оптимизации производительности.Я просто напомнил мне, ха-ха (чувствую, что я все еще должен много статей и не обновлялся) В этой статье я не буду вводить конкретные методы фронт- заканчиваем оптимизацию производительности, потому что я думаю, что есть слишком много статей о том, как оптимизировать. Давайте сосредоточимся на том, как анализировать себя.Узкое место производительности переднего планаГде посмотреть насколько производительность написанного мной кода очень интересна?Однако статья длинновата,и предыдущее теоретическое введение будет немного больше.Вы можете сохранить его на будущее.Заполнение пробеловНаконец, я хотел бы поблагодарить одноклассника (Кан Чжи) из предыдущей команды Brother Shark за помощь в организации.Ссылка на сайтПрисоединяйтесь к фронтенд-группе Brother Shark, заходите внутрь, обсуждайте технологии, трогайте рыбу, просите о помощи
Это непросто организовать. Если эта статья окажется вам полезной, помнитеКак СанлианБольшое спасибо!
Смысл оптимизации производительности
1. Производительность — важная часть удержания пользователей
-
pinterestПерестроили свои страницы для повышения производительности, что привело к меньшей задержке40%, что привело к увеличению трафика из поисковых систем и регистраций15%.
-
Сократив среднее время загрузки страницы на 850 мс,COOKБыло обнаружено, что они могут увеличить конверсию на 7%, снизить показатель отказов на 7% и увеличить количество страниц на странице на 10%.
-
BBCобнаружил, что каждый раз, когда они загружаютсясекундочкупроиграет10%Пользователь.
-
DoubleClick by GoogleУзнайте, что если время загрузки страницы превышает3секунды, будет53%пользователей отказываются от посещения мобильных сайтов.
2. Производительность имеет решающее значение для повышения коэффициента конверсии
- заMobify, на каждые 100 мс снижения скорости загрузки главной страницы число конверсий, основанных на сеансах, увеличивалось на 1,11 %, а среднегодовой доход увеличивался почти на380,000Доллар. Кроме того, время загрузки страницы оформления заказа сократилось на 100 мс, а конверсия на основе сеанса увеличилась на 1,55%, что привело к увеличению среднегодового дохода почти на530,000доллар
- DoubleClickВыяснилось, что издатели, сайты которых загружались за 5 секунд, получали доход от рекламы за сайты, загружавшиеся за 19 секунд.двойной. . когдаAutoAnythingИх продажи увеличились, когда они вдвое сократили время загрузки страницы.12-13%.
Каковы критерии эффективности с точки зрения пользователя?
Знаменитый принцип 2-5-8
-
Когда пользователи могут получить ответ в течение 2 секунд, они почувствуют, что система отвечает быстро;
-
Когда пользователь получает ответ в течение 2-5 секунд, он считает, что скорость отклика системы в порядке;
-
Когда пользователи получат ответ в течение 5-8 секунд, они почувствуют, что скорость отклика системы очень низкая, но это приемлемо;
-
Когда пользователь по-прежнему не может получить ответ более чем через 8 секунд, он почувствует, что система ужасна, или подумает, что система потеряла ответ, и решит покинуть сайт или инициировать второй запрос.
Подводя итог: производительность веб-сайта является основой для удержания пользователей и реализации монетизации.
А наша цель - стремиться к 1 и держать 2
Разрыв 1s кажется очень маленьким, но в этой 1s браузер действительно может многое.Далее давайте посмотрим, как проанализировать производительность веб-сайта.
Общие показатели производительности веб-сайта
- Белый экран FP (время первого рисования): Запускается при обнаружении рендеринга (любого рендеринга) с начала загрузки страницы в браузер (например, изменение фона, примененные стили и т. д.).
Чрезмерное время белого экрана может заставить пользователей думать, что наша страница непригодна или плохо используется.
-
Первый экран FCP (первая содержательная краска): время от начала загрузки страницы до отображения любой части содержимого страницы на экране. (Сосредоточьтесь на содержании, эта метрика может сказать, когда пользователи получают полезную информацию (текст, изображения и т. д.))
-
Первая значимая краска FMP: Указывает на «основное содержание» страницы, момент времени, когда оно начинает появляться на экране, этот показатель зависит от логики страницы, поэтому по нему нет конкретики. (Только что записал самое начало процесса загрузки. Если на странице отображается заставка или анимация загрузки, этот момент для пользователя не имеет значения)
-
LCP (наибольшая содержательная краска): Индикатор LCP представляетВремя рендеринга самого большого видимого изображения или текстового блока в области просмотра. (Это помогло бы нам получить больше производительности загрузки после первого рендеринга, но эта метрика слишком сложна, трудна для интерпретации и часто содержит ошибки, поскольку невозможно определить, когда загрузка основного контента завершена.)
-
Длинная задача: задача потребляется, когда время выполнения задачи превышает 50 мс. (Порог 50 мс — это вывод, сделанный на основе модели RAIL. Это вывод, сделанный в ходе исследования Google о восприятии пользователей. Он аналогичен порогу восприятия пользователя/пациента. Для задач, превышающих этот порог, пользователь воспринимает зависание страницы)
-
TTI (время до международного уровня): время от начала страницы до загрузки ее основного подресурса для быстрого реагирования на ввод пользователя. (нет длинных задач)
-
Задержка первого входа FID (задержка первого входа): время от первого взаимодействия пользователя со страницей до момента, когда браузер фактически может начать обработку события. (щелчок, ввод, ключ)
-
Общее время блокировки TBT (общее время блокировки): Измерьте общее количество времени, в течение которого основной поток блокируется от FCP до TTI.
-
DCL (DOMContentLoaded): событие DOMContentLoaded запускается, когда HTML-документ полностью загружен и проанализирован, не дожидаясь завершения загрузки стилей, изображений и подфреймов.
-
L (при загрузке): срабатывает при загрузке всех зависимых ресурсов
-
CLS(Cumulative Layout Shift): представляет собой совокупность всех оценок смещения макета, включая любые смещения макета, которые не ожидались в течение всего срока службы страницы. Смещение макета происходит в любое время, когда видимый элемент меняет свое положение, от одного отображаемого кадра к другому.
мышление ==В чем разница между $.ready и window.onLoad?==
Выше представлены 11 показателей эффективности. Вам не нужно понимать определение каждого показателя. Давайте посмотрим, на что нам нужно обратить внимание.Несколько показателей производительности ядра
Google Web Vitals – количественная оценка взаимодействия с пользователем
web-vitals: Google предложила новый метод количественной оценки пользовательского опыта 5 мая 2020 г. Запуск Web Vitals призван упростить эту кривую обучения. Вам нужно только следить за показателями показателей Web Vitals;
web-vitals объединяет API из 5 индикаторов, и есть 3 основных индикатора;
- LCPВремя, необходимое для отображения самого большого элемента контента (измеряет скорость первой загрузки сайта).
- FIDЗадержка первого ввода (показатель того, насколько плавно взаимодействует веб-сайт)
- CLSСовокупные изменения макета (измеряет визуальную стабильность веб-компонентов)
<script type="module">
import {getCLS, getFID,getFCP,getTTFB, getLCP} from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
getFCP(console.log);
getTTFB(console.log);
</script>
Мы можем напрямую обратиться к методу измерения и распечатать эти ключевые показатели
Пока мы знаемLCP FID CLSЭти три показателя являются относительно основными, но если мы хотим узнать большеКак измерить показатели эффективностичто нам делать, посмотрим
Performance API
PerformanceЭто глобальный объект браузера, предоставляющий набор API для программного получения данных о производительности программы на определенных узлах. Он содержит набор высокоточных определений времени, а также вспомогательные методы. Мы можем печатать прямо в консоли браузераwindow.performanceРезультат выглядит следующим образом
// 获取 performance 数据
var performance = {
// memory 是非标准属性，只在 Chrome 有
// 我有多少内存
memory: {
usedJSHeapSize: 16100000, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
totalJSHeapSize: 35100000, // 可使用的内存
jsHeapSizeLimit: 793000000 // 内存大小限制
},
// 我从哪里来？
navigation: {
redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
type: 0 // 0 即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
// 1 即 TYPE_RELOAD 通过 window.location.reload() 刷新的页面
// 2 即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
// 255 即 TYPE_UNDEFINED 非以上方式进入的页面
},
// 核心时间相关
timing: {
// 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
navigationStart: 1441112691935,
// 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
unloadEventStart: 0,
// 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
unloadEventEnd: 0,
// 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
redirectStart: 0,
// 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
redirectEnd: 0,
// 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
fetchStart: 1441112692155,
// DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupStart: 1441112692155,
// DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
domainLookupEnd: 1441112692155,
// HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
connectStart: 1441112692155,
// HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等
// 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
// 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
connectEnd: 1441112692155,
// HTTPS 连接开始的时间，如果不是安全连接，则值为 0
secureConnectionStart: 0,
// HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存
// 连接错误重连时，这里显示的也是新建立连接的时间
requestStart: 1441112692158,
// HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
responseStart: 1441112692686,
// HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
responseEnd: 1441112692687,
// 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
domLoading: 1441112692690,
// 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
// 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
domInteractive: 1441112693093,
// DOM 解析完成后，网页内资源加载开始的时间
// 在 DOMContentLoaded 事件抛出前发生
domContentLoadedEventStart: 1441112693093,
// DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
domContentLoadedEventEnd: 1441112693101,
// DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
domComplete: 1441112693214,
// load 事件发送给文档，也即 load 回调函数开始执行的时间
// 注意如果没有绑定 load 事件，值为 0
loadEventStart: 1441112693214,
// load 事件的回调函数执行完毕的时间
loadEventEnd: 1441112693215
// 按照字母排序
// connectEnd: 1441112692155,
// connectStart: 1441112692155,
// domComplete: 1441112693214,
// domContentLoadedEventEnd: 1441112693101,
// domContentLoadedEventStart: 1441112693093,
// domInteractive: 1441112693093,
// domLoading: 1441112692690,
// domainLookupEnd: 1441112692155,
// domainLookupStart: 1441112692155,
// fetchStart: 1441112692155,
// loadEventEnd: 1441112693215,
// loadEventStart: 1441112693214,
// navigationStart: 1441112691935,
// redirectEnd: 0,
// redirectStart: 0,
// requestStart: 1441112692158,
// responseEnd: 1441112692687,
// responseStart: 1441112692686,
// secureConnectionStart: 0,
// unloadEventEnd: 0,
// unloadEventStart: 0
}
}
Я впервые увидел столько атрибутов, все должны быть так же ошарашены, как и эта картинка, что это за хрень?
Давайте не паниковать. Давайте сделаем снимок, чтобы объяснить некоторые загрузки страниц.решающий момент
использоватьperformance.timingИнформация просто рассчитываетсяДанные о производительности веб-страницы
-
FP: responseStart - навигацияStart
-
Время перенаправления: redirectEnd - redirectStart
-
Время запроса DNS: domainLookupEnd - domainLookupStart
-
Время соединения TCP: connectEnd - connectStart
-
Время HTTP-запроса: responseEnd - responseStart
-
Трудоемкий разбор дерева dom: domComplete - domInteractive
-
Время готовности DOM: domContentLoadedEventEnd — navigationStart
-
onload: loadEventEnd-навигацияStart
использоватьperformance.getEntries()Получить данные о времени для всех запросов ресурсов
Получите временные данные всех запросов ресурсов, эта функция возвращает массив объектов, отсортированных по startTime.
Выведем его прямо на панель.
использоватьperformance.getEntriesByName(name)Получить данные о времени для определенного имени
Например, как рассчитать первое экранное время FCP, которое я люблю спрашивать в процессе собеседования?
мы можем пройтиgetEntriesByName(name)Предоставляется API для получения данных FCP
FCP = performance.getEntriesByName("first-contentful-paint")[0].startTime - navigationStart
использоватьperformance.now()Точно рассчитать время выполнения программы
performance.nowметод возвращает текущую страницу, так какperformance.timing.navigationStartмежду текущим временеммикросекунды(тысячные доли миллисекунды). То есть с точностью до одной миллионной доли секунды.
Затем мы можем, наконец, рассчитать точное время выполнения определенной операции js через два вызова
const start = performance.now();
doTasks(); // 这里是耗时操作
const end = performance.now();
console.log("耗时：" + (end - start) + "微秒。");
использоватьperformance.markа такжеperformance.measureИзмеряйте производительность вручную
Этот конкретный пример кода предполагает, что вы можете посетить напрямуюздесьсмотреть
если мы хотимнастроитьСоберите показатели производительности для внешнего интерфейсасистема контроля производительностиТогда эти два API очень мощные
ok Выше представлен ряд методов для сбора и измерения показателей производительности нашего интерфейса на уровне кода Некоторые студенты могут спросить, могут ли они перестать смотреть на такое количество расчетных формул.прощеЗатем следующим шагом будет использованиеинструментКак проанализировать производительность собственного веб-сайта локально
Панель производительности Google
Ха-ха, не паникуйте, хотя это и называется производительностью, но относится к производительности нашего браузера.инструменты панели производительности
весь кадр
Нас могут напугать эти разноцветные цветные блоки с первого взгляда, не будем бояться, давайте немного проанализируем
4 области сверху вниз
1: Панель инструментов, включая ряд операций, таких как запись, обновление анализа страницы и очистка результатов.
2: Обзорная карта, общий обзор изменений на временной шкале, включая FPS, CPU, NET.
3: График пламени, анализ области выбора кадра под разными углами. Например: Сеть, Фреймы, Взаимодействия, Главное и т. д.
4: Общий отчет: анализ с точностью до миллисекунд и сортировка событий по уровню вызовов и классификации событий.
Область панели инструментов
Красное поле выше слева направо, мы можем увидеть несколько английских слов, наведя на него мышь.
- запись записи производительности браузера за определенный период времени
- Страница перезагрузки используется для регистрации производительности веб-страницы с момента начальной загрузки до завершения загрузки всех ресурсов. После нажатия страница автоматически перезагрузится
- Скриншоты Скриншоты с динамически загружаемыми изображениями страниц
- память Просмотр различных изменений использования памяти
Теперь мы можем открыть любой веб-сайт и нажать вторую кнопку, чтобы перезагрузить страницу, чтобы начать анализ.
Область обзора
1. FPS: полное название Frames Per Second, что означает количество кадров, передаваемых в секунду, является единицей скорости и используется для анализа основного показателя производительности анимации. 1 кадр/с = 0,304 метра/сек (метров в секунду). Как показано на изображении выше, чем выше зеленая вертикальная линия, тем выше FPS. Красный цвет указывает на длинные кадры, которые могут зависать и пропускать кадры.
- Опыт работы с разными фреймами:
- Анимации с частотой кадров от 50 до 60 FPS будут достаточно плавными и комфортными;
- Для анимаций с частотой кадров от 30 до 50 кадров в секунду уровень комфорта варьируется от человека к человеку из-за их разных уровней чувствительности;
- Анимации с частотой кадров ниже 30 кадров в секунду заставляют людей чувствовать явные заикания и дискомфорт; Анимации с большими колебаниями частоты кадров также могут заставить людей чувствовать себя застрявшими.
2. CPU: ресурсы процессора. На этой диаграмме с областями показаны типы событий, которые потребляют ресурсы ЦП. Цвета на рисунке (сОбщий отчетСводные данные о цвете в таблице указывают на то же самое):
- Синий (загрузка): указывает на сетевое соединение и время синтаксического анализа HTML.
- Желтый (сценарий): указывает время выполнения JavaScript.
- Фиолетовый (рендеринг): указывает время расчета стиля и макета (перекомпоновки).
- Зеленый (Рисование): указывает время перерисовки.
- Серый (другое): указывает время, потраченное на другие события.
- Белый (в режиме ожидания): указывает время простоя.
3. NET: Каждая цветная полоса представляет собой ресурс. Чем длиннее полоса, тем больше времени требуется для извлечения ресурса. Светлая часть каждой полосы представляет время ожидания (время от запроса ресурса до завершения загрузки первого байта).
график пламени
-
Сеть: указывает загрузку каждого ресурса сервера.
-
Кадры: указывает работу каждого кадра, которую можно комбинировать с приведенным выше FPS.
-
Тайминги:
- DCL (DOMContentLoaded) представляет собой событие завершения загрузки HTML-документа. Запускается, когда исходный HTML-документ полностью загружен и проанализирован, не дожидаясь завершения стилей, изображений и подкадров. В отличие от этого, событие загрузки запускается, когда страница полностью загружена.
- FP (First Paint) отрисовка первого экрана, время, когда страница только начинает отображаться.
- FCP (First ContentfulPaint) — это первый раз, когда любой текст, изображение, непустой холст или SVG отрисовываются.
- FMP (First MeaningfulPaint) рисует осмысленный контент на первом экране.Для этого "осмысленного" нет официальной регламентации.По сути, используется алгоритм, который угадывает, что в определенный момент времени может быть FMP. Некоторые понимают, что это время, когда отрисовывается самый большой элемент, то есть такой же, как LCP (Largest ContentfulPaint). Среди них FP, FCP и FMP представляют собой одну и ту же пунктирную линию, и время этих трех несовместимо. Например, после первого рендеринга может быть блокировка JS, и в этом случае FCP будет больше, чем FP.
- Событие L (Onload), когда все ресурсы на странице загружены.
- LCP (Largest Contentful Paint) максимальное отрисовка содержимого, время отрисовки элемента с наибольшим размером на странице.
Внимательные учащиеся могли обнаружить, что приведенные здесь индикаторы соответствуют тем, о которых мы упоминали ранее.ПредставлениеТаким образом, вы можете напрямую увидеть значения нескольких основных показателей веб-страницы на панели производительности.
-
Main: Записывает запись выполнения основного потока в процессе рендеринга.Нажмите main, чтобы увидеть конкретную ситуацию выполнения определенной задачи.Анализ конкретной функции занимает много временисамые просматриваемые панели
Во-первых, в панели будет много задач, если задача выполняется долго, то в правом верхнем углу будетОтмечен красным, в это время мы можем выбрать задачу, отмеченную красным, а затем увеличить масштаб, чтобы увидеть ее конкретную трудоемкую точку.
После увеличения вы можете увидеть, какие операции здесь выполняются, и какие функции занимают сколько времени.Код здесь сжат, и вы видите сжатое имя функции. Затем мы нажимаем на функцию, и внизу панели появляется информация о коде, какая функция, сколько времени она занимает, какая строка файла и т. д.
Так что мы можем легкоНайдите трудоемкую функциюТогда переходите к целевой оптимизации
-
Запись выполнения потока композиции Compositor используется для записи операции композиции слоя после завершения фазы рисования html (Paint).
-
Пул потоков растровой растеризации, используемый для того, чтобы графический процессор мог выполнять задачи растеризации.
-
Графический процессор может визуально видеть, когда ускорение графического процессора включено.
-
Опция памяти, если она отмечена, будет отображаться линейная диаграмма
Через этот рисунок мы можем увидеть использование памяти на странице, например JS Heap (куча).Если кривая продолжает расти, значит, есть утечка памяти.Если кривая памяти не снижается в течение длительного времени, здесь Есть вероятность утечки памяти.
На самом деле, в графике пламени нас в основном интересуют призывы.1234Суть достаточно.Кроме того, если вы хотите проанализироватьутечка памятиможно проверитьmemoryОпции
Общий отчет
Резюме: Указывает статистический отчет о времени занятия каждого индикатора.
Значение цветов здесь иЦП в области обзораЗначение одного и того же цвета
Вообще говоря, здесь нужно сосредоточиться на двух вещах: одна — желтая область, которая представляет время выполнения скрипта, а другая — фиолетовое время рендеринга.
1. Загрузка события
| содержание | инструкция |
|---|---|
| Parse HTML | Браузер анализирует HTML |
| Finish Loading | сетевой запрос выполнен |
| Receive Data | Событие получения запрошенных данных ответа, которое может инициироваться несколько раз, если данные ответа большие (неупакованные). |
| Receive Response | Запускается при поступлении сообщения заголовка ответа |
| Send Request | Запускается при отправке сетевого запроса |
- Событие сценария
| содержание | инструкция |
|---|---|
| AnimationFrameFired | Запускается, когда возникает определенный кадр анимации и начинается обработка обратного вызова |
| Cancel Animation Frame | Запускается при отмене кадра анимации |
| GC Event | Срабатывает при сборке мусора |
| DOMContentLoaded | Запускается, когда содержимое DOM на странице загружается и анализируется |
| Evaluate Script | A script was evaluated. |
| Event | JS-события |
| Function Call | Запускается, когда браузер входит в движок JS |
| Install Timer | Запускается при создании таймера (вызываются setTimeout() и setInterval()) |
| Request Animation Frame | A requestAnimationFrame() call scheduled a new frame |
| Remove Timer | Очистить таймер |
| Time | Вызовите console.time() для запуска |
| Time End | Вызовите console.timeEnd() для запуска |
| Timer Fired | Запускается после того, как таймер активирует обратный вызов |
| XHR Ready State Change | Запускается, когда асинхронный запрос готов |
| XHR Load | Запускается после завершения загрузки асинхронного запроса. |
3. Рендеринг события
| содержание | инструкция |
|---|---|
| Invalidate layout | Запускается, когда изменение DOM приводит к сбою макета страницы |
| Layout | Запускается, когда выполняется расчет макета страницы |
| Recalculate style | Запускается, когда Chrome пересчитывает стили элементов |
| Scroll | Запускается при прокрутке встроенного окна просмотра |
4.Живопись
| содержание | инструкция |
|---|---|
| Composite Layers | Запускается, когда механизм рендеринга Chrome завершает объединение слоев изображения. |
| Image Decode | Запускается после декодирования ресурса изображения |
| Image Resize | Запускается при изменении размера изображения |
| Paint | Запускается после того, как объединенный слой отображается в соответствующей области отображения. |
5.Система: системное время
6.Idle: время простоя
Снизу вверх: указывает отсортированный список продолжительности события (в обратном порядке).
Здесь есть два столбца данных о времени, один из которых — «Самостоятельное время», представляющий задачу.самоисполнениеЗатраченное время, секунда «Общее время», представляет эту задачу и ее подчиненные подзадачи, называемыеобщее потреблениевремя. Эти два столбца данных используются по-разному, и вы можете решить, какой столбец данных использовать в качестве поля сортировки в соответствии со своими потребностями.
В правой части действия также есть ссылка «Карта источника», нажав которую, вы сможете найти соответствующую операцию.код. Его проще использоватьцелевой код.
Дерево вызовов: представляет список последовательностей вызовов событий.
Содержимое дерева вызовов также можно просматривать снизу вверх, без каких-либо явных отличий.
Журнал событий: представляет последовательный список произошедших событий.
Содержимое журнала событий — это последовательно записанный журнал событий с большим количеством данных. Обычно он не используется на общих уровнях оптимизации. Если это относительно большое приложение, его открытие может привести к зависанию Chrome.
ok До сих пор все, должно быть, изучили отладку панели производительности.Вы можете открыть свой собственный веб-сайт во время чтения статьи, чтобы увидеть, есть ли какие-либо проблемы с производительностью.Конечно, помимо производительности, у нас также есть болееудобныйИнструмент, который автоматически помогает нам анализировать производительность, а также даетПредложения по оптимизации
lighthouse
Давайте сначала представиммаяк инструменты, в настоящее время официально предоставляет инструменты разработчика Google, плагины Google и приложения npm cli.
Давайте выберем Создать отчет, чтобы начать анализ! Давайте сначала посмотрим на результаты
Мы нашли маяк и представлениеразница довольно большаяСбросить, почему?
Оказывается маяк делает это по умолчаниюдросселирование. Мы можем снять отметку с дросселирования и напрямую щелкнуть просмотр трассировки, чтобы сгенерировать данные, соответствующие панели производительности.
маяк в основном для5 аспектовАнализ сделали.
представление
Перечислены шесть показателей FCP, SP, LCP, TTI, TBI и CLS.
Также доступныоптимизацияплан
Доступность
Доступность: относится к доступному дизайну, также известному как доступность веб-сайта. Означает, что созданный веб-сайт доступен/доступен для всех пользователей, независимо от физических/физических возможностей пользователя и независимо от того, каким образом пользователь получает доступ к веб-сайту.
Лучшая практика
В практических приложениях вопросы безопасности веб-сайтов
SEO поисковая оптимизация
Поисковая оптимизация — это использование правил поисковых систем для улучшения естественного рейтинга веб-сайта в соответствующих поисковых системах.
Прогрессивное веб-приложение Light App — автономное приложение
PWA: создавайте кроссплатформенные веб-приложения, используя современные веб-API и традиционные стратегии прогрессивного улучшения. Эти приложения широко распространены и многофункциональны, что дает им те же преимущества для пользователя, что и нативные приложения;
Как начать и создать простую PWA
Тогда некоторые друзья могут сказать, что я могу использовать маяк для тестирования производительности без среды браузера Ответ, конечно.
мы будем использовать сноваnpm cliПерейти реализовать маяк
node cli lighthouse
Проект установки маяка
npm i -g lighthouse
lighthouse https://www.taobao.com
результат
У некоторых друзей такая же проблема
Мы видим решение: необходимоpowerShellвыполнить команду
$env:CHROME_PATH = (Get-Process -Name chrome)[0].Path
В чем разница между powerShell, cmd и bash?Немного глупо, чтобы сказать разницу!
Если резюмировать одним предложением:PowerShell сочетает в себе старую функциональность CMD с набором инструкций сценариев/командлетов со встроенными возможностями управления системой, и это лучшее!
Наконец, давайте посмотрим, какие команды поддерживает маяк в cli.
lighthouse --help
// 命令太多，介绍常用的几个
--output // 文档报告输出支持html、json、csv，默认html；
--view // 数据分析结束后以html展示
--only-categories // 分析类别包括“accessibility, best-practices, performance, pwa, seo”
--throttling-method // 限流方式：provide当前设备环境，devtools开发模式，simulate模拟手机
--form-factor // 支持设备，mobile，desktop
резюме
В этой статье подробно описаныПозиционирование производительности переднего планаСвязанные технологии От смысла к API-интерфейсам производительности и, наконец, к использованию инструментов повышения производительности В целомСложность высокаянужно всеобщее сотрудничествоФактическая операцияПрактика На самом деле оптимизация производительности всегдане на бумагеМы должны делать это сами, детально анализировать и решать конкретные проблемы и постоянно обобщать проблемы с производительностью и предложения по оптимизации веб-страниц.Самый подходящийсхема оптимизации и будь то на собеседованиях или в реальной работе, тема оптимизации производительностиосновная точкамы опытныеузкое место производительностиАналитические методы могут помочь нам лучшеСимптоматическое лечениеНаконец, я желаю вам удачи в любви и карьере в 2022 году!
Ссылки на прошлые статьи
- Самые полные вопросы интервью Vue + подробные ответы
- От байтов к иностранным компаниям — это тот путь, по которому вы когда-то хотели пойти?
- Самые полные рукописные вопросы по программированию JS
- Последняя передовая большая фабрика (подробный ответ)
- Самое полное руководство по изучению TypeScript
Группа передовых рыболовных технологий Brother Shark
Приветствую всех на технических биржахСсылка на сайт