A webpage rendering method, device, medium and electronic equipment

Abstract

This application discloses a webpage rendering method, apparatus, medium, and electronic device. The method includes: determining multiple style resource files associated with a webpage structure file; converting each of the multiple style resource files into a style resource function, each style resource function including a style identifier parameter, the style identifier parameter being used to uniquely identify the style resource function; and calling the style resource function based on the style identifier parameter to set the styles of webpage elements in the webpage structure file. This application's technical solution can achieve element style isolation and improve webpage rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of computer application technology, and in particular to a web page rendering method, apparatus, medium, and electronic device. Background Technology

[0002] During the rendering process of web page elements, when using custom element components to describe the styles of web page elements, there may be instances of duplicate element style identifiers. When multiple element components are rendered on the same web page, it may lead to element style misalignment.

[0003] In related technologies, style resource files corresponding to custom element components are typically merged during the webpage construction phase. Based on the merged file result, element style identifiers are then assigned to each style resource file to achieve element style isolation and prevent style mismatch. However, this method of merging style resource files increases the overall file size, raises the total amount of code, and impacts webpage rendering efficiency. Summary of the Invention

[0004] This application provides a web page rendering method, apparatus, medium, and electronic device that can achieve element style isolation and improve web page rendering efficiency.

[0005] According to a first aspect of this application, a webpage rendering method is provided, the method comprising:

[0006] Identify the multiple style resource files associated with the webpage structure file;

[0007] The multiple style resource files are respectively converted into style resource functions, and the style resource functions include style identifier parameters, which are used to uniquely identify the style resource functions.

[0008] The style resource function is called based on the style identifier parameter to set the style of the web page elements in the web page structure file.

[0009] According to a second aspect of this application, a web page rendering apparatus is provided, the apparatus comprising:

[0010] The style resource file determination module is used to determine multiple style resource files associated with the webpage structure file;

[0011] A style resource file conversion module is used to convert multiple style resource files into style resource functions, wherein the style resource function includes a style identifier parameter, and the style identifier parameter is used to uniquely identify the style resource function.

[0012] The style resource function call module is used to call the style resource function based on the style identifier parameter to set the style of the web page elements in the web page structure file.

[0013] According to a third aspect of the present invention, embodiments of this application provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the web page rendering method as described in embodiments of this application.

[0014] According to a fourth aspect of the present invention, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the web page rendering method as described in the embodiments of the present application.

[0015] The technical solution of this application converts multiple style resource files associated with the webpage structure file into style resource functions, determines the style resource functions using style identifier parameters, and calls the style resource functions based on the style identifier parameters to set the styles of webpage elements in the webpage structure file. This application improves webpage rendering efficiency by calling style resource functions without increasing file size, ensuring file loading speed. Furthermore, this application's embodiments determine unique element style identifiers for style resource functions based on style identifier parameters, achieving element style isolation. This allows for differentiation between different style resource functions based on element style identifiers, effectively avoiding element style conflicts caused by duplicate element style identifiers.

[0016] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this application, nor is it intended to limit the scope of this application. Other features of this application will become readily apparent from the following description. Attached Figure Description

[0017] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0018] Figure 1 This is a flowchart of the webpage rendering method provided in Embodiment 1;

[0019] Figure 2 This is a flowchart of the webpage rendering method provided in Embodiment 2;

[0020] Figure 3 This is a flowchart of the webpage rendering method provided in Embodiment 3;

[0021] Figure 4 This is a schematic diagram of the web page rendering apparatus provided in Embodiment 4 of this application;

[0022] Figure 5 This is a schematic diagram of the structure of an electronic device provided in Embodiment 5 of this application. Detailed Implementation

[0023] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0024] It should be noted that the terms "first," "second," "target," and "candidate," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0025] Example 1

[0026] Figure 1 This is a flowchart of the web page rendering method provided in Embodiment 1. This embodiment is applicable to the situation where web page elements are rendered using style resource files. The method can be executed by a web page rendering device, which can be implemented in hardware and / or software and can be integrated into an electronic device running this system.

[0027] like Figure 1 As shown, the method includes:

[0028] S110. Identify the multiple style resource files associated with the web page structure file.

[0029] The webpage structure file is the carrier of the webpage content and is used to determine the layout of the webpage structure. Webpage content refers to the page elements displayed on the webpage; for example, webpage content may include text, images, animations, or sounds. The style resource file is used to determine the style of the webpage content. For example, style resource files can be used to set the font and color of headings, add background text to headings, etc. Optionally, the webpage structure file is an HTML (Hypertext Markup Language) file, and the style resource files are CSS (Cascading Style Sheets) files. Optionally, there can be multiple style resource files; the specific number of style resource files is not limited here and is determined based on the actual situation.

[0030] Identify the multiple style resource files associated with the webpage structure file; specifically, identify the multiple style resource files used to set the styles of page elements in the webpage structure file.

[0031] S120. Convert the multiple style resource files into style resource functions respectively. The style resource functions include style identifier parameters, which are used to uniquely identify the style resource functions.

[0032] There is a one-to-many correspondence between webpage structure files and style resource files; that is, one webpage structure file can be associated with multiple style resource files. Each style resource file associated with the webpage structure undergoes format conversion, transforming it into a style resource function. There is a one-to-one correspondence between style resource files and style resource functions; that is, each style resource file has a corresponding style resource function. For example, in the case of a CSS style resource file, the style resource function is a JavaScript function.

[0033] Style resource functions include at least one function call parameter. Optionally, the function call parameter is a style identifier parameter. The style resource function can be called based on the style identifier parameter.

[0034] S130. Based on the style identifier parameter, call the style resource function to set the style of the web page elements in the web page structure file.

[0035] It is known that a webpage structure file can call any number of style resource files, provided that the file identifiers of the style resource files are not duplicated. The file identifier of the style resource file is used to identify the element styles defined in the style resource file. This application uses style identifier parameters to assign unique element style identifiers to each style resource function, so that different style resource functions can be distinguished based on element style identifiers, thereby avoiding element style conflicts caused by duplicate element style identifiers.

[0036] The style resource function is called based on the style identifier parameter. Specifically, the style identifier parameter is passed to the style resource function as a function call parameter to determine the element style identifier of the style resource function, and the style of the web page element in the page structure file is set through the style resource function.

[0037] In an optional embodiment, after converting the plurality of style resource files into style resource functions respectively, the method further includes: obtaining a description modification operation for the style description content in the style resource function; and modifying the style description content of the style resource function according to the description modification operation.

[0038] This application embodiment also supports modifying the style description content in the style resource function according to actual business needs. Specifically, after converting the style resource file into a style resource function, a description modification operation is obtained for the style description content in the style resource function. This description modification operation is used to modify the style description content, and the operation is determined based on business requirements. For example, the style description content in the style resource file is: color: red. Here, color: red indicates that the color of the web page element is set to red. The description modification operation could be to change red to green.

[0039] Based on the description, modify the corresponding style description in the style resource function. Continuing with the previous example, change the style description from `color: red` to `color: green`.

[0040] The above technical solution, by obtaining the description modification operation for the style description content in the style resource function, and modifying the style description content of the style resource function according to the description modification operation, supports the modification of the style resource function according to actual business needs, thereby improving the flexibility of web page rendering.

[0041] In an optional embodiment, before calling the style resource function based on the style identifier parameter, the method further includes: obtaining the file storage path of the style resource file; and determining the style identifier parameter based on the file storage path.

[0042] The file storage path refers to the location where style resource files are stored. It's important to understand that style resource files with the same file identifier cannot be stored in the same file storage path. The file storage path can be used to distinguish style resource files with the same file identifier.

[0043] Obtain the file storage path of the style resource file, and determine a unique style identifier parameter for the style resource file based on the file storage path. This ensures that the element style identifiers of different style resource files are different.

[0044] Of course, that's understandable. It's not limited to determining style identifier parameters based on file storage paths. As long as the element style identifiers in different style resource files are different, the style identifier parameters can also be determined based on random strings. These random strings consist of randomly generated letters, numbers, characters, or symbols, and don't necessarily have a specific meaning.

[0045] The above technical solution determines the style identifier parameter based on the file storage path of the style resource file, and determines the element style identifier of the style resource function based on the style identifier parameter, thus ensuring the uniqueness of the element style identifier. This allows different style resource functions to be distinguished based on the element style identifier, thereby avoiding element style conflicts caused by duplicate element style identifiers.

[0046] The technical solution of this application converts multiple style resource files associated with the webpage structure file into style resource functions, uniquely determines the style resource function using style identifier parameters, and calls the style resource function based on the style identifier parameters to set the styles of webpage elements in the webpage structure file. This application improves webpage rendering efficiency by calling style resource functions without increasing file size, ensuring file loading speed. Furthermore, this application's embodiment uniquely determines the style resource function based on the style identifier parameters, achieving element style isolation. This allows for differentiation of different style resource functions based on element style identifiers, effectively avoiding element style conflicts caused by duplicate element style identifiers.

[0047] Example 2

[0048] Figure 2 This is a flowchart of the webpage rendering method provided in Embodiment 2. This embodiment further optimizes the above embodiment, specifically refining the operation of "converting the multiple style resource files into style resource functions respectively".

[0049] like Figure 2 As shown, the method includes:

[0050] S210. Identify the multiple style resource files associated with the webpage structure file.

[0051] S220. Determine the dependencies between the multiple style resource files.

[0052] The dependency relationships are determined based on the style reference relationships between style resource files. These dependencies are determined according to the actual situation and are not limited here. For example, if the style resource file is a CSS file and includes style resource file a and style resource file b, style resource file b includes the following:

[0053] @import ". / a.css"

[0054] .b{color:red;}

[0055] The `@import ". / a.css"` directive indicates the style reference relationship in style resource file `b`, meaning that style resource file `b` references the web page element styles defined in style resource file `a`. Based on this, the dependency relationship between style resource file `b` and style resource file `a` can be determined. Specifically, it can be determined that style resource file `b` depends on style resource file `a`. Style resource file `b` needs to reference the web page element styles defined in style resource file `a`.

[0056] S230. Based on the dependency relationship, determine the file type of the style resource file, wherein the file type includes: basic style file and derived style file.

[0057] The file type determines whether a style resource file needs to depend on other style resource files besides itself to achieve complete webpage element style settings. Optionally, file types include: base style files and derived style files. A base style file is one that does not need to depend on other style resource files to achieve complete webpage element style settings. A derived style file is one that needs to depend on other style resource files to achieve complete webpage element style settings. It can be understood that the base style file generally exists as the dependent party, while the derived style file generally exists as the party that depends on other resource style files. In the example above, based on the above dependency relationship, we can determine that style resource file a is a base style file, and style resource file b is a derived style file.

[0058] S240. Based on the file type, convert the style resource file into the style resource function; the style resource function includes basic style functions and derived style functions.

[0059] Different file types require different function conversion methods. Compared to basic style files, derived style files involve file reference logic, and converting derived style files into derived style functions requires handling this logic accordingly. Therefore, the function conversion method for derived style files is more complex than that for basic style files.

[0060] Select the appropriate function conversion method for style resource files based on the file type.

[0061] S250. Based on the style identifier parameter, call the style resource function to set the style of the web page elements in the web page structure file.

[0062] This application's technical solution determines the file type of style resource files based on the dependencies between them. According to the file type, the style resource files are converted into style resource functions, thus achieving the conversion of style resource files into style resource functions. This application, based on file type, converts style resource files into corresponding style resource functions, facilitating subsequent function calls to set the styles of web page elements in the web page structure file, thereby achieving the reuse of style resource functions.

[0063] Example 3

[0064] Figure 3 This is a flowchart of the webpage rendering method provided in Embodiment 3. This embodiment further optimizes the above embodiments, specifically refining the step of "converting the style resource file into the style resource function according to the file type".

[0065] like Figure 3 As shown, the method includes:

[0066] S310. Identify the multiple style resource files associated with the web page structure file.

[0067] S320. Determine the dependencies between the multiple style resource files.

[0068] S330. Based on the dependency relationship, determine the file type of the style resource file, wherein the file type includes: basic style file and derived style file.

[0069] S340. If the file type is a derived style file, then determine the base style file that the derived style file depends on.

[0070] If the style resource file is a derived style file, it means that the style resource file depends on other style resource files besides itself to achieve the complete web page element style setting function. Converting a derived style file into a derived style function requires corresponding handling of file reference logic.

[0071] Determine the base style file that the derived style file depends on. Optionally, perform syntax analysis on the derived style file and determine the base style file that the derived style file depends on based on the style reference relationships in the derived style file.

[0072] S350. Determine the function reference relationship based on the dependency relationship between the derived style file and the base style file.

[0073] Dependencies are determined based on style references between style resource files. In essence, the style references between derived and base style files are transformed into function references between derived and base style functions.

[0074] S360. Based on the basic style function and the function reference relationship, convert the derived style file into a derived style function.

[0075] The base style functions are derived from the base style file. Specifically, the base style functions are derived from the base style file upon which the derived style files depend.

[0076] Function references are used to represent file reference logic in derived style files. Based on the base style functions and function references, derived style files can be converted into derived style functions.

[0077] This application's technical solution, when the file type is a derived style file, determines the base style file that the derived style file depends on; determines the function reference relationship based on the dependency relationship between the derived style file and the base style file; and converts the derived style file into a derived style function based on the base style function and the function reference relationship, thus realizing the conversion of a derived style file into a derived style function. This application's embodiments provide a function conversion method suitable for derived style files, supporting the conversion of derived style files into derived style functions, and providing technical support for setting the styles of web page elements in the web page structure file through function calls.

[0078] In an optional embodiment, converting the derived style file into a derived style function based on the base style function and the function reference relationship includes: determining the function reference declaration of the derived style function based on the base style function and the function reference relationship; defining the element style identifier of the derived style function based on the style identifier parameter and the original file identifier of the derived style file; and determining the style description content of the derived style function based on the function reference relationship and the style description content in the base style function and the derived style file.

[0079] The base style function is determined based on function reference relationships, and it is the function that the derived style function needs to reference. Optionally, the base style function can be written into the function declaration location of the derived style function, serving as the function application declaration of the derived style function.

[0080] The element style identifier is determined based on the style identifier parameters and the original file identifier of the derived style file. Optionally, the style identifier parameters and the original file identifier are concatenated, and the concatenated result is used as the element style identifier. The concatenation method between the style identifier parameters and the original file identifier is not limited here. For example, the style identifier parameters can be used as a prefix, infix, or suffix to the original file identifier. For instance, if "prefix" represents the style identifier parameter and the original file identifier is ".b", concatenating the original file identifier with the style identifier parameter ("." + prefix + "b") yields the element style identifier ".prefix b".

[0081] Function references are used to determine the function call location of the base style function, and the base style function is called at the function call location of the derived style function.

[0082] In this context, the style description content in the derived stylesheet refers to the content used to define the styles of web page elements. The style description content is determined based on actual business needs and is not limited here. For example, the style description content can be used to define the color of web page elements and can also convert the style units of web page elements.

[0083] The style description content of a derived style function is determined based on the style description content in the derived style file. The main body of the style description content of the derived style function and the style description content of the derived style file are generally the same. In addition to the style description body, the style description content of the derived style function also includes the function call logic.

[0084] After determining the function reference declaration, element style identifier style, and description content of the derived style function, the format of the function reference declaration, element style identifier style, and description content is converted. The format conversion result is then arranged according to a certain function format to obtain the derived style function. The specific data format to which the above function content is converted is not limited here; it is determined based on actual business needs. For example, the above function content can be converted to text format, array format, or other structured formats.

[0085] In a specific implementation, when multiple style resource files associated with the webpage structure file include style resource file a and style resource file b, assume that the content of style resource file b is as follows:

[0086] @import ". / a.css"

[0087] .b{color:red;}

[0088] Here, `a.css` represents style resource file `a`; `@import ". / a.css"` indicates the style reference relationship of style resource file `b`. Based on this, we can determine that style resource file `b` is a derived style file, and style resource file `a` is a base style file. `.b` is used to define the element style identifiers in style resource file `b`. `{color:red;}` represents the style description content of style resource file `b`.

[0089] Based on the function conversion method applicable to derived style files provided in the embodiments of this application, the derived style function b obtained by converting the above-mentioned style resource file b is as follows:

[0090] function a(prefix){...}

[0091] function b(prefix){return a(prefix)+'.'+prefix+'b''{color:red};}'

[0092] Here, `prefix` represents the style identifier parameter; `function a(prefix){...}` is the function reference declaration of the derived style function `b`; `'.'+prefix+'b'` is used to define the element style identifier of the derived style function `b`; `return a(prefix)` shows the function call logic of the derived style function, indicating that the base style function `a` is called based on the style identifier parameter; `'{color:red};}'` is the main body of the style description content. `return a(prefix)` and `'{color:red};}'` constitute the style description content of the base style function `b`.

[0093] The above technical solution provides a function conversion method suitable for derived style files, supports the conversion of derived style files into derived style functions, ensures the reusability of derived style functions, and provides technical support for setting the style of web page elements in web page structure files through function calls.

[0094] In an optional embodiment, converting the style resource file into the style resource function according to the file type includes: if the file type is a basic style file, then converting the style resource file into a basic style function.

[0095] If a style resource file is classified as a basic style file, it means that the style resource file does not need to depend on any other style resource files to achieve complete webpage element style settings. Since basic style files do not involve file reference logic, converting a basic style file to a basic style function is relatively easier than converting a derived style function.

[0096] Optionally, the style resource file is converted into a base style function, including: defining the element style identifier of the base style function based on the style identifier parameter and the original file identifier of the base style file; and determining the style description content of the base style function based on the style description content in the base style file.

[0097] The style description content in the base style file refers to the content used to define the styles of web page elements. The style description content is determined based on actual business needs and is not limited here. For example, the style description content can be used to define the color of web page elements and can also convert the style units of web page elements.

[0098] The style description content of the basic style function is determined based on the style description content in the basic style file. The main body of the style description content of the basic style function and the style description content of the basic style file are generally the same, but the format of the description content differs.

[0099] The element style identifier is determined based on the style identifier parameters and the original file identifier of the base style file. Optionally, the style identifier parameters and the original file identifier are concatenated, and the concatenated result is used as the element style identifier. The concatenation method between the style identifier parameters and the original file identifier is not limited here. For example, the style identifier parameters can be used as a prefix, infix, or suffix to the original file identifier and concatenated into the original file identifier.

[0100] After determining the style description content and element style identifiers of the basic style function, the style description content and element style identifiers are formatted. The format conversion results are then arranged according to a specific function format to obtain the basic style function. The specific data format to which the style description content and element style identifiers are converted is not limited here; it is determined based on actual business needs. For example, the style description content and element style identifiers can be converted to text format, array format, or other structured formats.

[0101] The above technical solution provides a function conversion method suitable for basic style files, supports the conversion of basic style files into basic style functions, ensures the reusability of basic style functions, and provides technical support for setting the styles of web page elements in web page structure files through function calls.

[0102] Example 4

[0103] Figure 4 This is a schematic diagram of the web page rendering device provided in Embodiment 4 of this application. This embodiment is applicable to situations where web page elements are rendered using style resource files. The device can be implemented by software and / or hardware and can be integrated into electronic devices such as smart terminals.

[0104] like Figure 4 As shown, the device may include: a style resource file determination module 410, a style resource file conversion module 420, and a style resource function call module 430.

[0105] The style resource file determination module 410 is used to determine multiple style resource files associated with the web page structure file;

[0106] The style resource file conversion module 420 is used to convert multiple style resource files into style resource functions respectively. The style resource function includes a style identifier parameter, which is used to uniquely identify the style resource function.

[0107] The style resource function call module 430 is used to call the style resource function based on the style identifier parameter to set the style of the web page elements in the web page structure file.

[0108] The technical solution of this application converts multiple style resource files associated with the webpage structure file into style resource functions, determines the element style identifier of the style resource function using style identifier parameters, and calls the style resource function based on the style identifier parameters to set the webpage element styles in the webpage structure file. This application improves webpage rendering efficiency by calling style resource functions without increasing file size, ensuring file loading speed. Furthermore, this application determines a unique element style identifier for the style resource function based on the style identifier parameters, achieving element style isolation. This allows different style resource functions to be distinguished based on the element style identifier, effectively avoiding element style conflicts caused by duplicate element style identifiers.

[0109] Optionally, the style resource file conversion module 420 includes: a dependency determination submodule, used to determine the dependency relationship between multiple style resource files; a file type determination submodule, used to determine the file type of the style resource file based on the dependency relationship, the file type including: basic style file and derived style file; and a style resource file conversion submodule, used to convert the style resource file into the style resource function according to the file type; the style resource function includes basic style function and derived style function.

[0110] Optionally, the style resource file conversion submodule includes a function specifically used to convert the style resource file into a basic style file if the file type is a basic style file.

[0111] Optionally, the style resource file conversion submodule includes: a basic style file determination unit, used to determine the basic style file that the derived style file depends on if the file type is a derived style file; a function reference relationship determination unit, used to determine the function reference relationship based on the dependency relationship between the derived style file and the basic style file; and a derived style file conversion unit, used to convert the derived style file into a derived style function based on the basic style function and the function reference relationship; wherein the basic style function is obtained by converting the basic style file.

[0112] Optionally, the derived style file conversion unit includes: a function reference declaration determination subunit, used to determine the function reference declaration of the derived style function based on the base style function and the function reference relationship; a style identifier definition determination subunit, used to define the element style identifier of the derived style function based on the style identifier parameter and the original file identifier of the derived style file; and a style description content determination unit, used to determine the style description content of the derived style function based on the function reference relationship and the style description content in the base style function and the derived style file.

[0113] Optionally, the apparatus further includes: a description modification operation acquisition module, configured to acquire a description modification operation for the style description content in the style resource function after converting the multiple style resource files into style resource functions respectively; and a style description content modification module, configured to modify the style description content of the style resource function according to the description modification operation.

[0114] Optionally, the file storage path acquisition module is used to acquire the file storage path of the style resource file before calling the style resource function based on the style identifier parameter; the style identifier parameter determination module is used to determine the style identifier parameter according to the file storage path.

[0115] The web page rendering apparatus provided in the embodiments of the invention can execute the web page rendering method provided in any embodiment of this application, and has the corresponding performance modules and beneficial effects for executing the web page rendering method.

[0116] The collection, storage, use, processing, transmission, provision, and disclosure of user information involved in the technical solution disclosed herein all comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0117] Example 5

