CN112328930A

CN112328930A - Page rendering method, server, client and system based on cobalt

Info

Publication number: CN112328930A
Application number: CN201910718299.7A
Authority: CN
Inventors: 王良
Original assignee: Qingdao Hisense Media Network Technology Co Ltd
Current assignee: Vidaa Netherlands International Holdings BV
Priority date: 2019-08-05
Filing date: 2019-08-05
Publication date: 2021-02-05
Anticipated expiration: 2039-08-05
Also published as: CN112328930B

Abstract

The embodiment of the application shows a webpage rendering method based on cobelt, a server, a client and a system. According to the technical scheme shown in the embodiment of the application, a background attribute is added in the first CSS file to generate a second CSS file, and the background attribute comprises a storage position of a picture. Since the background attribute in the second CSS file of the technical solution shown in the embodiment of the present application includes the storage location of the picture, in the subsequent rendering process, the corresponding picture can be found based on the storage location of the picture, thereby implementing the rendering of the picture. Therefore, the technical scheme shown in the embodiment of the application can effectively solve the defect that the Cobalt browser cannot effectively analyze the picture labels, and can achieve the picture display effect.

Description

Page 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 webpage rendering method, a server, a client and a system based on cobalt.

Background

Generally, the rendering process of a page is implemented by a rendering system. Fig. 1 is an exemplary rendering system, which includes 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 (hypertext Markup Language) file and a CSS (Cascading Style Sheet) file, the HTML file is an element object displayed by the page and includes information such as characters and pictures, and the CSS file can be matched with various scripting languages to dynamically format each element of the web page. The client 2 is provided with an HTML parser 21, a CSS parser 22(Cascading Style Sheet), a render tree construction module 23, a layout module 24, and a UI25(User Interface). After the client 2 receives the page content, the HTML parser 21 first parses the received HTML file into a DOM tree (Document Object Model), where the structure of the DOM tree can 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 the web disk in the form of DOM tree, where the display format of the byte content is: [ TAG ] plus [ element object ] format. The CSS parser 22 adds style information to each element object in the DOM tree based on the CSS file to generate a CSSOM tree; then, the render tree constructing unit 23 merges the DOM tree and the CSSOM tree to generate another render tree, which is used for rendering, and the layout module 24 performs layout processing on each node of the render tree to determine the display position of the node on the screen; finally, the back-end layer of UI25 renders each node of the rendering tree to generate a rendered page.

Generally, a client adopts different browsers to render a page, and the corresponding rendering processes have certain differences, 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 a flexible and changeable web form and the like, and is widely applied to clients.

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

Disclosure of Invention

In order to solve the above technical problem, embodiments of the present application illustrate a page rendering method, a server, a client, and a system based on a cobalt.

A first aspect of an embodiment of the present application shows a ribbon-based page rendering system, including a client and a server connected to 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 content to the client based on the corresponding relation between the page loading request and the page content;

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

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;

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

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

A second aspect of the present embodiment illustrates a server for page rendering based on a ribbon, where the server is 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 content to the client based on the corresponding relation between the page loading request and the page content.

A third aspect of the embodiments of the present application shows a terminal for page rendering based on a ribbon, where the client is configured to: after a page loading request is sent to a server, page content returned by the server based on the page loading request is received;

analyzing the HTML file to generate a DOM tree;

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

A fourth aspect of the present embodiment shows a page rendering method based on a cobalt, where the method is applied to a server side, and is characterized by including:

A fifth aspect of the embodiment of the present application shows a page rendering method based on a cobalt, which is applied to a client, and includes:

after a page loading request is sent to a server, page content returned by the server based on the page loading request is received, 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;

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

According to the technical scheme, the embodiment of the application shows a page rendering method, a server, a client and a system based on cobelt. In the technical scheme shown in the embodiment of the application, the server adds a background attribute to the first CSS file to generate a second CSS file, where the background attribute includes a storage location of the picture. According to the technical scheme, the background attribute in the second CSS file comprises the storage position of the picture, so that the client can find the corresponding picture based on the storage position of the picture in the subsequent rendering process, and further the rendering of the picture is realized, and the picture display effect is achieved. The technical scheme shown in the embodiment of the application can effectively solve the defect that the Cobalt browser cannot effectively analyze the picture tags, perfectly find a substitute scheme for the picture tags, and achieve the picture display effect.

Drawings

In order to more clearly explain the technical solution of the present application, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious to those skilled in the art that other drawings can be obtained according to the drawings without any creative effort.

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

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

FIG. 3 is a block diagram of an exemplary cobalt-based page rendering system;

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

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

fig. 6 is a schematic structural diagram illustrating a first size obtaining unit according to a preferred embodiment;

fig. 7 is a schematic structural diagram illustrating a second size obtaining unit according to a preferred embodiment;

FIG. 8 is a block diagram illustrating a server in accordance with a preferred embodiment;

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

FIG. 10 is a flowchart illustrating a cobalt-based page rendering method in accordance with a preferred embodiment;

FIG. 11 is a flowchart illustrating a method for cobalt-based page rendering according to a preferred embodiment.

Detailed Description

In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

All other embodiments, which can be derived by a person skilled in the art from the exemplary embodiments shown in the present application without inventive effort, shall fall within the scope of protection of the present application. Moreover, while the disclosure herein has been presented in terms of exemplary one or more examples, it is to be understood that each aspect of the disclosure can be utilized independently and separately from other aspects of the disclosure to provide a complete disclosure.

It should be understood that the terms "first," "second," "third," and the like in the description and in the claims of the present application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used are interchangeable under appropriate circumstances and can be implemented in sequences other than those illustrated or otherwise described herein with respect to the embodiments of the application, for example.

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

The term "module," as used herein, 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 functionality associated with that element.

In order to solve the technical problem, the embodiment of the application shows a webpage rendering method, a server, a client and a system based on cobelt. The configuration of the components of the system is described in detail below with reference to specific examples.

Example 1:

a first aspect of the present embodiment shows a cobalt-based page rendering system, please refer to fig. 3. The system server is connected with at least one client 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 browser application based on a cobolt, or may refer to a terminal device installed with a cobolt 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, a smart wearable device, and the like, and the embodiment of the present invention is not limited.

In particular, with continued reference to fig. 3, the server includes: an acquiring unit 31, a second CSS file generating unit 32 connected to an output of the acquiring unit 31, a page content generating unit 33 connected to an output of the second CSS file generating unit 32, a correspondence establishing unit 34 connected to an output of the page content generating unit 33, a page loading request receiving unit 35 connected to an output of the correspondence establishing unit 34, and a page content transmitting unit 36 connected to an output of the page loading request receiving unit 35. A configuration unit 31 configured to configure 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 present application, the HTML file is a descriptive text composed of HTML commands. The structure of the HTML file includes a header (Head) and a Body (Body), wherein the header describes information required by the cobalt browser, and the Body may be display contents (also referred to as element objects in the technical solution shown in the embodiment of the present application) such as words, tables, links, and the like.

In the technical solution shown in the embodiment of the present application, the first CSS file is a computer language used for representing a style of an 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 attribute values corresponding to element objects in an HTML file.

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 the picture.

In the technical scheme shown in the embodiment of the application, a background attribute (background) is added to the first CSS file to generate a second CSS file, where the background attribute includes a storage location of a picture. Since the background attribute in the second CSS file of the technical solution shown in the embodiment of the present application includes the storage location of the picture, in the subsequent rendering process, the corresponding picture can be found based on the storage location of the picture, thereby implementing the rendering of the picture.

As can be seen, the second CSS file includes the attribute values and the background attributes corresponding to the element objects in the HTML file, so that the second CSS not only formats the elements of the web page dynamically in cooperation with various scripting languages, but also modifies the web page statically based on the pictures included in the background attributes.

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.

A corresponding relationship establishing unit 34, configured to establish a corresponding relationship between the page loading request and the page content.

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

And a page content sending unit 36, configured to send corresponding page content to the client based on a corresponding relationship between the page loading request and the page content.

Typically, the page load request carries a web address that requires access to the web page. According to the scheme shown in the embodiment of the application, the server stores the page content which is in binding relationship with the website in advance, so that after the server receives the page loading request sent by the client, the page content matched with the page loading request can be further obtained, and the page content is sent to the client.

The client side 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 process of practical application, the server may also perform page rendering based on a page loading request sent by the client, and send the obtained HTML page to the client.

The following describes a page rendering process in detail, taking as an example a process in which a server obtains corresponding page content based on a page loading request sent by a client and sends the page content to the client, and the client renders a page according to the page content.

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

The page loading request sending unit 41 is configured to send a page loading request to a server.

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

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 to be accessed to the webpage, and the server stores page content having a binding relationship with the website, so that the server can further acquire the page content matched with the page loading request after receiving the page loading request sent by the client. The page content receiving unit 42 receives page content from the server. Wherein the page content comprises: HTML files and second CSS files.

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

specifically, the process of generating the DOM tree is that the HTML parser converts the HTML file into the byte content readable by the web disk of the DOM tree structure, wherein the display format of the byte content is as follows: a format of [ tag ] + [ element object ], wherein a structure of a DOM tree is generated based on parent-child relationships of the tags.

For example, the following steps are carried out: 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 1211 > < element object 1211a >.

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

A CSS parser 44, configured to generate a CSSOM tree according to the DOM tree and the second CSS file, where the CSSOM tree includes: 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, the style information corresponding to each object attribute is known based on the second CSS file, and a CSSOM tree is generated based on the structural relationship of the DOM tree, and the structure of the CSSOM tree can be referred to fig. 4.

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

by way of example, a render tree is built on the basis of the DOM tree shown in fig. 2 and the CSSOM tree shown in fig. 4. The DOM tree shown in fig. 2 and the CSSOM tree shown in fig. 4 are merged to generate a rendering tree, and the structure of the rendering tree can be referred to in fig. 5.

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

The UI46 can know which nodes are in the web page, CSS definitions of each node, and their affiliations based on the rendering tree, and at the same time, know which pictures to be displayed are included in the web page from the background attributes. Each node of the rendering tree and the context attribute may be compiled into HTML fragments by a rendering engine, such as a cobalt engine. All the HTML fragments can be combined into an HTML page to be displayed in a display interface of the client.

In the system described in fig. 3, during the process of rendering the page containing the 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, the background attribute is written, wherein the background attribute comprises the storage position of the picture. Because the CSS file includes the background attribute, in the subsequent client page rendering process, the client can render the relevant picture based on the storage location of the picture, and simultaneously render and draw each node of the rendering tree, and finally generate the display page. According to the system shown in the embodiment of the application, even if the client renders the page by adopting the Cobalt browser which cannot identify the label related to the picture, various pictures can be normally displayed.

Example 2:

embodiment 1 shows a system, in a configuration process of a CSS file, a storage location of an image is added to a background attribute, and in a subsequent rendering process of a client page, on one hand, a client may render a related image based on the storage location of the image, thereby implementing display of the image. In the process of rendering the picture, the client downloads the picture to be displayed based on the storage position of the picture, and then renders the picture to be displayed. In general, in order to ensure the aesthetic appearance of the display screen, a designer designs the size of the picture to be displayed according to requirements. However, in the process of practical application, during the process of downloading the picture, the picture pixels may change, so that the size of the rendered picture is different from the size of the pre-designed picture, resulting in poor user experience.

In order to solve the above technical problem, in the technical solution shown in the embodiment of the present application, the background attributes further include: 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 size information of a background picture in a subsequent rendering process.

According to the technical scheme shown in the embodiment of the application, the size of the picture is added into the background attribute, so that the rendered picture is matched with the preset picture size in the subsequent picture rendering process of the client, 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 entered by a programmer in the process of CSS file configuration, and in order to improve the operating efficiency of the system, the embodiment of the present application shows that the server may automatically acquire 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, where the first size obtaining unit 37 and the second CSS file generating unit are connected through a first Idl (Interface description language) Interface, and meanwhile, the first size obtaining unit 37 is connected to a network through a first Idl Interface.

In which, the structure of the first size obtaining unit can refer to fig. 6; the first size obtaining 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 acquiring unit 373 connected to the picture resource loading unit 372, a picture decoding unit 374 connected to the picture resource acquiring 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 configured to facilitate the objects operated by the second CSS document generating unit 32 and the objects operated by the first size obtaining unit 37 to communicate with each other, and at the same time, to facilitate the network and the objects operated by the first size obtaining unit 37 to communicate with each other.

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

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

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

A picture resource decoding unit 374, configured to decode the picture resource.

The callback function thread 375 screens out size information from the decoded picture resource, and sends the size information to the Html parsing unit 371. The Html parsing unit 371 transmits 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 embodiment of the present application incorporates a first dimension acquisition unit. The first size obtaining unit is used for firstly obtaining a storage path of the picture in the second CSS file generating unit and loading picture resources based on the storage path of the picture; the picture resources downloaded on the network can also be directly loaded; then, screening size information from the picture resources; and finally, returning the size information to the second CSS file generation unit. According to the technical scheme shown in the embodiment of the application, the first size obtaining unit can automatically obtain 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 client is ensured to match the size of the rendered picture with the preset picture size in the subsequent picture rendering process, so that the whole page is ensured to be attractive, and the experience of a user is improved.

Example 4:

the technical scheme shown in embodiment 3 screens size information from picture resources. It is known that it takes a certain time to screen size information of a picture from a picture resource containing a large amount of information. In order to improve the work efficiency of the system, the server may filter out the size information of the picture through a header file.

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

The structure of the second size obtaining unit 38 can be seen in fig. 7; the second size obtaining 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, and a second Idl interface connected to the header file parsing unit 384, where an output end of the second Idl interface is 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 the corresponding picture resource to the picture request unit 381 based on the corresponding relationship between the picture loading request and the picture.

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

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

The header file reading unit 383 is configured to screen a header file from the loaded picture resource;

in the picture resource, each file has a corresponding file identifier, for example, each header file has a corresponding header file identifier. According to the technical scheme, the header files can be screened out through identification of the header file identifications.

There are many formats for pictures downloaded over the network, such as: JPEG, PNG, etc. type files. Each type of picture has its corresponding header identification. According to the technical scheme shown in the embodiment of the application, the corresponding relation between the picture format and the header file identifier is established in advance, and then the corresponding relation between the picture format and the header file identifier is stored in the first list. The format of the first list can be seen in table 1.

TABLE 1

Picture format	Header file 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. The header file reading unit filters out a header file identifier corresponding to the picture format according to a first list traversed by 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 out header files from the picture resources 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; the header file identifier corresponding to the GIF is determined to be: 4749. the file corresponding to "4749" is determined to be a header file.

And the header file analyzing unit 384 is used for traversing the header file, screening out the size information, and sending the size information to the second Idl interface.

Specifically, the file header of the picture stores the related information of the picture, and the corresponding field can be read from the file header to obtain the size information such as the size, the 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.

Specifically, the data bits for the aspect information of the picture in each header are fixed. According to the technical scheme shown in the embodiment of the application, the corresponding relation between the head file identification and the data bit of the width and height information is established in advance, and then the corresponding relation between the head file identification and the data bit of the width and height information is stored in the second list. The format of the second list can be seen in table 2.

TABLE 2

Specifically, the size information data bits in the header file may be determined by traversing a second list according to the header file identifier, where the second list is used to record a corresponding relationship between the header file identifier and the size information data bits.

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

For example, the header file reading unit determines that the header file identifier in the received picture resource is 424D. Table 2 is run through. Determine the data bits corresponding to the header file identification "424D" as wide and high: 0x0303, high: 0X01B2, calling data corresponding to size information data bits in the header file: the width is: 771, high is: 434.

and the second Idl interface is used for helping the object operated by the second CSS document generating unit to communicate with the object operated by the second size acquiring unit.

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

And the second CSS document generating unit writes an 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 dimension acquisition unit. The second size obtaining unit firstly obtains picture resources from the Internet, then screens header files from the picture resources, and screens size information from the header files; and finally, returning the size information to the second CSS file generation unit. According to the technical scheme shown in the embodiment of the application, the size information of the picture is screened out from the header file, 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, so that the whole page is ensured to be attractive, and the experience of the user is improved.

Through the technical solutions shown in the embodiments 1 to 4, the defect that the Cobalt browser cannot effectively analyze the picture tags can be effectively solved, a substitute scheme for the picture tags can be perfectly found, and a picture display effect can be achieved. Meanwhile, in the technical scheme shown in the embodiment of the application, the picture resources are downloaded from the network terminal, and then the header files of the corresponding picture resources are extracted from the decoded data through decoding the picture resources. Then, the width and height of the picture are correctly analyzed according to the position of the width and height fields of the different types of pictures in the header file. And finally, sending the Image data and the width and the height as background attributes to the CSS file through a second IDL interface. And in the subsequent client rendering process, the client renders the pictures through the background attribute tags in the CSS file and then displays the pictures to the user.

A second aspect of the embodiment of the present application shows a server for page rendering, and in particular, may refer to fig. 8, where the server includes: an acquiring unit 31, a second CSS file generating unit 32 connected to an output of the acquiring unit 31, a page content generating unit 33 connected to an output of the second CSS file generating unit 32, a correspondence establishing unit 34 connected to an output of the page content generating unit 33, a page loading request receiving unit 35 connected to an output of the correspondence establishing unit 34, and a page content transmitting unit 36 connected to an output of the page loading request receiving unit 35.

A configuration unit 31, configured to configure an HTML file and a first CSS file, where the HTML file does not include 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 the picture;

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

a correspondence relationship establishing unit 34, configured to establish a correspondence relationship between the 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 loading request sending unit 41, an output of the page loading request sending unit 41 is connected to the page loading request receiving unit 35, a page content receiving unit 42 is connected to an output of the page content sending unit 36, an HTML parser 43 and a CSS parser 44 are connected to an output of the page content receiving unit 42, a rendering tree generating unit 45 is connected to outputs of the HTML parser 43 and the CSS parser 44, and a UI46 is connected to an output of the rendering tree generating unit 45.

A page loading request sending unit 41, configured to send a page loading 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 page rendering method based on a ribbon, where the method is applied to a server side, and specifically, referring to fig. 10, the method includes:

s101, configuring an HTML file and a first CSS file, wherein the HTML file does not include 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 relation between the HTML file and the second CSS file to generate page content;

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

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

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 is:

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 is:

downloading picture resources, wherein the picture resources comprise header files;

screening out header files from the picture resources;

and traversing the header file and screening out size information.

Optionally, the step of screening out the header file in the picture resource 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 out the header files from the picture resources based on the header file identification.

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

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

A fifth aspect of the embodiment of the present application shows a page rendering method based on a cobalt, which is applied to a client, and specifically, refer 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, combining the CSSOM tree and the DOM tree to generate a rendering tree;

s205, each node of the rendering tree and the background attribute are rendered and drawn, and a display page is generated.

In a specific implementation, the present invention further provides a computer storage medium, where the computer storage medium may store a program, and the program may include some or all of the steps in the embodiments 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) or a Random Access Memory (RAM).

Those skilled in the art will readily appreciate that the techniques of the embodiments of the present invention may be implemented as software plus a required general purpose hardware platform. Based on such understanding, the technical solutions in the embodiments of the present invention may be essentially or partially implemented in the form of a software product, which may be stored in a storage medium, such as ROM/RAM, magnetic disk, optical disk, etc., and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments.

The same and similar parts in the various embodiments in this specification may be referred to each other. In particular, for the embodiments of the zooming apparatus and the display device, since they are substantially similar to the method embodiments, the description is relatively simple, and for the relevant points, reference may be made to the description in the method embodiments.

The above-described embodiments of the present invention should not be construed as limiting the scope of the present invention.

Claims

1. A page rendering system based on cobalt comprises a client and a server connected with the client, and is characterized in that:

analyzing the HTML file to generate a DOM tree;

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

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

3. A terminal for ribbon-based page rendering, wherein the client is configured to: after a page loading request is sent to a server, page content returned by the server based on the page loading request is received, 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;

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

4. A page rendering method based on cobalt is applied to a server side, and is characterized by comprising the following steps:

5. The method of claim 4, wherein the context attributes further comprise: size information of the picture.

6. The method of claim 5, wherein the size information is generated by:

downloading picture resources;

7. The method of claim 5, wherein the size information is generated by:

screening out header files from the picture resources;

and traversing the header file and screening out size information.

8. The method according to claim 7, wherein the step of screening out header files in the picture resource specifically comprises:

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 recording the corresponding relation between the picture format and the header file identifier;

9. The method according to claim 7 or 8, wherein the step of traversing the header file and screening out the size information specifically comprises:

traversing a second list according to the head file identifier, and determining size information data bits in the head file, wherein the second list is pre-stored in a server and used for recording the corresponding relationship between the head file identifier and the size information data bits;

10. A page rendering method based on a cobalt is applied to a client, and is characterized by comprising the following steps:

analyzing the HTML file to generate a DOM tree;

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