CN115292636A

CN115292636A - H5 page recording method, device and equipment and storage medium

Info

Publication number: CN115292636A
Application number: CN202210793668.0A
Authority: CN
Inventors: 祝彬彬
Original assignee: CITIC Aibank Corp Ltd
Current assignee: CITIC Aibank Corp Ltd
Priority date: 2022-07-05
Filing date: 2022-07-05
Publication date: 2022-11-04

Abstract

The application provides a method, a device and equipment for recording an H5 page and a storage medium. The method comprises the following steps: acquiring a route of an H5 page to be recorded; monitoring the route change of a front end H5 page, and judging whether the route needing to be recorded is matched; and responding to the matching of the current page with the route to be recorded, and recording the DOM data of the current page. The method and the device realize the recording of the H5 page by recording the DOM data, and have the following beneficial effects that: (1) The mobile phone terminal is separated, and recording is realized without depending on the mobile phone terminal; (2) The recorded data is json (object) -type DOM data, the data volume is far smaller than that of video data, and the DOM data is convenient to transmit and store; (3) The recorded data is in a visual form and meets the requirement of compliance.

Description

H5 page recording method, device and equipment and storage medium

Technical Field

The application relates to the technical field of internet, in particular to a method, a device and equipment for recording an H5 page and a storage medium.

Background

The current insurance and financing sub-services are mostly developed and written through H5. H5 refers to fifth generation HTML (HyperText Markup Language). According to the requirement of data compliance, the user track and the operation behavior of the front-end user need to be tracked and acquired.

For acquiring front-end user behaviors, there are currently video backtracking and dotting data and other ways, which specifically include:

and 1, calling a screen recording function of the mobile phone system, requiring a user to actively authorize a screen recording authority, and recording a video through mobile phone hardware.

And 2, in a silent mode (without actively authorizing screen recording permission by a user), utilizing the screen capturing function of the mobile phone, and generating a video picture by capturing 15 frames per second to realize the screen recording function.

And 3, analyzing the user behavior in a data dotting non-picture video form, and reporting the user behavior in a non-visual code form.

However, the existing video backtracking method has the defects of dependence on a mobile phone terminal, large data transmission quantity and the like, and the dotting data method cannot meet the requirement of compliance because of incapability of visualization.

Disclosure of Invention

The application provides a method, a device and equipment for recording an H5 page and a storage medium.

In a first aspect, the present application provides a method for recording an H5 page, including: acquiring a route of an H5 page to be recorded; monitoring the route change of a front end H5 page, and judging whether the route needing to be recorded is matched or not; and responding to the matching of the current page with the route to be recorded, and recording the Document Object Model (DOM) data of the current page.

In some optional embodiments, the step of obtaining the route of the H5 page to be recorded includes: and if the routing data are updated, the routing of the H5 page to be recorded is obtained from the remote end again and stored in the local storage.

In some optional embodiments, the step of recording DOM data of the current page includes: obtaining a routing parameter of a current page, wherein the routing parameter carries a recording parameter; and recording DOM node data in the DOM changing track of the current page according to the acquired recording parameters and default parameters.

In some optional embodiments, the step of recording DOM node data in a DOM change track of the current page includes: monitoring a DOM change track of the current page by using a MutationObserver function; and acquiring a changed node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

In some optional embodiments, the method further comprises: and presenting the recorded DOM data in a visual form according to the time stamp sequence.

In a second aspect, the present application provides an H5 page recording apparatus, including: the acquisition module is configured to acquire a route of an H5 page needing to be recorded; the matching module is configured to monitor the route change of the front end H5 page and judge whether the route needing to be recorded is matched; and the recording module is configured to record the Document Object Model (DOM) data of the current page in response to the current page matching the route to be recorded.

In some optional embodiments, the recording module is further configured to: obtaining a routing parameter of a current page, wherein the routing parameter carries a recording parameter; and recording the DOM node data in the DOM change track of the current page according to the acquired recording parameter and the default parameter.

In some optional embodiments, the data recording module is further configured to: monitoring a DOM change track of the current page by using a MutationObserver function; and acquiring a changed node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