[0118] Figure 5 A schematic diagram of an electronic device 510, which can be implemented using an embodiment, is shown. The electronic device 510 includes at least one processor 511 and a memory, such as a read-only memory (ROM) 512, a random access memory (RAM) 513, etc., communicatively connected to the at least one processor 511. The memory stores computer programs executable by the at least one processor. The processor 511 can perform various appropriate actions and processes based on the computer program stored in the ROM 512 or loaded from storage unit 518 into the RAM 513. The RAM 513 may also store various programs and data required for the operation of the electronic device 510. The processor 511, ROM 512, and RAM 513 are interconnected via a bus 514. An input / output (I / O) interface 515 is also connected to the bus 514.

[0119] Multiple components in electronic device 510 are connected to I / O interface 515, including: input unit 516, such as keyboard, mouse, etc.; output unit 517, such as various types of displays, speakers, etc.; storage unit 518, such as disk, optical disk, etc.; and communication unit 519, such as network card, modem, wireless transceiver, etc. Communication unit 519 allows electronic device 510 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0120] Processor 511 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 511 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 511 performs the various methods and processes described above, such as web page rendering methods.

[0121] In some embodiments, the web page rendering method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 518. In some embodiments, part or all of the computer program may be loaded and / or installed on electronic device 510 via ROM 512 and / or communication unit 519. When the computer program is loaded into RAM 513 and executed by processor 511, one or more steps of the web page rendering method described above may be performed. Alternatively, in other embodiments, processor 511 may be configured to execute the web page rendering method by any other suitable means (e.g., by means of firmware).

[0122] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0123] Computer programs used to implement the methods of this application may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0124] In the context of this application, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium can be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, 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 devices, magnetic storage devices, or any suitable combination of the foregoing.

[0125] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0126] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data processing servers), or computing systems that include middleware components (e.g., application servers), or computing systems that include frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0127] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0128] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this application can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this application can be achieved, and this is not limited herein.

