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
- 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
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 .
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
author[Fiery red rose],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- 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
- 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
- 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
- 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!
-  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
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich