CN112328930B

CN112328930B - Webpage rendering method, server, client and system based on cobalt

Info

Publication number: CN112328930B
Application number: CN201910718299.7A
Authority: CN
Inventors: 王良
Original assignee: Vidaa Netherlands International Holdings BV
Current assignee: Vidaa Netherlands International Holdings BV
Priority date: 2019-08-05
Filing date: 2019-08-05
Publication date: 2023-10-20
Anticipated expiration: 2039-08-05
Also published as: CN112328930A

Abstract

The embodiment of the application discloses a cobalt-based page rendering method, a server, a client and a system. According to the technical scheme, the background attribute is added into the first CSS file to generate the second CSS file, and the background attribute comprises the storage position of the picture. Because the background attribute in the second CSS file of the technical scheme shown in the embodiment of the application comprises the storage position of the picture, in the subsequent rendering process, the corresponding picture can be found based on the storage position of the picture, thereby realizing the rendering of the picture. The technical scheme of the embodiment of the application can effectively solve the defect that the coblt browser cannot effectively analyze the picture tag, and can achieve the picture display effect.

Description

Webpage rendering method, server, client and system based on cobalt

Technical Field

The application relates to the technical field of display pictures, in particular to a coblt-based page rendering method, a server, a client and a system.

Background

Typically, the rendering process of the page is implemented by a rendering system. Fig. 1 is an exemplary rendering system comprising a server 1 and a client 2. As can be seen from fig. 1, the server 1 receives a page load request from the client 2, and returns page content to the client 2 based on the page load request. The page content is carried by an HTML (Hyper Text Markup Language ) file and a CSS (Cascading Style Sheet, cascading style sheet) file, the HTML file is an element object of page display and comprises information such as text pictures, and the CSS file can dynamically format each element of a webpage in cooperation with various script languages. The client 2 is provided with an HTML parser 21, a css parser 22 (Cascading Style Sheet, cascading style sheets), a rendering tree construction module 23, a layout module 24, and a UI25 (User Interface). After receiving the page content, the client 2 first parses the received HTML file into a DOM tree (Document Object Model, file object model) by the HTML parser 21, where the DOM tree structure may refer to fig. 2, and the process of generating the DOM tree includes: the HTML parser 21 converts the HTML file into byte content readable by a web disk in the form of a DOM tree, wherein the presentation format of the byte content is: the format of + [ element object ]. The CSS parser 22 adds style information to each element object in the DOM tree based on the CSS file, generating a CSSOM tree; then, the rendering tree construction unit 23 merges the DOM tree with the CSSOM tree to generate another tree-rendering tree for rendering, and the layout module 24 performs layout processing on each node of the rendering tree to determine the display position thereof on the screen; finally, the back-end layer of the UI25 renders each node of the rendering tree to generate a rendered page.

In general, clients adopt different browsers to render pages, and certain differences exist in corresponding rendering processes, so that the Cobalt browser has the advantages of providing rich application program development environments with minimum resource consumption, realizing smooth interactive operation by using flexible and changeable web forms and the like, and is widely applied to clients.

The Cobalt browser can provide a rich application development environment for page rendering with minimum resource consumption, but in the actual rendering process, the Cobalt browser has poor support on various tags of the HTML file, and if the HTML file contains tags related to pictures, the UI cannot display corresponding pictures when rendering related pictures.

Disclosure of Invention

In order to solve the technical problems, the embodiment of the application discloses a webpage rendering method, a server, a client and a system based on cobalt.

The first aspect of the embodiment of the application shows a coblt-based page rendering system, which comprises a client and a server connected with the client;

the server is configured to: configuring an HTML file and a first CSS file, wherein the HTML file does not comprise picture information;

Adding a background attribute in the first CSS file to generate a second CSS file, wherein the background attribute comprises a storage position of a picture;

establishing a connection between the HTML file and the second CSS file to generate page content;

establishing a corresponding relation between a page loading request and the page content;

receiving a page loading request sent by a client, and sending corresponding page contents to the client based on the corresponding relation between the page loading request and the page contents;

the client is configured to: after sending a page loading request to a server, receiving page content returned by the server based on the page loading request;

analyzing the HTML file to generate a DOM tree;

generating a CSSOM tree according to the DOM tree and the second CSS file, wherein the CSSOM tree comprises: style information and background attributes corresponding to each element object of the DOM tree;

merging the CSSOM tree and the DOM tree to generate a rendering tree;

rendering and drawing each node of the rendering tree and the background attribute to generate a display page.

A second aspect of an embodiment of the present application shows a coblt-based server for page rendering, the server configured to:

configuring an HTML file and a first CSS file, wherein the HTML file does not comprise picture information;

and receiving a page loading request sent by the client, and sending corresponding page contents to the client based on the corresponding relation between the page loading request and the page contents.

A third aspect of the embodiments of the present application shows a coblt-based page rendering terminal, where the client is configured to: after sending a page loading request to a server, receiving page content returned by the server based on the page loading request;

analyzing the HTML file to generate a DOM tree;

merging the CSSOM tree and the DOM tree to generate a rendering tree;

A fourth aspect of the embodiment of the present application shows a coblt-based page rendering method, where the method is applied to a server, and the method is characterized in that the method includes:

A fifth aspect of the embodiment of the present application shows a coblt-based page rendering method, applied to a client, including:

after sending a page loading request to a server, receiving page content returned by the server based on the page loading request, wherein the page content comprises: an HTML file and a second CSS file, the HTML file not including picture information, the second CSS file including: a background attribute, wherein the background attribute comprises a storage location of a picture;

analyzing the HTML file to generate a DOM tree;

Merging the CSSOM tree and the DOM tree to generate a rendering tree;

According to the technical scheme, the embodiment of the application shows a coblt-based page rendering method, a server, a client and a system. In the technical scheme shown in the embodiment of the application, a server adds a background attribute to a first CSS file to generate a second CSS file, wherein the background attribute comprises a storage position of a picture. Because the background attribute in the second CSS file of the technical scheme shown in the embodiment of the application comprises the storage position of the picture, in the subsequent rendering process, the client can find the corresponding picture based on the storage position of the picture, thereby realizing the rendering of the picture and achieving the picture display effect. The technical scheme of the embodiment of the application can effectively solve the defect that the coblt browser cannot effectively analyze the picture tag, perfectly find an alternative scheme of the picture tag, and achieve the picture display effect.

Drawings

In order to more clearly illustrate the technical solution of the present application, the drawings that are needed in the embodiments will be briefly described below, and it will be obvious to those skilled in the art that other drawings can be obtained from these drawings without inventive effort.

FIG. 1 is a flow chart of a rendering process of an HTML web page based on a Cobalt browser;

FIG. 2 is a schematic diagram of a structure of a DOM tree according to an example;

FIG. 3 is a schematic diagram of a coblt-based page rendering system according to an example;

FIG. 4 is a schematic diagram of a structure of a CSS tree according to an example;

FIG. 5 is a schematic diagram of a structure of a rendering tree according to an example;

fig. 6 is a schematic structural view of a first size acquisition unit according to a preferred embodiment;

fig. 7 is a schematic structural view of a second size acquisition unit according to a preferred embodiment;

FIG. 8 is a schematic diagram of a server according to a preferred embodiment;

FIG. 9 is a schematic diagram of a client shown in accordance with a preferred embodiment;

FIG. 10 is a flow chart illustrating a coblt-based page rendering method in accordance with a preferred embodiment;

FIG. 11 is a flow chart illustrating a coblt-based page rendering method in accordance with a preferred embodiment.

Detailed Description

In order to make the technical solution of the present application better understood by those skilled in the art, the technical solution of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the present application without making any inventive effort, shall fall within the scope of the present application.

All other embodiments, which can be made by a person skilled in the art without inventive effort, based on the exemplary embodiments shown in the present application are intended to fall within the scope of the present application. Furthermore, while the present disclosure has been described in terms of an exemplary embodiment or embodiments, it should be understood that each aspect of the disclosure may be separately implemented as a complete solution.

It should be understood that the terms "first," "second," "third," and the like in the description and in the claims and in the above-described figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate, such as where appropriate, for example, implementations other than those illustrated or described in connection with the embodiments of the application.

Furthermore, the terms "comprise" and "have," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a product or apparatus that comprises a list of elements is not necessarily limited to those elements expressly listed, but may include other elements not expressly listed or inherent to such product or apparatus.

The term "module" as used in this disclosure refers to any known or later developed hardware, software, firmware, artificial intelligence, fuzzy logic, or combination of hardware and/or software code that is capable of performing the function associated with that element.

In order to solve the technical problems, the embodiment of the application shows a cobalt-based page rendering method, a server, a client and a system. The configuration of the respective components of the system will be described in detail with reference to specific examples.

Example 1:

an embodiment of the present application in a first aspect shows a coblt-based page rendering system, please refer to fig. 3. The system server and at least one client are connected through the Internet, the server can be an independent service device or a cluster service device formed by a plurality of independent service devices, and the server can provide background service for browser Application (APP); the client may refer to a coblt-based browser application, or may refer to a terminal device installed with a coblt browser APP, where the terminal device may include, for example, a smart phone, a tablet computer, a notebook computer, a desktop computer, a vehicle-mounted terminal, an intelligent wearable device, and the embodiment of the application is not limited.

Specifically, with continued reference to fig. 3, the server includes: an acquisition unit 31, a second CSS file generation unit 32 connected to an output terminal of the acquisition unit 31, a page content generation unit 33 connected to an output terminal of the second CSS file generation unit 32, a correspondence relation establishment unit 34 connected to an output terminal of the page content generation unit 33, and a page load request reception unit 35 connected to an output terminal of the correspondence relation establishment unit 34, and a page content transmission unit 36 connected to an output terminal of the page load request reception unit 35. A configuration unit 31 for configuring an HTML file and a first CSS file, the HTML file not including picture information.

In the technical solution shown in the embodiment of the application, the HTML file is a descriptive text composed of HTML commands. The structure of the HTML file includes two major parts, namely a header (Head) and a Body (Body), wherein the header describes information required by the coblt browser, and the Body can be display contents (also called element objects in the technical scheme shown in the embodiment of the application) such as characters, tables, links and the like.

In the technical solution shown in the embodiment of the application, the first CSS file is a computer language for representing the style of the HTML file. The first CSS file may dynamically format the element objects in each HTML file in coordination with various scripting languages. In the technical solution shown in the embodiment of the present application, the first CSS file records an attribute value corresponding to an element object in an HTML file.

And a second CSS file generating unit 32, configured to add a background attribute to the first CSS file, and generate a second CSS file, where the background attribute includes a storage location of a picture.

In the technical scheme shown in the embodiment of the application, a background attribute (background) is added to the first CSS file, and a second CSS file is generated, wherein the background attribute comprises a storage position of a picture. Because the background attribute in the second CSS file of the technical scheme shown in the embodiment of the application comprises the storage position of the picture, in the subsequent rendering process, the corresponding picture can be found based on the storage position of the picture, thereby realizing the rendering of the picture.

Therefore, the second CSS file includes the attribute value and the background attribute corresponding to the element object in the HTML file, so that the second CSS not only dynamically formats each element of the webpage in cooperation with various scripting languages, but also can statically modify the webpage based on the picture contained in the background attribute.

And a page content generating unit 33, configured to establish a connection between the HTML file and the second CSS file, and generate page content.

The correspondence establishing unit 34 is configured to establish a correspondence between the page loading request and the page content.

The page load request receiving unit 35 is configured to receive a page load request sent by the client.

The page content sending unit 36 is configured to send the corresponding page content to the client based on the correspondence between the page loading request and the page content.

Typically, the page load request carries a web site that requires access to the web page. In the scheme shown in the embodiment of the application, the server prestores the page content with the binding relation with the website, so that after receiving the page loading request sent by the client, the server can further acquire the page content matched with the page loading request and send the page content to the client.

The client can send a page loading request to the server according to the operation of the user on the display interface, so that the corresponding HTML page is displayed. The server can store various page contents, and can acquire corresponding page contents based on a page loading request sent by the client and send the corresponding page contents to the client. In the practical application process, the server can also perform page rendering based on the page loading request sent by the client, and send the obtained HTML page to the client.

The process of rendering the page by the client according to the page content is exemplified by the process of rendering the page by the server, which is based on the page loading request sent by the client.

With continued reference to fig. 3, the client includes: a page load request sending unit 41, wherein an output end of the page load request sending unit 41 is connected with the page load request receiving unit 35, a page content receiving unit 42 is connected with an output end of the page content sending unit 36, an HTML parser 43 and a css parser 44 are connected with an output end of the page content receiving unit 42, a rendering tree generating unit 45 is connected with an output end of the HTML parser 43 and the css parser 44, and a UI46 is connected with an output end of the rendering tree generating unit 45.

Wherein, the page loading request sending unit 41 is configured to send a page loading request to a server.

In the embodiment of the invention, the page loading request can be triggered by a user, for example, the user clicks a web page link, or inputs a web page address in an address field of a web page, clicks a "enter" or "confirm" function key, and the like, and the client can generate the page loading request and send the page loading request to a background server after detecting the operation of the user.

A page content receiving unit 42, configured to receive page content returned by the server based on the page loading request;

The page loading request carries a website needing to access the webpage, and the server stores the page content with a binding relation with the website, so that after receiving the page loading request sent by the client, the server can further acquire the page content matched with the page loading request. The page content receiving unit 42 receives page content from a server. Wherein, the page content includes: HTML file and second CSS file.

An HTML parser 43 for parsing the HTML file to generate a DOM tree;

the process of generating the DOM tree is specifically that the HTML parser converts the HTML file into byte contents which can be read by a network disk of the DOM tree structure, wherein the display format of the byte contents is as follows: the format of + [ element object ], wherein the structure of the DOM tree is generated based on the parent-child relationship of the tag.

Illustrating: in one embodiment, the HTML file is:

<！DOCTYPE html>

<html>

<head>

</body>

< Label 1>

< tag 11> < tag 111> < tag 112> < tag 12> < tag 121, object element 121a, object element 121b > < tag 12> < element object 1211a >.

The DOM tree generated after parsing the HTML file described above may continue to refer to fig. 2. The structural relationship in fig. 2 is generated based on the parent-child relationship among the tag 1, the tag 11, the tag 111, the tag 112, the tag 12 and the tag 121.

CSS parser 44 for generating a CSSOM tree from the DOM tree and the second CSS file, the CSSOM tree comprising: style information and background attributes corresponding to each element object of the DOM tree;

and the CSS parser adds the style information to each element object in the DOM tree based on the style information carried in the second CSS file to generate a CSSOM tree.

For example, a CSSOM tree is constructed on the basis of the DOM tree shown in FIG. 2. The DOM tree shown in fig. 2 includes 3 element objects in total, style information corresponding to each object attribute is obtained based on the second CSS file, and meanwhile, based on the structural relationship of the DOM tree, a CSSOM tree is generated, and the structure of the CSSOM tree can refer to fig. 4.

A rendering tree generating unit 45, configured to combine the CSSOM tree and the DOM tree to generate a rendering tree;

by way of example, a rendering tree is constructed on the basis of the DOM tree shown in FIG. 2 and the CSSOM tree shown in FIG. 4. Combining the DOM tree shown in FIG. 2 with the CSSOM tree shown in FIG. 4, the resulting rendering tree, the structure of which can be seen in FIG. 5.

And a UI46 for rendering each node of the rendering tree and the background attribute to generate a display page.

The UI46, based on the rendering tree, can already know which nodes in the web page, the CSS definitions of each node, and their dependencies, and at the same time, knows which pictures to display are included in the web page from the background properties. Each node of the rendering tree, as well as the context attributes, may be compiled into HTML fragments, in particular by a rendering engine, such as a coblt engine. All HTML fragments can be organized into HTML pages for presentation in a client's display interface.

In the system described in fig. 3, during the process of rendering a page containing a picture, the server does not write the content related to the picture into the HTML file during the configuration process of the HTML file; in the configuration process of the CSS file, writing a background attribute, wherein the background attribute comprises a storage position of the picture. Because the CSS file contains the background attribute, in the subsequent client page rendering process, the client can render the related pictures based on the storage position of the pictures, and render and draw each node of the rendering tree, and finally generate the display page. According to the system, even if the client side adopts the Cobalt browser which can not identify the labels related to the pictures to realize the rendering of the pages, various pictures can be normally displayed.

Example 2:

embodiment 1 shows a system, in the configuration process of a CSS file, a storage position of a picture is added in a background attribute, and in the subsequent process of rendering a client page, a client can render a related picture based on the storage position of the picture on one hand, so that the display of the picture is realized. In the process of rendering the picture, the client firstly downloads the picture to be displayed based on the storage position of the picture, and then renders the picture to be displayed. In order to ensure the beauty of the display screen, a designer designs the size of the picture to be displayed according to the requirement. However, in the process of actual application, in the process of downloading the picture, the pixels of the picture are changed, so that the size of the rendered picture is different from that of the picture designed in advance, and the user experience is poor.

In order to solve the above technical problems, in the embodiment of the present application, the technical solution is shown, where the background attribute further includes: size information of the picture. Wherein the size information of the picture includes a width and a height of the picture. The size information of the picture specifies the size information of the background picture in a subsequent rendering process.

According to the technical scheme, the size of the picture is added into the background attribute, so that the fact that the rendered picture is matched with the preset picture size in the process of rendering the subsequent picture by the client is guaranteed, the whole page is attractive, and the experience of a user is improved.

Example 3:

in the technical solution shown in embodiment 2, the size information of the picture in the background attribute may be recorded by a programmer in the process of configuring the CSS file, so as to improve the operation efficiency of the system, in the embodiment of the present application, the server may automatically obtain the size information of the picture, and write the size information into the first CSS document.

Specifically, on the basis of the server shown in embodiment 1, the server further includes a first size obtaining unit 37, the first size obtaining unit 37 is connected to the second CSS file generating unit through a first Idl (Interface description language ) interface, and at the same time, the first size obtaining unit 37 is connected to the network through a first Idl interface connection.

Wherein, the structure of the first size acquisition unit can refer to fig. 6; the first size acquisition unit includes 37: an Html parsing unit 371 connected to the first Idl interface, a picture resource loading unit 372 connected to the Html parsing unit 371, a picture resource obtaining unit 373 connected to the picture resource loading unit 372, a picture decoding unit 374 connected to the picture resource obtaining unit 373, a callback function thread 375 connected to the picture decoding unit 374, and an output end of the callback function thread 375 connected to the Html parsing unit 371, wherein:

the first Idl interface is used to facilitate communication between the object operated by the second CSS document generating unit 32 and the object operated by the first size acquiring unit 37, and also to facilitate communication between the network and the object operated by the first size acquiring unit 37.

The Html parsing unit 371 is configured to parse a data request transmitted through the first Idl interface, where in the technical solution shown in the embodiment of the present application, the data request may be a storage path of a picture, or may be a picture resource downloaded by a network.

And the picture resource loading unit 372 is configured to load a picture resource according to a storage path of the picture, or directly load the picture resource.

A picture resource obtaining unit 373, configured to obtain a picture resource.

And a picture resource decoding unit 374, configured to decode the picture resource.

And a callback function thread 375 screens size information from the decoded picture resources and sends the size information to the Html parsing unit 371. The Html parsing unit 371 transfers the size information of the picture to the second CSS document generating unit through the first Idl interface.

It can be seen that the system shown in the embodiments of the present application incorporates a first size acquisition unit. The first size acquisition unit firstly acquires a storage path of the picture in the second CSS file generation unit, and loads a picture resource based on the storage path of the picture; the image resources downloaded on the network can be directly loaded; then, size information is screened out from the picture resources; finally, the size information is returned to the second CSS file generating unit. According to the technical scheme, the first size acquisition unit can automatically acquire the size information of the picture, and the size information is stored in the background attribute of the second CSS file. By adding the size of the picture into the background attribute, the size of the picture rendered by the client in the subsequent picture rendering process is matched with the preset picture size, so that the whole page is attractive, and the experience of a user is improved.

Example 4:

the technical solution shown in embodiment 3 screens out size information from the picture resources. It is known that it takes a certain time to screen out size information of a picture from a picture resource containing a lot of information. In order to improve the operation efficiency of the display system according to the embodiment of the application, the display server can screen the size information of the picture through the header file.

Specifically, the server shown in embodiment 1 further includes a second size obtaining unit 38, and the second size obtaining unit 38 is connected to the second CSS file generating unit through a second Idl interface.

The structure of the second size acquisition unit 38 can be seen in fig. 7; the second size acquisition unit 38 includes: a picture request unit 381 connected to a network, a picture loading unit 382 connected to an output end of the picture request unit 381, a header file reading unit 383 connected to the picture loading unit 382, a header file parsing unit 384 connected to an output end of the header file reading unit 383, a second Idl interface connected to the header file parsing unit 384, and an output end of the second Idl interface connected to the second CSS file generating unit 32.

The picture request unit 381 is configured to send a picture loading request to a network;

the network sends corresponding picture resources to the picture request unit 381 based on the corresponding relation between the picture loading request and the picture.

The picture request unit 381 is further configured to download a picture resource, and store the picture resource in a preset storage location. After storing the picture resource, the picture request unit 381 sends the picture storage location to the second Idl interface on the one hand, and sends the picture resource to the picture loading unit 382 on the other hand.

The picture loading unit 382 is configured to load a picture resource.

The header file reading unit 383 is configured to screen header files in the loaded picture resources;

in the picture resource, each file has its corresponding file identifier, for example, each header file has its corresponding header file identifier. The technical scheme shown in the embodiment of the application can screen the header files by identifying the header file identifiers.

There are many picture formats for the pictures downloaded in the network, for example: JPEG, PNG, etc. Each type of picture has its corresponding header identification. The technical scheme shown in the embodiment of the application establishes the corresponding relation between the picture format and the header file identifier in advance, and then stores the corresponding relation between the picture format and the header file identifier in a first list. The format of the first list may be referred to in table 1.

TABLE 1

Picture format	Header identification
		BMP	42 4D
PNG	89 50
		GIF	47 49
JPG	FF D8

Specifically, the method for screening the header file may be: and determining a picture format corresponding to the picture resource. In the practical application process, the header file reading unit can determine the picture format of the picture through the suffix of the picture. Traversing a first list according to the picture format by a header file reading unit, and screening out a header file identifier corresponding to the picture format, wherein the first list is used for recording the corresponding relation between the picture format and the header file identifier; and the header file reading unit screens the header file in the picture resource based on the header file identification.

For example, the header file reading unit receives a picture resource, and the suffix of the picture in the picture resource is gif. Determining the picture format of the picture as GIF; traversing table 1 to determine that the header file identifier corresponding to the GIF is: 47 49. The file corresponding to "47 49" is determined to be the header file.

And a header parsing unit 384, configured to traverse the header, screen out size information, and send the size information to the second Idl interface.

Specifically, the file header of the picture stores the relevant information of the picture, and corresponding fields can be read from the relevant information to obtain size information such as size, format and the like.

Alternatively, the corresponding width and height data bits can be found from the header file of the picture, and the width and height information (i.e., size information) in the header file can be extracted by decoding and analyzing the obtained picture data.

In particular, the data bits of the width and height information for the picture in each header are fixed. The technical scheme shown in the embodiment of the application establishes the corresponding relation between the header file identification and the data bits of the width and height information in advance, and then stores the corresponding relation between the header file identification and the data bits of the width and height information in a second list. The format of the second list may be referred to in table 2.

TABLE 2

Specifically, a second list may be traversed according to the header identifier, where the second list is used to record a correspondence between the header identifier and the size information data bit.

And calling the data corresponding to the size information data bits in the header file, wherein the data is the size information.

For example, the header file reading unit determines that the header file identifier in the received picture resource is 42 d 4d. The table 2 is traversed. Determining that the data bits corresponding to the header file identification "42 d" are wide: 0x0303, high: 0X01B2, calling the data corresponding to the size information data bit in the header file: the width is as follows: 771, height is: 434.

And a second Idl interface for facilitating communication between the object operated by the second CSS document generating unit and the object operated by the second size acquisition unit.

Specifically, the second Idl interface converts the received picture storage position and the size information of the picture into HTML program language, and sends the HTML program language to the second CSS document generating unit.

The second CSS document generating unit writes the HTML program language transmitted by the second Idl interface into the background attribute, wherein the HTML program language comprises the storage position of the picture and the size information of the picture.

It can be seen that the system shown in the embodiments of the present application incorporates a second size acquisition unit. The second size obtaining unit obtains picture resources from the Internet, screens out head files from the picture resources, and screens out size information from the head files; finally, the size information is returned to the second CSS file generating unit. The technical scheme shown in the embodiment of the application screens the size information of the picture in the header file, so that the data screening range is reduced to a certain extent, and the data screening efficiency is improved. Meanwhile, the system shown in the embodiment ensures that the rendered picture is matched with the preset picture size in the subsequent picture rendering process of the client by adding the picture size into the background attribute, thereby ensuring that the whole page is attractive and improving the experience of the user.

Through the technical schemes shown in the above embodiments 1-4, the defect that the coblt browser cannot effectively analyze the picture tag can be effectively solved, an alternative scheme of the picture tag is perfectly found, and the picture display effect can be achieved. Meanwhile, according to the technical scheme, the picture resources are downloaded from the network side, then the picture resources are decoded, and the header files of the corresponding picture resources are extracted from the decoded data. The width and height of the picture are then correctly resolved by the location of the width and height fields of the different types of pictures described above in the header file. And finally, sending the Image data and the width and height to the CSS file as background attributes through a second IDL interface. And in the subsequent client rendering process, the client renders the picture through the background attribute tag in the CSS file and then displays the picture to the user.

A second aspect of the embodiment of the present application shows a server for page rendering, specifically, referring to fig. 8, the server includes: an acquisition unit 31, a second CSS file generation unit 32 connected to an output terminal of the acquisition unit 31, a page content generation unit 33 connected to an output terminal of the second CSS file generation unit 32, a correspondence relation establishment unit 34 connected to an output terminal of the page content generation unit 33, and a page load request reception unit 35 connected to an output terminal of the correspondence relation establishment unit 34, and a page content transmission unit 36 connected to an output terminal of the page load request reception unit 35.

A configuration unit 31 for configuring an HTML file and a first CSS file, the HTML file not including picture information;

a second CSS file generating unit 32, configured to add a background attribute to the first CSS file, and generate a second CSS file, where the background attribute includes a storage location of a picture;

a page content generating unit 33 for creating a connection between the HTML file and the second CSS file to generate page content;

a correspondence establishing unit 34, configured to establish a correspondence between a page loading request and the page content;

a page loading request receiving unit 35, configured to receive a page loading request sent by a client;

A third aspect of the embodiment of the present application shows a client for page rendering, specifically, referring to fig. 9, the client includes: a page load request sending unit 41, wherein an output end of the page load request sending unit 41 is connected with the page load request receiving unit 35, a page content receiving unit 42 is connected with an output end of the page content sending unit 36, an HTML parser 43 and a css parser 44 are connected with an output end of the page content receiving unit 42, a rendering tree generating unit 45 is connected with an output end of the HTML parser 43 and the css parser 44, and a UI46 is connected with an output end of the rendering tree generating unit 45.

A page load request sending unit 41, configured to send a page load request to a server;

an HTML parser 43 for parsing the HTML file to generate a DOM tree;

A third aspect of the embodiment of the present application shows a coblt-based page rendering method, where the method is applied to a server, and specifically, fig. 10 may be referred to, and the method includes:

s101, configuring an HTML file and a first CSS file, wherein the HTML file does not comprise picture information;

s102, adding a background attribute in the first CSS file to generate a second CSS file, wherein the background attribute comprises a storage position of a picture;

s103, establishing a connection between the HTML file and the second CSS file to generate page content;

S104, establishing a corresponding relation between a page loading request and the page content;

s105, receiving a page loading request sent by the client, and sending corresponding page contents to the client based on the corresponding relation between the page loading request and the page contents.

Optionally, the background attribute further includes: size information of the picture. The size information of the picture includes a width of the picture and a height of the picture.

Optionally, the generating process of the size information includes:

downloading picture resources;

and decoding the picture resources, and screening size information from the decoded picture resources.

Optionally, the generating process of the size information includes:

downloading a picture resource, wherein the picture resource comprises a header file;

screening a head file from the picture resource;

traversing the header file and screening out the size information.

Optionally, in the picture resource, the step of screening the first file specifically includes:

determining a picture format of a picture corresponding to the picture resource, traversing a first list according to the picture format, and screening out a header file identifier corresponding to the picture format, wherein the first list is used for recording a corresponding relation between the picture format and the header file identifier;

And screening the header files in the picture resources based on the header file identifiers.

Optionally, the step of traversing the header file and screening the size information specifically includes:

traversing a second list according to the header file identification, and determining size information data bits in the header file, wherein the second list is used for recording the corresponding relation between the header file identification and the size information data bits;

A fifth aspect of the embodiment of the present application shows a coblt-based page rendering method, applied to a client, and specifically referring to fig. 11, where the method includes:

s201, after sending a page loading request to a server, receiving page content returned by the server based on the page loading request, wherein the page content comprises: an HTML file and a second CSS file, the HTML file not including picture information, the second CSS file including: a background attribute, wherein the background attribute comprises a storage location of a picture;

s202, analyzing the HTML file to generate a DOM tree;

s203, generating a CSSOM tree according to the DOM tree and the second CSS file, wherein the CSSOM tree comprises: style information and background attributes corresponding to each element object of the DOM tree;

