Фронтенд-мониторинг и фронтенд-точка захоронения, одно — цель, другое — метод реализации, фронтенд-точка захоронения предназначена для фронтенд-мониторинга, так зачем же делать фронтенд-мониторинг?
Цель внешнего мониторинга состоит в том, чтобы:
Получайте поведение пользователей и отслеживайте использование продукта на стороне пользователя, и на основе данных мониторинга укажите направление оптимизации продукта.
Интерфейсный мониторинг
Внешний мониторинг можно разделить на три категории: мониторинг данных, мониторинг производительности и мониторинг исключений.
Мониторинг данных
Мониторинг данных предназначен для отслеживания поведения пользователей. Общие элементы мониторинга включают:
- PV/UV: PV (просмотр страницы): количество просмотров страниц или кликов; UV: количество людей, которые посещают сайт или нажимают на новости с разных IP-адресов.
- Время, которое пользователи проводят на каждой странице
- Какую запись использует пользователь для доступа к странице
- Действия, инициированные пользователем на соответствующей странице
Эти данные имеет смысл подсчитывать, например, мы знаем исходные каналы пользователей, которые могут способствовать продвижению товаров, знаем, как долго пользователи остаются на каждой странице, и увеличиваем рекламный толчок для страниц, которые остаются на долгое время.
мониторинг производительности
Мониторинг производительности относится к мониторингу производительности внешнего интерфейса, в основном включая мониторинг веб-страницы или взаимодействия с пользователем продукта. Общие элементы мониторинга производительности включают в себя:
- Время загрузки первого экрана под разными пользователями, разными моделями и разными системами
- время белого экрана
- Время отклика для таких запросов, как http
- Общее время загрузки статических ресурсов
- Время рендеринга страницы
- Время завершения анимации взаимодействия со страницей
Результаты этого мониторинга производительности могут показать качество производительности интерфейса.По результатам мониторинга производительности производительность интерфейса может быть дополнительно оптимизирована, например, совместимость с анимационными эффектами браузеров с низкими версиями, ускорение загрузки первого экрана и так далее.
мониторинг исключений
Поскольку во внешнем коде продукта также возникают исключения в процессе выполнения, необходимо ввести мониторинг исключений. Своевременное сообщение о нештатных ситуациях позволяет избежать онлайн-сбоев. Хотя большинство исключений может бытьtry catchспособ поймать, но такие как утечки памяти и другие случайные исключения трудно поймать. Общие исключения для мониторинга включают:
- Мониторинг исключения в JavaScript
- Мониторинг исключений для потери стилей
внешний интерфейс
Теперь, когда мы закончили говорить о трех категориях внешнего мониторинга, давайте поговорим о том, как реализовать внешний мониторинг. Чтобы добиться внешнего мониторинга, первым шагом должен быть сбор элементов (данных), которые мы хотим отслеживать, отправка их в фоновый режим и, наконец, анализ данных. Богатство и точность сбора данных будут напрямую влиять на качество нашего внешнего мониторинга, потому что мы будем использовать его в качестве основы для дальнейшего развития продукта.
Мы собираем данные мониторинга с помощью встраивания внешнего интерфейса.В настоящее время существует три распространенных метода встраивания внешнего интерфейса: ручное встраивание, визуальное встраивание и отсутствие встраивания.
Похоронен вручную
Захоронение вручную, также называемое захоронением кода, означает написание кода вручную, вызов функций скрывающего SDK, вызов интерфейса в месте расположения функции бизнес-логики, которую необходимо скрыть, и отчет о скрытых данных, таких как Umeng, Baidu Statistics и другие. сторонние данные Большинство поставщиков статистических услуг используют эту схему.
Скрытие вручную позволяет пользователям легко задавать пользовательские свойства и пользовательские события, поэтому, когда вам нужно детализировать и уточнить пользовательский анализ, лучше использовать скрытие вручную.
Недостаток ручного захоронения заключается в том, что объем проектирования велик, слишком много мест для захоронения, а разработка продукта и операции должны постоянно взаимодействовать друг с другом, что подвержено ручным ошибкам. стоимость повторного захоронения также высока. Это приведет к тому, что весь цикл сбора данных станет очень длинным, стоимость сбора станет высокой, а эффективность будет очень низкой. Поскольку разработчики должны выполнять закапывание вручную, каждый раз, когда появляется обновление для закапывания или отсутствует точка закапывания, необходимо снова проходить процесс онлайн-релиза.Стоимость обновления также высока, и это также наносит определенный вред стабильность онлайн-системы.
Визуализируйте закопанные точки
С помощью визуального взаимодействия заменяются указанные выше скрытые точки кода. Разделите бизнес-код и скрытый код, предоставьте визуальную интерактивную страницу и введите бизнес-код.Благодаря этой системе визуализации вы можете настроить бизнес-код, чтобы добавить скрытые события и т. д. код. Недостатком является то, что элементы управления, которые можно скрыть, ограничены и не могут быть настроены вручную.
Визуальное захоронение звучит относительно высоко, но на самом деле оно мало чем отличается от захоронения кода. То есть система используется для реализации процесса ручной вставки скрытых точек кода. Например, Mixpanel является самой ранней визуализацией в зарубежных странах. TalkingData и Zhuge IO раньше поддерживали отслеживание визуализации в Китае. В 2017 году MTA Tencent также объявила о поддержке отслеживания визуализации. По сравнению с ручным отслеживанием, его сложно обновлять и стоимость отслеживания Проблема в том, что визуальное отслеживание оптимизирует процесс сбора данных в мобильных операциях и может поддерживать операции продукта для настройки точек отслеживания в любое время, без необходимости прохождения процесса выпуска и прямой отправки результатов конфигурации в интерфейс, упрощающий процесс сбора данных и делающий продукты более удобными.
Большинство решений в визуальном отслеживании основаны на XPath. XPath — это язык для поиска информации в XML-документах. XPath можно использовать для обхода элементов и атрибутов в XML-документах.
нет захоронения
Отсутствие скрытых точек заключается в том, что внешний интерфейс автоматически собирает все события, сообщает данные о скрытых точках, а серверная часть фильтрует и вычисляет полезные данные. Преимущество в том, что фронтенду достаточно один раз загрузить спрятанный скрипт, а недостаток в том, что трафик и собираемые данные слишком велики, а производительность сервера находится под большим давлением.
Есть основные GrowingIO и Shence, которые не используют технологию скрытых точек.
Суммировать
В разных сценариях нам нужно выбирать разные решения для скрытых точек. Например, для простых событий пользовательского поведения ее можно решить с помощью полного встраивания, тогда как для необходимости встраивания большого количества бизнес-полей, которые могут быть известны только во время выполнения, для ее решения необходимо декларативное встраивание.
пример кода
После разговора о теории давайте взглянем на общую реализацию кода ядра.
Собирать информацию о пользователях
Через объект JavaScript, встроенный в браузер, мы можем собрать некоторую базовую информацию о текущем пользователе.Мы направляем собранные данные на серверный скрипт через атрибут src экземпляра объекта Image и несем параметры, чтобы мы могли передать собранные данные на серверную часть.С другой стороны, причина использования объектов изображения вместо ajax заключается в том, чтобы избежать междоменных проблем.
(function () {
let params = {};
// document
if (document) {
params.domain = document.domain || ''; // 域名
params.url = document.URL || ''; // 当前 URL 地址
params.title = document.title || ''; // 当前页面标题
params.referrer = document.referrer || ''; // 上一个访问页面 URL 地址
}
// window
if(window && window.screen) {
params.sh = window.screen.height || 0; // 屏幕高度
params.sw = window.screen.width || 0; // 屏幕宽度
params.cd = window.screen.colorDepth || 0; // 屏幕颜色深度
}
// navigator
if(navigator) {
params.lang = navigator.language || ''; // 语言
}
// 拼接参数
let args = '';
for(let i in params) {
if(args !== '') {
args += '&';
}
args += `${i}=${params[i]}`
}
// 通过伪装成 Image 对象，传递给后端
let img = new Image(1, 1);
let src = `http://www.funlee.cn/api/test.jpg?args=${encodeURIComponent(args)}`;
img.src = src;
})()
Согласно конкретным потребностям фактического использования встроенного API JavaScript, вы также можете получить дополнительную информацию.
Внедрение скрытого кода через теги script
<script>
(function() {
let hm = document.createElement("script");
hm.type = "text/javascript";
hm.async = true;
hm.src = "http://www.funlee.cn/testAnalyze.js";
let s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
Получите время отклика на каждом этапе сети
Чтобы точно получить характеристики производительности нашего веб-приложения, нам необходимо знать время отклика приложения на различных этапах, таких как: время разрешения DNS, время установления TCP-соединения, время белого экрана домашней страницы, время завершения рендеринга DOM, время загрузки страницы Подождите. К счастью, эту информацию можно рассчитать, получив соответствующую информацию через интерфейс производительности.
let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;
console.log('DNS解析时间:', dnsTime,
'\nTCP建立时间:', tcpTime,
'\n首屏时间:', firstPaintTime,
'\ndom渲染完成时间:', domRenderTime,
'\n页面onload时间:', loadTime);
CSS-захоронение
Да, CSS также может выполнять отслеживание, что является небольшим навыком.Конечно, отслеживание CSS может обрабатывать только некоторые простые отслеживания событий, а JS по-прежнему требуется для сбора сложных данных, но отслеживание CSS имеет то преимущество, что его нельзя отключить.
Чтобы посмотреть полный пример, нажмите: Точка захоронения CSS
Основной код выглядит следующим образом:
<style>
.link:active::after{
color: red;
content: url("http://192.168.1.110:3000/someapi?params=someInfo");
}
</style>
<a class="link btn">点击访问</a>
<style> 前端学习培训、视频教程、学习路线，请添加威信：haomei0452