CN111259301A

CN111259301A - Method, device, equipment and storage medium for rendering elements in HTML page

Info

Publication number: CN111259301A
Application number: CN202010059997.3A
Authority: CN
Inventors: 魏永明; 耿岳; 薛淑明
Original assignee: Beijing Feynman Software Technology Co ltd
Current assignee: Beijing Feynman Software Technology Co ltd
Priority date: 2020-01-19
Filing date: 2020-01-19
Publication date: 2020-06-09
Anticipated expiration: 2040-01-19
Also published as: CN111259301B

Abstract

The invention provides a method, a device, equipment and a storage medium for rendering elements in a hypertext markup language (HTML) page, and relates to the technical field of computer software. The method comprises the following steps: determining a canvas object according to an element to be rendered in an HTML page, and determining an operation mode of a renderer for rendering the element to be rendered; loading a renderer according to an element to be rendered; according to the renderer, acquiring attributes and parameters of elements to be rendered through a user agent interface; according to the attribute and the parameter of the element to be rendered, a renderer is used for rendering the element to be rendered to obtain a first rendering result; storing the first rendering result in a canvas object; the first rendering result is copied from the canvas object to the HTML page according to the runtime mode of the renderer. The rendering method of the elements in the HTML page provided by the embodiment of the invention can be conveniently supported by HTML.

Description

Method, device, equipment and storage medium for rendering elements in HTML page

Technical Field

The present application relates to the field of computer software technologies, and in particular, to a method, an apparatus, a device, and a storage medium for rendering an element in an HTML page.

Background

In the prior art, for the rendering effect of modifying complex elements, the used interfaces are complex, and lack of standards or specification constraints, which results in high development cost and reduced maintainability, while a gap appears between the implementation mechanism of canvas (canvas) elements and existing specifications such as HyperText markup Language (HTML) and Cascading Style Sheets (CSS), which results in increased code size, increased learning cost, and reduced performance.

In addition, due to the limitation of the canvas element, the complex control implemented by the canvas element cannot be put into the form as a part of the form (form) at present, so that the input of the user or the current value of the complex control cannot be transmitted to the background server for processing as a parameter, and the parameter of the canvas element cannot be conveniently debugged or adjusted. And Scalable Vector Graphics (SVG) is embedded in the HTML document to realize functions similar to canvas elements, the SVG defines and organizes Vector Graphics to be drawn by using a tag language similar to HTML, and then realizes dynamic effects by controlling parameters or CSS attributes thereof through scripts, such as rotation of a dial pointer, and can realize dynamic effects of dial pointer rotation by performing rotation conversion on the pointer. When the canvas is used, the process of defining the vector graphics becomes a direct interface call, and as a result, the method for realizing the rendering of the complex elements by using the SVG has good flexibility even without the canvas and has poorer performance than the method using the canvas elements. Therefore, whether the canvas element or the SVG is used for rendering the complex elements, HTML cannot be conveniently supported.

Disclosure of Invention

The invention provides a method, a device, equipment and a storage medium for rendering elements in an HTML page, which can conveniently obtain the support of HTML by adding an element for representing a complex control for the HTML so as to improve the rendering performance of the complex element and reduce the scale of codes.

In a first aspect, an embodiment of the present invention provides a method for rendering an element in an HTML page of a hypertext markup language, where the method includes: determining a canvas object according to an element to be rendered in an HTML page, and determining an operation mode of a renderer for rendering the element to be rendered;

loading a renderer according to an element to be rendered;

according to the renderer, acquiring attributes and parameters of elements to be rendered through a user agent interface;

according to the attribute and the parameter of the element to be rendered, a renderer is used for rendering the element to be rendered to obtain a first rendering result;

storing the first rendering result in a canvas object;

the first rendering result is copied from the canvas object to the HTML page according to the runtime mode of the renderer.

In some implementations of the first aspect, the element to be rendered includes indication information, and loading the renderer according to the rendering element includes: and loading the renderer specified by the element to be rendered according to the indication information.

In some implementations of the first aspect, loading the renderer according to the element to be rendered includes: acquiring a renderer type and a renderer design type according to an element to be rendered;

and loading the renderers corresponding to the renderer types and the renderer design types according to the renderer types and the renderer design types.

In some implementation manners of the first aspect, if loading of the renderer corresponding to the renderer type and the renderer design type fails according to the renderer type and the renderer design type, the renderer corresponding to the renderer design type is loaded according to the renderer design type.

In some implementations of the first aspect, the element to be rendered includes external resource acquisition instruction information, and the method further includes:

and determining a Uniform Resource Locator (URL) of the external resource according to the external resource acquisition instruction information, wherein the URL is used for searching and acquiring the external resource, and the external resource is used for rendering by a renderer to obtain a first rendering result.

In some implementations of the first aspect, the external resource is stored in a local cache system, and the local link is reallocated for the external resource stored in the local cache system, and the element to be rendered includes the reallocated local link.

In some implementations of the first aspect, the method further comprises: removing the reallocated local links; and destroying the first rendering result.

In some implementations of the first aspect, the user agent interface is encapsulated by a unified language.

In some implementations of the first aspect, before loading the renderer according to the element to be rendered, the method further comprises: and verifying the validity of the renderer.

In some implementations of the first aspect, after copying the first rendering result from the canvas object to the HTML page according to the runtime mode of the renderer, the method further includes: receiving an input operation instruction of a user;

determining a first rendering result in the HTML page according to the input operation instruction;

acquiring attributes and parameters of a first rendering result through a user agent interface according to a renderer;

rendering the first rendering result by using a renderer according to the attribute and the parameter of the first rendering result to obtain a second rendering result;

storing the second rendering result in the canvas object;

and copying the second rendering result to the HTML page according to the operation mode of the renderer.

In a second aspect, an embodiment of the present invention further provides an apparatus for rendering an element in an HTML page, where the apparatus includes:

the determining module is used for determining a canvas object according to an element to be rendered in a hypertext markup language (HTML) page and determining an operation mode of a renderer for rendering the element to be rendered;

the loading module is used for loading the renderer according to the element to be rendered;

the obtaining module is used for obtaining the attribute and the parameter of the element to be rendered through the user agent interface according to the renderer;

the rendering module is used for rendering the element to be rendered by using the renderer according to the attribute and the parameter of the element to be rendered to obtain a first rendering result;

a storage module to store the first rendering result in a canvas object;

and the loading module is also used for copying the first rendering result from the canvas object to the HTML page according to the running mode of the renderer.

In a third aspect, an embodiment of the present invention provides an apparatus for rendering elements in an HTML page in a hypertext markup language, where the apparatus includes: a processor and a memory storing computer program instructions; a processor, when executing computer program instructions, implements a method of rendering elements within a hypertext markup language, HTML, page as in the first aspect or any of the realizable forms of the first aspect.

In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, on which computer program instructions are stored, which, when executed by a processor, implement a method for rendering elements in a hypertext markup language HTML page as in the first aspect or any one of the realizable manners of the first aspect.

The invention provides a method and computer equipment for rendering elements in an HTML page, which can conveniently obtain the support of HTML by adding an element for representing a complex control for the HTML, can call an internal interface of a user agent in the process of realizing the rendering of the complex element, and can obtain the parameters and attributes for realizing the rendering of the complex element through the internal interface of the user agent so as to improve the rendering performance of the complex element and reduce the scale of codes.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required to be used in the embodiments of the present invention will be briefly described below, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1 is an analog dial provided by an embodiment of the present invention;

FIG. 2 is another analog dial provided by embodiments of the present invention;

fig. 3 is a digital dial provided by an embodiment of the present invention;

FIG. 4 is a flowchart illustrating a method for rendering elements in an HTML page according to an embodiment of the present invention;

FIG. 5 is a flowchart illustrating a method for rendering elements in an HTML page according to an embodiment of the present invention;

FIG. 6 is a flowchart illustrating a method for rendering elements in an HTML page according to an embodiment of the present invention;

FIG. 7 is a schematic flowchart of rendering elements in an HTML page according to an embodiment of the present invention;

FIG. 8 is a schematic diagram of an apparatus for rendering elements in an HTML page according to an embodiment of the present invention;

fig. 9 is a schematic hardware structure diagram of element rendering in an HTML page according to an embodiment of the present invention.

Detailed Description

Features and exemplary embodiments of various aspects of the present invention will be described in detail below, and in order to make objects, technical solutions and advantages of the present invention more apparent, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not to be construed as limiting the invention. It will be apparent to one skilled in the art that the present invention may be practiced without some of these specific details. The following description of the embodiments is merely intended to provide a better understanding of the present invention by illustrating examples of the present invention.

It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.

HyperText markup Language (HTML) is used to express the standard of the content structure of a web page. The latest release standard is HTML 5.3.

Cascading Style Sheets (CSS) is used to define specifications for HTML page element layout, rendering effects, and the like. After CSS2.2, the CSS specification begins to divide by modules, which evolve at the beginning.

The specifications and standards such as HTML and CSS are established by the World Wide Web Consortium (W3C) organization to specify the writing and rendering behavior of World Wide Web (Web) page content.

Scalable Vector Graphics (SVG), a markup language used to define Vector Graphics, can be embedded in HTML documents. At present, the commonly supported specification is SVG1.1, and the latest specification is SVG 2.0.

JavaScript/ECMAScript is a script programming language conforming to the specification of the European computer manufacturers Association (ECMAScript), originally designed by internet scenes to be used by browsers for manipulating content and rendering behavior in HTML pages, and is now responsible for the formulation of relevant standards by the European computer manufacturers Association and the international organization for standardization, the latest standard being ECMA-262. Since JavaScript is a trademark of commercial corporation (Oracle), the term ECMAScript is used in the embodiment of the invention.

User Agent (User Agent) is a term of HTML specification used to refer to a computer program that can parse the HTML, CSS, etc. W3C specification, and render the HTML document content for presentation to a User and User interaction.

For example, the browser is a user agent. However, the user agent is not limited to a browser, and may be a software component or an application framework. For example, a software component embedded in an email client program to parse and render HTML formatted mail is also essentially an HTML user agent.

The web page front-end technology is a generic name of technologies such as HTML, CSS, ECMAScript and the like.

A Control (Widget/Control) refers to a programmable function object constituting a graphical user interface, such as a label, an edit box, a button, a list box, and the like. Developers implement specific user interactions by placing different controls on the interface. Controls are sometimes also referred to as building blocks.

At first, the HTML page is mainly used for document contents of mixed lines of characters and pictures, so the CSS-related specification for layout and rendering of a web page is mainly based on a rectangular region, and is called "Block" (Block) in the CSS specification, such as a property (CSS property) for controlling a width (width) and a height (height) thereof, and a display property, a position property, and the like for controlling a layout property of an HTML element.

With the development of HTML5 and CSS3 technologies, many applications (apps) running on PCs and smartphones began to use Web technology to present content to users and to interface with human-computer interaction.

However, when the web page front-end technology is used for developing a client application, the CSS style sheet based on the rectangular block cannot provide effective support for various complex controls. For example, to implement a watch dial and rotating, complex shaped hands in a web page, it is difficult to implement them directly using HTML and CSS.

To meet this requirement, there are two common methods in the existing solutions:

one is the rendering of complex controls by scripting programming via the canvas (canvas) element introduced by HTML5.

The other is to use object (object) or embedded (embedded) element of HTML to embed external object to realize the rendering of complex or specific object by means of plug-in technology.

Specifically, in the prior art, the HTML5 canvas element is often used, and then the interface provided by the canvas element is called using script programming to draw the elements of the HTML page. However, using the canvas element, an additional script program needs to be written, which results in no work in the case where the script function of the user agent is disabled.

Furthermore, ECMAScript is an interpreted programming language, and is relatively inefficient to execute and occupies a large amount of memory. When the rendering effect of the complex control is modified, the script needs to be modified.

More scripts are needed to support multiple different complex elements simultaneously on an interface.

The use of canvas elements also results in complex interfaces, and complicated controls cannot be conveniently controlled by setting attributes (attributes) or contents of HTML elements, which increases the learning cost of front-end developers.

For example, in the HTML specification, an element can set its attribute (attribute), and by setting the attribute, its behavior can be changed. For example, the progress element may be used to set the progress of the progress bar, and the developer may change the current progress by setting the value of its value attribute through simple script code. The HTML code is as follows:

in the above HTML code, the script first calls getElementById to acquire the control object to be manipulated, and then sets its value by a line of code my _ progress. Thereafter, the progress bar will show progress at the 50% position.

This is a standard HTML attribute value setting method, and when a complex control implemented based on a canvas element is used, this value needs to be set according to a specific implementation, for example, for a watch dial, more codes need to be written to implement the same function.

On the other hand, when using the check Element (Element) function provided by the browser, for example, clicking a right mouse button on a certain Element of a page will generate a check Element function, which is provided by popular browsers such as Chrome, Safari and the like, and the change of the Element can be observed by manually modifying the value of the HTML attribute through a debugging interface provided by the browser without using a script. For complex controls implemented based on canvas, this mechanism cannot be used to debug or adjust conveniently.

That is, the use of canvas elements in combination with scripting language brings certain convenience to the front-end development of web pages, but there is a gap between the implementation mechanism of canvas and existing specifications such as HTML/CSS, which results in large code scale, increased learning cost, and reduced performance.

In addition, the controls rendered by canvas elements cannot be embedded in a form for use, such as input, meter, progress, and the like, which are inherent controls supported by HTML.

Due to the limitation of the canvas element, the complex control described by the canvas element cannot be put into a form (form) as a part of the form, so that the input of the user or the current value of the complex control cannot be transmitted to the background server for processing as a parameter.

Developers write more script code to implement this functionality, if necessary. The following HTML code implements a simple form that will organize all the input or control type sub-elements in a form element into parameters for submission to a specified uniform resource locator

