Web page layout method and device for automatic browser adaptation

Abstract

The present application relates to a method and device for automatically adapting a web page layout to a browser, the method comprising: setting elastic properties for an initial element through a cascading style sheet to obtain an elastic element with the elastic property; performing browser rendering according to the elastic element and the elastic property to determine the target style of each elastic element and the size and position in the browser; performing web page layout according to the target style of the elastic element and the size and position in the browser. The present application improves the efficiency of browser page layout.

Description

Technical Field

[0001] The present application relates to the field of browser technology, and more particularly to a method and device for automatically adapting a browser to a web page layout. Background Art

[0002] Currently, web page settings mainly include the following three layout methods. 1. Fixed layout (Fixed Layout): The width and height of web page elements are fixed and do not change with the size of the browser window. This layout method is suitable for web pages with fixed width, but not for responsive layout. 2. Fluid layout (Fluid Layout): The width of page elements is adapted according to the screen resolution, but the overall layout remains unchanged, which means that if the screen is too large or too small, the elements will not be displayed normally. 3. Adaptive layout (Adaptive Layout): Based on the screen size, multiple preset layout sizes are divided, and media query technology is used to switch the appropriate layout according to the browser window size. It can adapt to the screen sizes of different devices, but it is necessary to design multiple preset layouts of different sizes, which increases the complexity of the code and has relatively low performance.

[0003] The current mainstream web page layout method is adaptive layout, which can adapt to the screen size and window size of different devices. However, this responsive design has its limitations. It often requires the use of media queries or JavaScript scripts to control the size and position of elements, which increases the complexity of the code and makes the browser page layout inefficient. Summary of the invention

[0004] The present application provides a method and device for automatically adapting a web page layout by a browser to solve the problem of low efficiency of browser page layout.

[0005] In a first aspect, the present application provides a method for automatically adapting a browser to layout a web page, the method comprising: setting elastic attributes for an initial element through a cascading style sheet to obtain an elastic element with the elastic attribute; performing browser rendering according to the elastic element and the elastic attribute to determine a target style of each elastic element as well as a size and position in the browser; and performing web page layout according to the target style of the elastic element as well as a size and position in the browser.

[0006] Optionally, setting elastic attributes for the initial element through a cascading style sheet to obtain an elastic element with the elastic attributes includes: setting the elastic attributes for the initial element through a cascading style sheet to obtain a parent element with the elastic attributes; taking the parent element as a parent container, setting the elastic attributes for at least one layer of nested elements in the parent container through a cascading style sheet to obtain a child element with the elastic attributes.

[0007] Optionally, the elastic attributes include basic attributes and layout attributes, wherein the basic attributes are attribute information of the elastic element itself, and the layout attributes are layout information of the elastic element in an upper-level parent container.

[0008] Optionally, performing browser rendering according to the elastic elements and the elastic attributes to determine the target style of each elastic element as well as the size and position in the browser includes: constructing a DOM tree according to HTML elements in an HTML document, wherein the HTML elements include elastic elements and non-elastic elements, and the DOM tree is used to determine a basic style and a basic layout of the elastic elements; constructing a CSSOM tree according to the cascading style sheet, wherein the CSSOM tree is used to render a basic style and a basic layout of the elastic elements; constructing a rendering tree according to the DOM tree and the CSSOM tree; and laying out the rendering tree according to a preset browser resolution and browser size to determine the target style, size and position of each elastic element in the browser.

[0009] Optionally, the basic attributes include width, height, color, border, margin, padding, line spacing, 2D or 3D transformation of the elastic element.

[0010] Optionally, the layout information includes the main axis direction of the elastic element, single-line or multi-line display, alignment on the main axis of the elastic container, alignment on the cross axis of the elastic container, growth capability in the parent container, shrinkage capability in the parent container, and basic size.

[0011] Optionally, the web pages of the browser are divided into static web pages and dynamic web pages, the elastic properties of the elastic elements in the static web pages are immutable, and the elastic properties of the elastic elements in the dynamic web pages are modifiable.

