Web page rendering method and device

Abstract

The present application discloses a web page rendering method and device, and relates to the technical field of browsers. The method of the present application includes: obtaining a web page file and a CSS file corresponding to a target web page, the target web page being a web page that needs to load a plug-in window corresponding to a target plug-in; generating a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, wherein the document object model tree, the rendering tree, and the drawing layer tree all contain plug-in window elements corresponding to the plug-in window; determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree, wherein the target position set contains at least one position to be cropped corresponding to the plug-in window element or at least one position to be hidden corresponding to the plug-in window element; rendering the target web page according to the drawing layer tree and the target position set, and outputting and displaying the rendered target web page, wherein the rendered target web page contains the plug-in window after optimization.

Description

Technical Field

[0001] The present application relates to the field of browser technology, and in particular to a web page rendering method and device. Background Art

[0002] A browser is an application used to retrieve, display and transmit Web information resources. In order to enrich the functions of the browser, browser manufacturers usually develop corresponding plug-ins for the browser according to the functions that need to be added.

[0003] However, the plug-in window corresponding to the plug-in is incompatible with the CSS (Cascading Style Sheets) style, making it impossible to limit the transparency of the plug-in window through the CSS style, resulting in the plug-in window blocking other elements in the web page, affecting the normal display of the web page, and further reducing the user experience. Summary of the invention

[0004] The embodiment of the present application provides a web page rendering method and device, the main purpose of which is to avoid the plug-in window corresponding to the target plug-in from blocking other elements in the target web page when the web page to be rendered (i.e., the target web page) is a web page that needs to load the plug-in window corresponding to the target plug-in, so as to display the target web page normally.

[0005] In order to solve the above technical problems, the embodiments of the present application provide the following technical solutions:

[0006] In a first aspect, the present application provides a webpage rendering method, the method comprising:

[0007] Obtaining a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in;

[0008] Generate a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target webpage according to the webpage file and the CSS file, wherein the document object model tree, the rendering tree, and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window;

[0009] Determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element;

[0010] The target webpage is rendered according to the drawing layer tree and the target location set, and the rendered target webpage is output for display, wherein the rendered target webpage includes the optimized plug-in window.

[0011] Optionally, determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree includes:

[0012] Determine the layer where the plug-in window element is located according to the document object model tree;

[0013] Determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element included in a layer above the layer where the plug-in window element is located;

[0014] Acquire, in the rendering tree, position information corresponding to the plug-in window element, and position information and transparency information corresponding to each of the first target elements;

[0015] According to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, a second target element is selected from at least one of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold;

[0016] The target position set is determined according to a preset rule, the position information corresponding to the plug-in window element, and the position information corresponding to each of the second target elements.

[0017] Optionally, the rendering process on the target webpage according to the drawing layer tree and the target location set includes:

[0018] Rendering the target webpage according to the drawing layer tree to obtain the rendered target webpage, wherein the rendered target webpage includes the plug-in window;

[0019] The plug-in window is optimized according to the target position set.

[0020] Optionally, the target position set specifically includes at least one to-be-cropped position corresponding to the plug-in window element; and the optimizing processing of the plug-in window according to the target position set includes:

[0021] Determining at least one clipping area included in the plug-in window according to at least one of the positions to be clipped;

[0022] Perform a cropping process on each cropping area included in the plug-in window.

[0023] Optionally, the target position set specifically includes at least one to-be-hidden position corresponding to the plug-in window element; and the optimizing processing of the plug-in window according to the target position set includes:

[0024] Determining at least one hidden area included in the plug-in window according to at least one position to be hidden;

[0025] The transparency corresponding to each hidden area included in the plug-in window is set to a preset transparency value.

[0026] Optionally, the preset rules include:

[0027] For any second target element, determining the overlapping area between the plug-in window element and the second target element according to the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and determining the overlapping area between the plug-in window element and the second target element as the to-be-cropped position corresponding to the plug-in window element; or

[0028] For any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

[0029] In a second aspect, the present application further provides a webpage rendering device, the device comprising:

[0030] An acquisition unit, used to acquire a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in;

[0031] A generating unit, configured to generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, wherein the document object model tree, the rendering tree and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window;

[0032] A determining unit, configured to determine a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element;

[0033] A rendering unit, configured to render the target web page according to the drawing layer tree and the target location set;

