Application performance analysis method and electronic device

Abstract

An application performance analysis method and an electronic device, used for improving application performance analysis efficiency. The method comprises: in response to a first operation of a user, displaying a second application interface, the second application interface comprising page layout information of a target frame of a first application interface, and the page layout information being used for indicating the relationship between a plurality of components comprised in the target frame, wherein the first application interface is an interface of a first application process running on a second electronic device, and a rendering service (RS) process of the second electronic device has timed out while drawing the target frame; and displaying first information on the second application interface, the first information being used for indicating the reason why the RS process has timed out while drawing the target frame. By means of the method, a user can more intuitively understand the reason why the RS process has timed out while drawing the target frame, thereby assisting the user in more rapidly pinpointing the reason for stutters or frame drops, improving the efficiency of application performance analysis.

Description

An application performance analysis method and electronic device

[0001] Cross-reference to Related Applications

[0002] This application claims priority to the Chinese Patent Application No. 202411392074.4, filed on September 30, 2024, and entitled "An Application Performance Tuning Method Based on a Rendering Box and Electronic Device", the content of which is incorporated herein by reference in its entirety; and this application claims priority to the Chinese Patent Application No. 202411943440.0, filed on December 24, 2024, and entitled "An Application Performance Analysis Method and Electronic Device", the content of which is incorporated herein by reference in its entirety. TECHNICAL FIELD

[0003] The present application relates to the technical field of terminals, and in particular to an application performance analysis method and electronic device. BACKGROUND

[0004] Performance analysis of an application (APP) can help application developers analyze bottlenecks of the application to optimize performance of the application in terms of execution efficiency, response time, and resource usage, etc. For example, when an application is running, there can be situations of lag and frame loss. Performance analysis of the application can help developers find the frame in which lag occurs in the application and analyze the cause of the lag, so as to optimize the frame and reduce the probability of lag and frame loss, thereby improving the user experience of the application.

[0005] There are many reasons for application lag and frame loss, such as high function time consumption, complex page layout, or high time consumption in the system rendering stage, etc. However, current application performance analysis can only provide developers with stage time consumption statistics, such as function time consumption and rendering stage time consumption, etc. The performance analysis capability that can be provided for developers is limited, resulting in low application performance analysis efficiency. SUMMARY

[0006] Embodiments of the present application provide an application performance analysis method and electronic device for improving application performance analysis efficiency.

[0007] In a first aspect, a method for application performance analysis is provided, which can be applied to a first electronic device. The method comprises: in response to a first operation of a user, displaying a second application interface, the second application interface comprising page layout information of a target frame of a first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame; wherein the first application interface is an interface of a first application process running on a second electronic device, and a rendering service process of the second electronic device times out when drawing the target frame. Displaying first information on the second application interface, the first information being used to indicate a reason for the timeout of the rendering service process when drawing the target frame.

[0008] It can be understood that, after the second electronic device runs the first application process to present the first application interface, the page layout information of the target frame that times out when being drawn and the reason for the timeout can be viewed through the second application interface of the first electronic device. Thus, the user can more intuitively understand the reason for the timeout of the RS process when drawing the target frame, so as to assist the user to more quickly locate the reason for the frame freezing and frame loss, and improve the efficiency of application performance analysis.

[0009] In a possible implementation, the first information can have multiple implementation manners. In a first implementation, the first information comprises at least one parameter in an application code executed by the first application process, the at least one parameter being used to draw the target frame by the rendering service process. Based on this implementation, the parameters related to the drawing time consumption can be displayed to the user, which can assist the user to determine the influence of these parameters on the drawing time consumption. For example, when the parameters are not configured to have a value for saving the drawing time consumption, the user can timely adjust the configuration in the application code to optimize the drawing time consumption. In a second implementation, the first information comprises time consumption of the rendering service process for drawing a plurality of components. Based on this implementation, the user can view the time consumption of different components to determine the components with relatively high time consumption, so as to optimize these components. In a third implementation, the first information comprises first indication information, the first indication information being used to indicate a first parameter in the at least one parameter, and the first parameter having an abnormal value. Based on this implementation, the parameter with the abnormal value can be indicated to the user, which helps the user to more quickly locate the reason for the timeout. In a fourth implementation, the first information comprises second indication information, the second indication information being used to indicate a first component in the plurality of components, and a second parameter of the first component having an abnormal value. Based on this implementation, the component containing the parameter with the abnormal value can be indicated to the user, which helps the user to more quickly locate the reason for the timeout. Alternatively, the above-mentioned various implementations can be combined.

[0010] In a possible implementation, the user can perform a second operation on information of the second component in the page layout information, and the first electronic device can display at least one parameter for drawing the second component in the second application interface in response to the second operation on the information of the second component in the page layout information, the second operation being used for selecting the second component. Based on this implementation, the user can select the second component that the user wants to check in the page layout information, and the first electronic device can display the parameters related to drawing the second component accordingly, to assist the user in analyzing the influence of the second component on the drawing time consumption of the target frame, thereby improving the efficiency of application performance analysis. For example, after displaying the at least one parameter of the second component, the user can check whether the parameters are optimal configurations, and if not, the user can adjust the parameter configurations to optimize the drawing time consumption, to achieve the purpose of application performance tuning.

[0011] In a possible implementation, the second application interface is further configured to display a target image of the target frame, and the plurality of components further includes a third component. The user can perform a third operation on the third component in the target image, and the first electronic device can display at least one parameter for drawing the third component in the second application interface in response to the third operation on the third component in the target image, the third operation being used for selecting the third component. Based on this implementation, the user can select the third component that the user wants to check in the target image, and the first electronic device can display the parameters related to drawing the third component accordingly, to assist the user in analyzing the influence of the third component on the drawing time consumption of the target frame, thereby improving the efficiency of application performance analysis. The target image is an image corresponding to the target frame, so that the user can perceive the page layout of the target frame in a more intuitive and image-based manner. In addition, the user can also perceive the final presentation effect of the selected component more intuitively by directly selecting the component in the image, compared with checking the component in the application code. The implementation provided in this embodiment makes the performance analysis process more understandable, and the user does not need to understand complex application code, thereby reducing the learning cost of the user.

[0012] In a possible implementation, when the user performs the third operation on the third component in the target image, the first electronic device can also mark information of the third component in the page layout information in response to the third operation. Based on this implementation, the user can locate the position of the third component in the page layout information, for example, determine the nesting relationship between the third component and other components, to assist the user in performance analysis. Alternatively, when the user performs a fourth operation on the information of the third component in the page layout information, the first electronic device can also mark the third component in the target image in response to the fourth operation on the information of the third component in the page layout information. Based on this implementation, the user can determine the position of the third component in the image, and perceive the final display effect of the third component, for example, perceive the complexity of the third component according to the display effect, to assist the user in performance analysis.

[0013] In a possible implementation, the first electronic device can display a third application interface, the third application interface including a time consumption of rendering a service process to draw at least one frame of the first application interface, the at least one frame including the target frame. The user can perform a first operation on the target frame in the third application interface, and the first electronic device can display a second application interface in response to the first operation performed on the target frame in the third application interface. Based on this implementation, the user can determine the target frame with the drawing time consumption through the third application interface, and further display the page layout of the target frame and the reason for the drawing timeout through the second application interface, in this way, the analysis on frames without timeout can be reduced, and the efficiency of application performance analysis can be improved.

[0014] In a possible implementation, in the third application interface, display attributes of frames with time consumption in different value ranges can be different. For example, colors, icons, display styles, or filling patterns are different. Based on this implementation, the user can distinguish different cases of drawing time consumption through different display attributes. Taking colors as an example, frames with drawing timeout can be marked in red, and then the user can more intuitively know that frames marked in red are frames with drawing timeout, and then the user can focus on these frames and further analyze these frames, so as to improve the efficiency of application performance analysis.

[0015] In a possible implementation, the user can perform a fifth operation on the target frame in the third application interface, and the first electronic device can display a first control in the third application interface in response to the fifth operation performed on the target frame in the third application interface, the first control being used to trigger display of page layout information of the target frame, and the first electronic device can display the second application interface in response to a first operation performed on the first control. Based on this implementation, after the user selects the target frame, the first control can be displayed, which can prompt the user that the user can further view the page layout information and the reason for the drawing timeout through the second application interface. The user can quickly master the use method of the performance analysis tool, reduce confusion and discomfort in the learning process, and thus reduce the learning cost.

[0016] In a possible implementation, the first electronic device can display application code corresponding to the fourth component in response to a sixth operation performed on the second application interface. The sixth operation is one or more of the following: an operation performed on information of the fourth component in the page layout information; an operation performed on the fourth component in a target image corresponding to the target frame; or an operation performed on a parameter used to draw the fourth component. Based on this implementation, the user is provided with the function of displaying application code corresponding to the component, so that the application code corresponding to the component can be located more quickly without the need for the user to find and locate by himself / herself, and the efficiency of application performance analysis can be improved.

[0017] In a possible implementation, the first electronic device can obtain component information of components included in at least one frame of the first application interface, the components included in the at least one frame include a plurality of components, and obtain a rendering tree corresponding to each of the at least one frame, the rendering tree of each frame being used to render an image corresponding to the frame by the rendering service process. Further, the first electronic device can determine a first component tree corresponding to a target frame according to the component information of the plurality of components and a first rendering tree, the first rendering tree being the rendering tree corresponding to the target frame, and the first component tree including page layout information. Then, when displaying the second application interface, the first electronic device can display the second application interface according to the first component tree. This implementation provides a way of restoring a component tree by using component information and a rendering tree to obtain page layout information, which can reduce the amount of data collected, for example, when collecting component information, the component tree is not collected but only the component information is recorded, thereby reducing the overhead of data collection and saving storage resources.

[0018] In a possible implementation, the component information of any component includes one or more of a component name, a component identifier, or a code line corresponding to the component. Based on this implementation, when collecting component information, the component tree is not collected but only the component information is recorded, thereby reducing the overhead of data collection and saving storage resources.

[0019] In a possible implementation, when determining the first component tree corresponding to the target frame according to the component information of the plurality of components and the first rendering tree, the first electronic device can determine the first component tree according to the component identifiers of the components in the first rendering tree and the component identifiers included in the component information of the plurality of components. Based on this implementation, the first electronic device can integrate the rendering tree and the component information to obtain the component tree according to the component identifiers. On the one hand, information of different data sources can be integrated to analyze each component more comprehensively. On the other hand, when collecting component information, the component tree is not collected but only the component information is recorded, thereby reducing the overhead of data collection and saving storage resources.

[0020] In a possible implementation, the first electronic device can record component information of a newly created component in a process in which the second electronic device runs the first application process, the newly created component being a component in a current frame that is different from a component in a historical frame, and the historical frame being a frame before the current frame. Based on this implementation, only the information of the newly created component needs to be recorded, and the information of the component that has been created before does not need to be repeatedly recorded, thereby reducing the overhead of data collection and saving storage resources.

[0021] In a possible implementation, the timeout of the rendering service process drawing the target frame of the second electronic device includes that the time consumed by the rendering service process in drawing the target frame is greater than a first threshold value, and the first threshold value is associated with a screen refresh rate of the second electronic device.

[0022] In a second aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method of any one of the above first aspect when executing the computer program. The computer device may, for example, be the first electronic device of the above first aspect.

[0023] For example, the processor implements the following when executing the computer program: in response to a first operation of a user, displaying a second application interface, the second application interface comprising page layout information of a target frame of the first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame; wherein the first application interface is an interface of a first application process running on the second electronic device, and a rendering service process of the second electronic device times out when drawing the target frame. The display module is further configured to display first information in the second application interface, the first information being used to indicate a reason for the rendering service process timing out when drawing the target frame.

[0024] In a third aspect, the present application provides an application performance analysis apparatus, comprising modules / units for implementing the method corresponding to any one of the above first aspect. These modules / units can be implemented by hardware, or implemented by hardware executing corresponding software. The apparatus may, for example, be included in the first electronic device of the above first aspect, or the apparatus may be the first electronic device.

[0025] For example, the apparatus comprises a display module, configured to: in response to a first operation of a user, display a second application interface, the second application interface comprising page layout information of a target frame of the first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame; wherein the first application interface is an interface of a first application process running on the second electronic device, and a rendering service process of the second electronic device times out when drawing the target frame. The display module is further configured to display first information in the second application interface, the first information being used to indicate a reason for the rendering service process timing out when drawing the target frame.

[0026] In a fourth aspect, the present application provides a computer readable storage medium, the computer readable storage medium storing a computer program, when the computer program is executed by at least one processor, the method of any one of the above first aspect is implemented.

[0027] In a fifth aspect, the present application provides a chip, comprising a processor and an interface; the processor is configured to read instructions through the interface to execute the method of any one of the above first aspect.

[0028] In a sixth aspect, the present application provides a chip system, the chip system comprising a processing circuit and a storage medium, the storage medium storing instructions; when the instructions are executed by the processing circuit, the method of any one of the above first aspect is implemented.

[0029] In a seventh aspect, the present application provides a computer program product, which comprises a computer program, and when the computer program is run on a computer, the computer can execute the method of any one of the first aspect.

[0030] The implementation of any one of the second aspect to the seventh aspect has the beneficial effects of the corresponding implementation of the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0031] FIG. 1A is a flow diagram of an application interface rendering process;

[0032] FIGS. 1B-1D are diagrams of application performance analysis in the related art;

[0033] FIG. 2A is a diagram of an application scenario to which the method of the present application is applied;

[0034] FIG. 2B is a structural diagram of an electronic device according to an embodiment of the present application;

[0035] FIG. 2C is a diagram of a software architecture according to an embodiment of the present application;

[0036] FIG. 3 is a flow diagram of a method according to an embodiment of the present application;

[0037] FIGS. 4A-4E are diagrams of a second application interface according to an embodiment of the present application;

[0038] FIG. 5 is a diagram of a third application interface according to an embodiment of the present application;

[0039] FIG. 6 is a diagram of performance analysis data collection according to an embodiment of the present application;

[0040] FIG. 7 is a flow diagram of second application interface display according to an embodiment of the present application;

[0041] FIG. 8A is a diagram of data recording according to an embodiment of the present application;

[0042] FIG. 8B is a diagram of rendering tree recording according to an embodiment of the present application;

[0043] FIG. 8C is a flow diagram of generating a component tree according to an embodiment of the present application;

[0044] FIG. 9 is a structural diagram of a computer device according to an embodiment of the present application. DETAILED DESCRIPTION

[0045] In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the following will further describe the embodiments of the present application with reference to the drawings. In the description of the embodiments of the present application, the terms "first", "second" are used only for the purpose of description, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features with "first", "second" can explicitly or implicitly include one or more of the features.

[0046] It should be understood that "at least one" in the embodiments of the present application means one or more, and "multiple" means two or more. The "and / or" describes the association relationship of the associated objects, which means that there can be three relationships, for example, A and / or B, which can represent the following three cases: A exists alone, A and B exist together, and B exists alone, wherein A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after it. "At least one of the following" or the like means any combination of these items, including any combination of single item or multiple items. For example, at least one of a, b or c can represent a, b, c, a and b, a and c, b and c, or a, b and c, wherein a, b and c can be single or multiple.

[0047] In this document, reference to "one embodiment", "in some examples" or "some embodiments" means that a particular feature, structure, or characteristic described in connection with the embodiment is included in at least one embodiment of the present document. Therefore, the appearance of the phrases "in some examples", "in one embodiment", "in some embodiments", "in other some embodiments", "in yet some embodiments" and the like in various places in this document does not necessarily all refer to the same embodiment, but means "one or more but not all embodiments", unless otherwise specifically noted. The terms "comprise", "include", "have" and their variants mean "including but not limited to", unless otherwise specifically noted.

[0048] For the convenience of understanding, the description of the related concepts of the present application is given by way of example for reference.

[0049] (1) Application and process

[0050] An application is used to be installed in an electronic device, and provides services to a user through specific businesses after being run. The application can be developed by a manufacturer of the electronic device, or by a vendor of an operating system (OS) of the electronic device, or by a third-party application vendor, which is not limited in the present application. For example, the application can include various drawing applications, call applications, camera applications, short message applications, chat applications, video applications, music applications, electronic map applications, or social platform applications, etc.

[0051] A process is a running activity of a program with certain independent functions on a certain data set, and is an independent unit of resource allocation and scheduling by an operating system, such as memory resources or central processing unit (CPU) resources, etc. A process is an instance of a program being executed. When an application is started on an electronic device, the electronic device runs a process corresponding to the application. For example, when a user opens a browser, the electronic device runs a browser process; or when the user opens a photographing application, the electronic device runs a photographing application process.

[0052] (2) Application interface, frame and component

[0053] An application interface is a user interface (UI) presented by an electronic device when running an application process or a system process. The UI is a medium interface for interaction and information exchange between an application or an operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The source code (i.e. application code) of the user interface is parsed and rendered on the electronic device, and finally presented as content recognizable by the user. Rich visual elements can be displayed to the user through the UI, and the application interface of an application usually occupies part or all of the UI of the entire electronic device. In some scenarios, the application interface can also be referred to as a window, a view, or a panel, etc.

[0054] A frame can be understood as a time unit of an application interface presentation, or a frame can also be understood as an update cycle of an application interface. Generally, when the screen of an electronic device is refreshed, the application interface is also refreshed, and the update cycle of the application interface is generally the same as the screen update cycle of the electronic device. The duration of a frame is generally related to the screen refresh frequency of the electronic device, and the screen refresh frequency can also be referred to as frame rate. Common screen refresh frequencies can include 30 hertz (Hz), 60 Hz, or 120 Hz, and the like. For example, when the screen refresh frequency is 120 Hz, it means that the electronic device will update 120 frames in one second, and the duration of a frame is about 8.3 ms. It can be understood that the refresh mentioned herein refers to entering the next frame, and does not mean that the displayed content will necessarily change. The current frame can refer to the time unit or update cycle at the current moment, and the historical frame refers to the time unit or update cycle that has been experienced before the current frame. In some scenarios, a frame can also be understood as an image, and the UI commonly used form of expression is a graphical user interface (GUI), which refers to a user interface related to computer operation displayed in a graphical manner. Therefore, a frame can also be understood as a frame of image, that is, an image displayed by GUI once.

[0055] A component generally refers to an object in software that can be reused and can interact with other objects, and can be implemented by a class, that is, a component is a program or module that can be reused. In the embodiments of the present application, the content displayed by the UI is a component, which can also be referred to as a UI component, which can be a component with user interface functions or visual forms of expression, and is a basic unit of UI. Each component can generally be a reusable independent part, responsible for a specific function or information display. At least one component can be laid out in a UI, window or page. A component that can be used for user operation to trigger a specific function can be referred to as a control, and the control is a basic interactive element in the user interface.

[0056] In some examples, the system components, which can also be referred to as base components or standard components, are provided directly by the UI development framework, and the custom components are defined by the developer of the application. For example, the developer of the application can combine multiple system components to build a custom component to construct an application interface element that meets the application's own application needs, and the custom component can provide more flexible and personalized performance than the system component. For example, a custom component can include multiple components, which can include, for example, a confirmation component, a cancellation component, a picture or text, and the like. The confirmation component can also be referred to as a confirmation control, and the cancellation component can also be referred to as a cancellation control. It can be understood that there can be a nested relationship between some components (for example, system components inside a custom component). For another example, a custom component can be a custom button, which can include a picture component, an animation component, and a button component, and the like. When the custom button is displayed in the UI, it can present the effect of a button with a specific icon and animation effect, rather than just a standard button control.

[0057] (3) Render Service (RS) Process

[0058] The RS process can also be referred to as a rendering pipeline process or a rendering pipeline service, and the like. The RS process provides rendering services or drawing services in the electronic device, and the electronic device can generate a displayable UI through the RS process. The RS process is usually provided by the operating system of the electronic device, and can receive data in a self-rendering buffer from an application to generate a displayable UI, where the self-rendering buffer is used to store the results obtained by the application performing a rendering process, such as a render tree.

[0059] (4) Component Tree and Render Tree

[0060] The component tree can also be referred to as a page layout tree or a UI tree, and can be used to manage the component relationship in the application front-end framework, describe the page layout information of the application interface, and represent or indicate the hierarchy or relationship between components. The component tree can be used to process component attribute updates, layout calculations, event processing, and the like, and each node in the component tree and the component in the application interface are in a one-to-one correspondence. The component tree shows how the components in the application are nested and combined together to form a complete application interface. The component tree is in a tree structure, starting from the root component of the application, expanding layer by layer, and including all child components. Each node in the component tree represents a component, and the edge connection between two nodes in the component tree represents a parent-child relationship between the two nodes.

[0061] The rendering tree can also be referred to as a render service tree (RS tree) or the like, and can be used to describe visible elements and their style information in an application interface. When an RS process draws the application interface, drawing instructions can be executed according to the rendering tree to generate the application interface. The drawing instructions include how to draw each component, drawing order, color, font, and the like.

[0062] To help understand the method of the embodiments of the present application, the process of presenting an application interface of an application process is introduced first. Referring to FIG. 1A, FIG. 1A is a flowchart of an application interface rendering process. The application interface rendering process can be roughly divided into a processing stage of an application process and a processing stage of an RS process.

[0063] The processing stage of the application process is implemented by the application side. When a frame of the application interface needs to be displayed, the application process needs to create components to be displayed in the frame and mount the components to a component tree. According to the types of the components, the component tree can include custom component nodes (which can be referred to as custom nodes) and system component nodes (which can be referred to as frame nodes). The custom component nodes are nodes corresponding to custom components in the application, and the system component nodes are nodes corresponding to system components included in the application. The application process can generate a rendering tree corresponding to the component tree through a certain processing flow, such as measure calculation and layout, and send the rendering tree to the RS process for subsequent processing. The rendering tree can include rendering nodes corresponding to the components to be displayed in the frame. For example, when the frame includes custom components and system components, the rendering tree can include rendering nodes corresponding to the custom components and rendering nodes corresponding to the system components.

[0064] The processing stage of the RS process is implemented by the RS process. In this stage, the RS process executes drawing instructions according to the rendering tree to generate an image of the frame to be displayed, and then synthesizes the image with other content (such as a status bar of an operating system) to be displayed and displays the image on the screen.

[0065] The process shown in FIG. 1A is a process that can be executed repeatedly, that is, when interface rendering needs to be performed again, the above steps can be executed to generate a new image to be displayed. As shown in FIG. 1A, when the components to be displayed change, that is, the creation of new components triggers the interface rendering to be performed again. For example, when a new page is entered or the current page changes, the components to be displayed can change. In addition, a variable in a custom component is decorated by a state decorator (State, Prop, etc.) to become a state variable, and a change in the state variable can cause the components using the variable to be refreshed. Unreasonable use of the state variable can cause performance problems such as redundant refresh.

[0066] During the running of an application process, situations of frame freezing and frame loss may occur, for example, an image of a current frame to be displayed is not generated before the end time of the current frame, the current frame cannot be refreshed, and the user may perceive frame freezing of the application interface. The occurrence of these situations indicates that the application may have performance problems. Performance analysis of the application can help the application developer to analyze the bottlenecks of the application, so as to optimize the performance of the execution efficiency, response time and resource use of the application. For example, performance analysis of the application can help the developer to find the frame of the application in which frame freezing occurs, and analyze the cause of the frame freezing, so as to optimize the frame and reduce the probability of frame freezing, so as to improve the user experience of the application.

[0067] Currently, there are some analysis methods that can assist developers in performance tuning of the application.

[0068] For example, an analysis method can help the developer to locate the frame in which frame freezing occurs. However, this frame freezing positioning is analyzed by a trace file. The trace file can record detailed information of the application performance, such as central processing unit (CPU), thread, method call and the like of the application process during the running process. These information are used to help the developer to analyze and optimize the performance of the application. This means that the developer needs to be familiar with the knowledge related to the system, which undoubtedly increases the learning cost of the developer.

[0069] For another example, another analysis method adopts a top-down idea, which visualizes the key points concerned by the developer and provides them to the developer through a visual interface. Specifically, as shown in FIG. 1B, the tool provides the developer with a display of the stage time consumption of the application interface, including application side time consumption, rendering pipeline process time consumption, graphics processing unit (GPU) time consumption and display of the frame life cycle. It also provides analysis of component time consumption and state variable frame freezing and frame loss scenarios. Referring to FIG. 1C, which is a schematic diagram of component time consumption analysis. The component time consumption analysis refers to that in this method, the developer can be displayed a “swim lane” of component time consumption, which can be used to show the time consumption of creating each component in time, i.e., view body in FIG. 1C. This item can include statistics of system component and custom component time consumption. Referring to FIG. 1D, which is a schematic diagram of state variable analysis. The update of the state variable can trigger the re-rendering of the re-interface, so the analysis of the state variable is necessary, which can help the developer to find the component to which the state variable belongs. As shown in FIG. 1D, when the component time consumption swim lane is expanded, the swim lane corresponding to the state variable can be viewed, and then the specific details of the state variable can be viewed, including the component to which the state variable belongs and the values before and after the change of the state variable.

[0070] In actual scenarios, there are many reasons causing application lag and frame loss, such as high execution time of a function called in application code, complex page layout, or high time consumption in the system rendering stage. Some of these reasons are related to the processing process of the application side, such as complex page layout causing long time consumption of generating component tree. Some of these reasons are related to the processing process of the rendering pipeline process, such as unreasonable application code or high load of the application code on the RS process causing RS process drawing timeout. In the second method mentioned above, the time consumption of creating components or the component to which the state variable belongs is analyzed. Both types of analysis are for analyzing the lag and frame loss caused by the application side. For the analysis of the rendering process side, although the stage time consumption provided above can include the time consumption of the rendering pipeline process, the developer still cannot know the reason for the long time consumption.

[0071] It can be seen that the current application performance analysis method can provide limited performance analysis capabilities for developers.

[0072] Therefore, an embodiment of the present application provides an application performance analysis method, which can be executed by a first electronic device. In the method, the first electronic device can display a second application interface in response to a first operation of a user. The second application interface includes page layout information of a target frame of a first application interface, and displays first information in the second application interface. The page layout information is used to indicate the relationship between a plurality of components included in the target frame, and the first information is used to indicate the reason for timeout of the rendering service process in drawing the target frame. The first application interface is an interface of a first application process running on a second electronic device, and the RS process of the second electronic device times out in drawing the target frame. It can be understood that after the second electronic device runs the first application process to present the first application interface, the user can view the page layout information of the target frame that times out in drawing in the first application interface through the second application interface of the first electronic device, and the reason for the timeout in drawing. Therefore, the user can more intuitively understand the reason for the timeout of the RS process in drawing the target frame through the method, so as to assist the user to more quickly locate the reason for the lag and frame loss, and improve the efficiency of application performance analysis.

[0073] The method of the embodiments of the present application can be applied in a performance analysis or performance tuning scenario of any application. The purpose of performance analysis is to analyze the performance bottleneck of the application and improve it to enhance the performance of the application. Referring to FIG. 2A, which is a schematic diagram of an application scenario to which the method of the embodiments of the present application is applicable. Specifically, the scenario can include a first electronic device 10 and a second electronic device 20. The first electronic device 10 performs application performance analysis on a first application installed in the second electronic device 20 to determine the reason why the RS process of the second electronic device 20 draws a timeout of a first application interface corresponding to the first application. For example, the first electronic device 10 can be loaded with a performance analysis application for implementing application performance analysis. The performance analysis application can be an application program provided by the operating system of the first electronic device 10, or a third-party application program provided by a third party. The second electronic device 20 can be an electronic device with display function. It can also be understood that the first electronic device 10 is a test device and the second electronic device is a device under test. For example, the second electronic device 20 can be loaded with multiple application programs, such as application program 1 (also referred to as application 1) and application program 2 (also referred to as application 2). The operating system of the second electronic device 20 can include multiple independently executed processes, such as an RS process.

[0074] In some scenarios, the first electronic device 10 and the second electronic device 20 can be different devices, and the first electronic device 10 and the second electronic device 20 can communicate with each other through a communication network or wireless short-range technology. The communication network can be a wired communication network or a wireless communication network. The communication network can be a local area network or a wide area network relayed by a relay device. When the communication network is a local area network, for example, the communication network can be a Wi-Fi hotspot network, a Wi-Fi direct network, a Bluetooth network, a zigbee network, or a near field communication (NFC) network, etc. When the communication network is a wide area network, for example, the communication network can be a 3rd-generation wireless telephone technology (3G) network, a 4th-generation mobile communication technology (4G) network, a 5th-generation mobile communication technology (5G) network, a future evolved public land mobile network (PLMN), or the Internet, etc.

[0075] The first electronic device 10 can be a device with certain processing capability, which can support the first electronic device 10 to implement the application performance analysis process. For example, the first electronic device 10 can be a mobile phone, a tablet computer, a notebook computer, a personal computer (PC), or the like. As an example, the first electronic device 10 is a PC. The second electronic device 20 has the capability of running the application to be analyzed. For example, the second electronic device 20 can be a mobile phone, a tablet computer, a notebook computer, or the like.

[0076] For example, the application to be analyzed is a first application, and the second electronic device 20 can run a first application process of the first application and display a first application interface corresponding to the first application. During the process of running the first application process by the second electronic device 20, the first electronic device 10 can record data related to the display of the first application interface by the second electronic device 20. For example, the data can include data of multiple frames of the first application interface, so that the first electronic device 10 can analyze the cause of the lagging and frame loss of the first application interface according to the data.

[0077] In some scenarios, the first electronic device 10 and the second electronic device 20 can be the same device. For example, the first application to be analyzed and the application for application performance analysis are both installed in the first electronic device 10 (or the second electronic device 20), and the device has both the capability of implementing the application performance analysis process and the capability of running the application to be analyzed. For another example, the first electronic device 10 is a physical machine, and the second electronic device 20 can be a virtual machine in the first electronic device 10, or the first electronic device 10 and the second electronic device 20 are different virtual machines in the same physical machine.

[0078] The electronic device (such as the first electronic device 10 or the second electronic device 20) involved in the embodiments of the present application can be any electronic device. For example, the electronic device includes but is not limited to an electronic device running an Android operating system, an iOS operating system, a Windows operating system, a Linux operating system, or other operating systems.

[0079] ​For example, the electronic device can refer to a terminal device with a display function, such as a mobile phone, a tablet computer, a wearable device (e.g., a watch, a bracelet, etc.) with a wireless communication function, a vehicle terminal device, an augmented reality (AR) / virtual reality (VR) device, a notebook computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a smart home device (e.g., a smart television, a smart speaker, etc.), a smart robot, a plant device, a wireless terminal in self driving, a wireless terminal in remote medical surgery, a wireless terminal in a smart grid, a wireless terminal in transportation safety, a wireless terminal in a smart city, or a wireless terminal in a smart home, a flight device (e.g., a smart robot, a drone, an airplane), etc. Among them, the wearable device is a portable device that can be directly worn on the body of a user or integrated into a clothing or accessory of the user.

[0080] For another example, the electronic device can also be a portable terminal device that further includes other functions such as a personal digital assistant and / or a music player function. The above-mentioned portable terminal device can also be other portable terminal devices, such as a laptop with a touch-sensitive surface (e.g., a touch panel), etc.

[0081] In some embodiments of the present application, the electronic device can be a rich device. For example, the rich device refers to a device with sufficient memory and storage space. The rich device can generally support remote procedure call (RPC) / inter-process communication (IPC). For example, the rich device can be a mobile phone, a liquid crystal television, an in-vehicle infotainment (IVI) device, a tablet computer, a personal computer, etc.

[0082] FIG. 2B shows a schematic diagram of a hardware structure of a possible electronic device. As shown in FIG. 2B, the electronic device 100 can include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headset jack 170D, a sensor module 180, a key 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 can include a pressure sensor 180A, a gyro sensor 180B, a barometric sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0083] The processor 110 can include one or more processing units, for example: the processor 110 can include an application processor (AP), a micro control unit (MCU), a modem processor, a GPU, an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units can be independent devices, or can be integrated in one or more processors. The controller can be the nerve center and command center of the electronic device 100. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions. A memory can also be provided in the processor 110, for storing instructions and data. In some embodiments, the memory in the processor 110 can be a cache memory. The memory can save instructions or data that have just been used or are frequently used by the processor 110. If the processor 110 needs to use the instructions or data again, it can directly call them from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thus improving the efficiency of the system.

[0084] The USB interface 130 is an interface conforming to the USB standard specification, and can be a Mini USB interface, a Micro USB interface, a USB Type C interface, or the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, or to transmit data between the electronic device 100 and a peripheral device. The charging management module 140 is configured to receive a charging input from the charger. The power management module 141 is configured to connect the battery 142 and the charging management module 140. The power management module 141 receives an input from the battery 142 and / or the charging management module 140, and supplies power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160.

[0085] The wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, a modem processor, and a baseband processor, or the like. The antenna 1 and the antenna 2 are configured to transmit and receive electromagnetic wave signals. Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be multiplexed to improve the utilization rate of the antennas. For example, the antenna 1 can be multiplexed as a diversity antenna of a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0086] The display screen 194 is configured to display images, videos, or the like. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), a Miniled, a MicroLed, a Micro-oLed, a quantum dot light emitting diode (QLED), or the like. In some embodiments, the electronic device 100 can include one or N display screens 194, where N is a positive integer greater than 1. In the embodiments of the present application, when the electronic device is the second electronic device 20, the display screen 194 can be used to display the first application interface. When the electronic device is the first electronic device 10, the display screen 194 can be used to display an interface related to application performance analysis, for example, to display the second application interface or the third application interface.

[0087] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 performs various function applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. For example, the electronic device is the first electronic device 10, and the processor 110 can run the instructions stored in the internal memory 121 to perform the method steps provided in the embodiments of the present application. For example, the processor 110 performs the instructions to realize: in response to a first operation of a user, displaying a second application interface, the second application interface including page layout information of a target frame of the first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame, and displaying first information in the second application interface, the first information being used to indicate a reason for a timeout of a rendering service process drawing the target frame. The first application interface is an interface of a first application process running on the first electronic device, and the rendering service process of the first electronic device times out when drawing the target frame. The internal memory 121 can include a program storage area and a data storage area. The program storage area can store an operating system and software codes of at least one application program (such as Huawei Video, etc.), etc. The data storage area can store data (such as images, videos, etc.) generated during use of the electronic device 100, etc. In addition, the internal memory 121 can include a high-speed random access memory, and can also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash memory (UFS), etc.

[0088] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to realize the expansion of the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to realize a data storage function. For example, files such as pictures and videos are saved in the external memory card.

[0089] In the embodiments of the present application, when the electronic device is the first electronic device 10, the processor 110 can save data related to the method of the embodiments of the present application in the internal memory 121. For example, data recorded when the second electronic device 20 displays the first application interface, including but not limited to information of components involved in the first application interface, a rendering tree, and drawing time consumption of an RS process, etc.

[0090] It can be understood that the components shown in FIG. 2B do not constitute a specific limitation on the electronic device, and the electronic device can further include more or fewer components than those shown, or combine certain components, or split certain components, or different component arrangements.

[0091] FIG. 2C shows a schematic diagram of a software architecture according to an embodiment of the present application. As shown in FIG. 2C, the architecture can be divided into a data source, a collection layer, an abstraction layer, and a presentation layer, which can be deployed in different devices, such as the first electronic device 10 and the second electronic device 20, or all in the same device, such as the first electronic device 10. The following describes each layer.

[0092] The data source is configured to provide data related to application performance analysis. The data source can refer to an operating system of an electronic device, which can return data for supporting performance analysis. The returned data can include code stack, trace data, or rendering pipeline data, etc. The code stack includes information about functions in an application code and the relationship between the functions, which can be used to assist in analyzing function time consumption. The trace data can be provided by a runtime and can include information about a UI component created by a UI framework. The rendering pipeline data can include a rendering tree, drawing time of an RS process, and a final generated image, etc.

[0093] In some scenarios, the data source can be included in the second electronic device 20. Alternatively, in some other scenarios, the second electronic device 20 can store data related to an application interface in the first electronic device 10, and the data source can also be derived from the first electronic device 10.

[0094] The data source contains a large amount of data. In order to reduce the analysis of redundant data, the collection layer can be configured to collect data required for application performance analysis from the data source. The collection layer can include one or more data collection modules, and one collection module can be configured to collect one or more types of data. In one example, one collection module can be configured to collect one type of data, so that the data does not interfere with each other. As shown in FIG. 2C, the collection layer can include a code stack information collection module, a component information collection module, and a rendering information collection module. The code stack information collection module can be configured to collect code stack information, such as functions in an application code, the calling relationship between the functions, and function execution time, etc. The component information collection module is configured to collect information about a component created by an application process. In one example, a component tree can be recorded. In one example, the component information collection module can be configured to collect information about a component name, a component identifier (such as a component ID), and a code line where the component is located, without recording the component tree. Compared with the way of recording the component tree, the way of collecting the information about the component name, the component identifier, and the code line where the component is located can reduce the overhead required for data recording and improve the efficiency of application performance analysis. The rendering information collection module can be configured to collect information related to the rendering process of an RS process, such as a rendering tree, drawing time, and a final generated image, etc.

[0095] In some scenarios, the collection layer can be included in the second electronic device 20, for collecting data required for application performance analysis in real time during the process of running the application process in the second electronic device 20. In some scenarios, the collection layer can also be included in the first electronic device 10, for example, when the data source is stored in the first electronic device 10, the collection layer can extract data required for application performance analysis from the data source; or when the relevant data of the application process is transmitted to the first electronic device 10 in real time, the collection layer can also extract data required for application performance analysis in real time.

[0096] The abstraction layer is used to integrate the data collected by the collection layer and output data for display by the display layer. For example, for the code stack information collected by the code stack information collection module, the abstraction layer can perform data analysis, and the obtained data can be used by the display layer to display the code stack lane. The abstraction layer can also fuse multiple data sources, for example, the component information and rendering information collected can be fused to restore the component tree corresponding to a specific frame, which can include the page layout information of the frame.

[0097] In some scenarios, the abstraction layer can also be included in the second electronic device 20. In some scenarios, the abstraction layer can be included in the first electronic device 10, so as to reduce the probability of inaccurate performance analysis caused by the processing burden of the second electronic device 20, and ensure the accuracy of application performance analysis.

[0098] The display layer is used to display the data processed by the abstraction layer to the user (such as an application developer) through a data view, so that the user can perform application performance analysis according to the displayed data to help the user optimize the application performance. The display layer can be included in the first electronic device 10.

[0099] In some embodiments, the above-mentioned layers can be configured in the form of a performance analysis application (which can also be referred to as a performance analysis tool), which can be provided to the user (such as an application developer) for use. After the application is developed, the developer can use the performance analysis application to perform performance analysis, locate the performance bottleneck of the application and improve it to improve the performance of the application. For example, the performance analysis application can include a collection layer, an abstraction layer and a display layer, wherein the collection layer can be deployed in the second electronic device 20 and can be used as a proxy module of the performance analysis application in the second electronic device 20, for collecting data from the data source. The collection layer can communicate with the first electronic device 10 to send the collected data to the first electronic device 10 for data processing by the abstraction layer, and finally display by the display layer.

[0100] The method provided by the embodiments of the present application will be described below with reference to the drawings. FIG. 3 shows a flowchart of a method provided by the embodiments of the present application, which includes the following steps.

[0101] In step 301, the first electronic device displays a second application interface in response to a first operation of a user, the second application interface including page layout information of a target frame of a first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame; the first application interface is an interface of a first application process of a first application running on the first electronic device, and the RS process of the first electronic device times out when drawing the target frame.

[0102] The second application interface can be an interface corresponding to a performance analysis application, and the performance analysis application can be installed in the second electronic device. The second application interface can be used to display the page layout information of the target frame of the first application interface. The first application interface refers to an interface corresponding to a first application that is subjected to application analysis. In order to analyze the performance of the first application, the first application can be installed through the second electronic device, and when the first application in the second electronic device is started, the second electronic device can run the first application process corresponding to the first application and present the first application interface of the first application process. It can be understood that the user can test the first application by simulating the normal use of the first application on the second electronic device. Then, the page layout information of the target frame of the first application interface can be presented in the second application interface of the first electronic device.

[0103] The target frame is a frame for which the RS process of the first electronic device takes too long to draw. The RS process of the first electronic device taking too long to draw the target frame can be understood as the RS process taking too long to draw the target frame. That is, when a user is performing performance analysis on the first application, the user finds that a frame takes too long to draw, and then the method of the embodiments of the present application can be used to further analyze the reason for the long time consumption to improve the application performance. As an example, the long time consumption can mean that the RS process takes more than a first threshold to draw the target frame. Optionally, the first threshold is associated with a screen refresh rate of the first electronic device. For example, the screen refresh rate of the first electronic device is 120 Hz, and the duration of each frame is about 8.3 milliseconds (ms), and the first threshold can be configured as a value less than or equal to 8.3 ms. As an example, the first threshold is 8.3 ms, and if the RS process of the first electronic device takes more than 8.3 ms to draw a frame, the frame can be considered as a frame for which the RS process takes too long to draw, i.e., the frame is the target frame. For another example, the screen refresh rate of the first electronic device is 144 Hz, and the duration of each frame is about 6.9 ms, and the first threshold can be configured as a value less than or equal to 6.9 ms. As an example, the first threshold is 6.9 ms, and if the RS process of the first electronic device takes more than 6.9 ms to draw a frame, the frame can be considered as a frame for which the RS process takes too long to draw, i.e., the frame is the target frame. Optionally, the first threshold can also be an empirical value. For example, the first threshold can be an empirical value for the RS process to draw a frame. Optionally, the first threshold can also be determined according to the drawing time of a plurality of frames of the first application interface. For example, the first threshold can be the average of the drawing time of a plurality of frames of the first application interface. The plurality of frames can be N frames before the target frame, or any N frames, which is not limited in particular.

[0104] Each frame of the application interface usually contains a plurality of components, and the page layout information of each frame can be used to indicate which components are contained in the frame and the relationship between the components, such as hierarchical relationship. For example, the page layout information can contain information of the components. The information of any component includes but is not limited to component name, component ID, component type, and code line where the component is located, and the page layout information can also contain hierarchical relationship between the components, such as a custom component can contain a plurality of components, and the custom component has hierarchical relationship with the components. For example, component 1 is composed of component 2 and component 3, component 1 can be referred to as a parent component of component 2 and component 3, and component 2 or component 3 can be referred to as a child component of component 1, and the parent-child relationship between the components can be determined through the hierarchical relationship.

[0105] As an example, the component tree is a structure for describing the relationship between components, and displaying the page layout information can refer to displaying the component tree. That is, the second application interface can display the component tree corresponding to the target frame. FIG. 4A is a schematic diagram of the second application interface provided by an embodiment of the present application, as shown in FIG. 4A, the second application interface can include a first area 401, which can be used to display the component tree. As shown in FIG. 4A, each component contained in the target frame and the hierarchical relationship between each component can be seen, for example, the target frame contains component 100, the component 100 contains sub-component 1001 and sub-component 1002, the sub-component 1001 contains sub-component 10011, sub-component 10012 and sub-component 10013, so that the user can clearly perceive the situation of the components contained in the target frame. Alternatively, the component tree can also be displayed in the second application interface in the form of a tree structure, or in other possible forms, which is not limited by the embodiments of the present application.

[0106] As an example, each component will be displayed in the form of an image in the first application interface, that is, the image corresponding to the target frame can also represent the page layout information, and displaying the page layout information can refer to displaying the image corresponding to the target frame. As shown in FIG. 4A, the second application interface can include a second area 402, which can be used to display the image corresponding to the target frame. As shown in FIG. 4A, the visual elements contained in the image correspond to components, such as text components, picture frame components, etc.

[0107] It can be understood that the page layout information can also be other information, and can be displayed in the second application interface in other possible forms, which is not specifically limited.

[0108] In an embodiment of the present application, the first operation can be any operation performed on the performance analysis application. For example, the first operation can be an operation performed on content displayed in an interface corresponding to the performance analysis application. As an example, the interface of the performance analysis application can display content related to the target frame, such as an icon of the target frame, an identifier of the target frame, a time length for which the RS process draws the target frame, or information indicating that the target frame is timed out, and the user can perform the first operation on the content to display the second application interface. As another example, the first operation can be an operation performed on a control in the performance analysis application. For example, the control can be a control for opening the second application interface, or the control can be a control for presenting the page layout information of the target frame in the second application interface, and the user can perform the first operation on the control to display the second application interface. As another example, the first operation can also be an operation for starting the performance analysis application. As an example, the second application interface can be an initial interface of the performance analysis application, or the second application interface can be an interface at which the performance analysis application was last closed. As another example, the first operation can be an operation for opening analysis data of the target frame through the performance analysis application. For example, an analysis data file of the target frame can be displayed in a folder, and the user can select to open the file through the performance analysis application to present the second application interface. Alternatively, an analysis data file of the target frame can be displayed in a folder, and the performance analysis application can be the default opening program for the file, and the user can double-click the analysis data file to present the second application interface. Embodiments of the present application do not make specific limitations on the first operation. Optionally, the type of the first operation can be a click operation, a double-click operation, or a long-press operation, and specific limitations are not made.

[0109] In step 302, the first electronic device displays first information in the second application interface, and the first information is used to indicate a reason for which the RS process draws the target frame timed out.

[0110] In an embodiment of the present application, the first information can indicate the reason for which the RS process draws the target frame timed out. The first information indicating the reason for which the RS process draws the target frame timed out can directly indicate the reason, or can indirectly indicate the reason. For example, one or more reasons can be obtained by analyzing data related to the RS process drawing, and one way of directly indicating the reason is that the reasons can be directly taken as the first information, and then the user can view the reasons for which the drawing timed out when the first information is displayed on the second application interface. As another example, one way of indirectly indicating the reason is that content related to the RS process drawing can be extracted as the first information, and then the user can determine the reason for which the target frame drawing timed out according to the information when the first information is displayed on the second application interface.

[0111] As an example, the first information can include, but is not limited to, one or more of the following:

[0112] A1, at least one parameter in the application code executed by the first application process, the at least one parameter being used by the RS process to render the target frame.

[0113] The at least one parameter, which can also be referred to as a rendering parameter or a rendering attribute, is information that guides the RS process to render each frame of the first application interface. In other words, the at least one parameter can include a time-consuming parameter that can be used by the RS process to render. As described above, each frame includes a plurality of components, and the RS process renders each component. Therefore, the at least one parameter can include a plurality of parameters for the plurality of components. When the RS process renders each component, the RS process performs a rendering process according to the parameter corresponding to each component. Therefore, the rationality of the parameter configuration will affect the time consumption of the RS process. The parameter of each component can be a default configuration or a configuration configured by the developer when developing the application.

[0114] For example, the at least one parameter can include a cache type, a cache validity state, a blur rendering number, and information indicating whether to perform off screen rendering. One node corresponds to one component, which can be a custom component or a system component. A node group can include one or more nodes.

[0115] The cache type of the node, i.e., the cache type of the component, can indicate whether the node is a reusable node or whether the component is a reusable component. A reusable node or a reusable component can be specially marked, for example, as a render group enabled state. When a component is first rendered, if the component is marked as a render group enabled state, off screen rendering is performed on the component and its child components, and the rendering result is cached. When the component needs to be re-rendered, the cache is used preferentially instead of re-rendering, thereby reducing the rendering load and optimizing the rendering performance. Therefore, whether a component is reusable can affect the time consumption of the frame in which the component is located. Therefore, the cache type of the node can be prompted to the user for viewing, so that the user can confirm whether the node type is set to a type that saves the most time. For example, if a component is originally reusable, but is configured as a non-reusable type during application development, which results in increased time consumption and eventually causes a situation of stuttering and frame loss. Through the prompt of the node type, the user can know that the node type configuration is unreasonable, and then improve the node type to a type that saves time, so as to achieve the purpose of application optimization.

[0116] The cache validity state of the node can indicate whether the node is successfully reused. For example, it can indicate whether the node is in a reusable state or a generated state. When in the reusable state, the node can reuse the previously created component node and the View object. When in the generated state, it indicates that the node needs to be recreated and the View object needs to be regenerated. It can be understood that a component is marked as a reusable node, but the reuse is not valid, and it is still regenerated. By prompting the cache validity state of the node, the user can know that the reuse is not successful, and then check the relevant code content to determine the reason why the reuse is not successful.

[0117] The blur rendering times refer to the number of times of blur rendering. The blur rendering has a higher complexity and can cause an increase in the drawing time consumption. Therefore, by prompting the blur rendering times, the user can check whether the blur rendering times are too many, so as to adjust the reasonable blur rendering times and reduce the probability of frame freezing and frame loss.

[0118] Off-screen rendering can also be referred to as off-screen drawing. It is relative to on screen rendering. The on screen rendering refers to the rendering operation of the GPU in the current screen buffer used for display. The off-screen rendering refers to the rendering operation of the GPU in a newly opened buffer outside the current screen buffer. Compared with the on screen rendering, the off-screen rendering has a high cost and thus has a low rendering efficiency. The information indicating whether there is off-screen rendering can indicate whether the component needs off-screen rendering, so as to help the user determine whether the timeout is caused by off-screen rendering, and then make targeted improvements.

[0119] A2, RS process draws a plurality of components, that is, the time consumption of the RS process for drawing each component of the target frame. One component corresponds to one node, and the component time consumption can also be referred to as the node time consumption. By prompting the time consumption information of the component, the user can locate the component with high time consumption, and assist in detecting whether the application code corresponding to the component has a problem.

[0120] A3, first indication information, the first indication information is used for indicating a first parameter in the at least one parameter, and the first parameter has an abnormal value. That is, the first indication information can indicate the parameter with the abnormal value. The abnormal value can be understood as that the value of the first parameter can be abnormal, prompting the user to further confirm. Optionally, the first indication information can indicate the parameter with the abnormal value in an explicit manner. For example, when the at least one parameter is displayed, the first indication information can be displayed simultaneously, that is, in addition to the parameters, there can be additional information on the second application interface to indicate the parameter with the abnormal value in the at least one parameter. As an example of the first indication information, the first indication information can be a specific icon, which can indicate the abnormal value. For example, the icon can be displayed in the vicinity of the parameter to indicate the abnormal value of the parameter. As another example of the first indication information, the first indication information can also be text, for example, "the following parameter has an abnormal value:". Optionally, the first indication information can also indicate the parameter with the abnormal value in an implicit manner. For example, when the at least one parameter is displayed, the at least one parameter is all the parameter with the abnormal value, that is, the second application interface can only display the parameter with the abnormal value, so that it is not necessary to display other information to indicate the parameter with the abnormal value.

[0121] For each parameter, a normal candidate value can be corresponded, and the actual value of the parameter can be compared with the candidate value, if the actual value and the candidate value cannot be matched, it is considered that the value of the parameter is abnormal. For example, for the cache type of a component, the candidate value can be that the component is marked as a render group enabled state, if the actual component is not marked as the render group enabled state, the value of the cache type of the component is abnormal. For another example, the normal value interval of the time consumption of a component is x1-x2, if the actual time consumption of the component is greater than x2, the time consumption of the component is abnormal.

[0122] A4, second indication information, the second indication information is used for indicating a first component in the plurality of components, and the second parameter of the first component has an abnormal value. That is, the second indication information can indicate the component with the parameter with the abnormal value, so that it can prompt the user that the parameters of the components can be abnormal, prompting the user to further confirm. As an example of the second indication information, the second indication information can be a specific icon, which can indicate the abnormal value of the component. For example, the icon can be displayed in the vicinity of the component to indicate the abnormal value of the parameter. As another example of the second indication information, the second indication information can also be text, for example, "the following component has an abnormal value of the parameter:".

[0123] It should be understood that the first parameter and the second parameter are for the convenience of description, and there is no substantial order relationship between the first parameter and the second parameter. The first parameter and the second parameter can be the same parameter or different parameters, and are not specifically limited.

[0124] In a specific implementation, the first information can also be other information that can indicate a timeout reason or a rendering time consumption of the RS process, and embodiments of the present application do not make a specific limitation.

[0125] Optionally, the first information of the second application interface can be frame-level. The frame-level first information can be understood as the first information corresponding to the target frame, that is, the first information indicates an overall reason or a summarized reason causing the RS process to render the target frame to be timed out. For example, the first information indicates an impact point that has an impact on the time consumption of the RS process to render the target frame, for example, can be a component, a parameter of the component or other information that has an impact on the time consumption of the rendering of the target frame. Optionally, the impact degree on the rendering time consumption of the RS process can be sorted, and the first information can indicate one or more impact points in the front of the sorting.

[0126] Optionally, the first information of the second application interface can be component-level. The component-level first information can be understood as the first information corresponding to a component included in the target frame, that is, the first information indicates a parameter that has an impact on the time consumption of the RS process to render the component. For example, the first information can indicate the parameter, and / or the first information can indicate whether the value of the parameter is abnormal. In an example, a threshold of the rendering time consumption can also be set for each component, and then the first information can indicate a reason for the RS process to render a certain component to be timed out. It can be understood that the time consumption of the RS process to render the target frame is accumulated by the time consumption of the RS process to render the components of the target frame, and determining the reason for the component to be timed out is equivalent to determining the reason for the RS process to render the target frame to be timed out.

[0127] Please continue to refer to FIG. 4A, in some embodiments, the second application interface can include a third area 403, and the third area 403 can be used to display the first information. In the third area 403 shown in FIG. 4A, the node time consumption can be included, which can help the user to determine the time consumption of each component and assist in locating the component with abnormal time consumption. In addition, the third area 403 can also display parameters such as the cache type, the cache effective state, the blur rendering times and whether there is off-screen rendering and the values thereof, so as to display the parameters that have an impact on the time consumption of the RS process to render to the user, help the user to locate the problem of the frame freezing and frame loss, and improve the efficiency of the frame freezing and frame loss problem positioning.

[0128] FIG. 4B shows another schematic diagram of the second application interface. In some embodiments, when the first information contains the first indication information, a prompt icon can be added at the corresponding position of the parameter with the abnormal value. As shown in FIG. 4B, when the values of the node time consumption, the cache type and the cache effective state are abnormal, an exclamation mark icon can be added after these three parameters to prompt the user that the values of these parameters can be abnormal. In some embodiments, when the first information contains the second indication information, a prompt icon can be added at the corresponding position of the component containing the parameter with the abnormal value. As shown in FIG. 4B, when the components 100111, 1001111 and 100211 contain the parameters with abnormal values, an exclamation mark icon can be added after these three components to prompt the user that these components can be abnormal. It should be understood that the first prompt information and the second prompt information in FIG. 4B are represented by the same icon, which can help unify the user's cognition and help the user understand that the content added with the icon can be considered abnormal. However, the embodiments of the present application do not limit whether the icon of the first prompt information and the second prompt information is the same, that is, the first prompt information and the second prompt information can use the same icon or different icons. In addition, the first prompt information and the second prompt information shown in FIG. 4B are both examples, and the display form, display style and display position of the first prompt information and the second prompt information are not limited.