[0012] In a second aspect, the present application provides a web page layout device for automatic browser adaptation, the device comprising: a creation module, used to set elastic attributes for initial elements through a cascading style sheet to obtain elastic elements with the elastic attributes; a rendering module, used to perform browser rendering according to the elastic elements and the elastic attributes, and determine the target style of each elastic element as well as the size and position in the browser; a layout module, used to perform web page layout according to the target style of the elastic elements as well as the size and position in the browser.

[0013] In a third aspect, the present application provides an electronic device comprising: at least one communication interface; at least one bus connected to the at least one communication interface; at least one processor connected to the at least one bus; and at least one memory connected to the at least one bus.

[0014] In a fourth aspect, the present application further provides a computer storage medium storing computer executable instructions, wherein the computer executable instructions are used to execute the method for automatically adapting the web page layout of the browser as described in any of the above items of the present application.

[0015] The above technical solution provided by the embodiment of the present application has the following advantages over the prior art: the present application performs front-end elastic layout based on cascading style sheets, specifically creates elastic elements required for browser web pages and sets elastic attributes, determines the target style of each elastic element as well as the size and position in the browser through browser rendering, and finally realizes the web page layout. The present application does not need to pre-set layouts of different sizes, nor does it need to use media queries or JavaScript scripts to control the size and position of elements. The size and position of elastic elements can be automatically adapted to the browser page directly according to the elastic attributes, thereby reducing code complexity and improving the layout efficiency of browser web pages. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0017] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0018] One or more embodiments are exemplarily described by pictures in the corresponding drawings, and these exemplified descriptions do not constitute limitations on the embodiments. Elements with the same reference numerals in the drawings represent similar elements, and unless otherwise stated, the figures in the drawings do not constitute proportional limitations.

[0019] Figure 1 A flow chart of a method for automatically adapting a web page layout to a browser provided in an embodiment of the present application;

[0020] Figure 2 An example schematic diagram of an implementation using elastic layout provided in an embodiment of the present application;

[0021] Figure 3 A schematic diagram of the structure of a web page layout device for automatic browser adaptation provided in an embodiment of the present application;

[0022] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0023] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0024] The disclosure below provides many different embodiments or examples to implement different structures of the present invention. In order to simplify the disclosure of the present invention, the parts and settings of specific examples are described below. Of course, they are only examples, and the purpose is not to limit the present invention. In addition, the present invention can repeat reference numbers and / or letters in different examples. This repetition is for the purpose of simplification and clarity, and does not itself indicate the relationship between the various embodiments and / or settings discussed.

[0025] The present application provides a method for automatically adapting a web page layout to a browser, which is applied to a terminal, and is specifically applied to a browser in a terminal, such as Figure 1 As shown, the method includes:

[0026] Step 101: setting elastic properties for the initial element through a cascading style sheet to obtain an elastic element with elastic properties.

[0027] Cascading Style Sheets (CSS) is a style sheet language. The Cascading Style Sheets can set elastic properties for initial elements, thereby obtaining elastic elements with elastic properties. The initial elements refer to elements in an HTML (Hyper Text Markup Language) document.

[0028] A flexible element can be either a container or an element, and a container can also contain subcontainers or elements. Flexible attributes include basic attributes and layout attributes, which are used to describe the style of flexible elements and the layout of flexible elements in a web page. Flexible attributes can make flexible elements automatically adjust with the size of the browser window and adapt to the size and resolution of the browser page.

[0029] The embodiments of the present application can be applied to any browser web page, such as a search web page, a web page for filling in registration information, an enterprise official website, etc. Taking the search web page as an example, the elastic element can be a search box, hot links, and content of each section (such as movies, entertainment, children, or games) in the web page. Taking the registration web page as an example, the elastic element can be an option button, an input information box, or a link element in the web page. In addition to the above, the elastic element can also be text, paragraphs, pictures, audio and video, etc., and the elastic element can be any content that appears in the browser.

[0030] Step 102: Perform browser rendering according to the elastic elements and elastic properties, and determine the target style of each elastic element and the size and position in the browser.

[0031] The browser builds a DOM tree and a CSSOM tree based on the elastic elements and elastic properties, then builds a rendering tree based on the DOM tree and the CSSOM tree, and then lays out the rendering tree to obtain the target style of each elastic element, as well as the size and position of each elastic element in the browser.

[0032] The style of an elastic element consists of element color, border, shape, etc. For example, an elastic element is a rectangular frame with a blue background. The layout of each elastic element in the browser can be determined based on the size and position of the elastic element in the browser.

[0033] Step 103: Perform web page layout according to the target style of the elastic element and the size and position in the browser.

[0034] After the browser determines the target style of the elastic element itself, it then lays out the web page according to the size and position of each elastic element in the browser, and finally draws the page to generate a browser web page that can be seen on the terminal.

[0035] This application performs front-end flexible layout based on cascading style sheets. Specifically, the flexible elements required for the browser web page are created and the flexible attributes are set. The target style of each flexible element as well as the size and position in the browser are determined by browser rendering, and finally the web page layout is realized. This application does not need to pre-set layouts of different sizes, nor does it need to use media queries or JavaScript scripts to control the size and position of elements. The size and position of the flexible elements can be automatically adapted to the browser page according to the elastic attributes, thereby reducing code complexity and improving the layout efficiency of the browser web page.

[0036] Optionally, setting elastic attributes for the initial element through a cascading style sheet to obtain an elastic element with elastic attributes includes: setting elastic attributes for the initial element through a cascading style sheet to obtain a parent element with elastic attributes; taking the parent element as a parent container, setting elastic attributes for at least one layer of nested elements in the parent container through a cascading style sheet to obtain a child element with elastic attributes.

[0037] The browser first sets elastic properties for an initial element through a cascading style sheet, and uses the initial element with elastic properties as a parent container. The parent container also includes at least one layer of nested elements. The elements in the parent container can be elements or containers, that is, several layers of elements can be nested in the parent container. As for the specific number of nested layers and the number of elastic elements, they are all set according to the actual web page content. The browser sets elastic properties for the nested element through a cascading style sheet to obtain a child element with elastic properties, wherein the specific content of the elastic properties is also set according to the actual web page content. By setting multiple layers of nesting, this application is suitable for more complex web page designs in actual development.

[0038] The elastic properties of elastic elements include basic properties and layout properties. Basic properties refer to the property information of the elastic elements themselves, such as the width, height, color, border, margin, padding, line spacing, and 2D or 3D transformation of the elastic elements. Layout properties refer to the layout information of the elastic elements in the parent container, such as flex-direction, flex-wrap, flex-grow, lex-shrink, flex-basis, align-self, justify-content, and align-items of the elastic elements.

[0039] The layout attributes include at least the following:

[0040] 1.flex-direction specifies the main axis direction, which refers to the arrangement direction of elements in the flexible window. The default is horizontal. The optional values ​​include: row (default), row-reverse, column, and column-reverse. row: the main axis is horizontal, with the starting point at the left end; row-reverse: the main axis is horizontal, with the starting point at the right end; column: the main axis is vertical, with the starting point at the top; column-reverse: the main axis is vertical, with the starting point at the bottom.

[0041] 2.flex-wrap specifies whether the element is displayed in a single line or multiple lines. If line breaks are allowed, the stacking direction of the elements can be controlled. The optional values ​​include: nowrap, wrap, and wrap-reverse. nowrap: the elements are placed in a row without line breaks; wrap: if the elements are not wide enough, they can be arranged in a line, with the first line at the top; wrap-reverse: if the elements are not wide enough, they can be arranged in a line, with the first line at the bottom.

[0042] 3. justify-content specifies the alignment of elements on the main axis of the flexible container. The optional values ​​include flex-start, flex-end, center, space-between, and space-around. flex-start: align at the starting point of the main axis; flex-end: align at the end of the main axis; center: center the main axis; space-between: align at both ends, with the first element at the start position and the last element at the end position, and the elements are evenly arranged and evenly spaced; space-around: the same space is distributed around each element, and the spacing between elements is twice the spacing between the element and the container.

