Оптимизация производительности — Производительность (инструменты и API)

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

предисловие

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

Плюсы и минусы инструментов производительности и API

Performance 工具преимущество:

  • Визуальный графический интерфейс
  • что-то делается каждую миллисекунду
  • Порядок, в котором файлы выполняются и загружаются
  • Эффект отображения интерфейса за миллисекунду
  • Порядок и время выполнения каждого метода (снизу вверх)
  • Перевернутый график пламени события (снизу вверх)
  • Сводка данных

Performance 工具недостаток:

  • Невозможно просмотреть время работы в течение определенного интервала
  • Не могу просмотретьjsИспользование размера кучи и ограничения
  • Не видно, обновляется или загружается страница, количество переадресаций
  • Невозможно увидеть, когда начались тесты производительности
  • Обработка обратного вызова может выполняться, когда кэш ресурсов заполнен.
  • Устанавливает максимальное количество объектов ввода производительности, которые браузер должен хранить в своем буфере ввода производительности.

Performance apiпреимущество:

  • полностью выдуманныйPerformance 工具Недостатки данных также могут позволить нам узнать конкретное время с помощью данных.

Performance apiнедостаток:

  • не может быть похожеPerformance 工具Просмотр информации о данных в графическом виде

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

Инструменты производительности

ЭтоPerformance 工具интерфейс.

  • Стрелки вверх и вниз используются для загрузки и выгрузки каждого отчета о тестировании производительности;
  • no recordingsЭто каждый отчет о тестировании, и оптимизацию производительности можно сравнить в соответствии с каждым отчетом о тестировании;
  • ScreenshotsИспользуется для просмотра изменений интерфейса в каждый период времени;
  • MemoryХраните размер стека вызовов, разные размеры в разные периоды времени;

  • Disable Javascript samplesинвалидjavascriptСтек вызовов, объяснение позжеMainчасть подробно объясняется;
  • Enable advanced paint instrumentation (slow)записывать детали событий рендеринга;
  • NetworkИспользуется для изменения рендеринга интерфейса в различных сетевых средах;
  • CPUИспользуется для проверки работоспособности компьютера;

На этом этапе я кратко представил реальное значение вышеуказанных кнопок.Ниже приведена комбинация визуальных диаграмм и этих кнопок для тестирования производительности:

Этот тест производительности представляет собой скриншот теста оптимизации производительности, проведенного на веб-сайте Nuggets --> моя домашняя страница.

Часть 1: Обзор

Наиболее важным здесь является последовательность событий, выполняемых в каждый период времени, когда отображается весь интерфейс.С помощью приведенного выше рисунка мы можем узнать, что мы сделали в каждый период времени (с точностью до миллисекунд).Когда мышь помещается на Это, Мы также можем просмотреть рендеринг нашего интерфейса для каждого периода времени в виде большого изображения:

Когда вы отпустите его, щелкнув и сдвинув в определенное положение, вы можете просмотреть ситуацию рендеринга непосредственно в определенном интервале.

Часть II: Сеть

NetworkЗдесь мы можем увидеть последовательность загрузки наших ресурсов и какие ресурсы загружаются в какое время, Благодаря этому мы можем более интуитивно знать,Ресурсы загружаются параллельно

Часть 3: Рамки

FramesЗдесь на самом деле нужно проверить, когда мы изменили интерфейс, Разница между ним и первой частью в том, что когда интерфейс не изменился, он не записывает, а обзорная часть будет записывать.

Часть IV: Взаимодействие

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

Часть 5: Тайминги

Эта картинка не с официального сайта Nuggets, потому что после того, как проект запакован, нет соответствующего вызова события, поэтому эту часть запакованного сайта нельзя увидеть онлайн.

Часть VI: Основная

вотPerformance 工具Его основная часть, известная какграфик пламени, Вот диаграмма выполнения события снизу вверх, можно просто понять, что приведенное выше является сводкой

Часть VII: Растр

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

这里有一个知识点，这里是指浏览器渲染的线程，而不是js的线程，特此声明一下，怕被有的同学拿js单线程来喷我😹