[0129] As shown in FIGS. 4A and 4B, the page layout information and the first information occupy different areas of the second application interface. In actual application, the page layout information or the first information can also be displayed in other ways. For example, the first information can be displayed in the second application interface in the form of a pop-up window. FIG. 4C shows another schematic diagram of the second application interface. As shown in FIG. 4C, the first information contains the parameters related to the drawing of the RS mentioned above, which can be displayed in the second application interface in the form of a pop-up window.

[0130] In the embodiments of the present application, the first electronic device displays the first information in the second application interface, which can use the following implementation manner:

[0131] Implementation manner B1, the second application interface presented in response to the first operation contains the first information. That is, after receiving the first operation, the second application interface displayed by the first electronic device contains the first information in addition to the page layout information.

[0132] For example, after the user performs the first operation, the first electronic device can display initial content of the second application interface, which can include the page layout information of the target frame and the first information. As an implementation manner B1, the first information can be at the frame level. For example, the first information can indicate the overall reason for the RS process drawing the target frame to time out, such as the component causing the timeout, the component parameter, and the like. As another implementation manner of the implementation manner B1, the first information can be at the component level. For example, the first information can indicate the parameter of a specific component or indicate that the parameter of the specific component is abnormal. The specific component can be the component causing the RS process to draw the target frame to time out, a preconfigured component, or a component with the highest importance in the target frame, and the like.

[0133] As an implementation manner B2, the user can perform an operation on the second application interface to display the first information. For example, the second application interface displays the page layout information, and the user can perform a second operation on the information of a second component in the page layout information, the second operation being used to select the second component. Correspondingly, the second electronic device can display the first information related to the second component (i.e., the first information at the component level) on the second application interface in response to the second operation. For example, the first information related to the second component can include at least one parameter used to draw the second component. The at least one parameter is a parameter related to the RS process drawing the second component, or in other words, the at least one parameter is a parameter used by the RS process to draw the second component. That is, when the second component is selected on the second application interface, the at least one parameter corresponding to the second component can be displayed. Optionally, the at least one parameter can be a parameter that can affect the time consumption of the RS process drawing the second component. Optionally, the at least one parameter can be one or more parameters that are ranked in the front among the parameters that can affect the time consumption of the RS process drawing the second component, and the ranking can be performed according to the influence degree of each parameter.

[0134] In some embodiments, after the first electronic device displays the second application interface, the information indicating the reason for the drawing timeout is not displayed before the first information is displayed, that is, the second application interface presented by the first electronic device in response to the first operation does not contain the first information, and then the first electronic device can newly display the first information related to the second component on the second application interface in response to the second operation on the second component.

[0135] FIG. 4D shows another example of the second application interface according to an embodiment of the present application. The second application interface shown in FIG. 4D can be the initial interface of the second application interface, which can only include the page layout information, such as the component tree or the image of the target frame shown in FIG. 4D. When the user performs the second operation on the second component, i.e., component 100211 shown in FIG. 4D, the second application interface shown in FIG. 4A can be presented, i.e., the first information corresponding to component 100211 can be displayed on the right side, such as the parameters shown in FIG. 4A.

[0136] In some embodiments, after the first electronic device displays the second application interface, the information indicating the reason for drawing timeout is displayed before the first information is displayed, such as the information indicating the reason for causing the target frame to timeout is displayed, or the information related to other components is displayed, where the other components refer to components different from the second component. Then, the first electronic device can update the displayed information to the first information related to the second component in response to the second operation on the second component.

[0137] Taking the display of the reason for causing the target frame to timeout after the display of the first information as an example, FIG. 4E shows another example of the second application interface according to an embodiment of the present application. As shown in FIG. 4E, before the display of the first information, the page layout information and the information indicating the reason for causing the target frame to timeout are displayed in the second application interface, i.e., the information displayed in the column of “RS attribute” on the right side in FIG. 4E, which includes the components 10011, 10013 and 10023 causing the timeout and the related parameters of these components. When the user performs the second operation on the second component, i.e., component 100211 shown in FIG. 4D, the second application interface shown in FIG. 4A can be presented, i.e., the column of “RS attribute” will be updated to display the first information corresponding to component 100211.

[0138] In some embodiments, in addition to the page layout information (such as the component tree), the second application interface can also be used to display the target image of the target frame. As shown in FIGS. 4A-4E, the component tree and the target image can be displayed simultaneously in the second application interface. Among them, the plurality of components included in the target frame can further include a third component, which can be any component. It should be understood that the first component, the second component and the third component are different in name for the convenience of description, but in actual scenarios, the first component, the second component and the third component can be the same component or different components, which are not limited in particular.

[0139] The target image is finally displayed to the user for browsing, and is generated after the RS process draws the plurality of components, so the target image contains the plurality of components. The user can perform a third operation on a third component of the target image in the second application interface, and the third operation is used to select the third component. Correspondingly, the first electronic device can display information related to the third component in the second application interface in response to the third operation performed on the third component, for example, at least one parameter used to draw the third component can be displayed, so that the user can view the parameter related to the time consumption of the third component affecting the RS process drawing, and then check whether the parameter is configured reasonably, and if not, the user can adjust the configuration of the related parameter to improve the performance of the first application.

[0140] It can be understood that the third operation and the second operation have similar effects, both of which are used to select a component to display information related to the component, and therefore the third operation can be introduced by referring to the introduction of the second operation.

[0141] In the embodiments of the present application, in order to facilitate the user to locate and understand the information of the component, when the second application interface simultaneously displays the page layout information and the target image, the user can mark in the page layout information or the target image when selecting any component. For example, when the user performs the third operation on the third component in the target image, the first electronic device can also mark the information of the third component in the page layout information in response to the third operation. In this way, the user can easily locate the third component in the page layout information, and correspond the third component in the target image with the third component in the page layout information, for example, the user can easily understand the nesting relationship between the third component and other components, and assist in locating the problem. For another example, the user can perform a fourth operation on the information of the third component in the page layout information, and the fourth operation is used to select the third component. Correspondingly, the first electronic device can mark the third component in the target image in response to the fourth operation. In this way, the user can easily locate the position of the third component in the target image, know the final rendering effect of the third component, and also correspond the third component in the target image with the third component in the page layout information, so as to better understand the component, without having to analyze the code as in the related art to perform performance analysis. The learning cost of the performance analysis personnel can be reduced by using the method of the embodiments of the present application. The information of the third component in the page layout information refers to information used to represent the third component in the page layout information, which can be a component ID, a component name, or a corresponding node ID (for example, when the page layout information is presented in the form of a component tree), and the specific form is not limited.

[0142] Optionally, the marking in the page layout information or the target image can be marking in a specific color. For example, when the specific color is blue, the part corresponding to the third component in the page layout information or the target image can be marked in blue, so as to facilitate the user to associate the third component in the page layout information and the target image. Of course, in addition to blue, any other color can also be used. Alternatively, the marking in the page layout information or the target image can also be marking in a specific marking style, such as boxing the part corresponding to the third component in the page layout information or the target image, or adding an underline to the part corresponding to the third component in the page layout information or the target image. Optionally, the marking of the third component in the page layout information and the marking of the third component in the target image can be the same or different. For example, the third component in the page layout information is marked in blue, and the third component in the target image is marked in gray; or the third component in the page layout information is marked in blue, and the third component in the target image is underlined.

[0143] In some embodiments, before presenting the second application interface, the first electronic device can further present a third application interface. The third application interface includes the time consumption of the RS process in drawing at least one frame of the first application interface, and the at least one frame includes the target frame. For example, the third application interface includes a lane of drawing time consumption of the RS process, which can be used to display the time consumption of the RS process in drawing each frame. The user can perform a first operation on the target frame in the third application interface, and accordingly, the first electronic device can display the second application interface in response to the first operation on the target frame. Optionally, the first operation on the target frame can be a first operation on information related to the target frame. For example, a first operation can be performed on the time consumption of the target frame in the lane of drawing time consumption of the RS process to display the second application interface. For another example, a first operation can be performed on the ID of the target frame to display the second application interface.

[0144] Optionally, the third application interface and the second application interface can be interfaces corresponding to different applications (or application processes). For example, the third application interface can be an interface corresponding to a first performance analysis application, and the second application interface can be an interface corresponding to a second performance analysis application, and the first performance analysis application and the second performance analysis application are different. That is, when the first operation is performed on the target frame in the third application interface, the second performance analysis application can be jumped to, and the page layout information and the first information corresponding to the target frame can be displayed in the second application interface corresponding to the second performance analysis application. Optionally, the third application interface and the second application interface can be different interfaces of the same application. For example, the third application interface and the second application interface can be different interfaces of the same functional module in the performance analysis application, or the third application interface and the second application interface can be interfaces of different functional modules in the performance analysis application.

[0145] FIG. 5 is a schematic diagram of a third application interface according to an embodiment of the present application. The third application interface includes a lane of rendering time consumption of the RS process, such as the "render_service(1421)" lane shown in FIG. 5, which can show the rendering time consumption of each frame in the form of a time bar. It should be understood that the present application does not limit the display manner of the rendering time consumption of the RS process. In combination with FIG. 5, in addition to the lane of rendering time consumption of the RS process, a lane showing other information can also be included, such as the "ss.hm.ugc.awene(10759)" lane, which can be used to show the component creation time consumption on the application side and the like, and can assist in locating the problem of frame freezing and frame loss from other aspects.

[0146] Optionally, considering that the components can be divided into custom components and system components, a selectable option can be provided to the user, such as the "options" in the "render_service(1421)" lane in FIG. 5, through which the user can select to display the overall rendering time consumption of a frame, or to display the rendering time consumption of the custom components in a frame, or to display the rendering time consumption of the system components in a frame.

[0147] Optionally, in order to facilitate the user to distinguish, different display attributes can be used to display different value ranges of different parameters in the third application interface. For example, for each parameter of each frame, different display attributes can be used to display the values in the normal value range and the abnormal value range. Taking the rendering time consumption of the RS process as an example, the display attributes of the time consumption in different value ranges are different. It can be understood that when the rendering time consumption of each frame is in a value range, the frame can be displayed using the display attribute corresponding to the value range. The display attributes include but are not limited to color, display style, filling pattern, icon length, etc. For example, in the "render_service(1421)" lane, the rendering time consumption of each frame can be represented by a time bar with a fixed width, and the lengths of the time bars corresponding to different rendering time consumptions are different, and the rendering time consumption is proportional to the length. For another example, when the rendering time consumption is too long (such as timeout), the first color (such as red) can be used to display the time consumption, such as the oblique dash line in FIG. 5 representing red, when the rendering time consumption is relatively long (such as less timeout or about to timeout), the second color (such as yellow) can be used to display the time consumption, such as the oblique square in FIG. 5 representing yellow, and when the rendering time consumption is less (such as a larger time difference from the timeout threshold), the third color (such as green) can be used to display the time consumption, such as the vertical line in FIG. 5 representing green, so that the user can intuitively view the length of the rendering time consumption of each frame, thereby more quickly determining which frame is rendering timeout.

