Method for analyzing time consumption of page rendering of mobile terminal

Abstract

The embodiment of the invention provides a method for analyzing mobile terminal page rendering time consumption, and belongs to the technical field of mobile terminal development, and the method comprises the following steps: responding to an updating request of a mobile terminal page, for a view in the mobile terminal page, according to the real-time rendering end moment of the view, determining the time consumption of the mobile terminal page; determining a target rendering ending moment corresponding to the view according to the condition that whether the view and the same type of views displayed at the same position in the mobile terminal page form repeated drawing or not; and in response to the touch operation of the user, generating a view rendering time consumption list corresponding to the mobile terminal page according to the target rendering end moment corresponding to the view in the mobile terminal page. According to the method, page time consumption analysis can be independently carried out without a PC (Personal Computer), long-time-consumption nodes in the page rendering process of the mobile terminal are accurately positioned, and the development efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of mobile terminal development technology, and in particular to a method for analyzing mobile terminal page rendering time, a client, a computer-readable storage medium, and a computer program product. Background Art

[0002] During mobile development, PC-based debugging tools are often used for daily development, debugging, and problem analysis and troubleshooting. These tools allow developers to debug remote pages running on mobile phones directly from their computers, dynamically displaying page effects. However, PC-based debugging tools require developers to write or configure debugging scripts in advance, requiring a certain learning curve to familiarize themselves with their configuration and usage. Furthermore, they lack debugging depth and performance analysis capabilities. Summary of the Invention

[0003] The purpose of the embodiments of the present invention is to provide a method for analyzing the rendering time of a mobile page. The method can independently perform page rendering time analysis without a PC and accurately locate the long-time nodes in the mobile page rendering process, thereby providing assistance to developers when performing page analysis and improving development efficiency.

[0004] To achieve the above-mentioned object, a first aspect of an embodiment of the present invention provides a method for analyzing the rendering time of a mobile page, the method comprising: In response to an update request for a mobile page, for a view in the mobile page, determining a target rendering end time corresponding to the view based on the real-time rendering end time of the view and whether the view and a view of the same type displayed at the same location in the mobile page constitute duplicate drawing; In response to a user's touch operation, a time-consuming list of rendering of views corresponding to the mobile-end page is generated according to target rendering end times corresponding to the views in the mobile-end page.

[0005] In some embodiments, in response to an update request of the mobile page, initializing generation of a first data set and a second data set; The first data set and the second data set are dictionary structures; The first data set is used to store a mapping relationship between any of the views and the corresponding target rendering end time, the key of the first data set is generated according to the memory address of any of the views, and the value is used to store the target rendering end time of any of the views; The second data set is used to store a mapping relationship between first rendering end times corresponding to views of the same type and located at the same position as any of the views, wherein the key of the second data set is generated based on the type of any of the views and the display position on the mobile page, and the value is used to store the first rendering end time corresponding to views of the same type and located at the same position as any of the views; For the view in the mobile terminal page, determining the target rendering end time corresponding to the view according to the real-time rendering end time of the view and whether the view and a view of the same type displayed at the same position in the mobile terminal page constitute repeated drawing includes: When rendering of any of the views in the mobile page is completed, determining a target rendering end time corresponding to any of the views according to the real-time rendering end time of any of the views, the first data set, and the second data set; and The first data set and the second data set are updated according to the target rendering end time corresponding to any of the views.

[0006] In some embodiments, when the rendering of any of the views in the mobile page is completed, a target rendering end time corresponding to any of the views is determined according to the real-time rendering end time of any of the views, the first data set, and the second data set; and Updating the first data set and the second data set according to the target rendering end time corresponding to any of the views includes: generating a first keyword according to the memory address of the view; generating a second keyword according to the type of the view and the display position of the view on the mobile terminal page; When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is not found in the second data set, it is determined that the view and the same type of view displayed at the same position on the mobile terminal page do not constitute repeated drawing, the target rendering end time corresponding to the view is the real-time rendering end time of the view, and the mapping relationship between the first keyword and the determined target rendering end time is saved in the first data set, and the mapping relationship between the second keyword and the determined target rendering end time is saved in the second data set; When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is found in the second data set, it is determined that the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing, and the target rendering end time corresponding to the view is the first rendering end time found in the second data set according to the second keyword; the mapping relationship between the first keyword and the determined target rendering end time is saved in the first data set.

[0007] In some embodiments, the display position of the view in the mobile page includes the width, height, and coordinate value corresponding to the upper left corner of the view in the mobile page.

[0008] In some embodiments, the view rendering time-consuming list is generated by sorting the first data set using the rendering end time as a sorting key.

[0009] In some embodiments, the method further includes: in response to a user selecting a view rendering time record in a view rendering time list corresponding to the mobile page, marking a view corresponding to the selected view rendering time record.

[0010] In some embodiments, marking the view corresponding to the selected view rendering time-consuming record includes: Set the shading layer corresponding to the selected view rendering time record to the preset color.

[0011] In some embodiments, the method further includes: displaying or hiding the mark on the mobile page in response to a user's perspective switching operation.

[0012] In some embodiments, the method further includes: determining a rendering start time corresponding to the mobile page in response to an update request of the mobile page.

[0013] In some embodiments, the method further includes: in response to the user's touch operation, determining the interactive time of the mobile page based on the rendering start time and the target rendering end time corresponding to the view in the mobile page, and sending the interactive time of the mobile page to a remote server.

[0014] In some embodiments, determining the interactive time of the mobile page according to the rendering start time and the target rendering end time corresponding to the view in the mobile page includes: The interactive time corresponding to the mobile page is determined according to a maximum value of target rendering end times corresponding to views in the mobile page and the rendering start time.

[0015] A second aspect of an embodiment of the present invention provides a client, comprising a memory and a processor, wherein the processor is configured to execute the method for analyzing the time consumption of mobile page rendering.

[0016] A third aspect of an embodiment of the present invention provides a computer-readable storage medium having instructions stored thereon. When the instructions are executed by a processor, the method for analyzing the rendering time of a mobile page is implemented. A fourth aspect of an embodiment of the present invention provides a computer program product, including a computer program, which, when executed by a processor, implements the method for analyzing the time consumption of mobile page rendering.

[0017] An embodiment of the present invention first determines the target rendering end time corresponding to the view based on the real-time rendering end time of the view and whether the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing, and then generates a view rendering time column corresponding to the mobile page based on the target rendering end time corresponding to the view in the mobile page. Finally, based on the selection operation of the view rendering time record in the view rendering time list corresponding to the mobile page, the view corresponding to the selected view rendering time record is marked. This can quickly and accurately determine the time distribution of views in the rendering process of the mobile page on the mobile terminal, and visually display the drawing timing of each view, so as to quickly locate the jamming node of the rendering process and improve development efficiency.

[0018] Other features and advantages of the embodiments of the present invention will be described in detail in the subsequent detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following detailed description, they are used to explain the embodiments of the present invention, but do not constitute a limitation of the embodiments of the present invention. In the accompanying drawings: Figure 1 This is a timing diagram of the interaction between the user, client, and server provided by an embodiment of the present invention; Figure 2 This is a flow chart of a method for analyzing mobile page rendering time provided by an embodiment of the present invention; Figure 3 is a schematic diagram of a process for updating a first data set and a second data set provided by an embodiment of the present invention; Figure 4 This is a schematic diagram of the rendering and loading process of a mobile page provided by the embodiment of the present invention; Figure 5 This is a schematic diagram of a time-consuming list of view rendering provided by the embodiment of the present invention; Figure 6 It is a schematic diagram of a mobile terminal page provided by the embodiment of the present invention; Figure 7 This is a schematic diagram of a time-consuming list of view rendering provided by the embodiment of the present invention; Figure 8 It is a schematic diagram of a mobile terminal page provided by the implementation of the present invention. DETAILED DESCRIPTION