If HTML is entered in the input box, and the Search submit button is clicked, the browser will submit a request to the following web page using the get method:

https://www.bing.com/search？q＝HTML

it should be noted that this is an inherent function of the user agent and can be implemented without any scripting support. However, this function cannot be achieved by placing the canvas element inside the form element.

Further, since the complex control interface implemented based on canvas elements has a lot of randomness, and lacks of standard or canonical constraints, the maintainability of the code is also reduced.

In other alternatives, SVG may be embedded in HTML documents to render complex graphics to implement canvas-like elements. But in essence, the use of SVG is almost the same as the canvas-based approach.

SVG uses HTML-like label language to define and organize vector graphics to be drawn, and then realizes dynamic effect by controlling parameters or CSS attributes through scripts, such as rotation of a dial pointer, and can be realized by rotating and converting the pointer. When the canvas is used, the process of defining the vector graphics becomes direct interface calling, and as a result, the method for realizing the rendering of the complex control by using the SVG has good flexibility even without the canvas and poorer performance than the canvas.

Similar functionality can be achieved using conventional plug-in techniques as an alternative, using object or embedded elements of HTML.

A typical usage is a Java Applet, the code of which is as follows:

in browsers, support for object or embed elements is typically implemented through a plug-in.

For example, when the user agent integrates a Java support plug-in, the HTML code will create an object element and present the content of an Applet (Java Applet) written in Java language therein, and the user can even interact with the Java Applet.

However, this solution has the following disadvantages:

(1) similar to the canvas implementation, there is a gap in data interaction between other elements in the HTML document and the object element.

According to the description of the HTML specification, other modules in the HTML surface, such as the scripting language, can only pass some parameters to the object in the object element by modifying the attribute of the related parameter (param) element, but the state of the object represented by the object element changes, but the state cannot be fed back to the script or other HTML elements, such as the HTML element is integrated into the form.

(2) Objects implemented by object or embed elements are mainly used to support rendering of complex external content or user interaction, such as Java Applet, Abode Flash, etc., and basically belong to another set of self-contained (self-contained) technology compared with HTML. For example, to render text using fonts, the plug-in implementation code needs to include support code for the fonts, and cannot use the font support function already provided by the user agent itself. Therefore, with the goal of supporting complex controls to be achieved by embodiments of the present invention, the plug-in mechanism is significantly heavier (heavy).

Currently, a commonly used browser plug-in mechanism uses a Netscape plug-in programming interface (NPAPI).

While Google Chrome provides a redefined browser extension interface, an ECMAScript interface is provided by an extension mechanism of Google Chrome, and plug-ins mainly realize corresponding extension functions through Chrome objects. Therefore, the Chrome extension mechanism and the canvas and script-based mechanism have the defects and shortcomings that the flexibility is poor, and the HTML cannot be conveniently supported.

In order to overcome the defects and shortcomings that the flexibility is poor and the support of HTML cannot be conveniently obtained, the method for rendering the elements in the HTML page provided by the embodiment of the invention is a lightweight user agent extension method, is used for realizing the support of an extensible complex control in an HTML user agent, and has the advantages of simple interface, good performance, convenience in extension, good safety and the like in the process of realizing the rendering of the complex control.

In order to conveniently obtain the support of the HTML and realize flexible rendering of the HTML leaf surface, a tag is added to the HTML, and the tag can be called view.

A view tag may be used to define a view element that represents a complex control in an HTML page, and parameters for the complex control may be defined by HTML param elements.

As a specific implementation, exemplary HTML code may be:

the implementation of the view element may define, for example, several attribute (attribute) information as follows:

type (type) attribute information: to distinguish between different renderer types, such as for common watch-like applications, two types may be defined: watch dial (watch face) and stopwatch (stopwatch).

Design type (design) attribute information: to distinguish different design types of the same renderer. The design type can include various factors which can affect the appearance and behavior of the complex control, such as a renderer for a watch dial type and a design type, and two basic design forms can be provided by design or simulated.

Still further, more different design styles are provided for simulated dials, such as the different style dials shown in fig. 1-3.

Fig. 1 and 2 show an analog dial, and fig. 3 shows a digital dial. Date information may also be displayed on the dial shown in fig. 1.

A vendor: when a plurality of different vendors' renderers of a specific type and design are installed in the user agent runtime environment, an implementation using a specific renderer vendor may be specified by a vendor domain name (vendor).

value: the value can be used to define the value represented by the current state of the element by using a string for script or other HTML page access to obtain the presentation value (presentation value) of the current control. For example, an element of the watch dial type may define the current time of the dial with a string such as 09:13: 45. The date, time and time zone expressed by the watch dial can be defined using a character string conforming to the ISO8601 standard specification, such as 2019-09-12T11:32:08+08:00, taking into account that the dial may show a date or time zone.

And (5) state: the script program obtains the current state of the element, such as move (moving), pause (pause), and the like, and the attribute is a read-only attribute.

width and height: it can be used to indicate the intrinsic size, width and height of a view element.

And the user agent calls a specific function interface realized by the renderer to complete the rendering of a certain type of view element, wherein the renderer can acquire corresponding rendering resources by using the interface provided by the user agent again, and then the rendering result is copied to a webpage by the user agent to be displayed.

In object-oriented programming, the interfaces that a renderer can implement are also referred to as "methods".

The renderer can at least realize the following interfaces:

an initialize interface, which may be used to initialize the renderer. Some security verification, such as validity verification of digital signature, can be performed through the initialization (initialization) interface, thereby guaranteeing the validity of the renderer.

The create interface can be used for creating (create) and returning a renderer instance (instance) and a running mode, and the instance corresponds to a specific view element one by one.

The operation mode of the renderer can be an active mode, a passive mode or a hybrid mode.

A render interface that may be used to accomplish the rendering of the complex element in the canvas object. And the interface provided by the user agent can be called again through the render interface to obtain each attribute and parameter of the currently rendered view element, even the value of the CSS attribute, so that the rendering of the view element is realized.

And an onXXX interface which can be used for processing user interaction events of the user on the corresponding view element.

The destroy interface is called, and can be used for releasing the renderer instance when the view element corresponding to the renderer instance is destroyed.

A terminate interface, which may be used to call when the user agent destroys an HTML web page rendering instance, e.g., closes a browser window, enabling the renderer to be released.

Implementing different types of view elements may be referred to as implementing different renderers (renderers), while the environment in which the user agent runs may be referred to as the "hosting environment".

Shared function libraries, also known as dynamic function libraries; as a specific example, on a Linux/Unix platform, it is called so file, and on a Windows platform, it is called DLL file.

As a specific implementation, in the case that the host environment supports a dynamic function library, the implementation of the renderer may also be referred to as loading the dynamic function library.

And the user agent loads the renderer and completes the initialization of the renderer according to a mode of loading a dynamic function library provided by a host environment according to a predetermined interface, then calls a method provided by the renderer to complete the rendering of the complex control, and finally displays the rendering result of the renderer in the area of the complex control on the webpage.

