Web page display optimization method, device, electronic device and storage medium

Through the adaptation of the system and browser environment, combined with the Flex layout adaptation algorithm, the problems of browser compatibility and device diversity are solved, unified adaptation and efficient rendering of web pages are achieved, user experience is improved and maintenance costs are reduced.

CN114707089BActive Publication Date: 2025-03-07BEIJING HUIYUAN-NET TECH CO LTD
View PDF 1 Cites 0 Cited by

Patent Information

Application Number
CN202210240355.2
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2022-03-10
Publication Date
2025-03-07
Estimated Expiration
2042-03-10

AI Technical Summary

Technical Problem

The existing technology is difficult to effectively solve the browser compatibility problem, resulting in difficulties in operation and maintenance of enterprise information systems, affecting the operation and user experience of business systems, and the client products are updated quickly, and the screen resolution and size are diversified, which makes the existing technology difficult to deal with.

Method used

By starting the OS kernel verification engine and the ECMAScript standard inspection engine, the system and browser environment adaptation are carried out, the web page execution and rendering environment is determined, and finally the web page is rendered and optimized using the Flex layout adaptation algorithm to achieve the final web page adaptation.

Benefits of technology

It realizes unified adaptation of web pages on different browsers and devices, improves user experience, reduces maintenance costs, and can perfectly cope with screens of various resolutions and sizes.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN114707089B_ABST
    Figure CN114707089B_ABST
Patent Text Reader

Abstract

The present application relates to a web page display optimization method, device, electronic device and storage medium, which relates to the technical field of web page optimization, wherein the method verifies the status of the system and the system's built-in browser kernel by starting the OS kernel inspection engine, and performs preliminary system environment adaptation; in the state of system environment adaptation, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment and determine the web page execution and rendering environment adaptation; in the state of web page execution and rendering environment adaptation, the web page loading is promoted, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm. The scheme of the present invention has a set of layout schemes based on the Flex layout method, which can perfectly cope with screens of various resolutions and sizes. The scheme of the present invention integrates the characteristics of existing mainstream operating systems and personalizes the compatibility issues that may be caused by changes in the system and the system's built-in browser kernel.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present application relates to the technical field of data transmission, and in particular to a web page display optimization method, device, electronic device and storage medium. Background Art

[0002] At present, most general enterprises are equipped with full-coverage information systems, which are large in scale, full in function and large in number. Different systems have different browser compatibility, and there are many types of browsers, which makes operation and maintenance difficult, and compatibility issues will affect the operation of business systems and user use. Due to the rapid update of client products, the diversity of screen resolutions and sizes, and even the appearance of curved screens and notch screens, and the fact that the browser kernels of mobile OS and various APPs (such as WeChat, Alipay, Toutiao) are not unified, it is difficult for existing technical solutions to deal with compatibility issues well;

[0003] In addition, each project requires two or more sets of site adaptation clients, which increases development costs. Every time the browser or client is upgraded, the script needs to be optimized and modified, which increases maintenance costs. Summary of the invention

[0004] In order to optimize the web page display effect and present it to users with the best user experience, the present application provides a web page display optimization method, device, electronic device and storage medium.

[0005] In a first aspect, the present application provides a web page display optimization method, the optimization method comprising the following steps:

[0006] Start the OS kernel verification engine to verify the status of the system and the system's built-in browser kernel, and perform preliminary system environment adaptation;

[0007] When the system environment is adapted, the ECMAScript standard check engine is started to detect the client browser to complete the browser script execution environment check and determine the web page execution and rendering environment adaptation;

[0008] When the web page execution and rendering environment are adapted, the web page loading is promoted, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm to complete the final adaptation of the web page.

[0009] As a possible implementation method, starting the OS kernel verification engine to verify the status of the system and the system's own browser kernel and performing preliminary system environment adaptation includes the following steps:

[0010] Check the system kernel version, and enable functions as needed to adapt the system to the kernel version;

[0011] Check the browser kernel version and enable the corresponding compatibility mode according to the kernel version.

[0012] As a possible implementation method, in the state where the system environment is adapted, starting the ECMAScript standard inspection engine to detect the client browser to complete the inspection of the browser script execution environment, and determining that the web page execution and rendering environment are adapted includes the following steps:

[0013] When the system environment is adapted, start the ECMAScript standard check engine to detect the client browser to check whether the browser script execution environment is adapted;

[0014] If the browser script execution environment is not compatible, enable the low-version kernel mode to adapt the web page to ensure that the script language can be executed normally.

[0015] As a possible implementation method, rendering and optimizing a web page by using a Flex layout adaptation algorithm includes the following steps:

[0016] Determine the Flex container and Flex items, and determine the placeholder status of the web page tag element;

[0017] According to the position of the web page label elements, determine the horizontal main axis and vertical cross axis to confirm the layout of the gaps between elements;

[0018] The positions of the web page tag elements and the gaps between the web page tag elements are adaptively rendered, and according to the current visible window size of the browser, the container attribute values ​​are dynamically configured to fit the display form of the current visible window.

[0019] As a possible implementation manner, the container attribute values ​​include: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content and item attributes: order, flex-grow, flex-shrink, flex-basis, flex, align-self.

[0020] As a possible implementation method, the ECMAScript standard checking engine is started to detect whether the client browser checks whether the browser script execution environment is adapted, including whether the development framework is adapted and whether the script language is adapted.

[0021] In a second aspect, the present application provides a web page display optimization device, the optimization device comprising:

[0022] The OS kernel verification engine startup module is used to start the OS kernel verification engine to verify the status of the system and the system's built-in browser kernel, and perform preliminary system environment adaptation;

[0023] The ECMAScript standard check engine startup module is used to start the ECMAScript standard check engine to detect the client browser when the system environment is adapted, so as to complete the inspection of the browser script execution environment and determine the web page execution and rendering environment adaptation;

[0024] The Flex layout module is used to promote the loading of web pages, start the Flex layout adaptation engine, render and optimize the web pages through the Flex layout adaptation algorithm, and complete the final adaptation of the web pages when the web page execution and rendering environment are adapted.

[0025] As a possible implementation method, it includes:

[0026] An element determination unit is used to determine the Flex container and Flex item, and determine the placeholder status of the web page tag element;

[0027] The layout determination unit determines the horizontal main axis and the vertical cross axis according to the position of the web page tag element, so as to confirm the layout of the gaps between the elements;

[0028] After the display unit, the position of the web page tag element and the gap between the web page tag elements are adapted and rendered, the container attribute value is dynamically configured according to the current visible window size of the browser to fit the display form of the current visible window.

[0029] In a third aspect, the present application provides an electronic device, which adopts the following technical solution:

[0030] Optionally, the electronic device includes a processor and a memory, the memory storing at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set are loaded and executed by the processor to implement a web page display optimization method as described in the first aspect.

[0031] In a fourth aspect, the present application provides a computer-readable storage medium, which adopts the following technical solution:

[0032] Optionally, the storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement a web page display optimization method as described in the first aspect.

[0033] In summary, the present application includes at least one of the following beneficial technical effects:

[0034] This application starts the OS kernel inspection engine to check the status of the system and the system's built-in browser kernel, and performs preliminary system environment adaptation; when the system environment is adapted, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment and determine the adaptation of the web page execution and rendering environment; when the web page execution and rendering environment are adapted, the web page loading is promoted, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm to complete the final adaptation of the web page, and the browser is unified based on the latest ECMAScript standard (ISO / IEC 16262:2011) to be compatible with the latest browser in real time. The solution of the present invention has a set of layout solutions based on the Flex layout method, which can perfectly cope with screens of various resolutions and sizes. The solution of the present invention integrates the characteristics of existing mainstream operating systems and personalizes the compatibility issues that may be caused by changes in the system and the system's built-in browser kernel. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0036] Figure 1 It is a flow chart of a web page display optimization method according to an embodiment of the present application;

[0037] Figure 2 It is a flowchart of a method for rendering a web page and implementing an optimization method by using a Flex layout adaptation algorithm in an embodiment of the present application;

[0038] Figure 3 It is a structural block diagram of a web page display optimization device according to an embodiment of the present application;

[0039] Figure 4 It is a structural block diagram of an electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0040] In order to enable those skilled in the art to better understand the technical solutions in one or more embodiments of this specification, the technical solutions in one or more embodiments of this specification will be clearly and completely described below in conjunction with the drawings in one or more embodiments of this specification. Obviously, the described embodiments are only part of the embodiments of this specification, not all of them. Based on one or more embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this document.

[0041] It should be noted that the description of the embodiments of the present invention is only for more clearly illustrating the technical solutions of the embodiments of the present invention, and does not constitute a limitation on the technical solutions provided by the embodiments of the present invention.

[0042] Figure 1 A web page display optimization method according to an embodiment of the present application is shown. Figure 1 As shown, the optimization method comprises the following steps:

[0043] S20, start the OS kernel verification engine to verify the status of the system and the system's built-in browser kernel, and perform preliminary system environment adaptation;

[0044] S40, when the system environment is adapted, start the ECMAScript standard inspection engine to detect the client browser to complete the inspection of the browser script execution environment and determine whether the web page execution and rendering environment are adapted;

[0045] S60: When the web page is executed and the rendering environment is adapted, the web page is pushed to load, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm to complete the final adaptation of the web page.

[0046] This embodiment starts the OS kernel inspection engine to check the status of the system and the system's built-in browser kernel, and performs preliminary system environment adaptation; when the system environment is adapted, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment and determine the adaptation of the web page execution and rendering environment; when the web page execution and rendering environment are adapted, the web page loading is promoted, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm to complete the final adaptation of the web page, and the browser is unified based on the latest ECMAScript standard (ISO / IEC 16262:2011) to be compatible with the latest browser in real time. The solution of the present invention has a set of layout solutions based on the Flex layout method, which can perfectly cope with screens of various resolutions and sizes. The solution of the present invention integrates the characteristics of existing mainstream operating systems and personalizes the compatibility issues that may be caused by changes in the system and the system's built-in browser kernel.

[0047] Specifically, starting the OS kernel verification engine to verify the status of the system and the system's own browser kernel, and performing preliminary system environment adaptation includes the following steps:

[0048] Check the system kernel version, and enable functions as needed to adapt the system to the kernel version;

[0049] Check the browser kernel version and enable the corresponding compatibility mode according to the kernel version.

[0050] For example, first start the OS kernel check to determine the status of the system kernel and browser kernel, perform preliminary system environment adaptation and optimization, and prepare for the ECMAScript standard inspection engine. The specific steps are: (1) Check the system kernel version. According to the kernel version, the plug-in enables the function as needed to adapt the system. (2) Check the browser kernel version. According to the different kernels, the plug-in enables the corresponding compatibility mode. For example, the IE kernel uses low-version JS and CSS, and the Webkit kernel can use the latest script syntax, such as ES6, CSS3, etc.

[0051] Specifically, check the system kernel version, enable functions as needed for system adaptation according to the kernel version, and support systems include but are not limited to Windows, MacOS, Android, IOS, Flyme OS, MIUI, Smartisan OS, H2OS, EMUI, HarmonyOS, and ColorOS;

[0052] Check the browser kernel version and enable the corresponding compatibility mode according to the kernel version. The check information includes but is not limited to the following:

[0053] Code name, example: Mozilla

[0054] Minor version, example: undefined

[0055] Browser name, example: Netscape

[0056] Platform and version information, example: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 99.0.4844.51 Safari / 537.36 Edg / 99.0.1150.36

[0057] Whether to enable cookies, example: true

[0058] CPU level, example: undefined

[0059] Is it in offline mode: true

[0060] Operating system platform, example: Win32

[0061] User-Agent header, example: Mozilla / 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 99.0.4844.51 Safari / 537.36 Edg / 99.0.1150.36

[0062] The language of the browser, example: zh-CN

[0063] Operating system language, example: zh-CN

[0064] Operating system natural language setting, example: undefined.

[0065] Specifically, in the state where the system environment is adapted, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment, and determining that the web page execution and rendering environment are adapted includes the following steps:

[0066] When the system environment is adapted, start the ECMAScript standard check engine to detect the client browser to check whether the browser script execution environment is adapted;

[0067] If the browser script execution environment is not compatible, enable the low-version kernel mode to adapt the web page to ensure that the script language can be executed normally.

[0068] For example, start the ECMAScript standard check engine to detect the client browser to complete the browser script execution environment check whether it supports JavaScript, whether it supports VUE, and whether it supports CSS3. If it is found that it is not supported, the plug-in will enable the low-version kernel mode to adapt to the web page to ensure that the low-version JS and CSS can be executed normally.

[0069] After the OS kernel inspection engine and ECMAScript standard inspection engine complete the optimization and adaptation of the system environment and browser environment, the web page is loaded and the plug-in Flex layout adaptation engine is started to complete the final adaptation of the web page. The web page is rendered and optimized through the Flex layout adaptation algorithm.

[0070] Specifically include:

[0071] S601, determine the flex container and flex item to ensure the position of the web page tag element; the element of the flex layout is called a flex container, or "container" for short. All its child elements automatically become container members, called flex items, or "items" for short.

[0072] S602. After the position of the elements is clear, determine the horizontal main axis and the vertical cross axis to confirm the layout of the gaps between elements; the container has two axes by default: the horizontal main axis and the vertical cross axis. The starting position of the main axis (the intersection with the border) is called the main start, and the ending position is called the main end; the starting position of the cross axis is called the cross start, and the ending position is called the cross end. Items are arranged along the main axis by default. The main axis space occupied by a single item is called the main size, and the cross axis space occupied is called the cross size.

[0073] S603, adapting the position of the web page tag element and the gap between the web page tag elements for rendering, dynamically configuring the container attributes: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content and the item attributes: order, flex-grow, flex-shrink, flex-basis, flex, align-self values ​​according to the current visible window size of the browser, and finally achieving a display form suitable for the current visible window, and then presenting it to the user.

[0074] The web page display optimization method provided by the embodiment of the present invention can greatly optimize the web page display effect and present it to users with the best user experience.

[0075] Based on the same inventive concept, an embodiment of the present invention also provides a web page display optimization device, which can be used to implement a web page display optimization method described in the above embodiment, as described in the following embodiment: Since the principle of solving the problem by the web page display optimization device is similar to that of a web page display optimization method, the implementation of a web page display optimization device can refer to the implementation of a web page display optimization method, and the repeated parts will not be repeated. As used below, the term "unit" or "module" can be a combination of software and / or hardware that implements predetermined functions. Although the system described in the following embodiments is preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceived.

[0076] Figure 3 FIG. 2 shows a structural block diagram of a web page display optimization device according to an embodiment of the present invention. Figure 3 As shown, the optimization device comprises:

[0077] The OS kernel verification engine startup module 20 is used to start the OS kernel verification engine to verify the status of the system and the system's own browser kernel, and perform preliminary system environment adaptation;

[0078] The ECMAScript standard checking engine starting module 40 is used to start the ECMAScript standard checking engine to detect the client browser in the state of system environment adaptation, so as to complete the inspection of the browser script execution environment and determine the web page execution and rendering environment adaptation;

[0079] The Flex layout module 60 is used to promote web page loading, start the Flex layout adaptation engine, render and optimize the web page through the Flex layout adaptation algorithm, and complete the final adaptation of the web page when the web page is executed and the rendering environment is adapted.

[0080] Specifically, the Flex layout module 60 includes:

[0081] The element determination unit 601 is used to determine the Flex container and the Flex item, and determine the placeholder state of the web page tag element;

[0082] The layout determination unit 602 determines the horizontal main axis and the vertical cross axis according to the position of the web page tag element, so as to confirm the layout of the gaps between the elements;