[0020] The following describes the specific implementation of the embodiment of the present invention in detail with reference to the accompanying drawings. It should be understood that the specific implementation described herein is only used to illustrate and explain the embodiment of the present invention and is not used to limit the embodiment of the present invention.

[0021] It should be noted that the acquisition, transmission, storage, use, and processing of data in the technical solution of this application are in compliance with the relevant provisions of laws and regulations. In the embodiments of this application, certain software, components, models, and other existing solutions in the industry may be mentioned. These should be considered as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of this application, but it does not mean that the applicant has or will necessarily use such solutions.

[0022] Figure 1 This is a timing diagram of the interaction between the user, client, and server provided by an embodiment of the present invention. Figure 2 This is a flow chart of a method for analyzing the rendering time of a mobile page provided by an embodiment of the present invention, referring to Figure 1 and Figure 2 , an embodiment of the present invention provides a method for analyzing the time consumption of mobile terminal page rendering, the method comprising: Step S201: In response to an update request for a mobile page, for a view in the mobile page, determine the target rendering end time corresponding to the view based on the real-time rendering end time of the view and whether the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing.

[0023] Specifically, the mobile page includes one or more views, and the views are used to display mobile page elements. Furthermore, the mobile page elements include navigation elements, content display elements, form input elements, operation feedback elements, and media elements. Among them, navigation elements include the bottom tab bar and the side drawer menu; content display elements include cards, lists, and carousels; form input elements include text input boxes, switch buttons, selectors, and sliders; operation feedback elements include buttons, floating operation buttons, loading animations, and prompt pop-ups; media elements include image previews and audio playback.

[0024] In some embodiments, view types are divided according to element types. Specifically, view types include navigation views, content display views, operation feedback views, and operation feedback views.

[0025] In some embodiments, the type of view is determined by a preset configuration file of the view and the corresponding type.

[0026] In some embodiments, the position of the view in the mobile page is determined based on the absolute position of the view on the mobile interface, such as the width, height, and coordinate value corresponding to the upper left corner of the view in the mobile page.

[0027] In some embodiments, the real-time rendering end time of a view refers to the current time obtained by the client in real time after the view rendering ends.

[0028] Furthermore, for JavaScript on the browser side, you can use the Date object to get the current time; for Java or Kotlin on Android, you can use System.currentTimeMillis() or the Calendar class to get the current time; for Swift on iOS, you can use Date() to get the current time; for the cross-platform framework Flutter, you can use Dart's DateTime.now() to get the current time.

[0029] In some embodiments, in response to an update request of the mobile page, initializing generation of a first data set and a second data set; The first data set and the second data set are in a dictionary structure. Furthermore, a dictionary is a collection of key-value pairs, where each key uniquely corresponds to a value, and the corresponding value can be directly accessed through the key.

[0030] In some embodiments, the initialized first data set and the second data set are empty dictionary type data objects, and the key-value pair data included in the first data set and the second data set are added in real time when the rendering of any view in the mobile page is completed.

[0031] The first data set is used to store a mapping relationship between any of the views and the corresponding target rendering end time, the key of the first data set is generated according to the memory address of any of the views, and the value is used to store the target rendering end time of any of the views; The second data set is used to store a mapping relationship between first rendering end times corresponding to views of the same type and located at the same position as any of the views, wherein the key of the second data set is generated based on the type of any of the views and the display position on the mobile page, and the value is used to store the first rendering end time corresponding to views of the same type and located at the same position as any of the views; For the view in the mobile terminal page, determining the target rendering end time corresponding to the view according to the real-time rendering end time of the view and whether the view and a view of the same type displayed at the same position in the mobile terminal page constitute repeated drawing includes: When rendering of any of the views in the mobile page is completed, determining a target rendering end time corresponding to any of the views according to the real-time rendering end time of any of the views, the first data set, and the second data set; and The first data set and the second data set are updated according to the target rendering end time corresponding to any of the views.

