前端監(jiān)控和前端埋點租悄，一個是目的琼了，一個是實現(xiàn)方式逻锐，做前端埋點，是為了做前端監(jiān)控雕薪，那為什么要做前端監(jiān)控呢昧诱？
前端監(jiān)控的目的是：
獲取用戶行為以及跟蹤產品在用戶端的使用情況，并以監(jiān)控數(shù)據為基礎所袁，指明產品優(yōu)化的方向盏档。
前端監(jiān)控
前端監(jiān)控可以分為三類：數(shù)據監(jiān)控、性能監(jiān)控和異常監(jiān)控燥爷。
數(shù)據監(jiān)控
數(shù)據監(jiān)控妆丘，就是監(jiān)聽用戶的行為，常見的監(jiān)控項有：
- PV/UV:PV(page view)：即頁面瀏覽量或點擊量局劲；UV：指訪問某個站點或點擊某條新聞的不同 IP 地址的人數(shù)
- 用戶在每一個頁面的停留時間
- 用戶通過什么入口來訪問該網頁
- 用戶在相應的頁面中觸發(fā)的行為
統(tǒng)計這些數(shù)據是有意義的勺拣，比如我們知道了用戶來源的渠道，可以促進產品的推廣鱼填，知道用戶在每一個頁面停留的時間药有，可以針對停留較長的頁面，增加廣告推送等等苹丸。
性能監(jiān)控
性能監(jiān)控指的是監(jiān)聽前端的性能愤惰，主要包括監(jiān)聽網頁或者說產品在用戶端的體驗。常見的性能監(jiān)控項包括：
- 不同用戶赘理，不同機型和不同系統(tǒng)下的首屏加載時間
- 白屏時間
- http 等請求的響應時間
- 靜態(tài)資源整體下載時間
- 頁面渲染時間
- 頁面交互動畫完成時間
這些性能監(jiān)控的結果宦言，可以展示前端性能的好壞，根據性能監(jiān)測的結果可以進一步的去優(yōu)化前端性能商模，比如兼容低版本瀏覽器的動畫效果奠旺，加快首屏加載等等蜘澜。
異常監(jiān)控
由于產品的前端代碼在執(zhí)行過程中也會發(fā)生異常，因此需要引入異常監(jiān)控响疚。及時的上報異常情況鄙信，可以避免線上故障的發(fā)上。雖然大部分異撤拊危可以通過 try catch 的方式捕獲装诡，但是比如內存泄漏以及其他偶現(xiàn)的異常難以捕獲。常見的需要監(jiān)控的異常包括：
- Javascript 的異常監(jiān)控
- 樣式丟失的異常監(jiān)控
前端埋點
我們說完了前端監(jiān)控的三個分類践盼，現(xiàn)在就來聊聊怎么實現(xiàn)前端監(jiān)控鸦采。實現(xiàn)前端監(jiān)控，第一步肯定是將我們要監(jiān)控的事項（數(shù)據）給收集起來咕幻，再提交給后臺渔伯，最后進行數(shù)據分析。數(shù)據收集的豐富性和準確性會直接影響到我們做前端監(jiān)控的質量谅河，因為我們會以此為基礎咱旱，為產品的未來發(fā)展指引方向确丢。
收集監(jiān)控數(shù)據我們是通過前端埋點來實現(xiàn)的绷耍，目前常見的前端埋點方法有三種：手動埋點、可視化埋點和無埋點鲜侥。
手動埋點
手動埋點褂始，也叫代碼埋點，即純手動寫代碼描函，調用埋點 SDK 的函數(shù)崎苗，在需要埋點的業(yè)務邏輯功能位置調用接口，上報埋點數(shù)據舀寓，像友盟胆数、百度統(tǒng)計等第三方數(shù)據統(tǒng)計服務商大都采用這種方案。
手動埋點讓使用者可以方便地設置自定義屬性互墓、自定義事件必尼；所以當你需要深入下鉆，并精細化自定義分析時篡撵，比較適合使用手動埋點判莉。
手動埋點的缺陷就是，項目工程量大育谬，需要埋點的位置太多券盅，而且需要產品開發(fā)運營之間相互反復溝通，容易出現(xiàn)手動差錯膛檀，如果錯誤锰镀，重新埋點的成本也很高娘侍。這會導致整個數(shù)據收集周期變的很長，收集成本變的很高互站，而且效率很低私蕾。因為手動埋點需要開發(fā)人員完成，所以每次有埋點更新胡桃，或者漏埋點踩叭，都需要重新走上線發(fā)布流程，更新成本也高翠胰，對線上系統(tǒng)穩(wěn)定性也有一定危害容贝。
可視化埋點
通過可視化交互的手段，代替上述的代碼埋點之景。將業(yè)務代碼和埋點代碼分離斤富，提供一個可視化交互的頁面，輸入為業(yè)務代碼锻狗，通過這個可視化系統(tǒng)满力，可以在業(yè)務代碼中自定義的增加埋點事件等等，最后輸出的代碼耦合了業(yè)務代碼和埋點代碼轻纪。缺點就是可以埋點的控件有限油额，不能手動定制。
可視化埋點聽起來比較高大上刻帚，實際上跟代碼埋點還是區(qū)別不大潦嘶。也就是用一個系統(tǒng)來實現(xiàn)手動插入代碼埋點的過程。比如國外比較早做可視化的是 Mixpanel崇众，國內較早支持可視化埋點的有TalkingData掂僵、諸葛 IO，2017年騰訊的 MTA 也宣布支持可視化埋點顷歌；相比于手動埋點更新困難锰蓬，埋點成本高的問題，可視化埋點優(yōu)化了移動運營中數(shù)據采集的流程眯漩，能夠支持產品運營隨時調整埋點芹扭，無需再走發(fā)版流程，直接把配置結果推入到前端坤塞，數(shù)據采集流程更簡化冯勉，也更方便產品的迭代。
可視化埋點中多數(shù)基于Xpath的方案摹芙，XPath 是一門在 XML 文檔中查找信息的語言灼狰，XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。
無埋點
無埋點則是前端自動采集全部事件浮禾，上報埋點數(shù)據交胚，由后端來過濾和計算出有用的數(shù)據份汗。優(yōu)點是前端只要一次加載埋點腳本，缺點是流量和采集的數(shù)據過于龐大蝴簇，服務器性能壓力山大杯活。
總結
在不同場景下我們需要選擇不同的埋點方案旁钧。例如對于簡單的用戶行為類事件，可以使用全埋點解決互拾；而對于需要攜帶大量運行時才可獲知的業(yè)務字段的埋點需求歪今，就需要聲明式埋點來解決。
代碼實例
說完了理論的東西颜矿，我們來看點常見的核心代碼實現(xiàn)寄猩。
收集用戶信息
通過瀏覽器內置的 JavaScript 對象，我們就可以收集當前用戶的一些基本信息骑疆，我們將收集好的數(shù)據通過 Image 對象實例的 src 屬性指向后端腳本并攜帶參數(shù)田篇，就可以將我們收集的數(shù)據傳給后端，之所以用 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 || ''; // 語言
}
// 拼接參數(shù)
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;
})()
可以根據具體的實際需求坡疼，利用 JavaScript 的內置 API彬呻，還可以獲取到更多的信息衣陶。
通過 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>
獲取 web 各階段響應時間
為了準確獲取我們的 web 應用程序的性能特性柄瑰，我們就得知道該應用程序在各個階段的響應時間，比如：DNS 解析時間剪况、TCP 建立連接時間教沾、首頁白屏時間、DOM 渲染完成時間译断、頁面 load 時間等授翻。好在這些信息都可以通過 Performance 接口獲取相關信息來計算得出。
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 埋點只能處理一些簡單的事件埋點淮菠，收集復雜的數(shù)據還是得用 JS，但 CSS 埋點有個優(yōu)點就是荤堪，無法被禁用合陵。
完整實例請戳：CSS埋點
核心代碼如下：
<style>
.link:active::after{
color: red;
content: url("http://192.168.1.110:3000/someapi?params=someInfo");
}
</style>
<a class="link btn">點擊訪問</a>
巨人的肩膀
參考鏈接：