[0148] In some embodiments, the user can perform a fifth operation in the third application interface, and the fifth operation can be an operation for displaying details of the rendering time consumption of the target frame. For example, the fifth operation can be an operation on the time consumption of the target frame in the lane displaying the rendering time consumption of the RS process. As an example, the fifth operation can be an operation of selecting the time consumption of the target frame in the lane displaying the rendering time consumption of the RS process. Accordingly, the first electronic device can display a first control in the third application interface in response to the fifth operation, and the first control is used to trigger the display of the page layout information of the target frame, so that the user can perform a first operation on the first control to display the second application interface.

[0149] Please continue to refer to FIG. 5, the rendering time consumption of the 282nd frame is overdue, and the rendering of the 282nd frame is completed in the 283rd frame, the rendering is seriously lagged, which represents the situation that the frame is stuck in the RS process rendering process, and by being marked as red, the user can be prompted to pay attention to the frame. The user can perform a fifth operation on the 282nd frame in the "render_service(1421)" lane, such as clicking the rendering time consumption of the 282nd frame, and then the detail information of the 282nd frame can be displayed in the detail area. The detail information can include the frame number, the vertical synchronization signal ID, the process name and the process ID of the processing, the actual start time, the actual time consumption, the expected start time, the expected time consumption, and the jank type of the 282nd frame. The jank type will indicate whether the frame is observed to be stuck, and if so, the jank type will indicate the observed stuck type, such as the observed stuck type in FIG. 5 being rendering timeout.

[0150] In one example, the control 501 shown in FIG. 5 is a first control, and the user can perform a first operation on the control 501 to display a second application interface. For example, the user clicks "open related information through a visualization tool" to display the second application interface, so as to display the page layout information and the first information of the 282nd frame in the second application interface, thereby assisting the user in analyzing the reason for the rendering timeout of the 282nd frame. In another example, the controls 501 and 502 shown in FIG. 5 are first controls, the fifth operation can include a first sub-operation and a second sub-operation, the first sub-operation is an operation on the control 502, and the control 502 is operated to be used to download the related information of the 282nd frame, such as downloading the rendering tree (or component tree), image, and component information, etc., and the second sub-operation is an operation on the control 501, and the control 501 is operated to be used to open the downloaded information through a visualization tool. Then, the user can perform a first sub-operation on the control 502 to download the related information of the 282nd frame, and after the downloading is completed, perform a second sub-operation on the control 501 to display the second application interface.

[0151] In some embodiments, the performance of an application is generally determined by the application code corresponding to the application, and the purpose of application performance tuning is to tune the application code so that the application code is executed to present optimal performance. Therefore, when a user performs application performance analysis, the user often also has the need to view the application code. Thus, in the embodiments of the present application, a manner in which the user can quickly jump to the application code is also provided. That is, the user can perform a sixth operation on the second application interface, and correspondingly, the first electronic device can display the application code corresponding to the fourth component in response to the sixth operation. Optionally, the sixth operation can be an operation of selecting the fourth component on the second application interface. For example, one implementation manner is that the sixth operation is an operation on the information of the fourth component in the page layout information. Another implementation manner is that the sixth operation is an operation on the fourth component in the target image corresponding to the target frame. Still another implementation manner is that the sixth operation is an operation on the parameters used to draw the fourth component.

[0152] The display of the application code corresponding to the fourth component can be display of the application code corresponding to the fourth component on the second application interface. For example, when the sixth operation is performed, the application code corresponding to the fourth component can be displayed in a pop-up window. As an example, when the cursor or the finger or the like operation body is placed on the fourth component, the application code corresponding to the fourth component can be displayed near the cursor or the finger touch area. Alternatively, the display of the application code corresponding to the fourth component can also be switching to the fourth application interface to display the application code corresponding to the fourth component. For example, after the sixth operation is performed, the fourth application interface can be jumped to and positioned to the starting position of the application code of the fourth component.

[0153] In the embodiments of the present application, the second application interface can display the page layout information, the target image, and the first information, and the like. In order to be able to display these information on the second application, these information need to be obtained in advance. The information required to be displayed on the second application interface can be obtained by collecting data in the process in which the second electronic device displays the first application interface, and extracting or generating the required display information from the data. For example, for the target image, the data obtained after the RS process is completed can be collected, or the target image can also be obtained from the screen buffer. For example, for the first information of a frame, if the first information includes the parameters used for RS process drawing, the rendering tree of the frame will include these information, and thus the first information can be obtained by obtaining the rendering tree. For example, for the page layout information of a frame, the page layout information is generally included in the component tree, and one way of obtaining the page layout information is to obtain the component tree of the frame to obtain the page layout information. Another way of obtaining the page layout information is to collect the component information of the components related to the first application interface, and restore the component tree in combination with the collected rendering tree.

[0154] In some embodiments, to help the user locate the problem of the time-consuming of the rendering stage, the related data can be collected when the second electronic device displays the first application interface. For example, referring to FIG. 6, the first electronic device can display an interface of the performance analysis application, which can include a control for performing application performance analysis, such as the control 601 shown in FIG. 6, which is used to start or stop recording the data of the first application interface. Optionally, the interface can also include a control 602, which is used to play back the recorded data after the data recording is completed. The user can operate the control 601 to trigger the first electronic device to record the data of the first application interface of the second electronic device. If the second electronic device does not start the first application, the user can operate the control 601 to trigger the first electronic device to send an instruction to the second electronic device, which can instruct the second electronic device to start the first application and run the first application process. After the data recording is completed, the third application interface can be displayed according to the recorded data. For example, after the data recording is stopped, the data analysis is automatically performed and the third application interface is displayed. For another example, after the data recording is stopped, the user can operate the control 602 to display the third application interface.

[0155] Referring to FIG. 7, a flow diagram of displaying the second application interface according to an embodiment of the present application is shown.

[0156] In step 701, component information of components included in at least one frame of the first application interface is obtained.

[0157] The at least one frame of the first application interface can include frames in a period of time starting from a specific frame. For example, the specific frame can be the frame of starting the first application, that is, the first frame of the first application interface. For another example, the specific frame can be the next frame after starting the recording. The at least one frame includes a target frame, and the components included in the at least one frame include multiple components of the target frame.

[0158] In some embodiments, the creation and management of the component is implemented by the application side, and the component information of the component can be obtained from the application side. For example, referring to FIG. 8A, for a native application based on the second electronic device, which is usually developed based on the development language of the operating system of the second electronic device, the native application can implement the creation and management of the component based on the UI framework provided by the operating system, which can also be referred to as a UI subsystem, and thus the component information of the component can be obtained from the UI subsystem. For example, the UI subsystem can provide an interface for obtaining the component information. In one implementation, the component information includes the component tree in the component tree, and in the recording stage, the performance analysis application can obtain the component tree from the UI subsystem frame by frame. In another implementation, considering that the overhead of recording the component tree frame by frame can be large, in order to reduce the overhead of data recording, the component tree can not be recorded, but only the component information, such as one or more of the component name, the component ID, and the code line where the component is located. Optionally, when recording the component information, only the component information of the newly created component in the process of running the first application process of the second electronic device can be recorded. The newly created component is a component in the current frame that is different from the component in the historical frame, and the historical frame is a frame before the current frame, that is, only the information of the incremental component is recorded. For example, the current frame is the 282nd frame, and in the frames displayed by the first application interface before the 282nd frame, components 1-800 are involved. If the 282nd frame contains multiple components among components 1-800, the information of these components will not be recorded repeatedly. If the 282nd frame contains a component, such as component 801, that does not exist in components 1-800, the component information of component 801 will be recorded. In this way, the overhead of data recording can be reduced, and the efficiency of application analysis can be improved.

[0159] Step 702: Obtain at least one frame corresponding rendering tree respectively, and the rendering tree of each frame is used for drawing an image corresponding to each frame by the RS process.

[0160] As shown in FIG. 8A, in the process of running the first application process of the second electronic device, the rendering data related to the drawing of the frame by the RS process is recorded from the RS subsystem frame by frame. The rendering data can include the rendering tree, the drawing time, the image obtained by drawing, etc. The rendering tree is composed of multiple nodes, and one node can correspond to one component. One node can be used to indicate the drawing of the component, and the RS process can draw the component according to the information contained in the node. As shown in FIG. 8A, one node can contain the component ID and related drawing parameters, such as the cache type, the cache validity state, whether to draw off-screen, etc.

[0161] FIG. 8B shows a schematic diagram of a rendering tree recording. In the rendering process of the first application interface involves the process on the side of the first application process and the process on the side of the RS process, the first application process needs to perform steps such as layout, drawing, and diff data serialization to generate a command list and a rendering tree, and send them to the RS process through inter-process communication (IPC), and the RS process needs to perform steps such as data unmarshalling and instruction execution to realize image drawing. Then, the rendering tree of each frame can be obtained when the first application process sends the rendering tree to the RS process.

[0162] Step 703: determining a first component tree corresponding to the target frame according to the component information of the plurality of components and the first rendering tree, the first rendering tree being a rendering tree corresponding to the target frame, and the first component tree including page layout information.

[0163] Specifically, the first rendering tree includes component identifiers, and the component information also includes component IDs, so that the first component tree can be determined according to the component identifiers of each component in the first rendering tree and the component identifiers included in the component information of the plurality of components.

[0164] Referring to FIG. 8C, a flowchart for generating a component tree is provided in an embodiment of the present application. As shown in FIG. 8C, after data recording is completed, component information of a plurality of components can be obtained, and the component information of each component can include component name, component ID, and code line where the component is located, and the like. In addition, rendering trees corresponding to a plurality of frames of the first application interface can also be collected, and the rendering trees include a first rendering tree corresponding to the target frame. Taking component identifiers as component IDs for example, as shown in FIG. 8C, the first rendering tree includes component IDs corresponding to each node and each parameter. Through the component IDs, corresponding components in the component information can be queried, and then the first rendering tree and the component information can be associated through the component IDs to restore the first component tree corresponding to the target frame. The first component tree can represent the relationship between components in the target frame, that is, the first component tree includes page layout information, and when the second application interface is displayed, the second application interface can be displayed according to the first component tree.

[0165] In addition, as shown in FIG. 8C, the generated first component tree can be understood as comprehending all information contained in the rendering tree and the component information, and each component in the first component tree also contains the code line where the component is located, so that the application code corresponding to the first application can be associated with the information. For example, when the application code needs to be displayed, the application code of the component can be accurately located according to the code line where the component is located. In addition, by being associated with the code line, the influence point of the application code on the RS process drawing time consumption can be determined, so as to finally be visually displayed to the user, facilitating the user to locate the reason for the drawing timeout.

[0166] Step 704: Display the second application interface according to the first component tree, for example, the second application interface shown in FIG. 4A.