[0129] The specific embodiments described above do not constitute a limitation on the scope of protection of this application. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A method of rendering a web page, the method comprising: The method comprises: determining a plurality of style resource files associated with a webpage structure file; converting the plurality of style resource files into style resource functions respectively, wherein the style resource functions comprise a style identifier parameter for uniquely determining the style resource functions; calling the style resource functions based on the style identifier parameter to set webpage element styles in the webpage structure file; wherein the calling of the style resource functions based on the style identifier parameter comprises passing the style identifier parameter into the style resource functions as a calling parameter to dynamically generate element style identifiers of the webpage element styles; wherein the converting of the plurality of style resource files into style resource functions comprises determining a dependency relationship among the plurality of style resource files; determining file types of the style resource files based on the dependency relationship, wherein the file types comprise a basic style file and a derived style file; and converting the style resource files into the style resource functions according to the file types; wherein the style resource functions comprise a basic style function and a derived style function; wherein the basic style file does not need to depend on other style resource files except itself to realize complete webpage element style setting functions; and wherein the derived style file needs to depend on other style resource files except itself to realize complete webpage element style setting functions; wherein the converting of the style resource files into the style resource functions according to the file types comprises: if the file type is a derived style file, determining a basic style file that the derived style file depends on; determining a function reference relationship according to the dependency relationship between the derived style file and the basic style file; and converting the derived style file into a derived style function according to the basic style function and the function reference relationship; wherein the basic style function is converted from the basic style file; wherein the converting of the derived style file into a derived style function according to the basic style function and the function reference relationship comprises: determining a function reference declaration of the derived style function according to the basic style function and the function reference relationship; defining an element style identifier of the derived style function according to the style identifier parameter and an original file identifier of the derived style file; and combining an execution result of the basic style function with style rule content in the derived style file based on the function reference relationship to determine style description content of the derived style function.

2. The method of claim 1, wherein, The converting of the style resource files into the style resource functions according to the file types comprises: if the file type is a basic style file, converting the style resource file into a basic style function.

3. The method of claim 1, wherein, After the converting of the plurality of style resource files into style resource functions, the method further comprises: obtaining a description modification operation for the style description content in the style resource functions; modifying the style description content of the style resource functions according to the description modification operation.

4. The method of claim 1, wherein, Before the calling of the style resource functions based on the style identifier parameter, the method further comprises: obtain a file storage path of the style resource file; determine the style identification parameter according to the file storage path.

5. A web page rendering apparatus, characterized by comprising: The device comprises: a style resource file determination module configured to determine a plurality of style resource files associated with a web page structure file; a style resource file conversion module configured to convert the plurality of style resource files into style resource functions respectively, the style resource functions comprising a style identification parameter, the style identification parameter being configured to uniquely determine the style resource functions; a style resource function calling module configured to call the style resource functions based on the style identification parameter and set web element styles in the web page structure file; wherein the calling of the style resource functions based on the style identification parameter comprises passing the style identification parameter into the style resource functions as calling parameters to dynamically generate element style identifications of the web element styles. The style resource file conversion module comprises a dependency relationship determination submodule configured to determine dependency relationships among the plurality of style resource files; a file type determination submodule configured to determine file types of the style resource files based on the dependency relationships, the file types comprising a basic style file and a derived style file; and a style resource file conversion submodule configured to convert the style resource files into the style resource functions according to the file types, the style resource functions comprising a basic style function and a derived style function; wherein the basic style file does not need to depend on other style resource files except itself to realize complete web element style setting functions; and the derived style file needs to depend on other style resource files except itself to realize complete web element style setting functions. The style resource file conversion submodule comprises a basic style file determination unit configured to determine a basic style file depended on by the derived style file if the file type is the derived style file; a function reference relationship determination unit configured to determine a function reference relationship according to the dependency relationship between the derived style file and the basic style file; and a derived style file conversion unit configured to convert the derived style file into a derived style function according to the basic style function and the function reference relationship; wherein the basic style function is converted from the basic style file. The derived style file conversion unit comprises a function reference declaration determination subunit configured to determine a function reference declaration of the derived style function according to the basic style function and the function reference relationship; a style identification definition determination subunit configured to define an element style identification of the derived style function according to the style identification parameter and an original file identification of the derived style file; and a style description content determination unit configured to combine an execution result of the basic style function with style rule content in the derived style file based on the function reference relationship to determine style description content of the derived style function.

6. A computer-readable storage medium having stored thereon a computer program, characterized in that, The program is executed by the processor to implement the web page rendering method in any one of claims 1-4.

7. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor implements the webpage rendering method according to any one of claims 1-4 when executing the computer program.

Images