CN110647699A - Web page rendering method, apparatus, computer equipment and storage medium - Google Patents

Abstract

The application relates to a rendering method and device of a Web page, computer equipment and a storage medium. The method comprises the following steps: acquiring an initial page rendering file; the page rendering file comprises an HTML file and a CSS file; identifying a style introduction statement containing a home page tag in the HTML file; acquiring a style class name corresponding to the home page label; identifying style description sentences corresponding to each style class name in the CSS file; filling and replacing a corresponding style introduction statement in the HTML file based on the style description statement to obtain an optimized page rendering file; and when the page browsing operation occurs, performing page rendering based on the optimized page rendering file. By adopting the method, the phenomenon of slow page loading can be relieved.

Description

Web page rendering method, apparatus, computer equipment and storage medium

technical field

The present application relates to the field of computer technology, and in particular, to a method, apparatus, computer device and storage medium for rendering a Web page.

Background technique

The Web page rendering mechanism is mainly based on HTML (Hyper Text Markup Language, hypertext markup language) file parsing to build a DOM (Document Object Model, Document Object Model) tree and CSSOM (CSS ObjectModel, CSS Object Model) tree, and then pass the DOM (Document Object Model, CSS Object Model) tree. The tree and CSSOM tree are combined and rendered to obtain a Web page. The CSSOM tree is rendered based on the external CSS style file introduced by the link in the HTML file, so all CSS style files need to be downloaded before page rendering, which reduces the page rendering efficiency and causes the slow loading of the Web page.

SUMMARY OF THE INVENTION

Based on this, it is necessary to provide a rendering method, apparatus, computer device and storage medium for a Web page that can alleviate the phenomenon of slow page loading, aiming at the above technical problems.

A method for rendering a Web page, the method comprising: obtaining an initial page rendering file; the page rendering file includes an HTML file and a CSS file; identifying a style import statement including a home page tag in the HTML file; obtaining the home page The style class name corresponding to the label; identifying the style description statement corresponding to each style class name in the CSS file; filling and replacing the corresponding style import statement in the HTML file based on the style description statement to obtain optimized page rendering file; when a page browsing operation occurs, page rendering is performed based on the optimized page rendering file.

In one embodiment, filling and replacing the corresponding style introduction statement in the HTML file based on the style description statement, to obtain an optimized page rendering file, includes: determining an initial applicable reference size of the CSS file; obtaining a preset The style adjustment information corresponding to the various target sizes respectively; according to the style adjustment information, the style parameters in the CSS file applicable to the reference size are adjusted to obtain the target CSS file corresponding to each of the target sizes; based on The style description sentences obtained from each target CSS file fill in and replace the corresponding style introduction sentences in the HTML file, so as to obtain an optimized page rendering file corresponding to each target size.

In one embodiment, performing page rendering based on the optimized page rendering file when a page browsing operation occurs includes: determining the screen size of the terminal where the page browsing operation occurs; The page rendering file for page rendering.

In one embodiment, the performing page rendering based on the optimized page rendering file when a page browsing operation occurs includes: when a home page browsing operation occurs, acquiring the optimized page rendering file; The optimized page rendering file is parsed to construct a DOM tree; the Web home page pointed to by the home page browsing operation is obtained by rendering based on the DOM tree.

In one embodiment, when a page browsing operation occurs, performing page rendering based on the optimized page rendering file includes: when a non-home page browsing operation occurs, determining the screen size of the terminal where the non-home page browsing operation occurs; Obtain the target CSS file corresponding to the screen size; parse the obtained target CSS file and the optimized HTML file respectively to construct a DOM tree and a CSSOM tree; render the non-home page based on the DOM tree and the CSSOM tree Browse the web page to which the action is directed.

In one embodiment, before the page rendering is performed based on the optimized page rendering file, the method further includes: intercepting a page browsing operation triggered by a target application; determining an environment identifier of the operating environment corresponding to the target application; Acquire corresponding routing configuration information according to the target application and the environment identifier; generate a page loading request corresponding to the page browsing operation; distribute the page loading request to the server or cache according to the routing configuration information; The page resource pulled by the server or the cache; the page resource includes the optimized page rendering file.

A rendering device for a Web page, the device comprising: a rendering file acquisition module for acquiring an initial page rendering file; the page rendering file includes an HTML file and a CSS file; a rendering file optimization module for identifying the HTML file The file contains the style introduction statement of the homepage label; obtains the style class name corresponding to the homepage label; identifies the style description statement corresponding to each style class name in the CSS file; fills and replaces the HTML based on the style description statement The corresponding style introduction statement in the file is used to obtain an optimized page rendering file; the page rendering module is used to perform page rendering based on the optimized page rendering file when a page browsing operation occurs.

In one embodiment, the rendering file optimization module is further configured to determine the initial applicable benchmark size of the CSS file; obtain style adjustment information corresponding to multiple preset target sizes; Adjust the style parameters in the CSS file of the reference size to obtain a target CSS file corresponding to each of the target sizes; fill and replace the corresponding HTML file based on the style description statement obtained from each target CSS file. style import statement to get the optimized page rendering file corresponding to each target size.

A computer device includes a memory and a processor, the memory stores a computer program, and when the processor executes the computer program, the processor implements the steps of the Web page rendering method provided in any one of the embodiments of the present application.

A computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, implements the steps of the Web page rendering method provided in any one of the embodiments of this application.

For the rendering method, device, computer equipment and storage medium of the above-mentioned Web page, the CSS style information required by the home page has been recorded in the optimized HTML file, and the home page can be quickly rendered without downloading an external CSS file; During the process, the terminal continues to download the CSS files of other pages without the user's perception, giving the CSS files more sufficient download time, thereby alleviating the phenomenon of slow page loading.

Description of drawings

Fig. 1 is the application scene diagram of the rendering method of Web page in one embodiment;

2 is a schematic flowchart of a method for rendering a Web page in one embodiment;

3 is a structural block diagram of an apparatus for rendering a Web page in one embodiment;

FIG. 4 is a diagram of the internal structure of a computer device in one embodiment.

Detailed ways

In order to make the purpose, technical solutions and advantages of the present application more clearly understood, the present application will be described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application, but not to limit the present application.

The rendering method for a Web page provided by the present application can be applied to the application environment shown in FIG. 1 . The terminal 102 communicates with the server 104 through the network. The terminal 102 can be, but is not limited to, various personal computers, notebook computers, smart phones, tablet computers and portable wearable devices, and the server 104 can be implemented by an independent server or a server cluster composed of multiple servers. The target application is running on the terminal 102 . The target application can be a single-page web application or a hybrid application. A rendering optimization tool is also running on the terminal 102 . Render optimization tools can be run as plugins for the target application. The rendering optimization tool can also be used as a standalone tool, running on a different terminal than the target application.

The rendering optimization tool is used to optimize the initial page rendering file for different target applications. Specifically, the rendering optimization tool obtains the initial page rendering file. Page rendering files include HTML files and CSS files. The rendering optimization tool recognizes the style import statement containing the home page tag in the HTML file, and obtains one or more style class names corresponding to the home page tag. The rendering optimization tool identifies the style description statement corresponding to each style class name in the CSS file. The rendering optimization component fills and replaces the corresponding style introduction statement in the HTML file with the style description statement, thereby completing the optimization of the page rendering file. The rendering optimization tool stores the optimized page rendering file to the server 104 serving the target application. It is easy to understand that the optimization process for the initial page rendering file can be performed on the server 104, which is not limited. A cache for storing page rendering files corresponding to the target application is deployed in the terminal 102 . When the terminal 102 initiates the target application, the terminal 102 pulls the optimized page rendering file from the server 104 and stores it in the cache. When the terminal 102 performs a page browsing operation based on the target application, the terminal 102 performs page rendering based on the optimized page rendering file. In the rendering process of the above Web page, the CSS style information required by the first rendered page (hereinafter referred to as the home page) has been recorded in the optimized HTML file, and the home page can be quickly rendered without downloading an external CSS file. During the process, the terminal continues to download the CSS files of other pages without the user's perception, giving the CSS files more sufficient download time, thereby alleviating the phenomenon of slow page loading.

In one embodiment, as shown in FIG. 2 , a method for rendering a Web page is provided, and the method is applied to the terminal in FIG. 1 as an example for description, including the following steps:

Step 202: Obtain an initial page rendering file; the page rendering file includes an HTML file and a CSS file.

The initial page rendering file includes an HTML file (referred to as an initial HTML file) and external files introduced based on the initial HTML file, such as a JS file, a CSS file, and the like. The initial page rendering file also includes pictures or multimedia resources involved in the initial HTML file. Among them, the HTML file is a descriptive text composed of HTML commands, and the HTML commands can describe page elements such as text, graphics, animation, sound, tables, and links. The JS file is used to operate the page elements in the HTML file to produce dynamic effects on the Web page; the CSS file is used to render the page elements in different styles (such as font, font size, color, etc.).

Step 204, identifying the style introduction statement including the home page tag in the HTML file.

Step 206: Obtain the style class name corresponding to the homepage label.

The target application can display multiple pages. The HMTL file records relevant attribute statements corresponding to each page in the target application, such as style attribute statements. Relevant attribute statements include HTML tags and class attributes. HTML tags are the most basic units in the HTML language, and are keywords surrounded by angle brackets, such as <html>, <div>, etc. The target application can display multiple pages. The home page tag refers to the HTML tag corresponding to the first page of the target application. Different HTML tags will be followed by different class attributes, such as style attributes, computed attributes, event listener attributes, etc. Attribute information can be recorded based on other external files. For example, an external CSS file for recording style properties is linked to the HTML file by using a <link> tag within the <head> tag, such as <link href="base.css" rel="stylesheet" type="text/ css"/>. Among them, base.css is the CSS file name.

A style attribute statement can be a style introduction statement or a style description statement. The style description statement is a statement used to record specific style information such as font, font size or color in the HTML file. A style import statement refers to a statement in an HTML file that is used to import an external CSS file. The style introduction statement adopts the method of asynchronously injecting the CSS file, that is, dynamically creating the link element, setting the href as the address of the CSS file, and inserting it into the head header of the HTML file to realize the asynchronous loading of the CSS file. The style import statement containing the home page tag refers to the style import statement corresponding to the first page of the target application.

Step 208: Identify the style description statement corresponding to each style class name in the CSS file.

When the page efficiency of the target application needs to be optimized, a rendering optimization tool can be used to optimize the page rendering file corresponding to the target application. Specifically, the style import statement includes looking up the style class name upon which the DOM tree is built. The CSS file also includes the same style class name. The rendering optimization tool searches the CSS file for the style class name corresponding to the home page tag, and extracts the style description statement corresponding to each style class name found.

Step 210 , filling and replacing corresponding style introduction statements in the HTML file based on the style description statements, to obtain an optimized page rendering file.

The rendering optimization tool removes the style import statement from the HTML file and changes it to the corresponding style description statement. The rendering optimization tool packages the replaced HTML files (referred to as target HTML files), CSS files, etc., to obtain optimized page rendering files.

Step 212, when a page browsing operation occurs, perform page rendering based on the optimized page rendering file.

When the terminal acquires the page browsing operation triggered by the target application, the terminal loads the optimized page rendering file, and performs page rendering based on the optimized page rendering file.

It should be noted that the loading speed of the initial multiple pages of the target application can also be optimized according to the requirements in the above manner. When comprehensive consideration should be given to the clarity of the structure of the page rendering file after optimization, it should be avoided that the HTML file structure is disorganized by replacing the style introduction statement corresponding to the page with the style description statement.

In this embodiment, the style class name corresponding to the home page label can be obtained by identifying the style introduction statement containing the home page label in the HTML file; by identifying the style description statement corresponding to each style class name in the CSS file, and based on the style description statement By filling in and replacing the corresponding style introduction statement in the HTML file, the page rendering file can be optimized; when subsequent page browsing operations occur, page rendering can be performed based on the optimized page rendering file. Since the CSS style information required by the home page adopts the style inline method, it has been directly recorded in the optimized HTML file, and the home page can be quickly rendered without downloading an external CSS file. Continuously download CSS files of other pages without perception, giving CSS files more time to download, which can alleviate the phenomenon of slow page loading.

In one embodiment, filling and replacing corresponding style introduction statements in the HTML file based on the style description statements, to obtain an optimized page rendering file, includes: determining the applicable reference size of the initial CSS file; obtaining preset multiple target sizes respectively Corresponding style adjustment information; adjust the style parameters in the CSS file applicable to the reference size according to the style adjustment information, and obtain the target CSS file corresponding to each target size; based on the style description statement obtained from each target CSS file Fill in and replace the corresponding style introduction statement in the HTML file to obtain the optimized page rendering file corresponding to each target size.

The CSS file (referred to as the initial CSS file) in the initial page rendering file records the CSS style applicable to a certain screen size (referred to as the reference size). For example, the CSS file is suitable for a terminal with a screen size of 960px, and 960px is the reference size corresponding to the CSS file. If the display style of the reference size prevails, some page content may not be visible on terminal screens of other sizes, or some page content may be empty.

Render optimization tools are also used to separate CSS files for different sized terminals. Specifically, the rendering optimization tool is preset with style adjustment information corresponding to various target sizes. The style adjustment information includes proportional information for increasing or decreasing style parameters in the CSS file. The rendering optimization tool adjusts the style parameters in the CSS file applicable to the reference size according to the style adjustment information, and obtains the target CSS file corresponding to each target size. The style information applicable to terminals of different sizes is separately recorded in different target CSS files, and the media query property of link can be used to reduce the time required for loading CSS files.

In one embodiment, when a page browsing operation occurs, performing page rendering based on the optimized page rendering file includes: determining the screen size of the terminal where the page browsing operation occurs; performing page rendering based on the optimized page rendering file corresponding to the screen size render.

The rendering optimization tool packages the target HTML files and target CSS files suitable for terminals of different target sizes by matching the styles of screens of different sizes, and obtains optimized page rendering files corresponding to each target size. When the terminal acquires the page browsing operation triggered by the user in the target application, it only needs to pull the optimized page rendering file corresponding to the screen size of the terminal to perform page rendering.

In this embodiment, corresponding CSS files are built for different target sizes in advance. When pages need to be loaded based on target applications running on terminals of different sizes, it is only necessary to call the corresponding CSS files to build a DOM tree, and adapt to the terminal size Changing the page style avoids the tediousness of dynamically adjusting the style parameters every time the page is loaded in the traditional method, once and for all, and can also improve the page loading speed.

In one embodiment, when a page browsing operation occurs, page rendering is performed based on an optimized page rendering file, including: when a home page browsing operation occurs, obtaining an optimized page rendering file; parsing the optimized page rendering file , build a DOM tree; render based on the DOM tree to obtain the Web home page pointed to by the home page browsing operation.

The home page browsing operation refers to an operation that the user requests to load the home page of the target application. When the user accesses the home page of the target application through the terminal, the DNS (Domain Name System, DNS) server searches for the corresponding IP address according to the domain name provided by the user based on the home page browsing operation. The DNS server sends an http (Hyper TextTransfer Protocol, hypertext transfer protocol) request to the network server corresponding to the IP address. The web server parses the http request and sends the http request to the database server. The database server returns the optimized page rendering file corresponding to the http request to the web server. The web server generates an http response based on the optimized page rendering file, and returns the http response to the target application. The target application parses the http response and downloads the optimized page rendering file.

The target application decodes the byte stream in the optimized page rendering file to obtain a character stream, interprets the character stream into words through a lexical analyzer, builds nodes based on the obtained words, and finally uses these nodes to build a DOM tree. The DOM tree is a multi-fork tree structure, including a document node, an element (Element) node, an attribute node, an Entity node, a comment (Comment) node, and the like.

It is worth noting that this embodiment is applicable to various target applications, such as a single-page web application, a multi-page web application, and the like. If the target application is a multi-page web application, the technical advantages of this embodiment will be more obvious, and each web page in the multi-page web application can be rendered only by relying on the DOM tree, thereby improving the loading speed of each web page . For single-page web applications, it can improve the loading speed of the home page.

In this embodiment, the rendering optimization tool is used to extract the styles required for the first screen in the CSS file, and the extracted target styles are inlined into the HTML file, so that the rendering of the first screen of the Web only needs to rely on the DOM tree without waiting for all the The home page can be rendered only after the CSS file is loaded, and the home page can be rendered only by loading the target Html file, reducing the loading time of the first screen and improving the loading speed of the home page.

In one embodiment, when a page browsing operation occurs, performing page rendering based on the optimized page rendering file includes: when a non-home page browsing operation occurs, determining the screen size of the terminal where the non-home page browsing operation occurs; obtaining the corresponding screen size The target CSS file is obtained; the obtained target CSS file and the optimized HTML file are parsed respectively to construct a DOM tree and a CSSOM tree; based on the DOM tree and CSSOM tree rendering, the Web page pointed to by the non-home page browsing operation is obtained.

A non-home page browsing operation refers to an operation in which a user requests to load pages other than the home page of the target application. For the rendering of other pages except the home page, it is still necessary to download the external target CSS file, and parse the target CSS file to build the CSSOM tree. Other pages can only be rendered based on the DOM tree and CSSOM tree.

The target application dynamically obtains the current screen size according to the triggered non-home page browsing operation. The target application pulls the matching target HTML file and target CSS file through the media media query of the link according to the current screen size. The target application parses the target Html file and the target CSS file respectively, and constructs a DOM tree and a CSSOM tree. At this time, the rendered CSSOM tree may no longer contain the style information of the home page. The target application renders the web page based on the DOM tree and the CSSOM tree, and displays the web page.

In this embodiment, based on multiple preset CSS files, page rendering can be better adapted to terminal screens of different sizes.

In one embodiment, before page rendering is performed based on the optimized page rendering file, the method further includes: intercepting a page browsing operation triggered by the target application; determining the environment identifier of the operating environment corresponding to the target application; obtaining the corresponding environment identifier according to the target application and the environment identifier generate the page loading request corresponding to the page browsing operation; send the page loading request to the server or cache according to the routing configuration information; receive page resources pulled from the server or cache; page resources include optimized page rendering files .

The page loading component is integrated in the target application. As a reverse proxy, the page loading component is used to monitor and intercept page browsing operations triggered by the user based on the target application by calling an API (Application Programming Interface, application programming interface) exposed by the target application. The page browsing operation may be an operation of jumping to a target website triggered by a URL link or a search entry, or an operation of jumping to a page triggered by a control in a web page, and the like.

When a page browsing operation occurs, the page loading component determines the environment identifier of the operating environment corresponding to the target application. The running environment includes a development environment, a test environment and a production environment. The page loading component provides environment options corresponding to each running environment. By selecting different environment options, the page loading component can be triggered to be in different working modes, and the user can pre-configure the routing information for different target applications in different operating environments (hereinafter referred to as routing configuration information).

The page loading component obtains the corresponding routing configuration information according to the target application and the environment identifier. The routing configuration information is used to specify the resource acquisition type corresponding to the resource acquisition request. There are two types of resource acquisition: server-based pull and cache-based pull. In other words, the routing configuration information is used to specify which resource acquisition requests need to pull page resources from the server, and which resource acquisition requests pull page resources from the local cache. The routing configuration information includes resource identifiers of page resources and corresponding access routes. The access route may be at least one of access domain name, protocol, port, URL (Uniform ResourceLocator, the same resource locator), path or regular matching. In other words, the page loading component supports users to flexibly configure routing by accessing domain names, protocols, ports, URLs, paths, or regular matching.

The access domain names corresponding to different target applications are different, so the routing configuration information corresponding to different target applications is different. The routing configuration information corresponding to different environment options is also different. For example, in the development environment, in order to facilitate testing, developers expect that each line of code can be modified to view the page effect in real time. At this time, all resource acquisition requests can be configured to pull page resources from the server. For the production environment, in order to take into account the page loading efficiency, you can configure only some resource acquisition requests to pull page resources from the server, or all resource acquisition requests to pull page resources from the cache.

The target application generates a corresponding resource acquisition request according to the page browsing operation triggered by the user. Completing the loading of a web page may require pulling multiple page resources. The page resources include the above-mentioned page rendering files, as well as pictures or multimedia resources involved in the html file.

The page loading component offloads the resource acquisition request to the server or cache according to the routing configuration information. Specifically, the page loading component determines the target page pointed to by the page browsing operation, and one or more page resources required for rendering the target page, which are recorded as target resources. The page loading component queries the access route of each target resource according to the routing configuration information. The resource acquisition type corresponding to the target resource can be determined according to the access route of the target resource. For example, if the access route is the first route, the resource acquisition type is "server-based pull", and the page loading component sends the resource acquisition request of the corresponding target resource to the server. If the access route is the second route, the resource acquisition type is "cache-based pull", and the page loading component sends the resource acquisition request of the corresponding target resource to the local cache.

The terminal renders the page pointed to by the page browsing operation according to the pulled page resource, and displays the rendered current page through the target application.

In this embodiment, by monitoring and intercepting page browsing operations triggered by target applications, different response modes can be adopted for different page browsing operations; Determine the routing configuration information corresponding to the current page browsing operation; according to the routing configuration information, the page loading request corresponding to the page browsing operation can be offloaded and sent to the server or cache to achieve the effect of a cache switch. By adding the page resource version number to its URL, the page can be updated in time without any modification to the target application code. In addition, based on the preset routing configuration information, the timeliness of page update and page loading efficiency can be taken into account, and it can also meet the development needs of users in different development links of the target application.

It should be understood that although the various steps in the flowchart of FIG. 2 are shown in sequence according to the arrows, these steps are not necessarily executed in the sequence shown by the arrows. Unless explicitly stated herein, the execution of these steps is not strictly limited to the order, and these steps may be performed in other orders. Moreover, at least a part of the steps in FIG. 2 may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed and completed at the same time, but may be executed at different times. The execution of these sub-steps or stages The sequence is also not necessarily sequential, but may be performed alternately or alternately with other steps or sub-steps of other steps or at least a portion of a phase.

In one embodiment, as shown in FIG. 3, a rendering apparatus for a Web page is provided, including: a rendering file obtaining module 302, a rendering file obtaining module 302, and a page rendering module 306, wherein:

The rendering file obtaining module 302 is configured to obtain an initial page rendering file; the page rendering file includes HTML files and CSS files.

The rendering file optimization module 304 is used to identify the style introduction statement including the home page tag in the HTML file; obtain the style class name corresponding to the home page tag; identify the style description statement corresponding to each style class name in the CSS file; fill in the style description statement based on Replace the corresponding style introduction statement in the HTML file to obtain the optimized page rendering file.

The page rendering module 306 is configured to perform page rendering based on the optimized page rendering file when a page browsing operation occurs.

In one embodiment, the rendering file optimization module 304 is further configured to determine a reference size applicable to the initial CSS file; obtain style adjustment information corresponding to multiple preset target sizes; Adjust the style parameters in the file to obtain the target CSS file corresponding to each target size; fill in and replace the corresponding style import statement in the HTML file based on the style description statement obtained from each target CSS file, and obtain the corresponding style for each target size. The optimized page rendering file.

In one embodiment, the page rendering module 306 is further configured to determine the screen size of the terminal where the page browsing operation occurs; and perform page rendering based on the optimized page rendering file corresponding to the screen size.

In one embodiment, the page rendering module 306 is further configured to obtain an optimized page rendering file when a home page browsing operation occurs; parse the optimized page rendering file to construct a DOM tree; and obtain a home page browsing operation based on DOM tree rendering The Web home page pointed to.

In one embodiment, the page rendering module 306 is further configured to determine the screen size of the terminal where the non-home page browsing operation occurs when a non-home page browsing operation occurs; obtain a target CSS file corresponding to the screen size; The resulting HTML files are parsed respectively to construct a DOM tree and a CSSOM tree; based on the DOM tree and CSSOM tree rendering, the Web pages pointed to by non-home page browsing operations are obtained.

In one embodiment, the above-mentioned apparatus further includes a page shunt loading module 308 for intercepting page browsing operations triggered by the target application; determining the environment identifier of the operating environment corresponding to the target application; obtaining the corresponding routing configuration information according to the target application and the environment identifier ; Generate a page loading request corresponding to the page browsing operation; send the page loading request to the server or cache according to the routing configuration information; receive page resources pulled from the server or cache; page resources include optimized page rendering files.

For the specific limitation of the rendering apparatus of the Web page, reference may be made to the limitation of the rendering method of the Web page above, which will not be repeated here. Each module in the above-mentioned Web page rendering apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules can be embedded in or independent of the processor in the computer device in the form of hardware, or stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

In one embodiment, a computer device is provided, and the computer device may be a terminal, and its internal structure diagram may be as shown in FIG. 4 . The computer equipment includes a processor, memory, a network interface, a display screen, and an input device connected by a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium, an internal memory. The nonvolatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the execution of the operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a method for rendering a Web page is implemented. The display screen of the computer equipment may be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment may be a touch layer covered on the display screen, or a button, a trackball or a touchpad set on the shell of the computer equipment , or an external keyboard, trackpad, or mouse.

Those skilled in the art can understand that the structure shown in FIG. 3 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer equipment to which the solution of the present application is applied. Include more or fewer components than shown in the figures, or combine certain components, or have a different arrangement of components.

A computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a processor, implements the steps of the Web page rendering method provided in any one of the embodiments of this application.

Those skilled in the art can understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium , when the computer program is executed, it may include the processes of the above-mentioned method embodiments. Wherein, any reference to memory, storage, database or other medium used in the various embodiments provided in this application may include non-volatile and/or volatile memory. Nonvolatile memory may include read only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain Road (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

The technical features of the above embodiments can be combined arbitrarily. In order to make the description simple, all possible combinations of the technical features in the above embodiments are not described. However, as long as there is no contradiction in the combination of these technical features It is considered to be the range described in this specification.

The above examples only represent several embodiments of the present application, and the descriptions thereof are relatively specific and detailed, but should not be construed as a limitation on the scope of the invention patent. It should be pointed out that for those skilled in the art, without departing from the concept of the present application, several modifications and improvements can be made, which all belong to the protection scope of the present application. Therefore, the scope of protection of the patent of the present application shall be subject to the appended claims.

Claims (10)

1. A method of rendering a Web page, the method comprising:

acquiring an initial page rendering file; the page rendering file comprises an HTML file and a CSS file;

identifying a style introduction statement containing a home page tag in the HTML file;

acquiring a style class name corresponding to the home page label;

identifying style description sentences corresponding to each style class name in the CSS file;

filling and replacing a corresponding style introduction statement in the HTML file based on the style description statement to obtain an optimized page rendering file;

and when the page browsing operation occurs, performing page rendering based on the optimized page rendering file.

2. The method of claim 1, wherein the step of replacing the corresponding style introduction statement in the HTML file based on the style description statement filling to obtain an optimized page rendering file comprises:

determining a reference size applicable to the initial CSS file;

acquiring preset pattern adjustment information corresponding to various target sizes;

adjusting style parameters in the CSS files suitable for the reference size according to the style adjustment information to obtain target CSS files corresponding to each target size;

and filling and replacing corresponding style introduction sentences in the HTML file based on style description sentences acquired from each target CSS file to obtain an optimized page rendering file corresponding to each target size.

3. The method of claim 2, wherein performing page rendering based on the optimized page rendering file when a page browsing operation occurs comprises:

determining the screen size of a terminal in which page browsing operation occurs;

and performing page rendering based on the optimized page rendering file corresponding to the screen size.

4. The method of claim 1, wherein performing page rendering based on the optimized page rendering file when a page browsing operation occurs comprises:

when the home page browsing operation occurs, acquiring the optimized page rendering file;

analyzing the optimized page rendering file to construct a DOM tree;

and rendering based on the DOM tree to obtain the Web home page pointed by the home page browsing operation.

5. The method of claim 2, wherein performing page rendering based on the optimized page rendering file when a page browsing operation occurs comprises:

when non-home page browsing operation occurs, determining the screen size of a terminal where the non-home page browsing operation occurs;

acquiring a target CSS file corresponding to the screen size;

respectively analyzing the acquired target CSS file and the optimized HTML file, and constructing a DOM tree and a CSSOM tree;

and rendering the Web page pointed by the non-home page browsing operation based on the DOM tree and the CSSOM tree.

6. The method of claim 1, wherein prior to performing page rendering based on the optimized page rendering file, the method further comprises:

intercepting page browsing operation triggered based on a target application;

determining an environment identifier of a running environment corresponding to the target application;

acquiring corresponding routing configuration information according to the target application and the environment identifier;

generating a page loading request corresponding to the page browsing operation;

distributing and sending the page loading request to a server or a cache according to the routing configuration information;

receiving a page resource pulled from the server or cache; the page resources include an optimized page rendering file.

7. An apparatus for rendering a Web page, the apparatus comprising:

the rendering file acquisition module is used for acquiring an initial page rendering file; the page rendering file comprises an HTML file and a CSS file;

the rendering file optimization module is used for identifying a style introduction statement containing a home page tag in the HTML file; acquiring a style class name corresponding to the home page label; identifying style description sentences corresponding to each style class name in the CSS file; filling and replacing a corresponding style introduction statement in the HTML file based on the style description statement to obtain an optimized page rendering file;

and the page rendering module is used for rendering the page based on the optimized page rendering file when page browsing operation occurs.

8. The apparatus of claim 7, wherein the render file optimization module is further configured to determine an initial reference size for the CSS file; acquiring preset pattern adjustment information corresponding to various target sizes; adjusting style parameters in the CSS files suitable for the reference size according to the style adjustment information to obtain target CSS files corresponding to each target size; and filling and replacing corresponding style introduction sentences in the HTML file based on style description sentences acquired from each target CSS file to obtain an optimized page rendering file corresponding to each target size.

9. A computer device comprising a memory and a processor, the memory storing a computer program, wherein the processor implements the steps of the method of any one of claims 1 to 6 when executing the computer program.

10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 6.

Images