[0043] 4.align-items controls the alignment of elastic elements in the cross axis direction of the elastic container. The optional values ​​include auto, flex-start, flex-end, center, baseline and stretch. flex-start: align the start edge of the secondary axis; flex-end: align the end edge of the secondary axis; center: the middle of the secondary axis; Baseline: the element is positioned to the baseline of the container; stretch: the height of the secondary axis of the elastic elements at the same level is the same, and the elements will stretch.

[0044] 5. Flex-grow specifies the growth capacity of elements in a flexible container in the parent container, and defines how the child elements distribute the available space in proportion when allocating space. For example, if there are three child elements in a container, two of which have a flex-grow attribute of 1 and another has a flex-grow attribute of 2, then the latter will get twice as much remaining space as the first two.

[0045] 6.flex-shrink: controls the ability of elements in a flexible container to shrink in the parent container. The larger the value, the faster the shrinkage speed.

[0046] 7.flex-basis: Set the base size for the flexible element. When the element has no other size restrictions, it will be allocated according to this value.

[0047] This application provides an example of using elastic layout to achieve Figure 2As shown, first, create a container containing three boxes (Box One, Box Two, Box Three), then use the elastic property display:flex to display the container as a flex container, and use the elastic property justify-content:space-between to evenly distribute the boxes inside it to both ends of the container, and also use the elastic property align-items:center to align each box in the vertical direction. In the box style, use the elastic property flex-basis to set the initial size of the box, which will be used to calculate the actual size of each box to fit the container. In addition, the height and background color of each box are set.

[0048] This application is applicable to dynamic pages that can interact with users, and also to static pages that do not interact with users. The elastic properties of elastic elements in static web pages cannot be changed, such as corporate official websites, while the elastic properties of elastic elements in dynamic web pages can be changed, such as filling in information web pages.

[0049] The present application solves the technical problem of complex and cumbersome layout of web page elements in order to adapt to different browsers in the prior art through the automatic adaptation of the web page layout by the browser, realizes the effect of web page layout adapting to all browsers and terminals, reduces code complexity, and improves web page layout efficiency.

[0050] As an optional implementation, browser rendering is performed according to elastic elements and elastic attributes, and determining the target style of each elastic element as well as the size and position in the browser includes: constructing a DOM tree according to HTML elements in an HTML document, wherein the HTML elements include elastic elements and non-elastic elements, and the DOM tree is used to determine the basic style and basic layout of the elastic elements; constructing a CSSOM tree according to a cascading style sheet, wherein the CSSOM tree is used to render the basic style and basic layout of the elastic elements; constructing a rendering tree according to the DOM tree and the CSSOM tree; and laying out the rendering tree according to a preset browser resolution and browser size, and determining the target style, size and position of each elastic element in the browser.

[0051] The browser uses a rendering engine for browser rendering, and the specific method is as follows.

[0052] First, the rendering engine uses an HTML parser to parse the HTML document, determine the HTML elements in the HTML document, including elastic elements and non-elastic elements, and then convert the HTML document into a DOM (Document Object Model) node, and form a DOM tree based on the multiple DOM nodes. The DOM tree is a tree-shaped data structure with a hierarchical structure. The hierarchical structure refers to the relationship between elements. The DOM tree is used to determine the basic style and basic layout of the elastic elements. In the DOM tree, the arrangement of elastic elements is from left to right, and the style is a simple rectangle, and the entire page is not aesthetically pleasing.

[0053] Secondly, the rendering engine parses the cascading style sheet in the code through the CSS parser, and converts the cascading style sheet in the code into a cascading style sheet that can be recognized by the browser, and then builds a CSSOM (CSS Object Model) tree based on the cascading style sheet. The CSSOM tree is used to render the basic style and basic layout of the flexible elements.

