前端監控和前端埋點，一個是目的，一個是實現方式，做前端埋點，是為了做前端監控，那為什么要做前端監控呢？
前端監控的目的是：
獲取用戶行為以及跟蹤產品在用戶端的使用情況，并以監控數據為基礎，指明產品優化的方向。
前端監控
前端監控可以分為三類：數據監控、性能監控和異常監控。
數據監控
數據監控，就是監聽用戶的行為，常見的監控項有：
- PV/UV:PV(page view)：即頁面瀏覽量或點擊量；UV：指訪問某個站點或點擊某條新聞的不同 IP 地址的人數
- 用戶在每一個頁面的停留時間
- 用戶通過什么入口來訪問該網頁
- 用戶在相應的頁面中觸發的行為
統計這些數據是有意義的，比如我們知道了用戶來源的渠道，可以促進產品的推廣，知道用戶在每一個頁面停留的時間，可以針對停留較長的頁面，增加廣告推送等等。
性能監控
性能監控指的是監聽前端的性能，主要包括監聽網頁或者說產品在用戶端的體驗。常見的性能監控項包括：
- 不同用戶，不同機型和不同系統下的首屏加載時間
- 白屏時間
- http 等請求的響應時間
- 靜態資源整體下載時間
- 頁面渲染時間
- 頁面交互動畫完成時間
這些性能監控的結果，可以展示前端性能的好壞，根據性能監測的結果可以進一步的去優化前端性能，比如兼容低版本瀏覽器的動畫效果，加快首屏加載等等。
異常監控
由于產品的前端代碼在執行過程中也會發生異常，因此需要引入異常監控。及時的上報異常情況，可以避免線上故障的發上。雖然大部分異常可以通過 try catch 的方式捕獲，但是比如內存泄漏以及其他偶現的異常難以捕獲。常見的需要監控的異常包括：
- Javascript 的異常監控
- 樣式丟失的異常監控
前端埋點
我們說完了前端監控的三個分類，現在就來聊聊怎么實現前端監控。實現前端監控，第一步肯定是將我們要監控的事項（數據）給收集起來，再提交給后臺，最后進行數據分析。數據收集的豐富性和準確性會直接影響到我們做前端監控的質量，因為我們會以此為基礎，為產品的未來發展指引方向。
收集監控數據我們是通過前端埋點來實現的，目前常見的前端埋點方法有三種：手動埋點、可視化埋點和無埋點。
手動埋點
手動埋點，也叫代碼埋點，即純手動寫代碼，調用埋點 SDK 的函數，在需要埋點的業務邏輯功能位置調用接口，上報埋點數據，像友盟、百度統計等第三方數據統計服務商大都采用這種方案。
手動埋點讓使用者可以方便地設置自定義屬性、自定義事件；所以當你需要深入下鉆，并精細化自定義分析時，比較適合使用手動埋點。
手動埋點的缺陷就是，項目工程量大，需要埋點的位置太多，而且需要產品開發運營之間相互反復溝通，容易出現手動差錯，如果錯誤，重新埋點的成本也很高。這會導致整個數據收集周期變的很長，收集成本變的很高，而且效率很低。因為手動埋點需要開發人員完成，所以每次有埋點更新，或者漏埋點，都需要重新走上線發布流程，更新成本也高，對線上系統穩定性也有一定危害。
可視化埋點
通過可視化交互的手段，代替上述的代碼埋點。將業務代碼和埋點代碼分離，提供一個可視化交互的頁面，輸入為業務代碼，通過這個可視化系統，可以在業務代碼中自定義的增加埋點事件等等，最后輸出的代碼耦合了業務代碼和埋點代碼。缺點就是可以埋點的控件有限，不能手動定制。
可視化埋點聽起來比較高大上，實際上跟代碼埋點還是區別不大。也就是用一個系統來實現手動插入代碼埋點的過程。比如國外比較早做可視化的是 Mixpanel，國內較早支持可視化埋點的有TalkingData、諸葛 IO，2017年騰訊的 MTA 也宣布支持可視化埋點；相比于手動埋點更新困難，埋點成本高的問題，可視化埋點優化了移動運營中數據采集的流程，能夠支持產品運營隨時調整埋點，無需再走發版流程，直接把配置結果推入到前端，數據采集流程更簡化，也更方便產品的迭代。
可視化埋點中多數基于Xpath的方案，XPath 是一門在 XML 文檔中查找信息的語言，XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。
無埋點
無埋點則是前端自動采集全部事件，上報埋點數據，由后端來過濾和計算出有用的數據。優點是前端只要一次加載埋點腳本，缺點是流量和采集的數據過于龐大，服務器性能壓力山大。
總結
在不同場景下我們需要選擇不同的埋點方案。例如對于簡單的用戶行為類事件，可以使用全埋點解決；而對于需要攜帶大量運行時才可獲知的業務字段的埋點需求，就需要聲明式埋點來解決。
代碼實例
說完了理論的東西，我們來看點常見的核心代碼實現。
收集用戶信息
通過瀏覽器內置的 JavaScript 對象，我們就可以收集當前用戶的一些基本信息，我們將收集好的數據通過 Image 對象實例的 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;
})()
可以根據具體的實際需求，利用 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 埋點只能處理一些簡單的事件埋點，收集復雜的數據還是得用 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>
巨人的肩膀
參考鏈接：
