初步思路css
方式一:html
方式二:前端
現有SDKnode
html2canvas 是經過分析頁面中已加載好的 DOM 元素,而後 canvas 將生成的 DOM 節點繪製在畫布上,最後轉換爲圖片。它不是真正的截屏,只是根據頁面元素信息還原出圖片,因此並非 100% 和頁面相同的。git
侷限性github
瀏覽器支持web
Puppeteer 是 Google Chrome 團隊官方的無界面(Headless)Chrome 工具,它是一個 Node 庫,提供了一個高級的 API 來控制 DevTools協議上的無頭版 Chrome 。canvas
侷限性api
功能跨域
結論 html2canvas 更適合於 C 端的用戶行爲截圖跟蹤,而 Puppeteer 適用於自動化測試。
rrweb 主要由 3 部分組成:
rrweb適用場景:
侷限性
最終結論
綜合來看,結合思路一,基於 rrweb 來開發是最可行最快捷的。
目前,我基於 rrweb 已經作了個 demo 出來。如下是初步成果: demo代碼
Mutation Observer API 用來監視 DOM 變更。DOM 的任何變更,好比節點的增減、屬性的變更、文本內容的變更,這個 API 均可以獲得通知。
特色
example // Select the node that will be observed for mutations var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type == 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
複製代碼
observe方法接受兩個參數,第一個是所要觀察的DOM元素是article,第二個是所要觀察的變更類型(子節點變更和屬性變更),方法調用時必須指定一種或多種變更類型,不然報錯,變更類型以下:
boolean childList = false;
boolean attributes;
boolean characterData;
boolean subtree = false; //表示是否將該觀察器應用於該節點的全部後代節點。
boolean attributeOldValue; //表示觀察attributes變更時,是否須要記錄變更前的屬性值。
boolean characterDataOldValue; //表示觀察characterData變更時,是否須要記錄變更前的值。
sequence<DOMString> attributeFilter;//數組,表示須要觀察的特定屬性(好比['class','src'])
複製代碼
disconnect方法用來中止觀察。調用該方法後,DOM 再發生變更,也不會觸發觀察器。 takeRecords方法用來清除變更記錄,即再也不處理未處理的變更。該方法返回變更記錄的數組。
MutationRecord對象
DOM 每次發生變化,就會生成一條變更記錄(MutationRecord 實例)。該實例包含了與變更相關的全部信息。Mutation Observer 處理的就是一個個MutationRecord實例所組成的數組。 MutationRecord對象包含了DOM的相關信息,有以下屬性:
type:觀察的變更類型(attribute、characterData或者childList)。
target:發生變更的DOM節點。
addedNodes:新增的DOM節點。
removedNodes:刪除的DOM節點。
previousSibling:前一個同級節點,若是沒有則返回null。
nextSibling:下一個同級節點,若是沒有則返回null。
attributeName:發生變更的屬性。若是設置了attributeFilter,則只返回預先指定的屬性。
oldValue:變更前的值。這個屬性只對attribute和characterData變更有效,若是發生childList變更,則返回null。複製代碼