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