In a third aspect, the present application provides a computer device comprising: one or more processors; a storage device having one or more programs stored thereon, which when executed by the one or more processors, cause the one or more processors to implement the H5 page recording method according to the first aspect.

In a fourth aspect, the present application provides a computer readable storage medium having stored thereon a computer program which, when executed by one or more processors, implements the H5 page recording method according to the first aspect.

In order to solve the defects that the existing video backtracking mode depends on a mobile phone terminal, the data transmission quantity is large and the like, and the dotting data mode is reported in an invisible code mode and cannot meet the compliance requirements and the like, the application provides an H5 page recording method, device and equipment and a storage medium. The method and the device realize the recording of the H5 page by recording the DOM data, and have the advantages of being but not limited to: (1) The mobile phone terminal is separated, and recording is realized without depending on the mobile phone terminal; (2) The recorded data is json (object) type DOM (document object model) data, and the data volume is far smaller than that of video data, so that the transmission and the storage are convenient; (3) The recorded data is in a visual form and meets the requirement of compliance.

Drawings

Other features, objects and advantages of the present application will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings. The drawings are only for purposes of illustrating the particular embodiments and are not to be construed as limiting the invention. In the drawings:

FIG. 1 is an exemplary system architecture diagram of at least one embodiment of the present application;

FIG. 2 is a timing diagram of one embodiment of a H5 page recording method according to the present application;

FIG. 3 is a schematic diagram illustrating the execution timing of various files in one embodiment of the present application;

fig. 4 is a schematic recording flow diagram of an embodiment of an H5 page recording method according to the present application;

fig. 5 is a schematic diagram illustrating a playing flow of recorded data according to an embodiment of an H5 page recording method of the present application;

FIG. 6 is a schematic structural diagram of an embodiment of an H5 page recording apparatus according to the present application;

FIG. 7 is a hardware component diagram of one embodiment of a computer device according to the present application.

Detailed Description

So that the manner in which the features and elements of the present embodiments can be understood in detail, a more particular description of the embodiments, briefly summarized above, may be had by reference to embodiments, some of which are illustrated in the appended drawings.

The applicant analyzes the existing video backtracking mode (including screen recording function and screenshot regeneration video) and the dotting data mode, and finds that the following partial or all technical problems may exist:

1, the screen recording function is realized by depending on a mobile phone client, and the screen recording function cannot be realized when an H5 page is separated from the client.

And 2, the failure rate is high, the video file acquired by the user can be uploaded to the server after the recording is finished, the real-time uploading cannot be realized, and the video uploading failure can be caused if the user performs non-conventional steps. Such as forcing the current phone app (Application) page to be closed or clicking the phone home button to exit the current page.

3, the performance experience is poor, and 1) the screen capturing operation can be continuously performed by the mobile phone system in a mode of recording the screen by the mobile phone terminal; 2) The recording data is huge, the size of the recording data in 1 minute is about 5MB, and the recording data needs to be stored locally in the recording process and needs to be uploaded to a server after the recording is finished.

And 4, the server needs to prepare an image storage server, and once the uploaded data is excessive, the server needs to continuously expand the capacity.

And 5, if the data is overlarge, the uploading failure is caused by overlarge data of the uploaded video, if the success rate is required to be 100%, the requirement cannot be met in the form of uploading the image file, and according to the current uploading rule, the uploading failure can be deleted for three times and is not further uploaded.

6, the file is too large and is not suitable for uploading to the server, so the client needs to compress, the compression form is artificially checked according to the compression ratio, the 2k video compressed to 640 is blurred, and the image compression is easy to distort and cannot be recognized.

7, the same compression ratio, different pixel mobile phone compression conditions will be different, for example, the business or supervision department needs to identify and record screen information, and the low pixel mobile phone will be distorted and can not be identified after being compressed.

And 8, the old mode realizes the screen recording function, and both the android end and the ios end need to be developed.

9, the volume of recorded videos is large, and a large amount of mobile phone flow of a user can be consumed due to the fact that the uploading data of the network types (wifi, 4 Gs) are not judged.

10, due to the fact that video packets are too large due to long-time recording through the screen capturing function, the current scheme can only record videos within 10 minutes.

11, the service requirements cannot be separated, the screen recording function and the service binding cannot be separated, the screen recording function can be influenced by the change of the service, and the corresponding screen recording function can be bound with the service due to the shielding requirement of the user for inputting the password and the like, so that the coupling is high.

12, the user's touch and screen-sliding gestures cannot be recorded, such as a user's gesture operation, clicking a certain button, etc.

And 13, the real-time playing cannot be carried out, the back management needs to download the uploaded video file, and then the video file is played in the local player.

14, reporting through a dotting non-visual code form cannot meet the requirements of supervision departments on Internet insurance financing regulations.

In order to solve the technical defects, the present application provides a method, an apparatus, a device, and a storage medium for recording an H5 page, and it is expected to solve the following technical problems:

1) According to the supervision and compliance requirements, the transaction process of the insurance financing sub-business (for the currency and non-goods) can be traced back.

2) As the insurance and financing sub-services are mostly developed and written through H5 pages and can be accessed in small programs and independent H5 pages, the recording needs to be separated from the mobile phone client to realize the recording.

3) The screen recording function is not developed through the screen recording function or the screen capturing mode of the mobile phone, but the recording function is realized by utilizing the DOM (document object model) change track of the user in the operation process. The DOM is a set of API (Application Programming Interface) used for HTML (HyperText Markup Language) and XML (Extensible Markup Language) files. The essence of the DOM is to bridge the web page to scripting or programming languages.

4) Bug (loophole) occurs in the operation of the user, the operation steps of the user are required to be reproduced, and the capability of solving the problem can be achieved by acquiring the operation behavior of the user through the recording and playback function.

5) Other drawbacks in the solutions that have been used today are addressed.

Referring to fig. 1, fig. 1 illustrates an exemplary system architecture 100 according to at least one embodiment of the H5 page recording method and apparatus of the present application.

As shown in fig. 1, the system architecture 100 may include at least one terminal device 101 and a server 102 and a network 103. Network 103 is the medium used to provide communication links between terminal equipment 101 and server 102. Network 103 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few. A user may use terminal device 101 to interact with server 102 over network 103 to receive or send messages or the like.

Various communication client applications, such as a banking system application, a web browser application, a shopping application, a search application, an instant messaging tool, a mailbox client, social platform software, etc., may be installed on the terminal device 101. The terminal apparatus 101 may be hardware or software. When the terminal device 101 is hardware, it may be various electronic devices with a display screen, including but not limited to a mobile phone, a tablet computer, a laptop portable computer, a desktop computer, and the like. When the terminal apparatus 101 is software, it can be installed in the electronic apparatuses listed above. It may be implemented as multiple pieces of software or software modules (e.g., to provide distributed services) or as a single piece of software or software module. And is not particularly limited herein.

The server 102 may be a server that provides various services, such as a background server that provides support for banking system applications and the like displayed on the terminal device 101. The server 102 may be hardware or software. When the server 102 is hardware, it may be implemented as a distributed server cluster composed of multiple servers, or may be implemented as a single server. When the server is software, it may be implemented as multiple pieces of software or software modules (e.g., to provide distributed services), or as a single piece of software or software module. And is not particularly limited herein.

It should be noted that the H5 page recording method provided in the present application is generally executed by the server 102, and accordingly, the H5 page recording apparatus is generally disposed in the server 102. It should be noted that, in some cases, the H5 page recording method provided in the present application may be executed by the server 102, the terminal device 101, or both the server 102 and the terminal device 101. Accordingly, the H5 page recording device may be disposed in the server 102, or may be disposed in the terminal apparatus 101, or may be partially disposed in the server 102 and partially disposed in the terminal apparatus 101. And accordingly system architecture 100 may include only server 102, or only terminal device 101, or may include terminal device 101, network 103, and server 102. This is not limited in this application.

It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

Referring to fig. 2, fig. 2 is a timing diagram of an embodiment of a H5 page recording method according to the present application. The H5 page recording method of the present application may be implemented by the server 102 of the system architecture shown in fig. 1.