[0032] Figure 3 This is a schematic diagram of a process for updating a first data set and a second data set provided by an embodiment of the present invention, with reference to Figure 3 The updating process of the first data set and the second data set is described in detail. Specifically, in some embodiments, when the rendering of any of the views in the mobile page is completed, the target rendering end time corresponding to any of the views is determined based on the real-time rendering end time of any of the views, the first data set, and the second data set; and Updating the first data set and the second data set according to the target rendering end time corresponding to any of the views includes: Step S301: Generate a first keyword according to the memory address of the view; In some embodiments, view objects (such as UIView of iOS and View of Android) are stored in heap memory as object instances. The memory address is essentially the starting position identifier of the object in memory, and the memory address value is dynamically determined by the system memory allocator.

[0033] Furthermore, the memory address values ​​are illustrated using iOS and Android as examples. For iOS (Objective-C), the memory address corresponding to a view object is 0x600003a845c0. For Android (Java / Kotlin), the memory address corresponding to a view object is 140735012345678.

[0034] Step S302: Generate a second keyword based on the type of the view and the display position of the view on the mobile terminal page; In some embodiments, the display position of the view in the mobile page includes the width, height, and coordinate value corresponding to the upper left corner of the view in the mobile page.

[0035] It should be noted that the second keyword is generated by combining and concatenating the strings corresponding to the view type and the display position of the view on the mobile page. Specifically, a dictionary is a data structure that quickly finds a value by key. The first keyword in step S301 is a keyword used to match the key value in the first data set, and the second keyword in step S302 is a keyword used to match the key value in the second data set.

[0036] Step S303: When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is not found in the second data set, executing steps S304 to S305; Step S304: determining that the view and a view of the same type displayed at the same position on the mobile terminal page do not constitute repeated drawing, and the target rendering end time corresponding to the view is the real-time rendering end time of the view; Step S305: saving the mapping relationship between the first keyword and the determined target rendering end time to the first data set, and saving the mapping relationship between the second keyword and the determined target rendering end time to the second data set; Specifically, for steps S304 to S305, when the view and the same type of view displayed at the same position in the mobile page do not constitute repeated drawing, that is, the view is drawn for the first time, the target rendering end time of the view is the real-time rendering end time of the view, and the first rendering time of the same type of view displayed at the same position in the mobile page is the real-time rendering end time of the view. It is necessary to save the target rendering end time corresponding to the view in both the first data set and the second data set.

[0037] Step S306: When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is found in the second data set, executing steps S307 to S308; Step S307: Determine whether the view and a view of the same type displayed at the same position on the mobile terminal page constitute repeated rendering, and the target rendering end time corresponding to the view is the first rendering end time found in the second data set according to the second keyword; Step S308: Save the mapping relationship between the first keyword and the determined target rendering end time in the first data set.

[0038] Specifically, for steps S306 to S308, when the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing, the first rendering end time of the same type of view displayed at the same position as the view stored in the second data set needs to be used as the target rendering end time of the view and saved in the first data set.

[0039] Step S202: In response to a user's touch operation, generating a rendering time-consuming list of views corresponding to the mobile terminal page according to target rendering end times corresponding to the views in the mobile terminal page; Figure 4 This is a schematic diagram of the rendering and loading process of the mobile terminal page provided by the present invention, referring to Figure 4 , The page loading process is to load the top first, and then asynchronously request to load the sub-pages below. After the page is loaded, the final generated view rendering time-consuming list is as follows Figure 5 and Figure 7 As shown, Figure 5 and Figure 7 The view rendering time consumption list is generated by sorting the first data set in reverse order with the rendering end time as the sorting keyword. The view rendering time consumption record corresponding to the view with the longest time consumption is placed at the top of the view rendering time consumption list, and the view rendering time consumption record corresponding to the view with the shortest time consumption is placed at the bottom of the view rendering time consumption list.