[0054] Then, the rendering engine builds a rendering tree based on the DOM tree and the CSSOM tree. At this time, the rendering tree contains the target style and layout after the elastic element is rendered.

[0055] Finally, the rendering engine lays out the rendering tree according to the preset browser resolution and browser size, so that the size and position of the elastic element adapt to the browser and obtain the target style of the elastic element.

[0056] Based on the same technical concept, the present application provides a web page layout device for automatic browser adaptation, such as Figure 3 As shown, the device comprises:

[0057] A creation module 301 is used to set elastic properties for the initial element through a cascading style sheet to obtain an elastic element with elastic properties;

[0058] The rendering module 302 is used to perform browser rendering according to the elastic elements and elastic properties, and determine the target style of each elastic element and the size and position in the browser;

[0059] The layout module 303 is used to perform web page layout according to the target style of the elastic element and the size and position in the browser.

[0060] Optionally, setting elastic attributes for the initial element through a cascading style sheet to obtain an elastic element with elastic attributes includes: setting elastic attributes for the initial element through a cascading style sheet to obtain a parent element with elastic attributes; taking the parent element as a parent container, setting elastic attributes for at least one layer of nested elements in the parent container through a cascading style sheet to obtain a child element with elastic attributes.

[0061] Optionally, the elastic attributes include basic attributes and layout attributes, wherein the basic attributes are attribute information of the elastic element itself, and the layout attributes are layout information of the elastic element in the upper parent container.

[0062] Optionally, the rendering module 302 is used to:

[0063] Build a DOM tree according to HTML elements in the HTML document, where the HTML elements include elastic elements and non-elastic elements, and the DOM tree is used to determine the basic style and basic layout of the elastic elements;

[0064] Build a CSSOM tree based on the cascading style sheet, where the CSSOM tree is used to render the basic style and basic layout of the flexible element;

[0065] Build a rendering tree based on the DOM tree and CSSOM tree;

[0066] Lay out the render tree based on the preset browser resolution and browser size, and determine the target style, size, and position of each flexible element in the browser.

[0067] Optionally, basic properties include the width, height, color, border, margin, padding, leading, and 2D or 3D transformations of the flex element.

[0068] Optionally, the layout information includes the main axis direction of the flex element, single-line or multi-line display, alignment on the main axis of the flex container, alignment on the cross axis of the flex container, growth ability in the parent container, shrinkability in the parent container, and base size.

[0069] Optionally, the web pages of the browser are divided into static web pages and dynamic web pages. The elastic properties of the elastic elements in the static web pages cannot be changed, while the elastic properties of the elastic elements in the dynamic web pages can be changed.

[0070] like Figure 4 As shown, an embodiment of the present application provides an electronic device, including a processor 401, a communication interface 402, a memory 403 and a communication bus 404, wherein the processor 401, the communication interface 402, and the memory 403 communicate with each other through the communication bus 404.

[0071] The memory 403 is used to store computer programs.

[0072] An embodiment of the present application also provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of the method for automatically adapting the web page layout of the browser as provided in any of the aforementioned method embodiments are implemented.

[0073] The device embodiments described above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, i.e., they may be located in one place, or may be distributed over multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0074] Through the description of the above implementation methods, those skilled in the art can clearly understand that each implementation method can be implemented by means of software plus a general hardware platform, and of course, by hardware. Based on this understanding, the above technical solution is essentially or the part that contributes to the relevant technology can be embodied in the form of a software product, and the computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, a disk, an optical disk, etc., including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each embodiment or some parts of the embodiments.

[0075] It should be understood that the terms used herein are only for the purpose of describing specific example embodiments and are not intended to be limiting. Unless the context clearly indicates otherwise, the singular forms "one", "an" and "said" as used herein may also be meant to include plural forms. The terms "include", "comprise", "contain", and "have" are inclusive, and therefore specify the existence of stated features, steps, operations, elements and / or parts, but do not exclude the existence or addition of one or more other features, steps, operations, elements, parts, and / or combinations thereof. The method steps, processes, and operations described herein are not interpreted as necessarily requiring them to be performed in the specific order described or illustrated, unless the execution order is clearly indicated. It should also be understood that additional or alternative steps may be used.

