current position:Home>Learn the rrweb front-end traceability scheme, and don't be afraid of customer complaints any more
Learn the rrweb front-end traceability scheme, and don't be afraid of customer complaints any more
2021-08-27 10:27:43 【Fiery red rose】
rrweb yes 'record and replay the web' Abbreviation , Used to record and play back any web User actions in the interface .
One , Use scenarios
- Record and analyze how users use the product , Further optimization ;
- Collect the problems encountered by users bug Operation path of , Be reproduced ;
- Trace back the user's behavior , Can be stored as evidence ;
- Smaller recording volume , Lossless demonstration video ;
- Record the execution of automated tests ;
Two , New ideas :dom snapshot
Simple understanding : ⻚⾯ The view state in can be through DOM Description in the form of tree , So when we try to record ⼀ individual ⻚⾯ when , We can record DOM The state of the tree at each point in time . Record the page at each moment DOM state , When playing back, it can be displayed according to the time point .
problem : DOM The data is huge , It's recorded all the time , It's a little inappropriate .
3、 ... and , Realization principle ,Rrweb Adopted performance optimization scheme
- Record the of the initial page DOM state , Or at a particular moment DOM state , The operation instructions at different time points are collected later perhaps Some time Some DOM Changes as an incremental snapshot , Based on the original snapshot , Continue to add... Parsed according to behavior DOM data , Built subsequent snapshots , Reduce the storage or transmission of large amounts of data .
- throttle , For mouse movement , Page scrolling events are throttled
- compressed data , Tried to use pako.js Compress
Four ,RRWEB Project structure
rrweb Mainly by 3 Part of it is made up of :
- rrweb-snapshot, contain snapshot and rebuild Two functions . snapshot Is used to DOM And its state is transformed into a serializable data structure and a unique identifier is added ; rebuild Will be snapshot The recorded data structure is reconstructed to the corresponding DOM, And insert it into the document
- rrweb, contain record and replay Two functions . record Used to record DOM All changes in (mutation); replay It is to replay the changes of records one by one according to the corresponding time .
- rrweb-player, by rrweb Provide a set of UI Control , Offer based on Pause of graphical user interface 、 Fast forward 、 Drag to any time point to play and other functions .
5、 ... and ,rrweb Technical details
Split structure
- snapshot Method
- The first point :Snapshot Build page DOM Trees , At the same time id -> Node Mapping , It's building DOM The tree generates a unique for each node id, Simultaneous basis id Generate a map , As long as this mapping is to facilitate subsequent incremental snapshot operations
- Second point : take href,src,CSS Set the relative path in as the absolute path Put some scripts , style , The relative path referenced by pictures is changed to absolute path
- The third point : Change the style of the page reference to inline style , To ensure that local styles can be used Change the style reading of the page reference to inline style
- Fourth, : Will some DOM State inline to HTML Properties of the , for example HTMLInputElement Value The record is not reflected in HTML View state in . for example transport ⼊ The value after is not reflected in its HTML in , We need to read its value Value and record
- The first five : take script The tag is converted to noscript Mark , To prevent the script from being executed When playing the recording page , The script of the page cannot be executed , Need to ban
- rebuild Method
- By creating a Dom, Set properties, etc , And the corresponding DOM Insert into the document
- record Method
- We talked about incremental snapshots , How is incremental data collected ? After starting recording , A... Will be generated for the current page DOM snapshot , Then start listening to user actions and pages DOM The change of .
The monitoring behavior is as follows :
- DOM change o Node creation 、 The destruction o Node attribute changes o Text changes
- Mouse interaction o mouse up、mouse down o click、double click、context menu o focus、blur o touch start、touch move、touch end
- Page or element scrolling
- Window size changes
- Mouse movement
- Input
There are ways to monitor :
- DOM change ,MutationObserver among , monitor DOM change Mainly through API --- MutationObserver To achieve . When the surveillance DOM In the event of change , MutationObserver The notification will be received and the preset callback parameters will be triggered , And addEventListener The method is similar
- Mouse interaction , Page scrolling , The window size is determined by Listen in the form of event binding adopt Form monitoring
- Mouse movement Pass record ⿏ Mark the moving position , We can simulate... During playback ⿏ Mark the moving track . Ensure playback ⿏ While moving smoothly, try to reduce the corresponding Oplog The number of , So we will do two-layer throttling . The first ⼀ Layer is every 50 ms Maximum records ⼀ Time ⿏ Coordinate , The first ⼆ Layer is every 500 ms Send at most ⼀ Time ⿏ Coordinate set , The first ⼆ The main of the layer ⽬ The is to avoid ⼀ Too many requests ⽽ Do the segmentation .
- Input
We need to observe input, textarea, select The output of the three elements ⼊, contain ⼈ Set the input of two ways for interaction and program ⼊.
- Human interaction about ⼈ For interactive operation, we mainly rely on Monitoring input and change Two event Observations , It should be noted that for different events with the same value ⾏ duplicate removal .
- Program settings Setting the properties of these elements directly through code will not trigger events , We can hijack the corresponding properties setter To achieve the purpose of monitoring ⽬ Of .
replay The playback
After determining the final recording ⽅ After the case , We can realize the corresponding playback function . Relatively speaking, the idea of playback is more clear , It can be divided into the following 3 Main steps :
- stay ⼀ Rebuild the snapshot to the corresponding... In a sandbox environment DOM Trees .
- take Oplog The operations in are arranged according to time stamps , discharge ⼊⼀ In an operation queue .
- start-up ⼀ Timers , Constantly check the operation queue , Take out and reproduce the operation up to time .
6、 ... and , Usage method
copyright notice
author[Fiery red rose],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827102736905e.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich