Web page display method based on dynamic and static combination and computer-readable storage medium

Abstract

The present invention discloses a web page display method based on a combination of dynamic and static display and a computer-readable storage medium. The method comprises: determining similar and dissimilar parts of each web page to be displayed, and determining the position and size of a static area based on the position and size of the similar parts of each web page to be displayed, and determining the position and size of a dynamic area based on the position and size of the dissimilar parts of each web page to be displayed; creating a canvas, and determining a static area and a dynamic area within the canvas based on the preset positions and sizes of the static and dynamic areas, and creating a control in the dynamic area, the size of the control being consistent with the size of the dynamic area; displaying the similar parts of the web page to be displayed in the static area, and displaying the dissimilar parts of the web page to be displayed in real time in the dynamic area via the control. The present invention can reduce CPU performance consumption and memory consumption.

Description

Technical Field

[0001] The present invention relates to the technical field of web page display, and in particular to a web page display method based on a combination of dynamic and static aspects and a computer-readable storage medium. Background Art

[0002] To control terminal device costs, they typically use relatively low-end hardware. Due to the low performance of terminals, loading web pages on the display interface consumes significant performance and memory, impacting normal terminal operation. For example, when directly displaying a web page using a webpage framework module, the previously displayed webpage is cached, delaying the timely release of memory, continuously consuming CPU performance, and ultimately causing device lag. Therefore, a method is needed that can load web pages to meet scenario requirements while minimizing terminal performance loss. Summary of the Invention

[0003] The technical problem to be solved by the present invention is to provide a web page display method based on a combination of dynamic and static, and a computer-readable storage medium, which can reduce CPU performance consumption and memory consumption.

[0004] In order to solve the above technical problems, the present invention adopts a technical solution: a web page display method based on a combination of dynamic and static, comprising:

[0005] Determine the similar parts and dissimilar parts of each web page to be displayed, and determine the position and size of the static area based on the position and size of the similar parts of each web page to be displayed, and determine the position and size of the dynamic area based on the position and size of the dissimilar parts of each web page;

[0006] Creating a canvas, and determining a static area and a dynamic area in the canvas according to the preset positions and sizes of the static area and the dynamic area, and creating a control in the dynamic area, wherein the size of the control is consistent with the size of the dynamic area;

[0007] The similar parts of the web page to be displayed are displayed in the static area, and the dissimilar parts of the web page to be displayed are displayed in the dynamic area in real time through the control.

[0008] The present invention further provides a computer-readable storage medium having a computer program stored thereon, which implements the above-mentioned method when the program is executed by a processor.

[0009] The beneficial effect of the present invention is that: by utilizing the characteristic of similar layout of web pages, the native web pages are divided into similar parts and dissimilar parts, and the similar parts are displayed in the static area of ​​the canvas, and the dissimilar parts are displayed in real time in the dynamic area of ​​the canvas through controls, so that the web page display is changed from the original overall display to the display of only the dissimilar parts, thereby reducing the dependence on the web page framework and achieving the effect of reducing CPU performance consumption and memory consumption. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Figure 1 This is a flow chart of a web page display method based on the combination of dynamic and static methods of the present invention;

[0011] Figure 2 This is a flow chart of a method according to embodiment 1 of the present invention;

[0012] Figure 3 A schematic diagram of a canvas according to the first embodiment of the present invention;

[0013] Figure 4 This is a schematic diagram of the canvas dynamic area display content before and after change according to the first embodiment of the present invention. DETAILED DESCRIPTION

[0014] To illustrate the technical content, achieved objectives and effects of the present invention in detail, the following is a detailed description in conjunction with the embodiments and accompanying drawings.

[0015] See also Figure 1 , a web page display method based on the combination of dynamic and static, comprising:

[0016] Determine the similar parts and dissimilar parts of each web page to be displayed, and determine the position and size of the static area based on the position and size of the similar parts of each web page to be displayed, and determine the position and size of the dynamic area based on the position and size of the dissimilar parts of each web page;

[0017] Creating a canvas, and determining a static area and a dynamic area in the canvas according to the preset positions and sizes of the static area and the dynamic area, and creating a control in the dynamic area, wherein the size of the control is consistent with the size of the dynamic area;

[0018] The similar parts of the web page to be displayed are displayed in the static area, and the dissimilar parts of the web page to be displayed are displayed in the dynamic area in real time through the control.

[0019] From the above description, it can be seen that the beneficial effect of the present invention is that it can reduce the dependence of the display interface on the web page framework when controlling the loading of the web page, thereby reducing the CPU performance consumption and memory consumption during the web page loading process.

[0020] Furthermore, the displaying of the similar portion of the web page to be displayed in the static area is specifically as follows:

[0021] The similar part of the web page to be displayed is displayed in the static area in an extensible markup language format.

[0022] From the above description, we can see that Android native XML can be used to display similar parts of web pages.

[0023] Furthermore, after determining the similar parts and dissimilar parts in the preset web pages to be displayed, the method further includes:

[0024] Generate web page links corresponding to the dissimilar parts of each web page to be displayed.

[0025] Furthermore, the dissimilar parts of the web page to be displayed are displayed in the dynamic area in real time through the control, specifically:

[0026] The control is controlled to load the web page link corresponding to the dissimilar portion of the web page to be displayed.

[0027] As can be seen from the above description, by generating web page links for dissimilar parts, the control can display only the dissimilar parts of the web page.

[0028] Furthermore, it also includes:

[0029] When a webpage switching instruction is received, a new webpage to be displayed is determined according to the webpage switching instruction, and a dissimilar part of the new webpage to be displayed is displayed in the dynamic area in real time through the control.

[0030] As can be seen from the above description, web page switching can be achieved by allowing the control to directly load the web page link of the dissimilar part of the new web page.

[0031] Furthermore, it also includes:

[0032] Establishing communication channels between each web page to be displayed and the control respectively;

[0033] When a webpage control instruction is received, the webpage control instruction is sent to the current webpage to be displayed through the communication channel between the control and the current webpage to be displayed, so that the current webpage to be displayed performs corresponding operations according to the webpage control instruction.

[0034] As can be seen from the above description, the interface changes caused by the web page performing corresponding operations according to the instructions will be displayed in real time through the controls.

[0035] Furthermore, it also includes:

[0036] A JavaScript script is embedded in each web page to be displayed, wherein the JavaScript script includes a window.location.href attribute.

[0037] Furthermore, the webpage control instruction includes a webpage switching instruction;

[0038] The current web page to be displayed performs corresponding operations according to the web page control instruction, specifically:

[0039] According to the webpage switching instruction, a new webpage to be displayed is determined, and the webpage link of the new webpage to be displayed is assigned to the window.location.href attribute in the JavaScript script of the current webpage to be displayed.

[0040] As can be seen from the above description, by embedding JS scripts in web pages, web pages can jump to each other, thus achieving intercommunication between different web pages.

[0041] Furthermore, the similar part includes a navigation bar.

[0042] The present invention further provides a computer-readable storage medium having a computer program stored thereon, which implements the above-mentioned method when the program is executed by a processor.

[0043] Example 1

[0044] Please refer to Figure 2-4 , Embodiment 1 of the present invention is: a web page display method based on the combination of dynamic and static, which can be applied to Android devices.

[0045] like Figure 2 As shown, the following steps are included:

[0046] S1: Determine the similar parts and dissimilar parts in each preset web page to be displayed, and determine the position and size of the static area according to the position and size of the similar parts in each web page to be displayed, and determine the position and size of the dynamic area according to the position and size of the dissimilar parts in each web page.

[0047] In this embodiment, the preset web page to be displayed can be a report web page or other web page with a similar layout. By analyzing these web pages, the parts with consistent positions and contents in these web pages are divided as similar parts (static parts), such as the navigation bar on the left or top of the web page, and the parts that may change at any time due to different data are regarded as dissimilar parts (dynamic parts), such as other parts except the navigation bar.

[0048] Furthermore, after determining the dissimilar parts in each web page to be displayed, corresponding web page links of the dissimilar parts are generated respectively, so that only the dissimilar parts in the web page can be obtained for display later.

[0049] S2: Create a canvas, and determine a static area and a dynamic area in the canvas according to the preset positions and sizes of the static area and the dynamic area, and create a control in the dynamic area, the size of the control being consistent with the size of the dynamic area.

[0050] In this embodiment, a canvas is created on the Android interface. Figure 3 As shown, the static area of ​​the canvas is used to display similar parts of the web page; by creating a WebView control of adapted size in the dynamic area, the dissimilar parts of the web page are subsequently displayed through the control.

[0051] S3: Displaying the similar part of the web page to be displayed in the static area, and displaying the dissimilar part of the web page to be displayed in the dynamic area in real time through the control.

[0052] In this embodiment, the similar portion of the web page to be displayed is displayed in the static area in the format of Extensible Markup Language, that is, it is implemented using Android native XML. By having the control load the web page link of the dissimilar portion of the web page to be displayed, the dynamic portion of the web page to be displayed is displayed in real time in the dynamic area.

[0053] S4: When a web page instruction is received, the display content of the dynamic area is changed according to the web page instruction.

[0054] In the original web page, the static part may be able to control the dynamic part. For example, clicking a tab in the navigation bar will redraw the dynamic part and show the new content to the user. This control also needs to be implemented in the created canvas.

[0055] This step can be controlled in two ways. One is that the WebView control of the Android interface directly loads the new web page link when receiving the instruction; the other is to transmit data through real-time communication through the channel between the WebView control and the web page to be displayed.

[0056] Specifically, in an optional embodiment, when a web page switching instruction is received, a new web page to be displayed is determined according to the web page switching instruction, and the dissimilar part of the new web page to be displayed is displayed in real time in the dynamic area through the control, that is, the control directly loads the web page link corresponding to the dissimilar part of the new web page to be displayed, thereby changing the display content of the dynamic area of ​​the canvas.

[0057] For example, Figure 4As shown, assuming that label A in the navigation bar corresponds to web page A, label B corresponds to web page B, and label C corresponds to web page C, and assuming that the currently displayed web page is web page A, when it is detected that the user clicks label B, that is, the web page switching instruction at this time is to switch to web page B, the WebView control will load the web page link of the dissimilar part of web page B, thereby presenting the content of web page B on the canvas.

[0058] In another optional embodiment, a communication channel (JavaScript channel) is pre-established between each web page to be displayed and the control; when a web page control instruction is received, the web page control instruction is first sent to the control, and then the control sends the web page control instruction to the current web page to be displayed through the communication channel between the control and the current web page to be displayed, so that the current web page to be displayed performs corresponding operations according to the web page control instruction. That is to say, after receiving the instruction, the WebView control forwards the instruction to the web page. In this process, the WebView control acts as a middleware to take over the role of a receiving end; the current web page to be displayed acts as a receiving end, waiting for the instruction sent from the WebView control, and making corresponding changes (such as popping up a pop-up window or switching to other web pages to be displayed). Since the control will display the dynamic part of the web page in real time, the interface changes caused by the web page performing corresponding operations according to the instructions will be displayed in real time through the control.

[0059] In practical applications, a JavaScript script can be embedded in each web page to be displayed, and pre-set command information can be registered. Upon receiving the command, the current web page to be displayed can redirect to the target web page address by setting the href attribute of the web page's window.location object. By embedding a JS script and registering the relevant command information in each web page to be displayed, each web page to be displayed can redirect to other web pages to be displayed, thus achieving interoperability between different web pages.