[0040] Further, Figure 5 and Figure 7 The drawing interval displayed in the view rendering time list is generated based on the two adjacent view rendering time records in the view rendering time list, for example Figure 5 The drawing interval of 2475ms in view rendering time record 9 is determined based on the difference between the view rendering time end time of 16:59:36.562 in view rendering time record 9 and the view rendering time end time of 16:59:34.087 in view rendering time record 8.

[0041] In some embodiments, a view rendering time list is generated by sequentially sorting the first data set using the rendering end time as the sorting keyword, and the view rendering time record corresponding to the view with the longest time is placed at the bottom of the view rendering time list, and the view rendering time record corresponding to the view with the shortest time is placed at the top of the view rendering time list.

[0042] Step S203: In response to the user selecting a view rendering time record in the view rendering time list corresponding to the mobile page, marking the view corresponding to the selected view rendering time record.

[0043] In some embodiments, marking the view corresponding to the selected view rendering time consumption record includes: setting the shading layer corresponding to the view corresponding to the selected view rendering time consumption record to a preset color.

[0044] In some embodiments, marking the view corresponding to the selected view rendering time-consuming record includes: setting the background color corresponding to the view to be marked to a preset color.

[0045] In some embodiments, marking the view corresponding to the selected view rendering time-consuming record includes: setting the border style corresponding to the view to be marked to a preset border style.

[0046] Reference Figure 5 , the drawing interval between the two views corresponding to view rendering time record 9 and view rendering time record 8 is 2475ms, which takes too long and requires special attention. Mark all views that are less than the end time of view rendering corresponding to view rendering time record 9, that is, mark all views drawn before the view corresponding to view rendering time record 9, that is, select the remaining records arranged below view rendering time record 9 (view rendering time record 1 to view rendering time record 8), and mark the views corresponding to view rendering time record 1 to view rendering time record 8 in Figure 6 The mobile page shown is set to lavender. Further, Figure 7 This is a schematic diagram of a time-consuming list of view rendering provided by the present invention. Figure 8 This is a schematic diagram of the mobile terminal page provided by the present invention. Figure 7 、 Figure 8 , all views after the long time consumption will be colored, that is, all views drawn after the view corresponding to the view rendering time record 9 will be marked, that is, the remaining records arranged above the view rendering time record 9 (view rendering time record 9 to view rendering time record 12) will be selected, and the views corresponding to the view rendering time record 9 to the view rendering time record 12 will be marked. Figure 8 The mobile page shown is set to light purple, and you can intuitively see that the subsequent rendering is the sub-page at the bottom.

[0047] In some embodiments, the drawing interval S is first obtained based on the time difference between the target rendering end times corresponding to two views in two adjacent view rendering time records in the view rendering time list; then the total rendering time T of the page is determined using the difference between the target rendering end time of the first view and the target rendering end time of the last view; and then S and T are used to obtain the drawing interval ratio (S / T) corresponding to each view, and views whose drawing interval ratio is greater than a preset threshold are visually displayed, for example, a mark is set for views whose drawing interval ratio is greater than 40%, and the set mark is displayed on the mobile page.

[0048] By marking and visually displaying views with longer drawing intervals, you can quickly locate the specific time-consuming views on the mobile page. Based on this, you can analyze the business situation and quickly identify the cause.

[0049] In some embodiments, in response to a user's selection operation on a view rendering time record in the view rendering time list corresponding to the mobile page, the maximum rendering end time in the selected view rendering time record is determined, and a mark is automatically set for the view corresponding to the time record in the view rendering time list whose rendering end time is greater than the maximum rendering end time.

[0050] In some embodiments, determining the view that needs to be marked and marking it includes: setting a shading layer corresponding to the view that needs to be marked to a preset color.

[0051] In some embodiments, the method further includes: displaying or hiding the mark on the mobile page in response to a user's perspective switching operation.