[0167] In summary, the embodiments of the present application provide a method for analyzing application performance, which provides the analysis capability of the influence of the application code on the RS process side. Specifically, the rendering tree, component information, image, etc. can be obtained in the data recording stage, and the component tree can be restored according to the rendering tree and the component information, and be associated with the application code to determine the influence point of the application code on the RS process drawing time consumption. The method can also visually display the page layout information, so that the user can view the page layout information in a more intuitive and image-based manner. At the same time, the reason for the RS process drawing timeout, such as the parameter causing the timeout or the parameter affecting the drawing time consumption, etc. can be visually indicated. Therefore, the user does not need to analyze the reason for the drawing time consumption according to the application code, which can improve the efficiency of analyzing the application freezing and frame loss problem and improve the efficiency of application performance analysis.

[0168] It can be understood that, although the target frame is mainly taken as an example of the drawing timeout frame in the above embodiments, in actual application, a frame can be taken as an analysis object for performance analysis regardless of whether it is timeout or not. For example, the method of the embodiments of the present application can be used to analyze a frame that is not timeout, to determine the influence point related to the drawing time consumption of the frame, and to further determine whether it can be further improved, so as to achieve the purpose of application performance tuning.

[0169] FIG. 9 is a structural schematic diagram of a computer device 900 provided by an embodiment of the present application. The computer device 900 can be the first electronic device or the second electronic device in the foregoing. As shown in FIG. 9, the computer device 900 can include one or more processors 901, one or more memories 902, a communication interface 903, and one or more computer programs 904, which can be connected through one or more communication buses 905. The processor 201 can be a general-purpose processor such as a microprocessor, or other conventional processors. The bus 905 can be a peripheral component interconnect (PCI) bus or an extended industry standard architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. The one or more computer programs 904 are stored in the memory 902 and configured to be executed by the one or more processors 901, and the one or more computer programs 904 include instructions. For example, when the computer device 900 is the first electronic device in the foregoing, the instructions can be used to perform the related steps of the first electronic device in the corresponding embodiments, for example, perform the related steps of each flow in the foregoing embodiments. The communication interface 903 is configured to realize the communication between the computer device 900 and other devices, for example, the communication interface can be a transceiver.

[0170] The memory 902 can mainly include a program storage area and a data storage area, where the program storage area can store an operating system, an application program of at least one application, etc.; and the data storage area can be used for various data used or generated in the application performance analysis process, etc. In addition, the memory 902 can include a high-speed random access memory, and can also include a nonvolatile memory such as at least one magnetic disk storage device, a flash memory device, or other volatile solid-state memory device.

[0171] The processor 901 is configured to run the computer instructions or programs stored in the memory 902, and perform the method steps provided by the embodiments of the present application. When the computer device 900 is used to implement the method provided by the embodiments of the present application, the processor 901 is configured to: in response to a first operation of a user, display a second application interface, the second application interface including page layout information of a target frame of a first application interface, the page layout information being used to indicate the relationship between a plurality of components contained in the target frame, and display first information in the second application interface, the first information being used to indicate the reason why the rendering service process draws the target frame overtime. The first application interface is an interface of a first application process running on the first electronic device, and the rendering service process of the first electronic device draws the target frame overtime.

[0172] In some embodiments, the processor 901 can include one or more processing units, which can be independently- or integrally-constructed. The processor 901 can further include a controller, which can generate operation control signals according to instruction operation codes and timing signals, and complete the control of fetching and executing instructions.

[0173] The embodiments of the present application further provide a computer program product, comprising a computer program, which, when executed on a computer, causes the computer to perform the method in the above embodiments.

[0174] The embodiments of the present application further provide a graphical user interface on an electronic device, the electronic device having a display screen, a memory, and a processor configured to execute one or more computer programs stored in the memory, the graphical user interface comprising the graphical user interface displayed when the electronic device performs the method in the above embodiments, such as the second application interface or the third application interface.

[0175] The embodiments of the present application further provide a chip system, comprising a processor and an interface, the processor being configured to call and execute instructions from the interface, so that the chip system implements the method in the above embodiments.

[0176] The above embodiments of the present application are described from the perspective of the electronic device as an execution subject. In order to implement each function in the above embodiments of the present application, the electronic device can include a hardware structure and / or a software module, and implement the above functions in the form of hardware structure, software module, or hardware structure plus software module. Whether a certain function in the above functions is executed in the form of hardware structure, software module, or hardware structure plus software module depends on the specific application of the technical solution and the design constraint conditions.

[0177] In the above embodiments, according to the context, the term “when” can be interpreted as meaning “if” or “after”. Similarly, according to the context, the phrase “upon determining” or “if detecting (the stated condition or event)” can be interpreted as meaning “if determining” or “in response to determining” or “upon detecting (the stated condition or event)” or “in response to detecting (the stated condition or event)”.

[0178] In the embodiments described above, all or some of the embodiments can be implemented by hardware, firmware or software, or any combination thereof. When implemented in software, all or some of the embodiments can be implemented in the form of a computer program product storing computer program code. The computer program code can be stored in a computer-readable storage medium. The computer program code, when loaded and executed by one or more computer, can cause the processor to carry out the processes or functional modules described above. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable apparatus. The computer program code can be stored in a computer-readable storage medium, or transferred from one computer-readable storage medium to another computer-readable storage medium, such as from a website, a computer, a server or a data center to another website, computer, server or data center through wired (such as coaxial cable, optical fiber, digital subscriber line (DSL)) or wireless (such as infrared, wireless, microwave, etc.) manner. The computer-readable storage medium can be any available medium that can be accessed by a computer or data storage device such as a server, data center, etc. that includes one or more available media. The available medium can be a magnetic medium (such as a floppy disk, a hard disk, a magnetic tape), an optical medium (such as a DVD), or a semiconductor medium (such as a solid state disk (SSD)), etc. The solutions of the above embodiments can be combined without conflict.

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

[0180] The present application is described with reference to the flowcharts and / or block diagrams of the methods, apparatus (systems) and computer program products according to this application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, as well as combinations of flows and / or blocks in the flowcharts and / or block diagrams, 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 apparatus to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing apparatus produce the functions specified in one or more flows in the flowcharts and / or one or more blocks in the block diagrams.

[0181] These computer program instructions can 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 instructions which implement the function specified in the flowchart or flowsheets and / or block or blocks of the block diagrams.

[0182] These computer program instructions can 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 or flowsheets and / or block or blocks of the block diagrams.

[0183] Obviously, numerous modifications and variations of the present application are possible in light of the above teachings. It is therefore to be understood that within the scope of the claims and their equivalents, the application can be practiced otherwise than as specifically described.

Claims

1. An application performance analysis method, characterized by, The method applied to a first electronic device comprises: In response to a first operation of a user, a second application interface is displayed, the second application interface comprising page layout information of a target frame of a first application interface, the page layout information being used to indicate a relationship between a plurality of components contained in the target frame; wherein the first application interface is an interface of a first application process of a second electronic device, and a rendering service process of the second electronic device draws the target frame out of time; First information is displayed in the second application interface, the first information being used to indicate a reason why the rendering service process draws the target frame out of time.

2. The method of claim 1, wherein, The first information comprises one or more of the following: At least one parameter in application code executed by the first application process, the at least one parameter being used for the rendering service process to draw the target frame; Time consumption of the rendering service process in drawing the plurality of components; First indication information, the first indication information being used to indicate a first parameter in the at least one parameter, the first parameter having an abnormal value; Or, Second indication information, the second indication information being used to indicate a first component in the plurality of components, a second parameter of the first component having an abnormal value.

3. The method according to claim 1 or 2, characterized in that, The first information displayed in the second application interface comprises: In response to a second operation on information of a second component in the page layout information, at least one parameter used to draw the second component is displayed in the second application interface, the second operation being used to select the second component.

4. The method according to any one of claims 1 to 3, characterized in that, The second application interface is further used to display a target image of the target frame, and the plurality of components further comprise a third component; The method further comprises: In response to a third operation on the third component in the target image, at least one parameter used to draw the third component is displayed in the second application interface, the third operation being used to select the third component.

5. The method of claim 4, wherein, The method further comprises: In response to the third operation, information of the third component is marked in the page layout information; or In response to a fourth operation on the information of the third component in the page layout information, the third component is marked in the target image.

6. The method according to any one of claims 1 to 5, characterized in that, The second application interface displayed in response to the first operation of the user comprises: A third application interface is displayed, the third application interface comprising time consumption of the rendering service process in drawing at least one frame of the first application interface, the at least one frame comprising the target frame; In response to the first operation on the target frame in the third application interface, the second application interface is displayed.

7. The method of claim 6, wherein, In the third application interface, display properties of frames with time consumption in different value ranges are different.

8. The method according to claim 6 or 7, characterized in that, The second application interface displayed in response to the first operation on the target frame in the third application interface comprises: In response to a fifth operation on the target frame in the third application interface, a first control is displayed in the third application interface, the first control being used to trigger display of page layout information of the target frame; In response to the first operation on the first control, the second application interface is displayed.

9. The method according to any one of claims 1 to 8, characterized in that, The method further comprises: In response to a sixth operation on the second application interface, display an application code corresponding to a fourth component; The sixth operation is one or more of: An operation on information of the fourth component in the page layout information; An operation on the fourth component in a target image corresponding to the target frame; or An operation on a parameter for drawing the fourth component.

10. The method according to any one of claims 1 to 9, characterized in that, The method further includes: Obtaining component information of components included in at least one frame of the first application interface, the components included in the at least one frame including the plurality of components; Obtaining a rendering tree corresponding to each of the at least one frame, the rendering tree of each frame being used for the rendering service process to draw an image corresponding to the each frame; Determining, according to the component information of the plurality of components and a first rendering tree, a first component tree corresponding to the target frame, the first rendering tree being the rendering tree corresponding to the target frame, and the first component tree including the page layout information; The display of the second application interface includes: Displaying the second application interface according to the first component tree.

11. The method of claim 10, wherein, The component information of any component includes one or more of a component name, a component identifier, or a code line corresponding to the any component.

12. The method according to claim 10 or 11, characterized in that, The determination, according to the component information of the plurality of components and the first rendering tree, of the first component tree corresponding to the target frame includes: Determining the first component tree according to component identifiers of components in the first rendering tree and component identifiers included in the component information of the plurality of components.

13. The method of any one of claims 10-12, wherein, The obtaining of the component information of components included in at least one frame displayed by the second application interface includes: Recording component information of a newly created component in a process in which the second electronic device runs the first application process, the newly created component being a component in a current frame that is different from a component in a historical frame, and the historical frame being a frame before the current frame.

14. The method of any one of claims 10-12, wherein, The timeout of the rendering service process of the second electronic device for drawing the target frame includes: The time consumption of the rendering service process for drawing the target frame is greater than a first threshold value, and the first threshold value is associated with a screen refresh rate of the second electronic device.

15. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, The processor implements the method of any one of claims 1-14 when executing the computer program.

16. A chip system, characterized by The chip system includes processing circuitry and a storage medium, and the storage medium stores instructions; the instructions are executed by the processing circuitry to implement the method of any one of claims 1-14.

17. A computer readable storage medium characterized by: The computer readable storage medium is used to store a computer program, and when the computer program runs on a computer, the computer program causes the computer to execute the method of any one of claims 1-14.

18. A computer program product, characterised in that, The computer program product includes a computer program, and when the computer program runs on a computer, the computer program causes the computer to execute the method of any one of claims 1-14.

Images