[0060] This embodiment divides the web page and changes the original overall web page display into only the dynamic part that controls the loading of the web page. This can reduce dependence on the web page framework, reduce CPU performance consumption and memory consumption, and for users, the display effect is the same and does not affect the user experience.

[0061] Example 2

[0062] This embodiment is a computer-readable storage medium corresponding to the above embodiment, on which a computer program is stored. When the program is executed by the processor, it implements the various steps of a web page display method based on a combination of dynamic and static in the above embodiment, and can achieve the same technical effect, which will not be repeated here.

[0063] In summary, the present invention provides a web page display method and computer-readable storage medium based on a combination of dynamic and static, which utilizes the characteristic of web pages having similar layouts to divide native web pages into similar parts and dissimilar parts, and displays the similar parts in the static area of ​​the canvas, and displays the dissimilar parts in real time in the dynamic area of ​​the canvas through controls, so that the web page display is changed from the original overall display to the display of only the dissimilar parts, thereby reducing the display interface's dependence on the web page framework when controlling the loading of the web page, thereby reducing the CPU performance consumption and memory consumption during the web page loading process.

[0064] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's description and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A web page display method based on the combination of dynamic and static, characterized in that: include: Determine the similar parts and dissimilar parts of each web page to be displayed, and determine the position and size of the static area based on the position and size of the similar parts of each web page to be displayed, and determine the position and size of the dynamic area based on the position and size of the dissimilar parts of each web page; Creating a canvas, and determining a static area and a dynamic area in the canvas according to the preset positions and sizes of the static area and the dynamic area, and creating a control in the dynamic area, wherein the size of the control is consistent with the size of the dynamic area; The similar parts of the web page to be displayed are displayed in the static area, and the dissimilar parts of the web page to be displayed are displayed in the dynamic area in real time through the control.

2. The webpage display method based on the combination of dynamic and static according to claim 1, characterized in that: The step of displaying the similar portion of the web page to be displayed in the static area is as follows: The similar part of the web page to be displayed is displayed in the static area in an extensible markup language format.

3. The webpage display method based on the combination of dynamic and static according to claim 1, characterized in that: After determining the similar parts and dissimilar parts of the preset web pages to be displayed, the method further includes: Generate web page links corresponding to the dissimilar parts of each web page to be displayed.

4. The webpage display method based on the combination of dynamic and static according to claim 3 is characterized in that: The dissimilar parts of the web page to be displayed are displayed in the dynamic area in real time through the control, specifically: The control loads the web page link corresponding to the dissimilar portion of the web page to be displayed.

5. The webpage display method based on the combination of dynamic and static according to claim 1 is characterized in that: Also includes: When a webpage switching instruction is received, a new webpage to be displayed is determined according to the webpage switching instruction, and a dissimilar part of the new webpage to be displayed is displayed in the dynamic area in real time through the control.

6. The webpage display method based on the combination of dynamic and static according to claim 1, characterized in that: Also includes: Establishing communication channels between each web page to be displayed and the control respectively; When a webpage control instruction is received, the webpage control instruction is sent to the current webpage to be displayed through the communication channel between the control and the current webpage to be displayed, so that the current webpage to be displayed performs corresponding operations according to the webpage control instruction.

7. The webpage display method based on the combination of dynamic and static according to claim 6 is characterized in that: Also includes: A JavaScript script is embedded in each web page to be displayed, wherein the JavaScript script includes a window.location.href attribute.

8. The webpage display method based on the combination of dynamic and static according to claim 7 is characterized in that: The webpage control instruction includes a webpage switching instruction; The current web page to be displayed performs corresponding operations according to the web page control instruction, specifically: According to the webpage switching instruction, a new webpage to be displayed is determined, and the webpage link of the new webpage to be displayed is assigned to the window.location.href attribute in the JavaScript script of the current webpage to be displayed.

9. The webpage display method based on the combination of dynamic and static according to any one of claims 1 to 8, characterized in that: The similar parts include a navigation bar.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 9 is implemented.

Images