(я практик во все времена)
Говоря о системах мониторинга производительности переднего плана, большинство людей должно быть с ними знакомо, может быть, вы их используете, а может быть, вы только что слышали о них. Одним словом, он так часто появляется в нашей работе.
Итак, чтобы создать систему мониторинга производительности переднего плана, какие параметры информации мы должны учитывать? Эти данные действительно полезны для нас? К каким сценариям он применим? Есть много вопросов, на которые нужно ответить, и мы должны ответить на некоторые вопросы, прежде чем мы это сделаем. Если на эти вопросы нельзя ответить, не пытайтесь легкомысленно. Вот некоторые вопросы, которые, как мне кажется, нуждаются в разъяснении.
Сначала подумайте над некоторыми вопросами
- Зачем нужна система мониторинга производительности фронтенда, действительно ли она нужна продуктам компании или просто для развлечения?
- В отрасли так много зрелых продуктов, могу ли я использовать их напрямую? Это лучшее решение, чтобы сделать один самостоятельно?
- Какую информацию о широте мы должны учитывать? Вы уверены в точности вашей статистики?
- Действительно ли информация о размерах, которую вы разработали, имеет справочное значение для нашей разработки?
- Можно ли продвигать продукт, который вы разрабатываете, в команду компании? Кому-то еще нужен ваш продукт? Будет ли он сотрудничать с вами?
- Если вы начали этим заниматься, понимали ли вы потребности других людей в команде? Есть ли у них какие-либо ценные для вас комментарии?
- Можете ли вы или ваша команда улучшить технику? У вас есть ресурсы сервера? Есть ли у вас планы повторить в будущем?
- Можете ли вы привести остальную часть команды, чтобы сделать это вместе? Привлекательно ли это для них?
Выше приведены некоторые вопросы, которые, по моему личному мнению, должны быть рассмотрены. Пока мы можем дать разумный ответ, давайте начнем.
Итак, давайте начнем
Прежде чем запускать продукт, мы должны подумать о некоторых технических проблемах или проблемах пользовательского интерфейса.
Может быть, вам следует нарисовать несколько прототипов продукта на продукте, даже простой нарисованный от руки эскиз подойдет.
Технически нам необходимо решить основные статистические проблемы, такие как API для статистических данных о производительности страницы: производительность, производительность совместима с браузерами выше IE9, производительность страницы статистики performance.timing, производительность ресурса страницы статистики performance.getEntriesByType('resource') . Информация об ошибке на странице статистики window.onerror.
Проблемы, возникающие при разработке:
Как подсчитать все данные о производительности AJAX на странице и как узнать, что все AJAX были загружены
Как посчитать детализацию производительности всех ресурсов на странице (включая асинхронный ajax и картинки), справится ли с этим API браузера?
Как узнать, какие страницы посещал пользователь, насколько они глубоки и как отслеживать записи
Как лучше кэшировать сторонний интерфейс, используемый для получения информации об IP-сети пользователя, чтобы решить проблему, с которой пользователи звонят при каждом посещении.
Ресурс страницы, ajax, js сообщают об ошибках одновременно, как их все просканировать и записать
Как решить проблему, связанную с тем, что данные часто записываются в большой объем данных, и как должна быть спроектирована или обработана база данных?
В ответ на вышеуказанные проблемы, я кратко описываю свой метод обработки:
1. Как подсчитать все данные о производительности AJAX на странице и как узнать, что все AJAX загружены?
Поскольку ajax на странице в основном загружается асинхронно, мы не можем быть уверены, действительно ли был загружен ajax на странице.window.onloadне решает нашу проблему.
Ввиду того, что большинство веб-страниц используют объект XMLHttpRequest для ajax, мы можем переопределить объект XMLHttpRequest, в котором загружается страница, и перехватить методы open, onload и onreadystatechange. Конкретный код может относиться к этому проекту.
2. Как посчитать детализацию производительности всех ресурсов на странице (включая асинхронный ajax и картинки), справится ли с этим API браузера?
Прежде чем все асинхронные ресурсы страницы будут загружены,performance.getEntriesByType('resource')Список ресурсов, полученный методом, неполный, как максимально обеспечить полноту?
На странице есть два основных типа асинхронных ресурсов: один — ajax, а другой — изображения.Для ajax мы можем использовать метод 1, чтобы получить окончательное время загрузки.Для изображений мы можем получить список всех ресурсов изображений на текущую страницу и создать новый объект Image(), чтобы получить окончательное время. Наконец, сравните время загрузки изображения и ajax, кто больше, тот ближе к (или) окончательному времени завершения загрузки страницы, если нет изображения и ресурса ajax, то используйте window.onload, и, наконец, вызовите performance.getEntriesByType ('resource'), чтобы получить окончательный список ресурсов.
3. Как узнать, какие страницы посещал пользователь, насколько глубоким было посещение и как отслеживать записи
Междоменный файл cookie, один файл cookie представляет информацию о пользователе, это значение не изменится в том же окне сеанса, а другой файл cookie связан с данными о производительности, информацией о посетителе, идентификатором сообщения об ошибке и т. д. той же страницы, этот файл cookie будет изменить со сменой страницы
4. Как лучше кэшировать сторонний интерфейс, используемый для получения информации об IP-сети пользователя, чтобы решить проблему, с которой пользователи звонят при каждом посещении.
1: То же, что и в предыдущем вопросе (3) Вы можете использовать файлы cookie. Если у вас есть файлы cookie, вам не нужно запрашивать повторно.
Второй: в соответствии со значением файла cookie, представляющего пользователя, найдите информацию об IP-адресе и операторе во внутреннем кеше после первого запроса.
5. Ресурс страницы, ajax, js сообщают об ошибках одновременно, как их все просканировать и зафиксировать
Напишите три монитора: один отслеживает XMLHttpRequest для получения информации об ошибках ajax, один отслеживает window.onerror для получения информации об ошибках страницы js и один отслеживает события ошибок для получения информации об ошибках ресурса страницы.
6. Как решить проблему, связанную с тем, что данные часто записываются в большой объем данных, и как должна быть спроектирована база данных или как с ней обращаться?
1: Напишите запланированное задание, создайте резервную копию, подсчитайте или удалите таблицу данных каждую ночь.
Два: сайт для создания таблицы данных
Три: страница отдается окну или кнопке sql, и соответствующие задачи выполняются вручную.
Четыре: кластерная обработка (это не так уж и много, иногда не все данные нужно хранить, у компании не так много серверов, вообще не считается)
И все: никакого кода! ! !
Адрес аффилированного github:GitHub.com/Ван Вэйан и…
Во вложении несколько визуализаций:
Следите за моим блогом:личный блог Зейна
Оригинальный адрес:Резюме после разработки первой версии системы мониторинга производительности интерфейса