[0052] Specifically, refer to Figure 5 、 Figure 6 , by setting the perspective toggle button, show or hide the lavender tinted layer set for the view.

[0053] In some embodiments, the views of the mobile page include normally rendered views, ignored views, and last rendered views. The last rendered views are views corresponding to the last N view rendering time records in the view rendering time list at the target rendering end time, where N is an integer greater than or equal to 1 and can be dynamically set based on the actual needs of the project, for example, N is set to 5.

[0054] Furthermore, the normally rendered view, the ignored view, and the last rendered view are colored in different colors, for example, a green coloring layer is set for the normally rendered view, a gray coloring layer is set for the ignored view, and a red coloring layer is set for the last rendered view.

[0055] In some embodiments, the view of the mobile page includes a visible view and an invisible view, only the target rendering end time corresponding to the visible view is recorded, the invisible view is ignored, and after generating the view rendering time-consuming list, a light yellow tinting layer is set for the visible view.

[0056] In some embodiments, the method further includes: determining a rendering start time corresponding to the mobile page in response to an update request of the mobile page.

[0057] In some embodiments, the method further includes: in response to the user's touch operation, determining the interactive time of the mobile page according to the target rendering end time corresponding to the view in the mobile page, and sending the interactive time of the mobile page to a remote server.

[0058] Specifically, Time To Interactive refers to the time from when a user requests a page to when they can interact with it, and is an important indicator for measuring web page performance.

[0059] Furthermore, determining the interactive time of the mobile page according to the target rendering end time corresponding to the view in the mobile page includes: The interactive time corresponding to the mobile page is determined according to a maximum value of target rendering end times corresponding to views in the mobile page and the rendering start time.

[0060] In some embodiments, the interactive time corresponding to the mobile page is the difference between the maximum value of the target rendering end time corresponding to the views in the mobile page and the rendering start time.

[0061] An embodiment of the present invention provides a client, comprising a memory and a processor, wherein the processor is configured to execute the method for analyzing the time consumption of mobile page rendering.

[0062] An embodiment of the present invention provides a computer-readable storage medium having instructions stored thereon. When the instructions are executed by a processor, the method for analyzing the rendering time of a mobile page is implemented. An embodiment of the present invention provides a computer program product, including a computer program, which, when executed by a processor, implements the method for analyzing the rendering time of a mobile page.

[0063] An embodiment of the present invention first determines the target rendering end time corresponding to the view based on the real-time rendering end time of the view and whether the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing, and then generates a view rendering time column corresponding to the mobile page based on the target rendering end time corresponding to the view in the mobile page. Finally, based on the selection operation of the view rendering time record in the view rendering time list corresponding to the mobile page, the view corresponding to the selected view rendering time record is marked. The time distribution of the views of the mobile page in the rendering process can be accurately determined on the mobile terminal, and the drawing timing of each view can be visually displayed, so as to quickly locate the long-time-consuming and stuck nodes in the rendering process, thereby improving development efficiency.

[0064] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0065] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0066] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0067] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 The steps for the function specified in one or more boxes.

[0068] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0069] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0070] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can be implemented using any method or technology for information storage. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change RAM (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices, or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media, such as modulated data signals and carrier waves.

[0071] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0072] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A method for analyzing the time consumption of mobile page rendering, characterized in that: The method includes: In response to an update request for a mobile page, for a view in the mobile page, determining a target rendering end time corresponding to the view based on the real-time rendering end time of the view and whether the view and a view of the same type displayed at the same location in the mobile page constitute duplicate drawing; In response to a user's touch operation, a time-consuming list of rendering of views corresponding to the mobile-end page is generated according to target rendering end times corresponding to the views in the mobile-end page.

2. The method according to claim 1, characterized in that The method includes a first data set and a second data set; The first data set is used to store a mapping relationship between any of the views and the corresponding target rendering end time, the key of the first data set is generated according to the memory address of any of the views, and the value is used to store the target rendering end time of any of the views; The second data set is used to store a mapping relationship between first rendering end times corresponding to views of the same type and located at the same position as any of the views, wherein the key of the second data set is generated based on the type of any of the views and the display position on the mobile page, and the value is used to store the first rendering end time corresponding to views of the same type and located at the same position as any of the views; For the view in the mobile terminal page, determining a target rendering end time corresponding to the view according to the real-time rendering end time of the view and whether the view and a view of the same type displayed at the same position in the mobile terminal page constitute repeated drawing, includes: When rendering of any of the views in the mobile page is completed, determining a target rendering end time corresponding to any of the views according to the real-time rendering end time of any of the views, the first data set, and the second data set; as well as The first data set and the second data set are updated according to the target rendering end time corresponding to any of the views.

3. The method according to claim 2, characterized in that When rendering of any of the views in the mobile page is completed, determining a target rendering end time corresponding to any of the views according to the real-time rendering end time of any of the views, the first data set, and the second data set; as well as Updating the first data set and the second data set according to a target rendering end time corresponding to any of the views includes: generating a first keyword according to the memory address of the view; generating a second keyword according to the type of the view and the display position of the view on the mobile terminal page; When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is not found in the second data set, it is determined that the view and the same type of view displayed at the same position on the mobile terminal page do not constitute repeated drawing, the target rendering end time corresponding to the view is the real-time rendering end time of the view, and the mapping relationship between the first keyword and the determined target rendering end time is saved in the first data set, and the mapping relationship between the second keyword and the determined target rendering end time is saved in the second data set; When the rendering end time corresponding to the first keyword is not found in the first data set, and the first rendering end time corresponding to the second keyword is found in the second data set, it is determined that the view and the same type of view displayed at the same position in the mobile page constitute repeated drawing, and the target rendering end time corresponding to the view is the first rendering end time found in the second data set according to the second keyword, and the mapping relationship between the first keyword and the determined target rendering end time is saved in the first data set.

4. The method according to claim 2, characterized in that The display position of the view in the mobile page includes the width, height, and coordinate value corresponding to the upper left corner of the view in the mobile page.

5. The method according to claim 2, characterized in that The view rendering time-consuming list is generated by sorting the first data set using the rendering end time as a sorting key.

6. The method according to claim 1, characterized in that The method further includes: in response to a user selecting a view rendering time record in a view rendering time list corresponding to the mobile page, marking a view corresponding to the selected view rendering time record.

7. The method according to claim 6, characterized in that The marking of the view corresponding to the selected view rendering time-consuming record includes: Set the shading layer corresponding to the selected view rendering time record to the preset color.

8. The method according to claim 7, characterized in that The method also includes: displaying or hiding the mark on the mobile page in response to a user's perspective switching operation.

9. The method according to claim 1, characterized in that The method further includes: determining a rendering start time corresponding to the mobile-end page in response to an update request of the mobile-end page.

10. The method according to claim 9, characterized in that The method also includes: in response to the user's touch operation, determining the interactive time of the mobile page based on the rendering start time and the target rendering end time corresponding to the view in the mobile page, and sending the interactive time of the mobile page to a remote server.

11. The method according to claim 10, characterized in that The determining the interactive time of the mobile terminal page according to the rendering start time and the target rendering end time corresponding to the view in the mobile terminal page includes: The interactive time corresponding to the mobile page is determined according to a maximum value of target rendering end times corresponding to views in the mobile page and the rendering start time.

12. A client, characterized in that: It comprises a memory and a processor, wherein the processor is configured to execute the method for analyzing the rendering time of a mobile page as described in claims 1-11.

13. A computer-readable storage medium having instructions stored thereon, characterized in that: When the instructions are executed by the processor, the method for analyzing the rendering time of a mobile page as described in any one of claims 1 to 11 is implemented.

14. A computer program product, characterized in that It includes a computer program, which, when executed by a processor, implements the method for analyzing the rendering time of a mobile page as described in any one of claims 1 to 11.

Images