As shown in fig. 2, the H5 page recording method of the present application may include the following steps:

step 201, the server 102 acquires a route of an H5 page to be recorded;

step 202, the server 102 monitors the route change of the front end H5 page displayed on the terminal device 101, and determines whether the route to be recorded is matched;

step 203, the server 102 records the document object model DOM data of the current page in response to the current page matching the route to be recorded.

In some optional embodiments, step 201 comprises: and if the routing data is updated, the routing of the H5 page to be recorded is obtained from the remote end again and stored in the local storage.

In some alternative embodiments, step 203 comprises: acquiring a routing parameter of a current page, wherein the routing parameter carries a recording parameter; and recording the DOM node data in the DOM change track of the current page according to the acquired recording parameter and the default parameter.

In some optional embodiments, the step of recording DOM node data in a DOM change track of the current page includes: monitoring a DOM change track of the current page by using a MutationObserver function; and acquiring a change node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

The H5 page recording method is applied to the following technologies in implementation:

1. mutationObserver. The mutationObserver is a powerful API applied to a browser. The MutationObserver can be used to monitor DOM variations. Any change in the DOM, such as an increase or decrease in nodes, a change in attributes, and a change in text content, will trigger a MutationObserver event. The Mutation Observer is asynchronously triggered, and the change of the DOM is not triggered immediately but is triggered only when all the current DOM operations are finished. The Mutation Observer has the following characteristics: it waits for all script tasks to be completed and then runs (i.e. asynchronous trigger mode); the method encapsulates DOM change records into an array for processing, rather than individually processing DOM changes; it can either observe all types of changes in the DOM or specify that only one type of change is observed. The MutationObserver initiates the listening, accepting two parameters. The first parameter is: a DOM node to be observed; the second parameter is: objects are configured to specify particular variations to be observed. Each time the DOM changes, a change record (MutationRecord instance) is generated. This example contains all information related to the change. The Mutation Observer processes an array of Mutation record instances.

2. rrweb (managed and playback the web) library. The rrweb is a basic library for enabling the recording and playback of web pages, which can save the DOM in the page and user operations as serializable data for remote playback. The rrweb records are not screenshots of the entire screen at intervals, but rather records the DOM of the page, which is re-rendered upon playback. The rrweb adopts a recording mode that the DOM state of an initial page or the DOM state at a specific moment is recorded, the operation instructions at different time points or the change of a certain DOM at a certain moment are collected subsequently to be used as an incremental snapshot, DOM data analyzed according to behaviors are added continuously on the basis of the original snapshot, the subsequent snapshot is constructed, and the storage or transmission of a large amount of data is reduced. The method utilizes the MutationObserver of a modern browser, the interface provides the capability of monitoring the change of the DOM tree, the change of the DOM tree is recorded according to the status of document. To do so, the application installs an rrweb library in the project and executes an npm install rrweb rrweb-player. rrweb-player is a playback dependent package.

3. The vue framework. Vue is a set of progressive frameworks for building user interfaces. Vue adopts a design of bottom-up incremental development, provides an MVVM (Model-View Model ) data binding and combinable component system, has a simple and flexible API, and can realize responsive data binding and combinable View components through the simple API. Interaction of Vue with the page is accomplished through built-in instructions. The effect of the instructions is to apply the interactive behavior to the DOM accordingly when the value of the expression changes.

4. The respective file functions are realized by writing files. The file outline is as follows:

js recording parameters in recording and playing process

Js defined constant values and enumerations

Js recording function implementation scheme

Js playing function implementation

Js match the routing information to be recorded and return the result

5. The main methods in record files:

startRecord()

uploadData(events)

stopRecord()

addCustomEvent()

6. js file the main methods in replay:

removeTargetView(parentView)

getPlayer(config)

replayerListener(player)

the execution timing of the above files is shown in fig. 3.

For the purpose of understanding the present application, the method flow of the present application will be described in further detail below with reference to specific flow charts.

Referring to fig. 4, fig. 4 is a recording flowchart of an embodiment of a H5 page recording method according to the present application.

