Webpage rendering method and device, electronic equipment and computer readable medium

Abstract

Embodiments of the present application disclose a webpage rendering method and device, electronic equipment and a computer readable medium. The embodiments of the method comprise: determining webpage elements located in a view window in a webpage loading process, the view window being a region visible to a user in the webpage; selecting a target webpage element from the webpage elements located in the view window based on attribute information of the webpage elements located in the view window; in the case that the resource data of the webpage comprises a plurality of cascading style sheets, selecting a first target cascading style sheet from the plurality of cascading style sheets based on a mark of the target webpage element, the resource data being data constituting the webpage; and rendering the webpage elements in the view window based on the first target cascading style sheet. The embodiments can conveniently and quickly solve the problem of webpage element style conflicts in the webpage rendering process, and improve the webpage rendering effect.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to web page rendering methods, apparatus, electronic devices, and computer-readable media. Background Technology

[0002] In web design, Cascading Style Sheets (CSS) are commonly used to style web page elements. To support complex web page designs, multiple CSS sheets are often applied to the same web page. However, when multiple CSS sheets coexist, duplicate style definitions can lead to style conflicts for the same web page element during rendering.

[0003] In existing technologies, web developers can manually adjust the loading order of cascading style sheets to reduce style conflicts between web elements during rendering. However, this method is inefficient and prone to errors, affecting the rendering effect of the web page. Summary of the Invention

[0004] This application provides web page rendering methods, apparatus, electronic devices, and computer-readable media to solve the technical problem that existing technologies cannot efficiently and accurately resolve web page element style conflicts.

[0005] In a first aspect, embodiments of this application provide a webpage rendering method, the method comprising: during webpage loading, determining webpage elements located within a viewport, the viewport being an area of ​​the webpage visible to a user; selecting a target webpage element from the webpage elements located within the viewport based on attribute information of each webpage element located within the viewport; when the resource data of the webpage includes multiple cascading style sheets, selecting a first target cascading style sheet from the multiple cascading style sheets based on the tag of the target webpage element, the resource data being data constituting the webpage; and rendering the webpage elements in the viewport based on the first target cascading style sheet.

[0006] Secondly, embodiments of this application provide a webpage rendering apparatus, comprising: a determining unit, configured to determine webpage elements located within a viewport during webpage loading, wherein the viewport is an area of ​​the webpage visible to a user; a first selecting unit, configured to select a target webpage element from the webpage elements located within the viewport based on attribute information of each webpage element located within the viewport; a second selecting unit, configured to select a first target cascading style sheet from the multiple cascading style sheets based on the tag of the target webpage element when the resource data of the webpage includes multiple cascading style sheets, wherein the resource data is data constituting the webpage; and a rendering unit, configured to render the webpage elements in the viewport based on the first target cascading style sheet.

[0007] Thirdly, embodiments of this application provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any embodiment of the first aspect.

[0008] Fourthly, embodiments of this application provide a computer-readable medium having a computer program stored thereon that, when executed by a processor, implements the method as described in any embodiment of the first aspect.

[0009] The webpage rendering method, apparatus, electronic device, and computer-readable medium provided in this application determine the webpage elements located within a viewport during the webpage rendering process. Then, based on the attribute information of each webpage element within the viewport, a target webpage element is selected from the webpage elements within the viewport. If the webpage resource data includes multiple Cascading Style Sheets (CSS), a first target CSS is selected from the multiple CSS based on the tag of the target webpage element. The webpage elements in the viewport are then rendered based on the first target CSS. Therefore, the first target CSS can be automatically selected and loaded based on the target webpage elements in the viewport determined in real time. Since the webpage viewport changes in real time during webpage scrolling, the target webpage elements in the viewport also change in real time. The first target CSS can be dynamically adjusted in real time based on the target webpage elements, eliminating the need for users to manually adjust the loading order of CSS, improving the efficiency of resolving webpage element style conflicts, avoiding errors caused by human factors, and enhancing the webpage rendering effect. Attached Figure Description

[0010] Other features, objects, and advantages of this application will become more apparent from the following detailed description of non-limiting embodiments with reference to the accompanying drawings:

[0011] Figure 1This is a flowchart illustrating an embodiment of the webpage rendering method of this application;

[0012] Figure 2 This is a schematic diagram illustrating an application scenario of the webpage rendering method described in this application;

[0013] Figure 3 This is a schematic diagram of the structure of one embodiment of the web page rendering apparatus of this application;

[0014] Figure 4 This is a schematic diagram of the structure of an electronic device used to implement the embodiments of this application. Detailed Implementation

[0015] All actions involving the acquisition of signals, information, or data in this application are carried out in accordance with the relevant data protection laws and policies of the country where the application is located, and with the authorization of the owner of the relevant device.

[0016] The present application will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings.

[0017] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0018] Please refer to Figure 1 This document illustrates a flow 100 of an embodiment of the webpage rendering method according to this application. This webpage rendering method can be applied to various electronic devices with webpage browsing capabilities. For example, such electronic devices may include, but are not limited to: smartphones, tablets, e-book readers, laptops, in-vehicle computers, PDAs, desktop computers, smart TVs, etc. The execution entity of this webpage rendering method can be a processor in the aforementioned electronic device.

[0019] This webpage rendering method includes the following steps:

[0020] Step 101: During the webpage loading process, identify the webpage elements located within the viewport.

[0021] In this embodiment, as the user browses the webpage, the webpage loads dynamically as the user scrolls. During the loading process, webpage elements within the viewport can be determined in real time. The viewport, also known as the window, refers to the area of ​​the webpage that the user can see, i.e., the area in the browser used to display the webpage content.

[0022] In this embodiment, the Intersection Observer API can be used to determine the web page elements located within the viewport in real time. The Intersection Observer API is a JavaScript (JS) application programming interface (API). In practice, the Intersection Observer API provides a method for asynchronously detecting whether the element under test intersects with the root element. If an intersection occurs, the element under test is considered to be within the viewport. The root element is the bounding box of the viewport. When the Intersection Observer API determines that a web page element within the viewport has changed, it can issue a notification to inform the execution entity that the web page element within the viewport has changed. Whenever a web page element within the viewport changes, steps 102 to 104 can be executed.

[0023] Step 102: Based on the attribute information of each web page element located in the window, select the target web page element from the web page elements located in the window.

[0024] In this embodiment, a webpage element refers to an element within a webpage, which may include, but is not limited to, at least one of the following: text, images, videos, audio, links, forms, etc. The target webpage element can be selected based on pre-defined rules. The attribute information may include, but is not limited to, at least one of the following: the area occupied by the webpage element in the viewport, and the type of the webpage element. For example, the webpage element with the largest area can be used as the target webpage element, or a webpage element of a specific type can be used as the target webpage element.

[0025] Step 103: If the resource data of the webpage includes multiple cascading style sheets, select the first target cascading style sheet from the multiple cascading style sheets based on the tag of the target webpage element.

[0026] In this embodiment, the resource data of the webpage refers to the data that constitutes the webpage. The resource data of the webpage may include multiple Cascading Style Sheets (CSS). Each CSS can be used to set the style of some or all of the webpage elements in the target webpage. These styles may include, but are not limited to, color, size, spacing, and font. In practical applications, the style of the same webpage element may be defined by multiple CSS, and the style settings for the same webpage element by multiple CSS may differ, leading to style conflicts and overriding issues.

[0027] In this embodiment, when the resource data of a webpage includes multiple Cascading Style Sheets (CSS), a first target CSS can be selected from the multiple CSS based on the tags of the target webpage elements. As an example, a CSS containing the aforementioned tags can be used as the first target CSS.

[0028] Step 104: Render the web page elements in the viewport based on the first target cascading style sheet.

[0029] In this embodiment, after selecting the first target cascading style sheet, the first target cascading style sheet can be loaded and executed to render the web page elements in the window.

[0030] The following example illustrates a specific application scenario. (See attached image.) Figure 2 .

[0031] The webpage consists of two parts: the upper part is the `a` element (see label 201), and the lower part is the `b` element (see label 202). The correct style settings for the `a` element are located in Cascading Style Sheets (CSS) A, and the correct style settings for the `b` element are located in CSS B. It should be noted that CSS A may or may not contain style settings for the `b` element, and CSS B may or may not contain style settings for the `a` element; these are not specifically limited here.

[0032] When a user browses a webpage, the largest element in the viewport is initially the `a` element, which is the target webpage element. The first target Cascading Style Sheet (CSS) for element `a` is calculated to be CSS A. Therefore, CSS A can be used to render the webpage elements within the viewport, ensuring that element `a` is rendered correctly.

[0033] Next, the user continues to scroll through the webpage. As the user scrolls, the largest element in the viewport becomes element 'b', which is now the target webpage element. Calculations show that the first target Cascading Style Sheet (CSS) for element 'b' is CSS B. Therefore, CSS B can be used to render the webpage elements within the viewport, ensuring that element 'b' is rendered correctly.

[0034] The method provided in the above embodiments of this application determines the web page elements located within the viewport during the web page rendering process. Then, based on the attribute information of each web page element within the viewport, a target web page element is selected from the web page elements within the viewport. Subsequently, when the web page resource data includes multiple Cascading Style Sheets (CSS), a first target CSS is selected from the multiple CSS based on the tag of the target web page element. The web page elements in the viewport are then rendered based on the first target CSS. Therefore, the first target CSS can be automatically selected and loaded based on the target web page elements in the viewport determined in real time. Since the web page viewport changes in real time during web page scrolling, the target web page elements in the viewport also change in real time. The first target CSS can be dynamically adjusted in real time based on the target web page elements, eliminating the need for users to manually adjust the loading order of CSS, improving the efficiency of resolving web page element style conflicts, avoiding errors caused by human factors, and enhancing the web page rendering effect.

[0035] In some optional embodiments, in step 102 above, the attribute information may include the area occupied by the web page element in the viewport. Based on this, the web page element with the largest area in the viewport can be selected as the target web page element. For example, the web page elements in the viewport include text, video, and links. The area occupied by the text is A, the area occupied by the video is B, and the area occupied by the link is C. If B > A > C, then the video located in the viewport can be determined as the target web page element. By determining the target web page element based on the area occupied by the web page element, it can be ensured that the first target Cascading Style Sheet selected based on the target web page element can match the element with the largest area in the viewport, so that the area of ​​the correctly rendered area in the viewport is maximized, thereby improving the rendering effect of the page elements in the viewport.

[0036] In some optional embodiments, in step 102 above, the attribute information includes the type of the web page element. Based on this, the highest priority web page element can be selected from the web page elements within the window, using a pre-defined correspondence between web page element types and priorities, and the types of each web page element within the window. For example, the web page elements within the window may include text, video, and images. Sorted by priority from highest to lowest, these are video, image, and text. Therefore, the highest priority web page element within the window is video, and thus the video within the window can be identified as the target web page element. By determining the target web page element based on its type, it is ensured that the first target cascading style sheet selected based on this target web page element matches the most important web page element in the window, ensuring correct rendering of the most important web page element and improving the rendering effect of the page elements within the window.

[0037] In some optional embodiments, in step 102 above, the attribute information includes the area occupied by each webpage element in the viewport and the type of each webpage element. Based on this, the proportion of each webpage element in the viewport can first be determined based on the area occupied by each webpage element in the viewport and the total area of ​​the viewport. Then, if the maximum proportion is greater than a threshold (e.g., 1 / 2), the webpage element corresponding to the maximum proportion is determined as the target webpage element. If the maximum proportion is less than or equal to the threshold, based on a pre-defined correspondence between the type and priority of webpage elements and the types of each webpage element in the viewport, the webpage element with the highest priority is selected as the target webpage element. By combining the area occupied by the webpage element and the type of the webpage element to determine the target webpage element, both the visual effect and importance of the webpage element can be considered, thereby further improving the rendering effect of the page elements in the viewport.

[0038] It should be noted that the selection of target webpage elements is not limited to the above embodiments. Other rules can be set as needed to select target webpage elements.

[0039] In some optional embodiments, step 103 above may be performed according to the following sub-steps:

[0040] Sub-step 1031: Based on the tags of the target web page elements, determine the target priority of each cascading style sheet in the above multiple cascading style sheets.

[0041] The aforementioned tags may include at least one. In some examples, the target priority can be determined based on the number of such tags contained in the Cascading Style Sheet (CSS). For instance, if the target webpage element has two tags, one indicating name and the other indicating type, the target priority of the CSS containing both tags can be set to the highest priority, while the target priority of the CSS containing only one tag can be set to a low priority.

[0042] Optionally, the aforementioned tags may include, but are not limited to: the name of the target webpage element and the class name of the class to which the target webpage element belongs. As an example, the code corresponding to the target webpage element is: <video src class＝"xxx"id＝"1234">< / video>In this context, xxx represents the class name of the target webpage element, and 1234 represents the name of the target webpage element. Therefore, the target priority of a Cascading Style Sheets (CSS) containing both the above names and class names is determined as the first priority; the target priority of a CSS containing the above names but not the above class names is determined as the second priority; the target priority of a CSS containing the above class names but not the above names is determined as the third priority; and the target priority of a CSS containing neither the above names nor the above class names is determined as the fourth priority. The first priority is higher than the second priority, the second priority is higher than the third priority, and the third priority is higher than the fourth priority.

[0043] Optionally, the above tags may only include the aforementioned names. In this case, the target priority of the Cascading Style Sheets (CSS) containing the aforementioned names can be determined as the first priority, and the target priority of the remaining CSS can be determined as the second priority.

[0044] Optionally, the above tags may only include the class names mentioned above. In this case, the target priority of the cascading style sheets that contain the above class names can be determined as the first priority, and the target priority of the remaining cascading style sheets can be determined as the second priority.

[0045] Sub-step 1032: Select the cascading style sheet with the highest target priority from the above multiple cascading style sheets as the first target cascading style sheet.

[0046] In some optional embodiments, if none of the multiple cascading style sheets contain the aforementioned name and class name, the initial priority of each cascading style sheet can be obtained first. This initial priority is a manually preset priority. Then, the cascading style sheet with the highest initial priority can be selected as the first target cascading style sheet. This implementation method can successfully select the first target cascading style sheet even when the target priorities of the multiple cascading style sheets cannot be distinguished, thus improving the success rate of selecting the first target cascading style sheet.

[0047] In some optional embodiments, if the number of cascading style sheets (CSS) with the highest target priority is greater than one, then each CSS with the highest target priority in the CSS can be used as a candidate CSS, and the initial priority of each candidate CSS is obtained. This initial priority is a manually preset priority. Then, from the candidate CSS, the CSS with the highest initial priority is selected as the first target CSS. This implementation method can further select from at least two CSSs with the highest target priority to obtain the first target CSS, even when at least two CSSs with the highest target priority exist, thus improving the success rate of selecting the first target CSS.

[0048] In some optional embodiments, before rendering the web page elements in the window based on the first target Cascading Style Sheet (CSS), the following steps may be performed: For each web page element in the window other than the target web page element, based on the tag of the web page element, a second target CSS is selected from multiple CSSs. If the second target CSS differs from the first target CSS, the style setting information of the web page element (which can be denoted as the second style setting information) is extracted from the second target CSS. If the second style setting information differs from the style setting information of the web page element in the first target CSS (which can be denoted as the first style setting information), the first style setting information is replaced with the second style setting information to obtain a third CSS. The first and second style setting information are used to set the style of the web page element. The selection method of the second target CSS is basically the same as that of the first target CSS, and will not be described again here.

[0049] As an example, the current viewport contains web page elements c and d. Multiple Cascading Style Sheets (CSS) are included, specifically CSS A and CSS B. The largest element in the viewport is c, therefore c is the target web page element. First, based on c, CSS A is determined to be the CSS with the highest target priority relative to c, so CSS A can be used as the first target CSS. Next, using the same method, based on d, CSS B is determined to be the CSS with the highest target priority relative to d, so CSS B can be used as the second target CSS for element d. Then, the first style setting information in CSS A used to set the style of element d can be replaced with the second style setting information in CSS B used to set the style of element d, resulting in a third CSS. Finally, the elements in the viewport can be rendered based on the third CSS.

[0050] Since the style settings used to set the styles of each element in the third-level style sheet are all correct, the target web page element and other elements in the viewport can be rendered with optimal effect without avoiding style conflicts between web page elements, thus further improving the web page rendering effect.

[0051] In some optional embodiments, to facilitate technicians in real-time viewing of Cascading Style Sheets (CSS) priorities and adjustments to target CSS, the webpage loading process may further include the following steps: displaying a target window, which includes various webpage elements within the window; when a user clicks on any webpage element in the target window, displaying the priority information of each CSS in multiple CSS sets; and when a user edits the priority information, adjusting the target priority of at least one CSS set based on the edited priority information. This provides a visual interface for manually adjusting the target priority of CSS sets, thereby enabling manual intervention and improving the fault tolerance of target CSS set selection.

[0052] Further reference Figure 3 As an implementation of the methods shown in the above figures, this application provides an embodiment of a web page rendering apparatus, which is similar to... Figure 1 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.

[0053] like Figure 3 As shown, the webpage rendering apparatus 300 of this embodiment includes: a determining unit 301, configured to determine webpage elements located within a viewport during webpage loading, wherein the viewport is an area of ​​the webpage visible to the user; a first selecting unit 302, configured to select a target webpage element from the webpage elements located within the viewport based on the attribute information of each webpage element located within the viewport; a second selecting unit 303, configured to select a first target cascading style sheet from the multiple cascading style sheets based on the tag of the target webpage element when the resource data of the webpage includes multiple cascading style sheets, wherein the resource data is the data constituting the webpage; and a rendering unit 304, configured to render the webpage elements in the viewport based on the first target cascading style sheet.

[0054] In some optional implementations of this embodiment, the first selection unit 302 is further configured to: select the web page element that occupies the largest area in the window from among the web page elements located in the window, and use it as the target web page element.

[0055] In some optional implementations of this embodiment, the attribute information includes the type of web page element; the first selection unit 302 is further configured to: select the web page element with the highest priority from the web page elements located in the window as the target web page element based on the pre-set correspondence information between the type and priority of web page elements and the type of each web page element located in the window.

[0056] In some optional implementations of this embodiment, the attribute information includes the area occupied by the web page element in the window and the type of each web page element; the first selection unit 302 is further configured to: determine the proportion of each web page element in the window based on the area occupied by each web page element in the window and the total area of ​​the window; if the maximum value of the proportion is greater than a threshold, determine the web page element corresponding to the maximum value as the target web page element; if the maximum value of the proportion is less than or equal to the threshold, select the web page element with the highest priority from the web page elements in the window as the target web page element based on the pre-set correspondence information between the type and priority of web page elements and the type of each web page element in the window.

[0057] In some optional implementations of this embodiment, the second selection unit 303 is further configured to: determine the target priority of each cascading style sheet in the plurality of cascading style sheets based on the tag of the target web page element; and select the cascading style sheet with the highest target priority from the plurality of cascading style sheets as the first target cascading style sheet.

[0058] In some optional implementations of this embodiment, the marker includes the name of the target webpage element and the class name of the class to which the target webpage element belongs; the second selection unit 303 is further configured to: determine the target priority of the cascading style sheets that contain the name and the class name as a first priority; determine the target priority of the cascading style sheets that contain the name but do not contain the class name as a second priority; determine the target priority of the cascading style sheets that contain the class name but do not contain the name as a third priority; determine the target priority of the cascading style sheets that do not contain the name and do not contain the class name as a fourth priority; wherein, the first priority is higher than the second priority, the second priority is higher than the third priority, and the third priority is higher than the fourth priority.

[0059] In some optional implementations of this embodiment, the second selection unit 303 is further configured to: if none of the multiple cascading style sheets contain the name and the class name, obtain the initial priority of each cascading style sheet, wherein the initial priority is a priority preset by a human; and select the cascading style sheet with the highest initial priority from the multiple cascading style sheets as the first target cascading style sheet.

[0060] In some optional implementations of this embodiment, the second selection unit 303 is further configured to: if the number of the highest target cascading style sheets in the plurality of cascading style sheets is greater than 1, then take each of the highest target cascading style sheets in the plurality of cascading style sheets as candidate cascading style sheets, and obtain the initial priority of each candidate cascading style sheet; from the candidate cascading style sheets, select the cascading style sheet with the highest initial priority as the first target cascading style sheet.

[0061] In some optional implementations of this embodiment, the device further includes an editing unit, configured to: display a target window, the target window including various web page elements in the viewport; when a user clicks on any web page element in the user interface, display priority information of each cascading style sheet in the plurality of cascading style sheets; and when a user edits the priority information, adjust the target priority of at least one cascading style sheet in the plurality of cascading style sheets based on the edited priority information.

[0062] In some optional implementations of this embodiment, the apparatus further includes a replacement unit, configured to: for each webpage element other than the target webpage element within the window, select a second target cascading style sheet from the plurality of cascading style sheets based on the tag of the webpage element; if the second target cascading style sheet differs from the first target cascading style sheet, extract second style setting information of the webpage element from the second target cascading style sheet; if the second style setting information differs from the first style setting information of the webpage element in the first target cascading style sheet, replace the first style setting information with the second style setting information to obtain a third cascading style sheet, wherein the first style setting information and the second style setting information are used to set the style of the webpage element; the rendering unit 304 is further configured to: render the webpage elements in the window based on the third cascading style sheet.

[0063] The apparatus provided in the above embodiments of this application determines the web page elements located within the viewport during the web page rendering process. Then, based on the attribute information of each web page element within the viewport, it selects a target web page element from the web page elements located within the viewport. Subsequently, when the web page resource data includes multiple cascading style sheets (CSS), it selects a first target CSS based on the tag of the target web page element. Based on the first target CSS, the web page elements in the viewport are rendered. Therefore, the first target CSS can be automatically selected and loaded based on the target web page elements in the viewport determined in real time. Since the web page viewport changes in real time during web page scrolling, the target web page elements in the viewport also change in real time. The first target CSS can be dynamically adjusted in real time based on the target web page elements, eliminating the need for users to manually adjust the loading order of CSS, improving the efficiency of resolving web page element style conflicts, avoiding errors caused by human factors, and enhancing the web page rendering effect.

[0064] The following is for reference. Figure 4 It shows a schematic diagram of the structure of an electronic device used to implement some embodiments of this application. Figure 4 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments of this application.

[0065] like Figure 4 As shown, electronic device 400 may include a processing device (e.g., a central processing unit, a graphics processor, etc.) 401, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 402 or a program loaded from storage device 408 into random access memory (RAM) 403. RAM 403 also stores various programs and data required for the operation of electronic device 400. Processing device 401, ROM 402, and RAM 403 are interconnected via bus 404. Input / output (I / O) interface 405 is also connected to bus 404.

[0066] Typically, the following devices can be connected to I / O interface 405: input devices 406 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 407 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 408 including, for example, disks, hard disks, etc.; and communication devices 409. Communication device 409 allows electronic device 400 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 4 An electronic device 400 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Figure 4Each box shown can represent a device or multiple devices as needed.

[0067] In particular, according to some embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, some embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 409, or installed from storage device 408, or installed from ROM 402. When the computer program is executed by processing device 401, it performs the functions defined above in the methods of some embodiments of this application.

[0068] It should be noted that the computer-readable medium described in some embodiments of this application may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In some embodiments of this application, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In some embodiments of this application, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0069] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol, such as HTTP (Hypertext Transfer Protocol), and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0070] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: during webpage loading, determine webpage elements located within a window, where the window is the area of ​​the webpage visible to the user; select a target webpage element from the webpage elements located within the window based on the attribute information of each webpage element located within the window; if the webpage resource data includes multiple cascading style sheets (CSS), select a first target CSS based on the tag of the target webpage element, where the resource data is the data constituting the webpage; and render the webpage elements in the window based on the first target CSS.

[0071] Computer program code for performing operations of some embodiments of this application can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++; and conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network, or it can be connected to an external computer (e.g., via the Internet using an Internet service provider), including local area networks (LANs) or wide area networks (WANs).

[0072] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0073] The units described in some embodiments of this application can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor may be described as including a first determining unit, a second determining unit, a selecting unit, and a third determining unit. The names of these units do not necessarily limit the specific unit itself.

[0074] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0075] The above description is merely a selection of preferred embodiments of this application and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of this application is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described inventive concept. For example, technical solutions formed by substituting the above-described features with (but not limited to) technical features with similar functions disclosed in the embodiments of this application.

Claims

1. A webpage rendering method, characterized in that, The method includes: During the webpage loading process, webpage elements located within a viewport are identified, where the viewport is the area of ​​the webpage that the user can see. Based on the attribute information of each web page element located within the window, a target web page element is selected from the web page elements located within the window; the attribute information includes at least one of the following: the area occupied by the web page element in the window and the type of the web page element. When the resource data of the webpage includes multiple cascading style sheets, a first target cascading style sheet is selected from the multiple cascading style sheets based on the tags of the target webpage element. The resource data is the data that constitutes the webpage. The tags include the name of the target webpage element and the class name of the class to which the target webpage element belongs. Based on the first target cascading style sheet, render the web page elements in the viewport; The step of selecting a first target cascading style sheet from the plurality of cascading style sheets based on the markup of the target webpage element includes: Based on the tags of the target webpage element, determine the target priority of each cascading style sheet in the plurality of cascading style sheets; Select the cascading style sheet with the highest target priority from the multiple cascading style sheets, and use it as the first target cascading style sheet.

2. The method according to claim 1, characterized in that, The attribute information includes the area occupied by the web page element in the viewport; the step of selecting the target web page element from the web page elements located in the viewport based on the attribute information of each web page element located in the viewport includes: From the web page elements located within the window, select the web page element that occupies the largest area in the window as the target web page element.

3. The method according to claim 1, characterized in that, The attribute information includes the type of the webpage element; the step of selecting the target webpage element from the webpage elements located in the window based on the attribute information of each webpage element located in the window includes: Based on the pre-defined correspondence between the types and priorities of web page elements and the types of each web page element located in the window, the web page element with the highest priority is selected from the web page elements located in the window as the target web page element.

4. The method according to claim 1, characterized in that, The attribute information includes the area occupied by the web page element in the viewport and the type of each web page element; the step of selecting a target web page element from the web page elements located in the viewport based on the attribute information of each web page element located in the viewport includes: Based on the area occupied by each web page element in the window and the total area of ​​the window, determine the proportion of each web page element in the window; If the maximum value of the percentage is greater than the threshold, the web page element corresponding to the maximum value is determined as the target web page element. If the maximum percentage is less than or equal to the threshold, based on the pre-set correspondence between the type and priority of web page elements and the type of each web page element in the window, the web page element with the highest priority is selected from the web page elements in the window as the target web page element.

5. The method according to claim 1, characterized in that, The step of determining the target priority of each cascading style sheet in the plurality of cascading style sheets based on the tag of the target webpage element includes: The target priority of the cascading style sheets that contain the name and the class name is determined as the first priority. The target priority of the cascading style sheets that contain the name but not the class name is determined as the second priority. The target priority of the cascading style sheets that contain the class name but do not contain the name is determined as the third priority. The target priority of the cascading style sheets that do not contain the name and the class name is determined as the fourth priority; Wherein, the first priority is higher than the second priority, the second priority is higher than the third priority, and the third priority is higher than the fourth priority.

6. The method according to claim 5, characterized in that, The step of determining the target priority of each cascading style sheet in the plurality of cascading style sheets based on the tag of the target webpage element includes: If none of the multiple cascading style sheets contain the name and the class name, then the initial priority of each cascading style sheet is obtained, and the initial priority is a priority that is manually preset. From the multiple cascading style sheets, select the cascading style sheet with the highest initial priority as the first target cascading style sheet.

7. The method according to claim 1, characterized in that, The step of selecting the cascading style sheet with the highest target priority from the plurality of cascading style sheets as the first target cascading style sheet includes: If the number of cascading style sheets with the highest target priority in the plurality of cascading style sheets is greater than 1, then each cascading style sheet with the highest target priority in the plurality of cascading style sheets is taken as a candidate cascading style sheet, and the initial priority of each candidate cascading style sheet is obtained. From the candidate cascading style sheets, select the cascading style sheet with the highest initial priority as the first target cascading style sheet.

8. The method according to claim 1, characterized in that, The method further includes: Display the target window, which includes the web page elements of the viewport; When a user clicks on any webpage element in the target window, the priority information of each cascading style sheet in the plurality of cascading style sheets is displayed; When a user's editing operation on the priority information is detected, the target priority of at least one cascading style sheet in the plurality of cascading style sheets is adjusted based on the edited priority information.

9. The method according to claim 1, characterized in that, Before rendering the web page elements in the viewport based on the first target cascading style sheet, the method further includes: For each webpage element in the window other than the target webpage element, a second target cascading style sheet is selected from the plurality of cascading style sheets based on the tag of the webpage element. If the second target cascading style sheet is different from the first target cascading style sheet, the second style setting information of the webpage element is extracted from the second target cascading style sheet. If the second style setting information is different from the first style setting information of the webpage element in the first target cascading style sheet, the first style setting information is replaced with the second style setting information to obtain a third cascading style sheet. The first style setting information and the second style setting information are used to set the style of the webpage element. The step of rendering web page elements in the viewport based on the first target cascading style sheet includes: Based on the third cascading style sheet, the web page elements in the viewport are rendered.

10. A webpage rendering device, characterized in that, The device includes: A determining unit is used to determine web page elements located within a viewport during the web page loading process, wherein the viewport is the area of ​​the web page that the user can see; The first selection unit is used to select a target web page element from the web page elements located in the window based on the attribute information of each web page element located in the window; the attribute information includes at least one of the area occupied by the web page element in the window and the type of the web page element. The second selection unit is configured to, when the resource data of the webpage includes multiple cascading style sheets, select a first target cascading style sheet from the multiple cascading style sheets based on the tags of the target webpage element, wherein the resource data is the data constituting the webpage; the tags include the name of the target webpage element and the class name of the class to which the target webpage element belongs; A rendering unit is used to render web page elements in the viewport based on the first target cascading style sheet; The second selection unit is further configured to: determine the target priority of each cascading style sheet in the plurality of cascading style sheets based on the tags of the target web page element; and select the cascading style sheet with the highest target priority from the plurality of cascading style sheets as the first target cascading style sheet.

11. An electronic device, characterized in that, include: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-9.

12. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-9.

Images