Fig. 4 is a flowchart illustrating a method for rendering an element in an HTML page according to an embodiment of the present invention. As shown in fig. 4, the method for rendering elements in an HTML page may include steps S110-S160, which include the following steps:

s110, determining a canvas object according to the elements to be rendered in the HTML page, and determining the operation mode of a renderer for rendering the elements to be rendered.

In some embodiments, when the user agent builds a rendering tree of a document from an HTML document, the user agent creates a canvas object (canvas object) from the intrinsic sizes specified by the width and height (height) attributes of each view element and invokes the create interface of the renderer to create a renderer instance.

In some embodiments, to save memory, the user agent may create a canvas object that is 0 wide and 0 high for the case where a default view element renderer is used. When the user agent calls the create interface, the canvas object is used as a parameter and is transmitted into the interface.

Wherein, width and height: these two attributes can be used to indicate the intrinsic size of the view element, and the default values of width and height can be set according to actual needs.

In some embodiments, when the HTML document does not define both the width and height attributes, the user agent may set the width and height to 200 and 150, respectively, as default values, for example.

And determining a canvas object according to the rendering element in the HTML page, and continuing to the step S120 after determining the operation mode of the renderer for rendering the element to be rendered.

And S120, loading the renderer according to the element to be rendered.

And if the element to be rendered comprises the indication information, loading the renderer specified by the rendering element according to the indication information.

As a specific implementation manner, the view element may specify a vendor domain name (vendor) attribute value of an optional renderer, and always try to load the renderer in the directory corresponding to the specified vendor attribute value according to the specified vendor attribute value.

In some embodiments, the renderers are maintained under a system directory specified by the user agent, and in an upper directory, vendor directories of different renderers may be used to differentiate between different renderer vendor implementations.

In some embodiments, a mechanism may also be provided at the user agent to allow the user to set the vendor name for preferential loading. If the installation date is set, searching in a priority manufacturer catalog, otherwise, selecting the renderer to be loaded according to the reverse order of the installation date.

In some embodiments, if the specified renderer fails to load, a default renderer provided inside the user agent is loaded.

In some embodiments, loading the renderer according to the element to be rendered, further comprising obtaining a renderer type and a renderer design type according to the element to be rendered;

As a specific implementation manner, if the view element does not specify a vendor attribute value, a renderer type (type) and a renderer design type (design) attribute value of the view element are obtained.

Each pair of type and design corresponds to a renderer or is called to correspond to a dynamic function library.

And searching and loading a corresponding renderer, such as libwatch-simple.

And if the renderer corresponding to the renderer type and the renderer design type fails to be loaded according to the renderer type and the renderer design type, loading the renderer corresponding to the renderer design type according to the renderer design type.

As a specific implementation manner, if loading of a corresponding renderer according to the type and design fails, loading the corresponding renderer, such as libwatch-default.

As a specific implementation manner, if loading of the renderer according to design fails, a default renderer provided inside the user agent is loaded.

As a specific implementation, the type of the complex control is specified by the type attribute of the view element.

Since the type of view element is not limited, the renderer can be loaded according to the actual requirements of the view element.

All the renderers, or executable programs, of the view provided by the vendor are put into a first-level subdirectory by taking the vendor domain name of the renderer as the organization of the subdirectory. The attribute names of two view elements of type and design are directly used for defining the name of the dynamic library or the name of the executable program according to a given rule, and the use of a complex configuration file is avoided.

Further, since the renderers are relatively independent software modules, no dependency relationship exists between the two different view type renderers, and therefore, no dependency relationship needs to be defined. And when the realization of different manufacturers and designs is switched, different appearances or styles of the same type or the same view element can be flexibly controlled.

In some embodiments, before loading the renderer according to the rendering element, further comprising: and verifying the validity of the renderer.

Due to the complexity of the network environment, a user may install a renderer that contains malicious code, thereby causing privacy to be divulged or allowing the renderer to exploit vulnerabilities of the host environment to run viruses or propagate worms, etc.

In the complex element rendering method of the embodiment of the invention, the renderer and the user agent run in the same process address space, so that the optimal performance is provided. In order to avoid the problem of reduced safety, the validity of the renderer is verified through a verification mechanism before the renderer is installed, so that a user can be ensured to check the validity of an installation source, and the situation that the renderer with an unknown source is installed in a complex element rendering process is avoided.

In some embodiments, renderers to be installed into the user agent runtime environment are organized into different subdirectories by vendor, and the vendor name corresponds to a specific domain name, such as, for example, view.

As a specific implementation manner, the renderer installation package may include the following information:

source domain names representing developers, such as views.

And digitally signing the renderer dynamic library by using a private key of a view. The renderer contains a digitally signed file of the corresponding file if it contains other external resource files, e.g. pictures, etc. Second, when a user installs a particular renderer into the user agent runtime environment, the following digital signature verification work can be performed:

and accessing a server corresponding to the source domain name by using an https protocol to obtain a domain name certificate.

TLS is used to verify that the certificate public key is valid, such as the issuing authority, the certificate validity time, etc.

And if the certificate public key is valid, verifying the digital signature of each file of the renderer by using the certificate public key.

And after the verification is passed, installing the renderer and the digital signature file thereof into the running environment of the user agent.

In some embodiments, upon loading the renderer, a secondary authentication is performed to avoid using expired certificates.

In some other implementations, it may also be ensured that the renderer does not contain malicious code, or that the renderer is substantially stable, through a manual review mechanism. An auditing mechanism of the running condition of the renderer is added in the user agent, and when the renderer with abnormal running is found, the loading of the renderer can be automatically forbidden.

In some embodiments, in the process of verifying the source validity of the third-party renderer, because the domain name of the manufacturer is used as an organization mode of a first-level subdirectory, a foundation is laid for reusing the HTTPS to verify the validity of the domain name, so that a separately developed third-party renderer validity verification mechanism is not needed, and the workload of developing the renderer is reduced.

After the renderer validation and loading is complete, the following steps continue. As shown at S130 in fig. 4.

S130, according to the renderer, obtaining attributes and parameters of the elements to be rendered through the user agent interface.

In some embodiments, when the view element needs to be rendered, the user agent may call a render method of the renderer, i.e., call a render interface.

As a specific implementation manner, in the implementation of the render interface, the renderer may call the interface provided by the user agent again to obtain the values of the attributes and parameters of the current view element, even the CSS attribute, so as to implement the corresponding rendering.

In the renderer render interface, the renderer may again call the renderer development interface provided by the user agent to draw the content.

As a particular implementation, to implement a view renderer, the user agent may provide an interface provided by the user agent for invocation by the renderer.

(1) The interface provided by the user agent can be used for setting and acquiring the interface of the value attribute value of the corresponding view element.

(2) The interface provided by the user agent can be used for traversing the paramlist sub-element in the corresponding view element and obtaining the interface of the specific param sub-element and the value attribute value thereof.

(3) The interface provided by the user agent can be used as an interface for acquiring the CSS attribute values corresponding to the view elements.

(4) The interface provided by the user agent can be used for 2D vector graphics drawing interfaces, or even 3D drawing interfaces, that draw graphics in canvas objects.

(5) The interface provided by the user agent enables the construction of an Image object, or other interface to multimedia objects, from an external data stream for the rendering of complex controls.

(6) Other interfaces can be used to obtain streaming data from a URL.

The interfaces provided by these user agents are the internal interfaces used by the user agents to parse, load resources, and render web pages.

In some embodiments, the user agent interface is encapsulated by a unified language.

As a specific implementation, these interfaces may be packaged as standard C language interfaces for use by renderer developers.

In this way, no matter whether the user agent is implemented by C or C + +, or by using different programming languages, by providing a uniform language-encapsulated interface for the renderer developer, the workload of the renderer for developing the renderer for different user agents can be reduced since only one development is required.

The following provides a specific set of embodiments:

// representing a handle to a view object

typedef HVIEW uintptr_t；

V/get value attribute value specifying VIEW object

const char*view_get_value(HVIEW view)；

V/setting value attribute value specifying VIEW object

void view_set_value(HVIEW view,const char*value)；

// representing a handle to a param object

typedef HPARAM uintptr_t；

// obtaining the handle of the designated param child element

HPARAM view_get_param(HVIEW view,const char*name)；

// number of child elements to obtain paramlist element

unsigned int view_get_paramlist_count(HVIEW view,const char*name)；

// obtaining the handle to a particular param child element object in the paramlist element

HPARAM view_get_param_in_list(HVIEW view,const char*name,int index)；

V/get value attribute value of specific param child object

const char*view_get_param_value(HVIEW view,HPARAM param)；

I/get external content object of specific param child element object, i.e. external data stream object defined by src attribute

typedef HDATA uintptr_t；

HDATA view_fetch_param_data(HVIEW view,HPARAM param)；

// Loading a specified URL data stream

V/after successful Loading, the user agent calls on _ ready to notify the data is ready

typedef void(*ON_READY_CB)(HDATA data,size_t size)；

void view_fetch_param_data(HVIEW view,const char*URL,ON_READY_CB on_ready)；

// releasing external data streams

void view_do_with_data(HVIEW view,HDATA data)；

// get view element specific CSS attribute value (calculated value)

// omitting the definition of CSSValue and CSSPropertylid here

CSSValue view_get_css_property(HVIEW view,CSSPropertyId id)；

// handle to represent canvas object

typedef HCANVAS uintptr_t；

Acquiring canvas objects and their sizes

HCANVAS view_get_canvas(HVIEW view,float*width,float*height)；

Drawing a straight line on a canvas object

void view_canvas_set_pen(HCANVAS canvas,PenType type,float pen_width)；

void view_canvas_move_to(HCANVAS canvas,float x,float y)；

void view_canvas_line_to(HCANVAS canvas,float x,float y)；

Load dataflow objects and draw onto canvas

typedef HIMAGE uintptr_t；

HIMAGE view_load_image(HDATA data)；

void view_canvas_draw_image(HCANVAS canvas,HIMAGE img,float x,floaty,float width,float height)；

void view_release_image(HIMAGE img)；

When the renderer finishes rendering the elements in the HTML page, the following steps are continuously performed, as shown in S140 of fig. 4.

And S140, rendering the element to be rendered by using the renderer according to the attribute and the parameter of the element to be rendered to obtain a first rendering result.

S150, storing the first rendering result in the canvas object.

Specifically, when the renderer finishes rendering and a first rendering result is obtained, the first rendering result is stored in the created canvas object.

And S160, copying the first rendering result from the canvas object to the HTML page according to the operation mode of the renderer.

As a specific implementation mode, the render interface caches the first rendering result in the canvas object, and after the canvas object returns the first rendering result through the render interface, the user agent copies the rendering result in the canvas object to the HTML page so as to display the rendering result to the user.

The operation mode of the renderer may include: active mode, passive mode, and promiscuous mode.

As a specific implementation manner, in the active mode, the create interface returns a time interval, for example, 20ms, at which a refresh rate of 50 frames per second can be achieved, the user agent calls the render interface once every 20ms, when the render interface returns a rendering result, the rendering result is an element that is rendered, and the rendering result in the canvas object is copied to the HTML page. The active mode may be appropriate for situations where the renderer is active and updating the rendered content.

As a specific implementation manner, in the passive mode, when the value attribute of the view element or the parameter changes, or the CSS attribute changes, the render interface is called, and then the rendering result returned by the render interface is copied to the HTML page. The passive mode may be suitable for situations where the content being rendered varies only in accordance with attributes and parameters.

As a specific implementation manner, in the mixed mode, the user agent calls a render interface at specified time intervals or when the value attribute of the view element changes or the parameter changes, and then the render result returned by the render interface is copied to the HTML page.

Wherein the mixed mode can be suitable for the situation that the two situations exist simultaneously.

As a specific implementation manner, the setting of the operation mode of the renderer may be implemented through a create interface, and may be specifically set according to specific needs, which is not specifically limited herein.

As a specific embodiment, the renderer of the view element may also access the CSS attribute values of the corresponding element, so that various CSS attributes, such as font (font), color (color), and the like, set by the user agent for the element may be directly used, so that the rendering effect of the renderer may be associated with the CSS attributes corresponding to the element to control the rendering effect, such as the color of the dial or the pointer, by setting the CSS attributes.

The existing CSS properties are not used to describe all of the rendering properties of the complex control. For example, to define the colors of the three hands of the dial separately, there is no way to use the existing CSS properties, since the color properties of the CSS properties can only be used to define one rendering property, typically the color used for text. In this case, the view element may define some rendering attributes of the complex control through the param parameter, so as to implement rendering of colors of the three pointers of the dial.

As a specific implementation mode, when a view element needs to be contained in a form and the value expressed by the value attribute of the view element is submitted to a background server as part of the form, the view element can be realized by defining the name attribute. Exemplary HTML code may be:

if the HTML is entered in the input box presented by the HTM, the search. https:// www.bing.com/search? q-HTML & time 2019-09-12T11:40:08+08:00

The watch dial type control created by the exemplary HTML code described above does not specify an initial value attribute, at which point the element is set to system time and walked, and reflects the time value on the value attribute of the view element. When the script or user agent reads the value attribute value of the view element, a character string of 2019-09-12T11:40:08+08:00 is obtained.

In some embodiments, when other parameters need to be defined, the param element included in the view element may be used to define the other parameters. For example, for elements of watch dial type, param elements may be used to define some parameters that may control the appearance or behavior of complex controls, and exemplary HTML code may be:

with the HTML code as exemplified above, the view element of the watch dial type is able to define two parameters with the param element:

move: for controlling whether the dial hands are stationary or moving.

hand: for controlling which hands the dial displays, for example the hour, minute and/or second hands.

It can be seen from the above embodiments that the meaning of the value attribute corresponding to the view element and the parameters that can be supported are clearly defined, and no matter what design implementation is specified through design, script or other parts in HTML, this element can be used through the same interface, or interact with it.

It should be noted that the value attribute of the view element has some differences from the role played by the parameter defined by the param element:

in some embodiments, the value property represents the current value of a complex control, which is a value that is of practical value to the script or other module in the system. For example, a watch dial, the current time of which is a value of practical value, and the presence or absence of a second hand on the dial, is irrelevant for other modules. The value property may be used to convey an initial value for a complex control, and this value may change as the program runs and interacts with the user.

The script or other portion of the HTML document may be made aware of the current state of the complex control by reading the value of this attribute. In addition, the script may also change the current value of the complex control by modifying the value of this property. That is, the value represented by the value attribute is bi-directional.

In some embodiments, the param sub-element is used to control the appearance or behavior of the complex control. The implementation code for the complex control does not modify these elements, but the script or other portion of the HTML document can change the appearance and behavior of the complex control by modifying these elements. That is, the value represented by the param subelement is unidirectional.

In addition, different types of view elements may generate corresponding events for notifying a script of changes in its state. For example, when a watch dial moves, an event named manual (handed) is generated, and a front-end developer can process the event in a script so as to complete the interaction between the dial and other HTML parts, and exemplary HTML codes can be:

in some embodiments, based on the complex control of the view element, the type of the complex control is specified by a type attribute. Once the type is determined, the interface of the complex control can be determined. A particular type of design may be selected by design attributes.

Moreover, by setting the value of the complex control by using the value attribute, or obtaining the current expression value of the complex control, defining the acceptable parameters of the complex control by using the param element, and adjusting the behavior of the complex control by modifying the parameters, the interaction with the complex control through a standard Document Object Model (DOM) interface can be realized.

In some embodiments, events generated by the complex control are processed in the script, listening for a state change of the complex control.

And the complex control defined by the view element can be directly contained in the form, so that the automation of form submission is realized.

In the method for rendering the elements in the HTML page provided by the embodiment of the invention, the support of the complex control is realized by providing a uniform specification, the association based on the DOM interface is established between the complex control and other HTML documents, and the coding workload of a front-end developer is reduced.

The problem of safety in the process of using a traditional plug-in technology to realize user agent extension is further solved, and the source of the renderer is verified, so that the safety in using a third-party renderer is improved to a certain extent.

According to the method for rendering the elements in the HTML page, provided by the embodiment of the invention, in the process of rendering the complex elements, the internal interface of the user agent can be called, and the parameters and the attributes for rendering the complex elements are obtained through the internal interface of the user agent, so that the elements of the complex control can be conveniently supported by the HTML page, the code scale is reduced, and the rendering performance of the complex elements is improved.

Further, the embodiment of the present invention can also provide the following rendering manner for rendering complex elements in an HTML page, and the specific steps are shown in fig. 5.

Fig. 5 is a flowchart illustrating a method for rendering an element in an HTML page according to an embodiment of the present invention.

S201, receiving an input operation instruction of a user.

Specifically, the first rendering result in the HTML page may receive an input operation instruction from a user, and when the input operation instruction is received, the following steps are performed.

S202, determining a first rendering result in the HTML page according to the input operation instruction;

s203, acquiring attributes and parameters of a first rendering result through a user agent interface according to the renderer;

s204, according to the attribute and the parameter of the first rendering result, rendering the first rendering result by using a renderer to obtain a second rendering result;

s205, storing the second rendering result in the canvas object;

s206, copying the second rendering result to the HTML page according to the operation mode of the renderer.

In some embodiments, when a user performs an input operation on a view element, the user agent invokes an onXXX method of the renderer, and if the corresponding view element needs to be re-rendered, invokes an interface provided by the user agent to implement rendering of the rendered element.

The onXXX interface may be used to handle user interaction events of the user on the corresponding view element, such as key presses (onKey), mouse click movements, touches, and gesture operations, and interaction events such as acquisition or loss of input focus (onfocuskill).

When the return value of onXXX interface is true, the user agent calls render interface to update the rendering result.

The process and steps of the user agent calling the render interface to update the rendering result are the same as the method for rendering the elements in the HTML page shown in fig. 4, and therefore, the details are not repeated.

As a specific example, by adding a view element defined by a view tag to HTML, array type parameters can also be supported.

And adding a paramlist element on the basis of the HTML param element, and defining the array type parameter through the paramlist element.

As a specific embodiment, when a complex element needs to use a variable number of pictures, the delivery of a resource parameter of multiple pictures with variable number is realized by a paramlist element, and the parameter can be defined as follows:

the view element defines an animation formed by playing a plurality of pictures in sequence to realize the effect of the animation pictures like the GIF.

As a specific example, in order to deliver a variable number of picture resource parameters, we use a paramlist element. In another specific implementation manner, the name (name) attribute of the param element in the paramlist element may be ignored, and if the name attribute is not set, the user agent may automatically set the name attribute, and an exemplary HTML code may be:

as a specific embodiment, the definition of the group type parameter can be realized through the paramlist element, and not only the picture can be acquired, but also background music or other multimedia content can be defined, thereby realizing the multimedia support. For example, a click support parameter when the second hand is moving may be added to the watch dial, resulting in a better user experience. Here, the number of the electrodes is not particularly limited.

As a specific embodiment, the number of its members, for example, the number of sub-elements, can be obtained quickly by adding a paramlist element, and when a param element is used, it needs to use a category (category) attribute for classification to obtain these information, and the category of the parameter is described by the category attribute, and all parameters in the same category form an array type parameter, in some specific implementations, an exemplary HTML code may be:

although better performance support can be obtained by defining the array type parameter by using the param element and the category attribute, the development workload required for defining the array type parameter is not as low as that by using the paramlist element.

As a specific embodiment, when the complex element contains the src attribute, the user agent may obtain the required external resource according to the src attribute value, and transfer the obtained external resource to the view element for rendering the complex element.

As a specific example, when the src element is used, the external resource may be downloaded by using an external content obtaining function already existing in the user agent, so as to reduce implementation complexity of the view element, and a specific process is shown in fig. 6.

Fig. 6 is a flowchart illustrating a method for rendering a complex element according to an embodiment of the present invention.

When the element to be rendered comprises external resource acquisition instruction information, executing the following steps:

s301, determining a Uniform Resource Locator (URL) of the external resource according to the external resource acquisition instruction information, wherein the URL is used for searching and acquiring the external resource, and the external resource is used for rendering by the renderer to obtain a first rendering result.

S302, storing the external resources in a local cache system, and reallocating local links for the external resources stored in the local cache system, wherein the element to be rendered comprises the reallocated local links.

In some embodiments, the reassigned local link is removed and the first rendering result is destroyed.

In some embodiments, the first rendering result may be destroyed directly if the reassigned local link is not included.

In some embodiments, when the first rendering result needs to be destroyed and the first rendering result includes the reallocated local link, the reallocated local link is removed before the first rendering result is destroyed, so that the file saved in the cache system is not deleted.

As a specific implementation manner, by using the src attribute, when the element to be rendered contains the attribute, the user agent obtains external resource acquisition instruction information according to the src attribute, and then initiates an acquisition (fetch) request of an external resource.

These external resources may be stored in a file system based cache system and have a unique name generated based on the reassigned local link of the external resource, which may be, for example, an md5 hash string.

As a specific implementation manner, a symbolic link or shortcut may be established on the local cache system by using view- < identifier > -param- < name > as a name, where the name may point to a file stored in the cache system corresponding to the acquired external resource.

Wherein < identifier > may be an identifier given by the user agent for each view element created by the current HTML page, may take a pointer value in the renderer of the view element or a process identifier when the renderer of the view element is implemented across processes. < name > is the name of the param element that defines the external resource.

After the external resource is successfully acquired, a specific event is triggered to notify the view element where the param is located.

When the view element needs to be loaded again, once the view element knows that the user agent has acquired the specified external resource, in the renderer of the view element, the needed external resource can be acquired by using the view- < identifier > -param- < name > as the file name determined by the local link.

By using the src attribute and the method for allocating the URL, particularly when a renderer of a view element is implemented in a cross-process manner, the view renderer does not need to implement a complex external resource acquisition function by itself, and for example, external resources are downloaded using protocols such as a hypertext Transfer Protocol (HTTP) or a hypertext Transfer Protocol secure Protocol (HTTPs), a File Transfer Protocol (FTP), and the like.

Since the renderer does not need to access the network, on one hand, the development complexity of the renderer is reduced, and on the other hand, the capability of the renderer process to access the network, such as the process capability defined by the Linux kernel, can be limited, so that the safety of the whole system is improved.

Furthermore, by reallocating the naming mode of the local link, the renderer does not need to acquire the original file name of the external resource and the file name stored in the cache system, and only needs to access the acquired external content according to the allocated local link. This avoids passing additional data to the renderer, only by informing the renderer that the external resource specified by a certain parameter is ready.

Fig. 7 is a schematic flowchart of complex element rendering according to an embodiment of the present invention.

As a specific example, the HTML page may include view element 1 and view element 2, as shown in FIG. 7.

When an HTML page is opened, a view element 1 and a view element 2 need to be loaded, wherein a user agent creates a canvas object 1 for the view element 1, determines a return mode of a rendering result, and calls a renderer 1 required by the view element 1.

When the renderer 1 executes rendering work, an interface provided by a user agent can be called to acquire parameters, attributes and required rendering resources of the view element 1.

After the renderer 1 finishes rendering work and obtains a rendering result, the rendering result is cached in the canvas object 1, and the canvas object copies the rendering result into an HTML page according to a returning mode of the rendering result.

When the view element 2 needs to be rendered, the user agent creates a canvas object 2 for the view element 2, determines a return mode of a rendering result, and calls a renderer 2 needed by the view element 2.

When the renderer 2 executes rendering work, an interface provided by a user agent can be called to acquire parameters, attributes and required rendering resources of the view element 2.

When the view element 2 includes external resource acquisition instruction information, determining a uniform resource locator URL of an external resource according to the instruction information, acquiring an external resource required for rendering the view element 2 according to the URL, and if the external resource is acquired for the first time, resetting a local link for the external resource, specifically, establishing a symbolic link or shortcut on a local cache system by using view- < identifier > -param- < name > as a name, where the name can point to a file stored in the cache system corresponding to the acquired external resource.

Meanwhile, the reset local link is notified to the view element 2, and when the view element 2 needs to be rendered again, the required external resource can be directly obtained from the cache system.

After the renderer 2 finishes rendering work and obtains a rendering result, the rendering result is cached in the canvas object 2, and the canvas object 2 copies the rendering result into the HTML page according to the returning mode of the rendering result.

The embodiment of the invention provides a method for rendering elements in an HTML page, which can conveniently obtain the support of HTML, can call an internal interface of a user agent in the process of rendering complex elements, and can obtain parameters and attributes for rendering the complex elements through the internal interface of the user agent, thereby improving the performance of rendering the complex elements and reducing the scale of codes.

Fig. 8 is a schematic diagram of an apparatus for rendering a complex element according to an embodiment of the present invention. As shown in fig. 9, the apparatus for complex element rendering includes: a determination module 401, a loading module 402, an acquisition module 403, a rendering module 404, and a storage module 405.

An obtaining module 401, configured to determine a canvas object according to an element to be rendered in a hypertext markup language HTML page, and determine an operation mode of a renderer that renders the element to be rendered;

a loading module 402, configured to load a renderer according to an element to be rendered;

in some embodiments, the element to be rendered includes indication information, and the loading module 402 is configured to load the renderer according to the element to be rendered, including: and loading the renderer specified by the element to be rendered according to the indication information.

In some embodiments, the loading module 402 is further configured to load the renderer corresponding to the renderer design type according to the renderer type and the renderer design type if the renderer corresponding to the renderer type and the renderer design type fails to be loaded according to the renderer design type.

An obtaining module 403, configured to obtain, according to the renderer, attributes and parameters of an element to be rendered through the user agent interface;

wherein the user agent interface is encapsulated by a unified language.

The rendering module 404 is further configured to render the element to be rendered by using a renderer according to the attribute and the parameter of the element to be rendered to obtain a first rendering result;

a storage module 405 to store the first rendering result in the canvas object;

the loading module 404 is further configured to copy the first rendering result from the canvas object to the HTML page according to the runtime mode of the renderer.

In some embodiments, the element to be rendered includes external resource obtaining instruction information, and the loading module 402 is further configured to determine a uniform resource locator URL of the external resource according to the external resource obtaining instruction information, where the URL is used to search and obtain the external resource, where the external resource is used for the renderer to render to obtain the first rendering result.

The loading module 402 is further configured to store the external resource in the local cache system, and reallocate the local link for the external resource stored in the local cache system, where the element to be rendered includes the reallocated local link.

In some embodiments, the apparatus for complex element rendering further includes a destruction module configured to remove the redistributed local links and destroy the first rendering result.

In some specific implementation manners, the complex element rendering apparatus further includes a determining module, where the determining module is configured to verify validity of the renderer according to the rendering element before the renderer is loaded.

In some embodiments, the apparatus for complex element rendering further includes a data receiving module, configured to receive an input operation instruction of a user.

In some embodiments, according to the input operation instruction of the user, the determining module 401 is further configured to determine a first rendering result in the HTML page according to the input operation instruction;

the obtaining module 403 is further configured to obtain, according to the renderer, the attribute and the parameter of the first rendering result through the user agent interface;

the rendering module 404 is further configured to render the first rendering result by using a renderer according to the attribute and the parameter of the first rendering result to obtain a second rendering result;

the storage module 405 is further configured to store the second rendering result in the canvas object;

the load module 404 is further configured to copy the second rendering result to the HTML page according to the run mode of the renderer.

It can be understood that the complex element rendering apparatus according to the embodiment of the present invention may correspond to an execution main body of the complex element rendering method according to the embodiment of the present invention, and specific details of operations and/or functions of each module of the complex element rendering apparatus may refer to the descriptions of the corresponding parts in the complex element rendering method according to the embodiment of the present invention, and are not described herein again for brevity.

Fig. 9 is a hardware structure of element rendering in an HTML page according to an embodiment of the present invention.

As shown in fig. 9, the device 500 for element rendering in the present embodiment includes an input device 501, an input interface 502, a central processor 503, a memory 504, an output interface 505, and an output device 506. The input interface 502, the central processing unit 503, the memory 504, and the output interface 505 are connected to each other through a bus 510, and the input device 501 and the output device 506 are connected to the bus 510 through the input interface 502 and the output interface 505, respectively, and further connected to other components of the element rendering device 500.

Specifically, the input device 501 receives input information from the outside and transmits the input information to the central processor 503 through the input interface 502; the central processor 503 processes input information based on computer-executable instructions stored in the memory 504 to generate output information, temporarily or permanently stores the output information in the memory 504, and then transmits the output information to the output device 506 through the output interface 505; the output device 506 outputs the output information to the outside of the element rendering device 500 for use by the user.

That is, the apparatus for complex element rendering shown in fig. 9 may also be implemented to include: a memory storing computer-executable instructions; and a processor which, when executing computer executable instructions, may implement the method and apparatus for complex element rendering described in connection with fig. 4 and 8.

In one embodiment, the apparatus 500 for complex element rendering shown in FIG. 9 includes: a memory 504 for storing programs; the processor 503 is configured to execute the program stored in the memory to execute the method for rendering the elements in the HTML page according to the embodiment of the present invention.

An embodiment of the present invention further provides a computer-readable storage medium, where the computer-readable storage medium has computer program instructions stored thereon; the computer program instructions, when executed by a processor, implement a method for rendering elements within an HTML page provided by an embodiment of the present invention.

It is to be understood that the invention is not limited to the specific arrangements and instrumentality described above and shown in the drawings. A detailed description of known methods is omitted herein for the sake of brevity. In the above embodiments, several specific steps are described and shown as examples. However, the method processes of the present invention are not limited to the specific steps described and illustrated, and those skilled in the art can make various changes, modifications and additions or change the order between the steps after comprehending the spirit of the present invention.

The functional blocks shown in the above-described structural block diagrams may be implemented as hardware, software, firmware, or a combination thereof. When implemented in hardware, it may be, for example, an electronic circuit, an Application Specific Integrated Circuit (ASIC), suitable firmware, plug-in, function card, or the like. When implemented in software, the elements of the invention are the programs or code segments used to perform the required tasks. The program or code segments may be stored in a machine-readable medium or transmitted by a data signal carried in a carrier wave over a transmission medium or a communication link. A "machine-readable medium" may include any medium that can store or transfer information. Examples of a machine-readable medium include electronic circuits, semiconductor memory devices, ROM, flash memory, Erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, fiber optic media, Radio Frequency (RF) links, and so forth. The code segments may be downloaded via computer networks such as the internet, intranet, etc.

It should also be noted that the exemplary embodiments mentioned in this patent describe some methods or apparatus based on a series of steps or apparatus. However, the present invention is not limited to the order of the above-described steps, that is, the steps may be performed in the order mentioned in the embodiments, may be performed in an order different from the order in the embodiments, or may be performed simultaneously.

As described above, only the specific embodiments of the present invention are provided, and it can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described apparatuses, modules and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again. It should be understood that the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive various equivalent modifications or substitutions within the technical scope of the present invention, and these modifications or substitutions should be covered within the scope of the present invention.

Claims

1. A method of element rendering within a hypertext markup language, HTML, page, the method comprising:

determining a canvas object according to an element to be rendered in an HTML page, and determining an operation mode of a renderer for rendering the element to be rendered;

loading the renderer according to the element to be rendered;

acquiring attributes and parameters of the elements to be rendered through a user agent interface according to the renderer;

according to the attribute and the parameter of the element to be rendered, the renderer is used for rendering the element to be rendered to obtain a first rendering result;

storing the first rendering result in the canvas object;

and copying the first rendering result from the canvas object to the HTML page according to the operation mode of the renderer.

2. The method of claim 1, wherein the element to be rendered comprises indication information, and wherein loading the renderer according to the element to be rendered comprises:

and loading the renderer specified by the element to be rendered according to the indication information.

3. The method of claim 1, wherein the loading the renderer according to the element to be rendered comprises:

obtaining a renderer type and a renderer design type according to the element to be rendered;

and loading the renderer corresponding to the renderer type and the renderer design type according to the renderer type and the renderer design type.

4. The method of claim 3, further comprising:

and if the renderer corresponding to the renderer type and the renderer design type is loaded in failure according to the renderer type and the renderer design type, loading the renderer corresponding to the renderer design type according to the renderer design type.

5. The method of claim 1, wherein the element to be rendered comprises external resource acquisition instruction information, the method further comprising:

and determining a Uniform Resource Locator (URL) of an external resource according to the external resource acquisition instruction information, wherein the URL is used for searching and acquiring the external resource, and the external resource is used for rendering by the renderer to obtain the first rendering result.

6. The method of claim 5, further comprising:

and storing the external resource in a local cache system, and reallocating a local link for the external resource stored in the local cache system, wherein the element to be rendered comprises the reallocated local link.

7. The method of claim 6, further comprising: removing the reallocated local links;

and destroying the first rendering result.

8. The method of any of claims 1 to 7, wherein the user agent interface is encapsulated by a unified language.

9. The method of claim 1, wherein prior to loading the renderer according to the element to be rendered, the method further comprises:

and verifying the validity of the renderer.

10. The method of claim 1, wherein after copying the first rendering result from the canvas object to the HTML page according to the runtime mode of the renderer, the method further comprises:

receiving an input operation instruction of a user;

determining the first rendering result in the HTML page according to the input operation instruction;

acquiring attributes and parameters of the first rendering result through the user agent interface according to the renderer;

according to the attribute and the parameter of the first rendering result, the renderer is used for rendering the first rendering result to obtain a second rendering result;

storing the second rendering result in the canvas object;

and copying the second rendering result to the HTML page according to the running mode of the renderer.

11. An apparatus for rendering elements within a hypertext markup language (HTML) page, the apparatus comprising:

the system comprises a determining module, a rendering module and a display module, wherein the determining module is used for determining a canvas object according to an element to be rendered in a hypertext markup language (HTML) page and determining an operation mode of a renderer for rendering the element to be rendered;

the acquisition module is used for acquiring the attribute and the parameter of the element to be rendered through a user agent interface according to the renderer;

a storage module to store the first rendering result in the canvas object;

the loading module is further configured to copy the first rendering result from the canvas object to the HTML page according to the running mode of the renderer.

12. An apparatus for rendering elements within a hypertext markup language (HTML) page, the apparatus comprising: a processor and a memory storing computer program instructions;

the processor, when executing the computer program instructions, implements a method of element rendering within an HTML page as claimed in any one of claims 1-10.

13. A computer-readable storage medium having stored thereon computer program instructions which, when executed by a processor, implement a method of element rendering within an HTML page as claimed in any one of claims 1 to 10.