With reference to fig. 3 and fig. 4, a recording process of an H5 page in an embodiment of the present application may include:

s1, an interface calls an H5 page route which is required to be recorded at a far end.

The rule is as follows: 1) In json form; 2) The key values are different.

The relevant routes are in a canonical format, such as: { key1: "finnaceasub? detail $ "};

front-end processing: match (new RegExp (routers [ key ])).

The above scheme can also process the matching rules by traversing the array form.

In order to meet the service configurability, the matching route can be acquired through the remote end, and if a certain route is added or the route is changed in the later period, the front end can finish the recording function through the back management configuration without version sending.

And the route data change is not frequent, so that the local storage can be stored after the related route is obtained, the stored global variable is taken out from the local storage after the project is started, and the route skip is obtained from the global variable. Whether the route data is updated or not can be determined through the interface version number, and if the route data is updated, the route data is acquired again and stored locally.

S2. The global route in main.js listens for route changes.

Due to the front-end hop, global routing hooks are experienced. The front end needs to determine whether the current page needs to be recorded in the route jump hook.

Such as: before Each ((to: route, from: route, next) = >) chromatic pocket

// todo recording logic decision

}

And if the parameter to is the route to be recorded, starting recording if the route to be recorded is hit, or stopping recording and exiting the recording process.

S3, obtaining the current route parameter to search the changeable recording configuration information (i.e. recording parameter)

In the process of recording the page, the difference of information recorded between the page and the page is inevitable, for example, the page A needs to record a gesture sliding function, and the page B does not need to record the gesture sliding function. Personalized configuration of recording parameters for the specified page is required.

In order not to be coupled with the service, different page routes can transmit the recording parameters through the routing parameters, and the recording parameters are combined with the default parameters through the acquired recording parameters. The related parameters need to be subjected to base64 encoding, and in the process of translating the input parameters in an encodeutero component mode, the front end acquires the recording parameters for combination after decoding and translation.

In the merging process, part of important parameters cannot be modified even if the current page is transmitted, and the part and the important parameters are processed, so that bugs of recording information caused by errors of transmission parameters are prevented from occurring. Such as callback method data processing in the recording process, time for generating full snapshots in the recording time, etc., do not accept the incoming parameters.

S4, recording flow:

according to the recording principle, a change node object is obtained from a mutation record through data returned by a mutation observer, the value comparison is carried out on the data returned by callback and nodes such as father and child nodes, brother nodes and the like are accessed to operate and play back a mutation record, the node which changes currently is recorded, and id and a timestamp are assigned to generate json data.

There may be some content in the page that is privacy-related and is not desired to be recorded, and the following support is made for this purpose:

adding the class name 'rr-block' to the HTML element will prevent the element and its sub-elements from being recorded, and the playback will replace it with a place-occupying element with the same width and height.

Adding the class name 'rr-ignore' to the HTML element will avoid recording the input event for that element.

All the text contents of the elements with the 'rr-mask' class name and its sub-elements will be masked.

A password input box of type ' = ' password '. Will not record an input event by default.

And after entering a browsing page, acquiring the total snapshot information of the current page, including style and a front-end dom tag. After the DOM data are changed, the id, the position and the time stamp of each changed DOM record are recorded, and the DOM change sequence is presented in a video form in the time stamp sequence in the playing process.

And in the data recording process, a type field is added, and the current node role is judged according to the type. The specific types are as follows:

type =4 to obtain the current link information, the screen width height

type =2 takes a full snapshot, including node nodes and style styles of the entire page

And type =3 records the variation, and if a dom element in the item is changed, the coordinate position is recorded, and the variation can be acquired in the playback process to accurately determine the change position.

Start recording main sequence:

1) Obtaining routing information, screen width, etc

2) And acquiring the full page information.

3) And recording the change information.

Since the changed dom data is recorded during the recording process, the changed data amount of type 3 is the most.

Referring to fig. 5, fig. 5 is a playing flow of recorded data according to an embodiment of the H5 page recording method of the present application.