[0083] The display unit 603 renders the position of the web page tag element and the gap between the web page tag elements in an adaptive manner, and dynamically configures the container attribute value according to the current visible window size of the browser to fit the display form of the current visible window.

[0084] In this embodiment, the OS kernel check engine startup module 20 starts the OS kernel check engine to check the status of the system and the system's built-in browser kernel, and performs preliminary system environment adaptation; the ECMAScript standard check engine startup module 40 starts the ECMAScript standard check engine to detect the client browser in the state of system environment adaptation, so as to complete the inspection of the browser script execution environment and determine the adaptation of the web page execution and rendering environment; the Flex layout module 60 promotes the loading of the web page in the state of web page execution and rendering environment adaptation, starts the Flex layout adaptation engine, renders and optimizes the web page through the Flex layout adaptation algorithm, so as to complete the final adaptation of the web page, and is compatible with the latest browser in real time based on the latest ECMAScript standard (ISO / IEC 16262:2011) with the browser. The scheme of the present invention has a set of layout schemes based on the Flex layout method, which can perfectly cope with screens of various resolutions and sizes. The scheme of the present invention integrates the characteristics of the existing mainstream operating systems, and personalizes the compatibility issues that may be caused by changes in the system and the system's built-in browser kernel.

[0085] An embodiment of the present invention further provides a computer electronic device, Figure 4 FIG. 1 shows a schematic diagram of the structure of an electronic device to which an embodiment of the present invention can be applied. Figure 4 As shown, the computer electronic device includes a central processing unit (CPU) 401, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 402 or the program loaded from the storage part 408 to the random access memory (RAM) 403. In the RAM 403, various programs and data required for system operation are also stored. The CPU 401, the ROM 402 and the RAM 403 are connected to each other through a bus 404. An input / output (I / O) interface 405 is also connected to the bus 404.

[0086] The following components are connected to the I / O interface 405: an input section 406 including a keyboard, a mouse, etc.; an output section 407 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 408 including a hard disk, etc.; and a communication section 409 including a network interface card such as a LAN card, a modem, etc. The communication section 409 performs communication processing via a network such as the Internet. A drive 410 is also connected to the I / O interface 405 as needed. A removable medium 411, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 410 as needed, so that a computer program read therefrom is installed into the storage section 408 as needed.

[0087] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, program segment or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a different order from the order marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0088] The units or modules involved in the embodiments of the present invention may be implemented in software or hardware. The units or modules described may also be set in a processor, for example, may be described as: a processor including an OS kernel check engine startup module 20, an ECMAScript standard check engine startup module 40, and a Flex layout module 60, wherein the names of these modules do not constitute a limitation on the module itself in some cases, for example, the Flex layout module 60 may also be described as "a Flex layout module 60 for promoting web page loading, starting the Flex layout adaptation engine, rendering and optimizing the web page through the Flex layout adaptation algorithm, and completing the final adaptation of the web page under the state of web page execution and rendering environment adaptation".

[0089] As another aspect, the present invention further provides a computer-readable storage medium, which may be a computer-readable storage medium included in a program file review device described in the above embodiment; or a computer-readable storage medium that exists independently and is not installed in an electronic device. The computer-readable storage medium stores one or more programs, and the programs are used by one or more processors to execute a web page display optimization method described in the present invention.

[0090] The above description is only a preferred embodiment of the present invention and an explanation of the technical principles used. Those skilled in the art should understand that the scope of the invention involved in the present invention is not limited to the technical solution formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the inventive concept. For example, the above features are replaced with the technical features with similar functions disclosed in the present invention (but not limited to) to form a technical solution.

Claims