[0034] The output unit is used to output and display the rendered target webpage, wherein the rendered target webpage includes the plug-in window after optimization.

[0035] Optionally, the determining unit includes:

[0036] A first determining module, used for determining the layer where the plug-in window element is located according to the document object model tree;

[0037] A second determination module is used to determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element contained in a layer above the layer where the plug-in window element is located;

[0038] An acquisition module, configured to acquire, in the rendering tree, position information corresponding to the plug-in window element, position information and transparency information corresponding to each of the first target elements;

[0039] a selection module, configured to select a second target element from at least one of the first target elements according to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold;

[0040] The third determination module is used to determine the target position set according to a preset rule, the position information corresponding to the plug-in window element and the position information corresponding to each of the second target elements.

[0041] Optionally, the rendering unit includes:

[0042] A rendering module, used for rendering the target webpage according to the drawing layer tree to obtain the rendered target webpage, wherein the rendered target webpage includes the plug-in window;

[0043] The optimization module is used to optimize the plug-in window according to the target position set.

[0044] Optionally, the target position set specifically includes at least one to-be-cropped position corresponding to the plug-in window element;

[0045] The optimization module is specifically used to determine at least one cropping area included in the plug-in window according to at least one of the positions to be cropped; and perform cropping processing on each cropping area included in the plug-in window.

[0046] Optionally, the target position set specifically includes at least one to-be-hidden position corresponding to the plug-in window element;

[0047] The optimization module is specifically used to determine at least one hidden area included in the plug-in window according to at least one of the positions to be hidden; and set the transparency corresponding to each hidden area included in the plug-in window to a preset transparency value.

[0048] Optionally, the preset rules include:

[0049] For any second target element, determining the overlapping area between the plug-in window element and the second target element according to the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and determining the overlapping area between the plug-in window element and the second target element as the to-be-cropped position corresponding to the plug-in window element; or

[0050] For any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

[0051] In a third aspect, an embodiment of the present application provides a storage medium, wherein the storage medium includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the web page rendering method described in the first aspect.

[0052] In a fourth aspect, an embodiment of the present application provides a web page rendering device, which includes a storage medium; and one or more processors, wherein the storage medium is coupled to the processor, and the processor is configured to execute program instructions stored in the storage medium; when the program instructions are executed, the web page rendering method described in the first aspect is executed.

[0053] By means of the above technical solution, the technical solution provided by this application has at least the following advantages:

[0054] The present application provides a web page rendering method and device. The present application can generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file corresponding to the target web page by the target browser after the target browser obtains the web page file and the CSS file corresponding to the target web page, and then determine the target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree corresponding to the target web page. Finally, the target web page is rendered according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, and the rendered target web page is output and displayed. Since the target position set includes at least one position to be cropped corresponding to the plug-in window element or at least one position to be hidden corresponding to the plug-in window element, the target browser will optimize the complete plug-in window according to the target position set corresponding to the plug-in window element in the process of rendering the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, that is, the complete plug-in window is cropped (or hidden) according to the target position set corresponding to the plug-in window element, so that in the rendered target web page, the plug-in window after optimization does not block other elements, that is, the target browser can display the target web page normally.

[0055] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0056] By reading the detailed description below with reference to the accompanying drawings, the above and other purposes, features and advantages of the exemplary embodiments of the present application will become easy to understand. In the accompanying drawings, several embodiments of the present application are shown in an exemplary and non-limiting manner, and the same or corresponding reference numerals represent the same or corresponding parts, wherein:

[0057] Figure 1 A flow chart of a web page rendering method provided by an embodiment of the present application is shown;

[0058] Figure 2 A flow chart of another webpage rendering method provided by an embodiment of the present application is shown;

[0059] Figure 3 A block diagram of a web page rendering device provided in an embodiment of the present application is shown;

[0060] Figure 4 A block diagram showing the composition of another web page rendering device provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0061] The exemplary embodiments of the present application will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present application are shown in the accompanying drawings, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided in order to enable a more thorough understanding of the present application and to fully convey the scope of the present application to those skilled in the art.

[0062] It should be noted that, unless otherwise specified, the technical terms or scientific terms used in this application should have the common meanings understood by technicians in the field to which this application belongs.

[0063] The present application embodiment provides a web page rendering method, specifically as follows Figure 1 As shown, the method includes:

[0064] 101. Obtain the web page file and CSS file corresponding to the target web page.

[0065] Among them, the target web page is the web page to be rendered, and the target web page is the web page that needs to load the plug-in window corresponding to the target plug-in. The target plug-in can be any type of plug-in, and the embodiment of the present application does not specifically limit this; among them, the web page file corresponding to the target web page can be but is not limited to: HTML file, XHTML file, etc.

[0066] Among them, in the embodiment of the present application, the execution subject in each step is a target browser running in a terminal device, and the terminal device can be but is not limited to: a computer, a tablet computer, a smart phone, etc.

[0067] In an embodiment of the present application, when a target browser needs to render a target web page, the target browser needs to first obtain the web page file and CSS file corresponding to the target web page.

[0068] 102. Generate a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file.

[0069] Among them, the web page file corresponding to the target web page contains the plug-in window element corresponding to the plug-in window, the CSS file corresponding to the target web page contains style attribute information corresponding to the plug-in window element (that is, the position information corresponding to the plug-in window element), the document object model tree corresponding to the target web page contains the plug-in window element, the rendering tree corresponding to the target web page contains the plug-in window element and the position information corresponding to the plug-in window element, and the drawing layer tree corresponding to the target web page contains multiple layers, including the layer where the plug-in window element is located.

[0070] In an embodiment of the present application, after the target browser obtains the web page file and CSS file corresponding to the target web page, it can generate the document object model tree, rendering tree and drawing layer tree corresponding to the target web page according to the web page file and CSS file corresponding to the target web page. The specific process is: first, the document object model tree (i.e., DOM tree) corresponding to the target web page is generated according to the web page file corresponding to the target web page; then, the CSS object model tree (i.e., CSSOM tree) corresponding to the target web page is generated according to the CSS file corresponding to the target web page; then, the rendering tree (i.e., Render tree) corresponding to the target web page is generated by combining the document object model tree and the CSS object model tree corresponding to the target web page; finally, the drawing layer tree (i.e., Paint Layer tree) corresponding to the target web page is generated according to the rendering tree corresponding to the target web page.

[0071] 103. Determine a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree.

[0072] The target position set includes at least one position to be cropped corresponding to the plug-in window element or at least one position to be hidden corresponding to the plug-in window element.

[0073] In an embodiment of the present application, after the target browser generates the document object model tree, rendering tree and drawing layer tree corresponding to the target web page according to the web page file and CSS file corresponding to the target web page, it can determine the target position set corresponding to the plug-in window element according to the document object model tree, rendering tree and drawing layer tree corresponding to the target web page, that is, first determine which areas contained in the plug-in window element will obstruct other elements in the target web page according to the document object model tree, rendering tree and drawing layer tree corresponding to the target web page, and then determine the position to be cropped (or the position to be hidden) corresponding to the plug-in window element according to the area contained in the plug-in window element that will obstruct other elements, thereby obtaining the target position set corresponding to the plug-in window element.

[0074] 104. Render the target web page according to the drawing layer tree and the target location set, and output and display the rendered target web page.

[0075] The rendered target web page includes an optimized plug-in window.

[0076] In an embodiment of the present application, after the target browser determines the target position set corresponding to the plug-in window element based on the document object model tree, rendering tree and drawing layer tree corresponding to the target web page, it can render the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, and output and display the rendered target web page.

[0077] It should be noted that, when the target browser is rendering the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, the target browser will optimize the complete plug-in window according to the target position set corresponding to the plug-in window element, that is, the complete plug-in window will be cropped (or hidden) according to the target position set corresponding to the plug-in window element, so that in the rendered target web page, the optimized plug-in window will not block other elements, that is, the target browser can display the target web page normally.

[0078] The embodiment of the present application provides a web page rendering method. The embodiment of the present application can generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file corresponding to the target web page by the target browser after the target browser obtains the web page file and the CSS file corresponding to the target web page, and then determine the target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree corresponding to the target web page, and finally, render the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, and output and display the rendered target web page. Since the target position set includes at least one position to be cropped corresponding to the plug-in window element or at least one position to be hidden corresponding to the plug-in window element, the target browser will optimize the complete plug-in window according to the target position set corresponding to the plug-in window element in the process of rendering the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, that is, the complete plug-in window is cropped (or hidden) according to the target position set corresponding to the plug-in window element, so that in the rendered target web page, the plug-in window after optimization does not block other elements, that is, the target browser can display the target web page normally.

[0079] To explain in more detail below, the present application embodiment provides another web page rendering method, specifically as follows Figure 2 As shown, the method includes:

[0080] 201. Obtain the web page file and CSS file corresponding to the target web page.

[0081] Regarding step 201, obtaining the web page file and CSS file corresponding to the target web page, please refer to Figure 1 The description of the corresponding parts will not be repeated here in the embodiments of the present application.

[0082] 202. Generate a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file.

[0083] Regarding step 202, generating a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, reference can be made to Figure 1 The description of the corresponding parts will not be repeated here in the embodiments of the present application.

[0084] 203. Determine a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree.

[0085] In an embodiment of the present application, after the target browser generates the document object model tree, rendering tree and drawing layer tree corresponding to the target web page based on the web page file and CSS file corresponding to the target web page, it can determine the target position set corresponding to the plug-in window element based on the document object model tree, rendering tree and drawing layer tree corresponding to the target web page.

[0086] Specifically, in this step, the target browser may determine the target position set corresponding to the plug-in window element according to the document object model tree, rendering tree, and drawing layer tree corresponding to the target webpage in the following manner:

[0087] (1) Determine the layer where the plug-in window element is located according to the document object model tree corresponding to the target web page.

[0088] Wherein, the layer of the target webpage where the plug-in window element is located can be determined according to the document object model tree corresponding to the target webpage.

[0089] (2) Determine the target element set according to the drawing layer tree corresponding to the target web page and the layer where the plug-in window element is located.

[0090] The target element set includes at least one first target element, and the first target element is an element included in a layer above the layer where the plug-in window element is located.

[0091] In an embodiment of the present application, after determining the layer where the plug-in window element is located according to the document object model tree corresponding to the target web page, the target element set can be determined according to the drawing layer tree corresponding to the target web page and the layer where the plug-in window element is located. The specific process may be, but is not limited to, first sorting the multiple layers contained in the drawing layer tree in Z order, and then determining the layer above the layer where the plug-in window element is located according to the sorting result; finally, determining the element contained in the layer above the layer where the plug-in window element is located as the first target element, thereby obtaining the target element set.

[0092] (3) Obtaining position information corresponding to the plug-in window element, position information corresponding to each first target element, and transparency information in the rendering tree.

[0093] (4) Selecting a second target element from at least one first target element according to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each first target element.

[0094] The second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold.

[0095] In an embodiment of the present application, after obtaining the position information corresponding to the plug-in window element, the position information corresponding to each first target element, and the transparency information in the rendering tree, the second target element can be selected from at least one first target element according to the position information corresponding to the plug-in window element, the position information corresponding to each first target element, and the transparency information, that is, first determine the position of the plug-in window element in the target layer and the position of each first target element in the target layer according to the position information corresponding to the plug-in window element and the position information corresponding to each first target element, and then determine the first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold as the second target element, wherein the target layer can be any layer contained in the drawing layer tree.

[0096] (5) Determine a target position set according to a preset rule, the position information corresponding to the plug-in window element, and the position information corresponding to each second target element.

[0097] In an embodiment of the present application, after selecting a second target element from at least one first target element based on the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each first target element, the target position set can be determined based on preset rules, the position information corresponding to the plug-in window element, and the position information corresponding to each second target element.

[0098] The preset rules are as follows: (1) for any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be cropped corresponding to the plug-in window element; or (2) for any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

[0099] 204. Rendering the target web page according to the drawing layer tree and the target location set.

[0100] In an embodiment of the present application, after the target browser determines the target position set corresponding to the plug-in window element based on the document object model tree, rendering tree and drawing layer tree corresponding to the target web page, the target browser can render the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element. That is, the target web page is first rendered according to the drawing layer tree corresponding to the target web page to obtain a rendered target web page containing a complete plug-in window, and then the plug-in window is optimized according to the target position set corresponding to the plug-in window element.

[0101] Specifically, in this step, the specific process of the target browser optimizing the plug-in window according to the target position set corresponding to the plug-in window element is as follows: (1) when the target position set specifically includes at least one to-be-cropped position corresponding to the plug-in window element, first determine at least one cropping area included in the plug-in window according to the at least one to-be-cropped position; then perform cropping processing on each cropping area included in the plug-in window; (2) when the target position set specifically includes at least one to-be-hidden position corresponding to the plug-in window element, first determine at least one hidden area included in the plug-in window according to the at least one to-be-hidden position; then set the transparency corresponding to each hidden area included in the plug-in window to a preset transparency value.

[0102] 205. Output and display the rendered target web page.

[0103] Regarding step 205, outputting and displaying the rendered target web page, please refer to Figure 1 The description of the corresponding parts will not be repeated here in the embodiments of the present application.

[0104] In order to achieve the above-mentioned purpose, according to another aspect of the present application, an embodiment of the present application further provides a storage medium, wherein the storage medium includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the above-mentioned web page rendering method.

[0105] In order to achieve the above-mentioned purpose, according to another aspect of the present application, an embodiment of the present application also provides a web page rendering device, which includes a storage medium; and one or more processors, the storage medium is coupled to the processor, and the processor is configured to execute program instructions stored in the storage medium; when the program instructions are executed, the web page rendering method described above is executed.

[0106] Furthermore, as a response to the above Figure 1 and Figure 2In order to realize the method shown in the figure, another embodiment of the present application further provides a web page rendering device. This device embodiment corresponds to the aforementioned method embodiment. For ease of reading, this device embodiment will no longer repeat the details of the aforementioned method embodiment one by one, but it should be clear that the device in this embodiment can correspond to all the contents of the aforementioned method embodiment. This device is used when the web page to be rendered (i.e., the target web page) is a web page that needs to load the plug-in window corresponding to the target plug-in, so as to avoid the plug-in window corresponding to the target plug-in blocking other elements in the target web page, so as to display the target web page normally, specifically Figure 3 As shown, the device comprises:

[0107] The acquisition unit 31 is used to acquire a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in;

[0108] A generating unit 32, configured to generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, wherein the document object model tree, the rendering tree and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window;

[0109] A determining unit 33 is used to determine a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element;

[0110] A rendering unit 34, configured to render the target web page according to the drawing layer tree and the target location set;

[0111] The output unit 35 is used to output and display the rendered target webpage, wherein the rendered target webpage includes the optimized plug-in window.

[0112] Further, such as Figure 4 As shown, the determination unit 33 includes:

[0113] A first determining module 331 is used to determine the layer where the plug-in window element is located according to the document object model tree;

[0114] A second determination module 332 is used to determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element contained in a layer above the layer where the plug-in window element is located;

[0115] An acquisition module 333, configured to acquire, in the rendering tree, position information corresponding to the plug-in window element, position information and transparency information corresponding to each of the first target elements;

[0116] A selection module 334 is used to select a second target element from at least one of the first target elements according to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold;

[0117] The third determination module 335 is used to determine the target position set according to a preset rule, the position information corresponding to the plug-in window element and the position information corresponding to each of the second target elements.

[0118] Further, such as Figure 4 As shown, the rendering unit 34 includes:

[0119] A rendering module 341 is used to render the target webpage according to the drawing layer tree to obtain the rendered target webpage, wherein the rendered target webpage includes the plug-in window;

[0120] The optimization module 342 is used to optimize the plug-in window according to the target position set.

[0121] Further, such as Figure 4 As shown, the target position set specifically includes at least one to-be-cropped position corresponding to the plug-in window element;

[0122] The optimization module 342 is specifically configured to determine at least one cropping area included in the plug-in window according to at least one of the positions to be cropped; and perform cropping processing on each cropping area included in the plug-in window.

[0123] Further, such as Figure 4 As shown, the target position set specifically includes at least one position to be hidden corresponding to the plug-in window element;

[0124] The optimization module 342 is specifically configured to determine at least one hidden area included in the plug-in window according to at least one of the positions to be hidden; and set the transparency corresponding to each hidden area included in the plug-in window to a preset transparency value.

[0125] Further, such as Figure 4 As shown, the preset rules include:

[0126] For any second target element, determining the overlapping area between the plug-in window element and the second target element according to the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and determining the overlapping area between the plug-in window element and the second target element as the to-be-cropped position corresponding to the plug-in window element; or

[0127] For any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

[0128] The embodiment of the present application provides a web page rendering method and device. The embodiment of the present application can generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file corresponding to the target web page by the target browser after the target browser obtains the web page file and the CSS file corresponding to the target web page, and then determine the target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree corresponding to the target web page. Finally, the target web page is rendered according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, and the rendered target web page is output and displayed. Since the target position set includes at least one position to be cropped corresponding to the plug-in window element or at least one position to be hidden corresponding to the plug-in window element, the target browser will optimize the complete plug-in window according to the target position set corresponding to the plug-in window element in the process of rendering the target web page according to the drawing layer tree corresponding to the target web page and the target position set corresponding to the plug-in window element, that is, the complete plug-in window is cropped (or hidden) according to the target position set corresponding to the plug-in window element, so that in the rendered target web page, the plug-in window after optimization does not block other elements, that is, the target browser can display the target web page normally.

[0129] The web page rendering device includes a processor and a memory. The above-mentioned acquisition unit, generation unit, determination unit, rendering unit and output unit are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize corresponding functions.

[0130] The processor includes a kernel, which retrieves the corresponding program unit from the memory. One or more kernels can be set, and kernel parameters can be adjusted to prevent the plug-in window corresponding to the target plug-in from blocking other elements in the target web page, so that the target web page can be displayed normally.

[0131] An embodiment of the present application provides a storage medium, which includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the webpage rendering method described above.

[0132] The storage medium may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM, and the memory includes at least one storage chip.

[0133] An embodiment of the present application also provides a web page rendering device, which includes a storage medium; and one or more processors, wherein the storage medium is coupled to the processor, and the processor is configured to execute program instructions stored in the storage medium; when the program instructions are executed, the web page rendering method described above is executed.

[0134] The embodiment of the present application provides a device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, the following steps are implemented:

[0135] Obtaining a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in;

[0136] Generate a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target webpage according to the webpage file and the CSS file, wherein the document object model tree, the rendering tree, and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window;

[0137] Determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element;

[0138] The target webpage is rendered according to the drawing layer tree and the target location set, and the rendered target webpage is output for display, wherein the rendered target webpage includes the optimized plug-in window.

[0139] Further, determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree includes:

[0140] Determine the layer where the plug-in window element is located according to the document object model tree;

[0141] Determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element included in a layer above the layer where the plug-in window element is located;

[0142] Acquire, in the rendering tree, position information corresponding to the plug-in window element, and position information and transparency information corresponding to each of the first target elements;

[0143] According to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, a second target element is selected from at least one of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold;

[0144] The target position set is determined according to a preset rule, the position information corresponding to the plug-in window element, and the position information corresponding to each of the second target elements.

[0145] Furthermore, the rendering process of the target webpage according to the drawing layer tree and the target location set includes:

[0146] Rendering the target webpage according to the drawing layer tree to obtain the rendered target webpage, wherein the rendered target webpage includes the plug-in window;

[0147] The plug-in window is optimized according to the target position set.

[0148] Furthermore, the target position set specifically includes at least one to-be-cropped position corresponding to the plug-in window element; and the optimizing process of the plug-in window according to the target position set includes:

[0149] Determining at least one clipping area included in the plug-in window according to at least one of the positions to be clipped;

[0150] Perform a cropping process on each cropping area included in the plug-in window.

[0151] Furthermore, the target position set specifically includes at least one position to be hidden corresponding to the plug-in window element; and the optimizing process of the plug-in window according to the target position set includes:

[0152] Determining at least one hidden area included in the plug-in window according to at least one position to be hidden;

[0153] The transparency corresponding to each hidden area included in the plug-in window is set to a preset transparency value.

[0154] Furthermore, the preset rules include:

[0155] For any second target element, determining the overlapping area between the plug-in window element and the second target element according to the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and determining the overlapping area between the plug-in window element and the second target element as the to-be-cropped position corresponding to the plug-in window element; or

[0156] For any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

[0157] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing program code that initializes the following method steps: obtaining a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in; generating a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, wherein the document object model tree, the rendering tree, and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window; determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree, wherein the target position set contains at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element; rendering the target web page according to the drawing layer tree and the target position set, and outputting and displaying the rendered target web page, wherein the rendered target web page contains the plug-in window after optimization.

[0158] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

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

[0160] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

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

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

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

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

[0165] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

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