[0076] The foregoing is merely a specific embodiment of the present invention, which enables those skilled in the art to understand or implement the present invention. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features claimed herein.

Claims

1. A method for automatically adapting a webpage layout to a browser, characterized in that: The method comprises: Setting elastic properties for the initial element through a cascading style sheet to obtain an elastic element with the elastic properties, wherein the elastic properties include basic properties and layout properties, wherein the basic properties are property information of the elastic element itself, and the layout properties are layout information of the elastic element in an upper parent container; Performing browser rendering according to the elastic elements and the elastic properties, and determining a target style of each elastic element as well as a size and position in the browser; Performing web page layout according to the target style of the elastic element and the size and position of the elastic element in the browser; The step of setting the elastic attribute for the initial element through the cascading style sheet to obtain the elastic element having the elastic attribute includes: By setting elastic properties for the initial element through the cascading style sheet, a parent element with elastic properties is obtained; Taking the parent element as a parent container, setting elastic properties for at least one nested element in the parent container through a cascading style sheet to obtain a child element with elastic properties; The step of performing browser rendering according to the elastic element and the elastic attribute and determining the target style of each elastic element and the size and position in the browser includes: Building a DOM tree according to HTML elements in an HTML document, wherein the HTML elements include elastic elements and non-elastic elements, and the DOM tree is used to determine a basic style and a basic layout of the elastic elements; Constructing a CSSOM tree according to the cascading style sheet, wherein the CSSOM tree is used to render a basic style and a basic layout of the elastic element; Construct a rendering tree according to the DOM tree and the CSSOM tree; The rendering tree is laid out according to a preset browser resolution and browser size, and a target style, size, and position of each elastic element in the browser are determined.

2. The method according to claim 1, characterized in that The basic properties include the width, height, color, border, margin, padding, line spacing, and 2D or 3D transformation of the flexible element.

3. The method according to claim 1, characterized in that The layout information includes the main axis direction of the elastic element, single-line or multi-line display, alignment on the main axis of the elastic container, alignment on the cross axis of the elastic container, growth capability in the parent container, shrinkage capability in the parent container, and basic size.

4. The method according to claim 1, characterized in that: The web pages of the browser are divided into static web pages and dynamic web pages. The elastic properties of the elastic elements in the static web pages cannot be changed, while the elastic properties of the elastic elements in the dynamic web pages can be changed.

5. A webpage layout device for automatic browser adaptation, characterized in that: The device comprises: A creation module, used for setting elastic properties for the initial element through a cascading style sheet to obtain an elastic element with the elastic properties, wherein the elastic properties include basic properties and layout properties, wherein the basic properties are property information of the elastic element itself, and the layout properties are layout information of the elastic element in an upper parent container; A rendering module, used to perform browser rendering according to the elastic elements and the elastic properties, and determine the target style of each elastic element as well as the size and position in the browser; A layout module, used to perform web page layout according to the target style of the elastic element and the size and position in the browser; Wherein, the creation module is used to: By setting elastic properties for the initial element through the cascading style sheet, a parent element with elastic properties is obtained; Taking the parent element as a parent container, setting elastic properties for at least one nested element in the parent container through a cascading style sheet to obtain a child element with elastic properties; Wherein, the rendering module is used for: Building a DOM tree according to HTML elements in an HTML document, wherein the HTML elements include elastic elements and non-elastic elements, and the DOM tree is used to determine a basic style and a basic layout of the elastic elements; Constructing a CSSOM tree according to the cascading style sheet, wherein the CSSOM tree is used to render a basic style and a basic layout of the elastic element; Construct a rendering tree according to the DOM tree and the CSSOM tree; The rendering tree is laid out according to a preset browser resolution and browser size, and a target style, size, and position of each elastic element in the browser are determined.

6. An electronic device, characterized in that: It includes a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, for implementing any of the methods described in claims 1-4 when executing a program stored in a memory.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images