S204, merging the CSSOM tree and the DOM tree to generate a rendering tree;

s205 renders each node of the rendering tree and the background attribute to draw, generating a display page.

In a specific implementation, the present invention further provides a computer storage medium, where the computer storage medium may store a program, where the program may include some or all of the steps in each embodiment of the scaling method provided by the present invention when executed. The storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), a random-access memory (random access memory, RAM), or the like.

It will be apparent to those skilled in the art that the techniques of embodiments of the present invention may be implemented in software plus a necessary general purpose hardware platform. Based on such understanding, the technical solutions in the embodiments of the present invention may be embodied in essence or what contributes to the prior art in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method described in the embodiments or some parts of the embodiments of the present invention.

The same or similar parts between the various embodiments in this specification are referred to each other. In particular, for embodiments of the scaling device and the display apparatus, the description is relatively simple, as it is substantially similar to the method embodiments, as far as reference is made to the description in the method embodiments.

The embodiments of the present invention described above do not limit the scope of the present invention.

Claims

1. The utility model provides a webpage rendering system based on cobalt, includes the customer end and the server that is connected with the customer end, its characterized in that:

determining a picture format of a picture corresponding to the picture resource;

traversing a first list according to the picture format, and screening out a header file identifier corresponding to the picture format, wherein the first list is stored in a server in advance and is used for loading the corresponding relation between the picture format and the header file identifier;

Screening a header file from the picture resource based on the header file identifier;

traversing a second list according to the header file identification, and determining size information data bits in the header file, wherein the second list is stored in a server in advance and is used for recording the corresponding relation between the header file identification and the size information data bits;

the size information in the header file is called, wherein the size information is data corresponding to size information data bits;

writing the size information of the picture into the background attribute;

analyzing the HTML file to generate a DOM tree;

Merging the CSSOM tree and the DOM tree to generate a rendering tree;

2. A cobalt-based server for page rendering, the server configured to:

writing the size information of the picture into the background attribute;

3. A cobalt-based terminal for page rendering, configured to: sending a page loading request to a server, wherein the loading request is used for enabling the server to download picture resources, and the picture resources comprise header files; the server determines the picture format of the picture corresponding to the picture resource; traversing a first list by the server according to the picture format, and screening out a header file identifier corresponding to the picture format, wherein the first list is stored in the server in advance and is used for loading the corresponding relation between the picture format and the header file identifier; the server screens the head file in the picture resource based on the head file identification; traversing a second list according to the header file identification, and determining size information data bits in the header file, wherein the second list is stored in a server in advance and is used for recording the corresponding relation between the header file identification and the size information data bits; the server retrieves the size information in the header file, wherein the size information is data corresponding to size information data bits; writing the size information of the picture into the background attribute; the server establishes a connection between the HTML file and the second CSS file to generate page content; the server establishes a corresponding relation between a page loading request and the page content;

Receiving page content returned by the server based on the page loading request, wherein the page content comprises: an HTML file and a second CSS file, the HTML file not including picture information, the second CSS file including: a background attribute, wherein the background attribute comprises storage position and size information of a picture;

analyzing the HTML file to generate a DOM tree;

merging the CSSOM tree and the DOM tree to generate a rendering tree;

4. The method is applied to a server side and is characterized by comprising the following steps:

writing the size information of the picture into the background attribute;

5. The method for rendering the page based on the cobalt is applied to the client and is characterized by comprising the following steps:

Sending a page loading request to a server, wherein the loading request is used for enabling the server to download picture resources, and the picture resources comprise header files; the server determines the picture format of the picture corresponding to the picture resource; traversing a first list by the server according to the picture format, and screening out a header file identifier corresponding to the picture format, wherein the first list is stored in the server in advance and is used for loading the corresponding relation between the picture format and the header file identifier; the server screens the head file in the picture resource based on the head file identification; traversing a second list according to the header file identification, and determining size information data bits in the header file, wherein the second list is stored in a server in advance and is used for recording the corresponding relation between the header file identification and the size information data bits; the server retrieves the size information in the header file, wherein the size information is data corresponding to size information data bits; writing the size information of the picture into the background attribute; the server establishes a connection between the HTML file and the second CSS file to generate page content; the server establishes a corresponding relation between a page loading request and the page content;

analyzing the HTML file to generate a DOM tree;

merging the CSSOM tree and the DOM tree to generate a rendering tree;