[0167] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A webpage rendering method, characterized in that: The method comprises: Obtaining a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in; Generate a document object model tree, a rendering tree, and a drawing layer tree corresponding to the target webpage according to the webpage file and the CSS file, wherein the document object model tree, the rendering tree, and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window; Determining a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element; Rendering the target webpage according to the drawing layer tree and the target location set, and outputting and displaying the rendered target webpage, wherein the rendered target webpage includes the optimized plug-in window; The determining the target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree and the drawing layer tree includes: Determine the layer where the plug-in window element is located according to the document object model tree; Determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element included in a layer above the layer where the plug-in window element is located; Acquire, in the rendering tree, position information corresponding to the plug-in window element, and position information and transparency information corresponding to each of the first target elements; According to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, a second target element is selected from at least one of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold; The target position set is determined according to a preset rule, the position information corresponding to the plug-in window element, and the position information corresponding to each of the second target elements.

2. The method according to claim 1, characterized in that The rendering process of the target webpage according to the drawing layer tree and the target position set includes: Rendering the target webpage according to the drawing layer tree to obtain the rendered target webpage, wherein the rendered target webpage includes the plug-in window; The plug-in window is optimized according to the target position set.

3. The method according to claim 2, characterized in that The target position set specifically includes at least one to-be-cut position corresponding to the plug-in window element; and the optimizing process of the plug-in window according to the target position set includes: Determining at least one clipping area included in the plug-in window according to at least one of the positions to be clipped; Perform a cropping process on each cropping area included in the plug-in window.

4. The method according to claim 2, characterized in that: The target position set specifically includes at least one position to be hidden corresponding to the plug-in window element; and the optimizing process of the plug-in window according to the target position set includes: Determining at least one hidden area included in the plug-in window according to at least one position to be hidden; The transparency corresponding to each hidden area included in the plug-in window is set to a preset transparency value.

5. The method according to claim 1, characterized in that The preset rules include: For any second target element, determining the overlapping area between the plug-in window element and the second target element according to the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and determining the overlapping area between the plug-in window element and the second target element as the to-be-cropped position corresponding to the plug-in window element; or For any second target element, the overlapping area between the plug-in window element and the second target element is determined based on the position information corresponding to the plug-in window element and the position information corresponding to the second target element, and the overlapping area between the plug-in window element and the second target element is determined as the position to be hidden corresponding to the plug-in window element.

6. A web page rendering device, characterized in that: The device comprises: An acquisition unit, used to acquire a web page file and a CSS file corresponding to a target web page, wherein the target web page is a web page that needs to load a plug-in window corresponding to a target plug-in; A generating unit, configured to generate a document object model tree, a rendering tree and a drawing layer tree corresponding to the target web page according to the web page file and the CSS file, wherein the document object model tree, the rendering tree and the drawing layer tree all contain a plug-in window element corresponding to the plug-in window; A determining unit, configured to determine a target position set corresponding to the plug-in window element according to the document object model tree, the rendering tree, and the drawing layer tree, wherein the target position set includes at least one to-be-cropped position corresponding to the plug-in window element or at least one to-be-hidden position corresponding to the plug-in window element; A rendering unit, configured to render the target web page according to the drawing layer tree and the target location set; an output unit, configured to output and display the rendered target webpage, wherein the rendered target webpage includes the optimized plug-in window; The determining unit comprises: A first determining module, used for determining the layer where the plug-in window element is located according to the document object model tree; A second determination module is used to determine a target element set according to the drawing layer tree and the layer where the plug-in window element is located, wherein the target element set includes at least one first target element, and the first target element is an element contained in a layer above the layer where the plug-in window element is located; An acquisition module, configured to acquire, in the rendering tree, position information corresponding to the plug-in window element, position information and transparency information corresponding to each of the first target elements; a selection module, configured to select a second target element from at least one of the first target elements according to the position information corresponding to the plug-in window element, the position information and transparency information corresponding to each of the first target elements, wherein the second target element is a first target element whose position overlaps with the position of the plug-in window element and whose transparency is greater than a preset transparency threshold; The third determination module is used to determine the target position set according to a preset rule, the position information corresponding to the plug-in window element and the position information corresponding to each of the second target elements.

7. A storage medium, characterized in that: The storage medium includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the webpage rendering method according to any one of claims 1 to 5.

8. A web page rendering device, characterized in that: The device includes a storage medium; and one or more processors, the storage medium is coupled to the processor, and the processor is configured to execute program instructions stored in the storage medium; when the program instructions are executed, the webpage rendering method according to any one of claims 1 to 5 is executed.

Images