Referring to fig. 3 and fig. 5, in an embodiment of the present application, a playing process of recorded data of an H5 page may include:

the server acquires the recorded json data, and the related json data is in an array form. And if the data acquisition fails, the operator is informed that the json data acquisition fails, and the json data acquisition can be refreshed or quit from watching. And if the data acquisition is successful, initializing player parameters to create a player, transmitting corresponding json data into the player, and analyzing corresponding dom data to execute playing according to the sequence of the time stamps. During the playing process, the user-defined event and the playing pause logic can be monitored to modify the page display.

In some alternative embodiments, the recorded json data may be viewed and played in a player in gif graphics.

To facilitate understanding, the present application also provides a simple json data structure as follows:

in the above, the present application provides a method for recording an H5 page, which records an H5 page by recording DOM data, and obtains beneficial effects including but not limited to:

1, separating from a mobile phone end, and independently recording a user operation track by H5;

2, the finished recorded file is not uploaded in the form of video stream, and Json (object) type DOM node data can be generated and uploaded to a server continuously in the recording process.

And 3, operating the node for acquiring the DOM variation in the DOM variation track, and compared with the size of a video recorded file, reducing the video of 1 minute to 500kb, reducing the whole volume by ten times, and avoiding excessive consumption of the mobile phone flow of a user.

4, the DOM data is in the form of json data, and the json data can be stored in a database in a translated string form without additionally providing an image server.

And 5, the success rate is high, data can be uploaded to the server at regular intervals, and the data can be uploaded by monitoring route changes, so that the operation track of the user can be recorded even if the user does not perform normal operation.

6, the image is not distorted due to the recording function formed by the change of the DOM document stream during the operation. Only the variation is recorded in a timestamp manner, and the variation is rearranged according to the timestamp sequence after being sent to the playing end to analyze the changed DOM data, but the frame rate and the code rate are not operated in a streaming manner.

And 7, recording can be independently realized without depending on different models of mobile phone terminals, and the condition that different definitions are displayed at different mobile phone terminals is avoided.

And 8, avoiding the need of developing a screen recording function at both the android terminal and the ios terminal.

9, the business can be separated, because the corresponding routes of different front-end pages are different, the pages to be recorded can be matched in a regular form, the targeted recording of different pages is realized, the related privacy and the like can be shielded and not recorded, and if the business requirement changes, the corresponding recording process cannot change according to the change of the requirement.

10, the click position of the user and the mouse sliding track can be recorded.

11, reporting the operation error information of the user can be recorded.

And 12, protecting the privacy of the user, such as shielding passwords, phone numbers and the like.

And 13, asynchronous loading data playback is supported.

And 14, realizing a custom scheme, and adding own unique data information through uploaded media data, such as uploading time and the like.

15, when the user accesses the page without operation behavior and data change, the DOM data is not stored, so that the data size is greatly reduced.

Referring to fig. 6, fig. 6 is a schematic structural diagram of an embodiment of an H5 page recording apparatus according to the present application. The H5 page recording apparatus of the present application can be applied to the server 102 of the system architecture shown in fig. 1.

As shown in fig. 6, the H5 page recording apparatus 600 of the present application may include:

an obtaining module 601 configured to obtain a route of an H5 page to be recorded;

the matching module 602 is configured to monitor a route change of a front-end H5 page, and determine whether a route to be recorded is matched;

and the recording module 603 is configured to record the document object model DOM data of the current page in response to the current page matching the route to be recorded.

In some optional embodiments, the recording module 603 is further configured to: acquiring a routing parameter of a current page, wherein the routing parameter carries a recording parameter; and recording the DOM node data in the DOM change track of the current page according to the acquired recording parameter and the default parameter.

In some optional embodiments, the recording module 603 is further configured to: monitoring a DOM change track of the current page by using a MutationObserver function; and acquiring a change node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

In some optional embodiments, the obtaining module 601 is further configured to: and if the routing data are updated, the routing of the H5 page to be recorded is obtained from the remote end again and stored in the local storage.

In some optional embodiments, the H5 page recording apparatus 600 further includes: a visualization module 604 configured to present the recorded DOM data in a visualized form in a time stamp order.

It should be noted that details of implementation and technical effects of each module in the apparatus of this embodiment may refer to descriptions of other embodiments in this application, and are not described herein again. The implementation scheme in each module of the device has diversity, as long as the purpose of the module can be achieved, and the actual deployment is not limited to a specific implementation scheme.

Referring to fig. 7, fig. 7 is a schematic structural diagram of one embodiment of a computer device for implementing a server according to the present application. As shown in fig. 7, a computer device 700 of the present application may comprise:

one or more processors 701;

a memory 702 on which one or more programs 703 are stored;

components such as processor 701 and memory 702 may be coupled together by a bus system 704; the bus system 704 is used to enable connection communication between these components;

the one or more programs 703, when executed by the one or more processors 701, cause the one or more processors 701 to implement the H5 page recording method as disclosed in the above method embodiments.

The bus system 704 may include a power bus, a control bus, and a status signal bus, among others, in addition to a data bus. The memory 702 may be either volatile memory or nonvolatile memory, and may include both volatile and nonvolatile memory. The Processor 701 may be an integrated circuit chip with Signal processing capabilities, and may be a general purpose Processor, a Digital Signal Processor (DSP), or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, or the like.

Embodiments of the present application also provide a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by one or more processors, implements the H5 page recording method as disclosed in the above method embodiments.

The present application is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the application. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

It should be understood that the terms "system" and "network" are often used interchangeably herein in this application. The term "and/or" in this application is only one kind of association relationship describing the associated object, and means that there may be three kinds of relationships, for example, a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" in this application generally indicates that the former and latter related objects are in an "or" relationship.

The above description is only for the purpose of illustrating the preferred embodiments of the present application and is not intended to limit the scope of the present application, which is to be accorded the widest scope consistent with the principles and spirit of the present application.

Claims

1. An H5 page recording method is characterized by comprising the following steps:

acquiring a route of an H5 page needing to be recorded;

monitoring the route change of a front end H5 page, and judging whether the route needing to be recorded is matched;

and responding to the matching of the current page with the route to be recorded, and recording the Document Object Model (DOM) data of the current page.

2. The method of claim 1, wherein the step of obtaining the route of the H5 page to be recorded comprises:

and if the routing data are updated, the routing of the H5 page to be recorded is obtained from the remote end again and stored in the local storage.

3. The method of claim 2, wherein the step of recording DOM data of the current page comprises:

obtaining a routing parameter of a current page, wherein the routing parameter carries a recording parameter;

and recording the DOM node data in the DOM change track of the current page according to the acquired recording parameter and the default parameter.

4. The method of claim 3, wherein the step of recording DOM node data in the DOM variation track of the current page comprises:

monitoring a DOM change track of the current page by using a MutationObserver function;

and acquiring a change node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

5. The method of claim 1, further comprising:

and presenting the recorded DOM data in a visual form according to the time stamp sequence.

6. An H5 page recording apparatus, comprising:

the acquisition module is configured to acquire a route of an H5 page needing to be recorded;

the matching module is configured to monitor the route change of the front end H5 page and judge whether the route needing to be recorded is matched or not;

and the recording module is configured to record the Document Object Model (DOM) data of the current page in response to the current page matching the route to be recorded.

7. The apparatus of claim 6,

the recording module further configured to: obtaining a routing parameter of a current page, wherein the routing parameter carries a recording parameter; and recording the DOM node data in the DOM change track of the current page according to the acquired recording parameter and the default parameter.

8. The apparatus of claim 7,

the data recording module further configured to: monitoring a DOM change track of the current page by using a MutationObserver function; and acquiring a change node object from the mutation record through data returned by the mutation observer function, recording the currently changed node through replaying the mutation record, and assigning an identifier and a timestamp to generate Json type DOM node data.

9. A computer device, comprising:

one or more processors;

a storage device having one or more programs stored thereon,

the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the H5 page recording method of any of claims 1-5.

10. A computer-readable storage medium, having stored thereon a computer program which, when executed by one or more processors, implements the H5 page recording method of any one of claims 1-5.