1. A web page display optimization method, characterized in that: The optimization method comprises the following steps: Start the OS kernel verification engine to verify the status of the system and the system's built-in browser kernel, and perform preliminary system environment adaptation; When the system environment is adapted, the ECMAScript standard check engine is started to detect the client browser to complete the browser script execution environment check and determine the web page execution and rendering environment adaptation; When the web page execution and rendering environment are adapted, the web page loading is promoted, the Flex layout adaptation engine is started, and the web page is rendered and optimized through the Flex layout adaptation algorithm to complete the final adaptation of the web page; The starting of the OS kernel verification engine to verify the status of the system and the system's own browser kernel and to perform preliminary system environment adaptation includes the following steps: Check the system kernel version, and enable functions as needed to adapt the system to the kernel version; Check the browser kernel version and enable the corresponding compatibility mode according to the kernel version; In the state where the system environment is adapted, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment, and determining that the web page execution and rendering environment are adapted includes the following steps: When the system environment is adapted, start the ECMAScript standard check engine to detect the client browser to check whether the browser script execution environment is adapted; If the browser script execution environment is not compatible, enable the low-version kernel mode to adapt the web page to ensure that the script language can be executed normally; The ECMAScript standard checking engine is started to detect whether the client browser checks whether the browser script execution environment is adapted, including whether the development framework is adapted and whether the script language is adapted; The rendering and optimization of the web page by using the Flex layout adaptation algorithm includes the following steps: Determine the Flex container and Flex items, and determine the placeholder status of the web page tag element; According to the position of the web page label elements, determine the horizontal main axis and vertical cross axis to confirm the layout of the gaps between elements; The positions of the web page tag elements and the gaps between the web page tag elements are adaptively rendered, and according to the current visible window size of the browser, the container attribute values ​​are dynamically configured to fit the display form of the current visible window.

2. The optimization method according to claim 1, characterized in that: The container attribute values ​​include: flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content and item attributes: order, flex-grow, flex-shrink, flex-basis, flex, align-self.

3. A web page display optimization device, characterized in that: The optimization device comprises: The OS kernel verification engine startup module is used to start the OS kernel verification engine to verify the status of the system and the system's built-in browser kernel, and perform preliminary system environment adaptation; The ECMAScript standard check engine startup module is used to start the ECMAScript standard check engine to detect the client browser when the system environment is adapted, so as to complete the inspection of the browser script execution environment and determine the web page execution and rendering environment adaptation; The Flex layout module is used to promote the loading of web pages, start the Flex layout adaptation engine, render and optimize the web pages through the Flex layout adaptation algorithm, and complete the final adaptation of the web pages when the web page execution and rendering environment are adapted; The starting of the OS kernel verification engine to verify the status of the system and the system's own browser kernel and to perform preliminary system environment adaptation includes the following steps: Check the system kernel version, and enable functions as needed to adapt the system to the kernel version; Check the browser kernel version and enable the corresponding compatibility mode according to the kernel version; In the state where the system environment is adapted, the ECMAScript standard inspection engine is started to detect the client browser to complete the inspection of the browser script execution environment, and determining that the web page execution and rendering environment are adapted includes the following steps: When the system environment is adapted, start the ECMAScript standard check engine to detect the client browser to check whether the browser script execution environment is adapted; If the browser script execution environment is not compatible, enable the low-version kernel mode to adapt the web page to ensure that the script language can be executed normally; The ECMAScript standard checking engine is started to detect whether the client browser checks whether the browser script execution environment is adapted, including whether the development framework is adapted and whether the script language is adapted; The optimization device also includes: The element determination unit is used to determine the Flex container and Flex item, and determine the placeholder status of the web page tag element; The layout determination unit determines the horizontal main axis and the vertical cross axis according to the position of the web page tag element, so as to confirm the layout of the gaps between the elements; The display unit renders the position of the web page tag element and the gap between the web page tag elements in an adaptive manner, and dynamically configures the container attribute value to fit the display form of the current visual window according to the current visual window size of the browser.

4. An electronic device, characterized in that: The method comprises a memory and a processor, wherein the memory stores a computer program which can be loaded by the processor and executes the method according to any one of claims 1 to 2.

5. A computer-readable storage medium, characterized in that: A computer program is stored which can be loaded by a processor and execute the method as claimed in any one of claims 1 to 2.

Citation Information

Patent Citations

  • Method and system compatible with IE kernel version control in multi-kernel browser

    CN112667947A