Часть 8: GPU

Здесь мы можем четко видеть, когда сайтGPUускорить

Часть IX: taskSchedulerForegroundBlockingWorker

Передний план планировщика задач блокирует рабочую программу.Здесь редко пользуюсь,и первый раз вижу.Жду пояснений что он тут делает.Обновляется.Если кто знает,тоже можете прокомментировать и скажи мне, я успею сделать улучшения

Часть 10: Память

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

Часть 11: Детали тестирования производительности

На нем 4 вкладки:Summary（性能摘要）,Bottom-Up（事件列表，由下至上，对应 Main 火焰图）,Call Tree（每个事件的子项信息）,Event log（事件日志）

Далее мы подробно объясним

Резюме

На самом деле, мы можем с первого взгляда увидеть, что он используется для подсчета того, что мы сделали во временном диапазоне нашей производительности обнаружения:

  • Loading: время загрузки
  • Scripting: время вычисления js
  • Rendering: время рендеринга
  • Painting: время рисования
  • Other:в другой раз
  • Idle: время простоя браузера

Снизу вверх (список событий)

здесь иMainТо, что мы видим внутри, на самом деле является соответствующим отношением.Отсюда мы можем увидеть список всех событий, а также детали каждого события.Self Time（自己调用的时间）,Total Time（总调用时间，包括子项调用时间）,Activity（行为，包括调用该事件的位置）

Дерево вызовов (информация о подпункте события)

Собственно, здесь иBottom-UpЧасти одинаковые, поэтому я не буду слишком много объяснять, вы можете это увидеть, взглянув на них.

Журнал событий

Здесь больше, чем в предыдущемBottom-UpиCall TreeПо сравнению с еще однимStart TimeАтрибут, этот атрибут на самом деле является временем начала, и какое событие выполняется с какого времени

здесь, оPerformance 工具Введение находится здесь, если есть какие-либо неясные объяснения или есть проблемы, пожалуйста, прокомментируйте и укажите, я внесу своевременные исправления

Ниже я познакомлю васPerformance Api

Performance API

PerformanceИспользуется для получения информации о производительности текущей страницы, ее иPerformance 工具О разнице мы уже писали выше, поэтому повторяться здесь не буду.

注意：除了以下指出的情况外，该接口及其成员在 Web Worker 中可用。
此外，还需注意，performance 的创建和衡量都是同一环境下的。
即，如果你在主线程（或者其他 worker）中创建了一个 performance，那么它在另外的 worker 线程中是不可用的；反之亦然。

Далее, давайте представимPerformance APIсвойства:

Performance.navigation（操作相关）

Свойство представляет собой объект с двумя значениями свойств, которыеredirectCount（重定向次数）,type（操作的类型）:

redirectCount

Значение этого атрибута указывает, сколько раз текущая страница была перенаправлена;

type

type(0): текущая страница представляется путем нажатия на ссылки, закладки и формы, или операций скрипта, или прямого ввода адреса в URL-адресе;

type(1): нажмите кнопку обновления страницы или страницу, отображаемую методом Location.reload();

type(2): при доступе к странице через историю и вперед и назад;

type(255): Любым другим путем

Performance.timing（延迟相关）

Информация о времени на текущей странице:

navigationStart

Удаление с предыдущей страницы в том же браузереunloadОтметка времени окончания (с точностью до миллисекунд)

unloadEventStart

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

unloadEventEnd

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

redirectStart

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

redirectEnd

Отметка времени, когда было завершено последнее перенаправление HTTP (то есть, когда последний байт ответа HTTP был получен напрямую)

fetchStart

Представляет метку времени, когда браузер готов использовать HTTP-запрос для извлечения документа. Этот момент времени будет до того, как будут проверены какие-либо кеши приложений.

domainLookupStart

Указывает отметку времени начала запроса имени домена. Если используются постоянные соединения или информация хранится в кеше или локальном ресурсе, это значение будет таким же, какPerformanceTiming.fetchStartпоследовательный

domainLookupEnd

Указывает метку времени окончания запроса имени домена. Если используются постоянные соединения или информация хранится в кеше или локальном ресурсе, это значение будет таким же, какPerformanceTiming.fetchStartпоследовательный

connectStart

Возвращает метку времени начала отправки HTTP-запроса на сервер. Если используется постоянное соединение, возвращаемое значение эквивалентноfetchStartстоимость имущества

connectEnd

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

secureConnectionStart

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

requestStart

Возвращает метку времени, когда браузер сделал HTTP-запрос к серверу (или когда он начал читать локальный кеш)

responseStart

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

responseEnd

Возвращает отметку времени, когда браузер получил (или прочитал из локального кеша, или прочитал из локального ресурса) последний байт с сервера (или когда перед этим было закрыто HTTP-соединение)

domLoading

Возвращается, когда структура DOM текущей веб-страницы начинает анализироваться (т.е.Document.readyStateсобственность становитсяloading,соответствующийreadystatechangeотметка времени, когда событие было запущено)

domInteractive

Возвращает структуру DOM текущей веб-страницы, когда синтаксический анализ заканчивается и начинается загрузка встроенных ресурсов (т.е.Document.readyStateсобственность становитсяinteractive,соответствующийreadystatechangeотметка времени, когда событие было запущено)

domContentLoadedEventStart

Возвращает, когда парсер отправляетDOMContentLoadedСобытие, то есть отметка времени, когда все скрипты, которые необходимо выполнить, были проанализированы.

domContentLoadedEventEnd

Возвращает отметку времени, когда все сценарии, которые необходимо выполнить немедленно, были выполнены (независимо от порядка выполнения).

domComplete

Возвращает завершение парсинга текущего документа, т.е.Document.readyStateстатьcompleteи соответствующийreadystatechangeметка времени, когда он был запущен

loadEventStart

Вернуться на эту страницу,loadОтметка времени отправки события. Если это событие не было отправлено, его значение будет равно 0

loadEventEnd

вернуться, когдаloadКонец события, т. е. отметка времени завершения события загрузки. Если это событие не было отправлено или не завершено, его значение будет равно 0.

Performance.memory（js堆相关）

информация, связанная с кучей js:

jsHeapSizeLimit

ограничение размера кучи js

totalJSHeapSize

общий размер кучи js

usedJSHeapSize

Размер используемой кучи js

Performance.timeOrigin（性能检测开始时间）

Это свойство возвращает высокоточную метку времени начала измерения производительности.numberтип

PerformanceИ еще одно событие:

Performance.onresourcetimingbufferfull（性能缓存区已满时回调）

Это событие запускается, когда ресурсно-временной буфер браузера заполнен.

Давайте представимPerformanceМетоды объекта:

Performance.clearMarks()

удаляет данную отметку из буфера ввода производительности браузера

Performance.clearMeasures()

Получить данную меру из входного буфера производительности браузера

Performance.clearResourceTimings()

Удалить все из буфера данных о производительности браузераentryTypeдаresourceизperformance entries

Performance.getEntries(PerformanceEntryFilterOptions)

PerformanceEntryFilterOptionsпараметр

Необязательный параметр, представляющий собой объект, принимающий три свойства:

  • name:performance entryназвание
  • entryType:entryТип ЮридическийentryТип можно изменить сPerformanceEntry.entryTypeспособ получить
  • initiatorType: тип инициализированного ресурса, например:xmlhttprequest,other,script

Performance.getEntriesвозвращаемое значение

Performance.getEntries(PerformanceEntryFilterOptions)Член массива возвращаемых значенийPerformanceEntry.startTimeхронологический порядок

Если не встречаетсяfilterобъект условий, то возвращается пустой массив, если аргументы не принимаются, возвращаются всеentries

Поскольку возвращаемое значение является массивом, давайте объясним значение каждого атрибута каждого элемента массива:

  • connectEnd: время окончания соединения
  • connectStart: время начала подключения
  • decodedBodySize: Расшифрованный размер тела
  • domComplete:domвремя завершения рендера
  • domContentLoadedEventEnd:domВремя окончания события загрузки контента
  • domContentLoadedEventStart:domВремя начала события загрузки контента
  • domInteractive:domВремя взаимодействия
  • domainLookupEnd: время окончания поиска домена
  • domainLookupStart: время начала поиска домена
  • duration: время события
  • encodedBodySize: кодировка размера тела
  • entryType: Тип ввода ресурса
  • fetchStart: получить время запуска ресурса
  • initiatorType: Тип спонсора
  • loadEventEnd: Загрузить время окончания события
  • loadEventStart: загрузить время начала события
  • name: Обычно это текущий запросurlадрес
  • nextHopProtocol: протокол следующего перехода
  • redirectCount: количество перенаправлений
  • redirectEnd: время начала перенаправления, если перенаправления нет, значение равно 0
  • redirectStart: время окончания перенаправления, если перенаправления нет, значение равно 0
  • requestStart: Запросить время начала
  • responseEnd: время окончания ответа
  • responseStart: время начала ответа
  • secureConnectionStart: время начала безопасного соединения
  • serverTiming:серверное время
  • startTime:Время начала
  • transferSize: размер прохода
  • type: тип события
  • unloadEventEnd: удалить время окончания события
  • unloadEventStart: удалить время начала события
  • workerStart:workerВремя начала

Performance.mark(name)

Согласно данномуnameзначение для создания связанной метки времени в буфере ввода производительности браузера

Performance.measure(name, startMark, endMark)

Здесь принимаются три параметра:

  • name: название измерения
  • startMark: Имя начального маркера измерения (также может бытьPerformanceTimingИмя свойства)
  • endMark: Имя конечного маркера измерения (также может бытьPerformanceTimingИмя свойства)

Performance.getEntriesByName(name, type)

Здесь принимаются два параметра:

  • name: название измерения
  • type: Тип измерения (frame, navigation,resource,mark,measure,paint)

Performance.getEntriesByType(type)

получает параметр,typeто же, что и вышеPerformance.getEntriesByName(name, type)изtype

Performance.now()

Возвращает число, представляющее количество миллисекунд, прошедших с момента измерения производительности.

Performance.setResourceTimingBufferSize(maxSize)

Устанавливает максимальное количество объектов ввода производительности, которые браузер должен хранить в своем буфере ввода производительности.

Performance.toJSON()

возвращениеPerformanceобъектJSONобъект

Performance APIВведение почти такое же, и совместимость с браузером тоже очень хорошая:

В принципе, с тестированием производительности в нашем проекте проблем нет, ведь мы точно не можем запаковать код тестирования производительности в проект.

Performance API 的简单使用

Это небольшая демонстрация, которую я написал, примерно, что это значит:

То есть мы добавляем отметку перед выполнением таймераmeasure-start;

После выполнения таймера добавляется еще один маркерmeasure-end;

Измерьте время начала и продолжительность между двумя маркерамиmeasure-list;

Наконец очистить всеmarksбиты флага иmeasuresбит флага;

Из этой небольшой демонстрации мы можем видеть ее практичность и удобство, отсюда мы можем видеть,Performance APIОн может охватывать множество методов для определения времени его вызова, иPerformance 工具нет способа сделать это

В этом смысл того, что я имею в виду под комплементарностью

заключительные замечания

вот, в принципеPerformance 工具иPerformance APIРазличия и введение их соответствующих функций почти написаны.

Из приведенного выше объяснения мы можем понять, что разные вещи делают разные вещи.Хотя никто не может удовлетворить некоторые потребности, взаимное сотрудничество может улучшить ситуацию.

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

Для следующей статьи может быть два варианта:

  • vue и react используют Performance, чтобы определить, что быстрее (упрощенный демонстрационный тест)
  • Аудиты (с точностью до каждого поля в файле отчета аудита аудита)

Если у вас есть какие-либо идеи, пожалуйста, оставьте сообщение, спасибо за вашу поддержку

Категории