WO2018133452A1 - 一种网页渲染方法及相关设备 - Google Patents

一种网页渲染方法及相关设备 Download PDF

Info

Publication number
WO2018133452A1
WO2018133452A1 PCT/CN2017/104545 CN2017104545W WO2018133452A1 WO 2018133452 A1 WO2018133452 A1 WO 2018133452A1 CN 2017104545 W CN2017104545 W CN 2017104545W WO 2018133452 A1 WO2018133452 A1 WO 2018133452A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
dom
client
server
attribute
Prior art date
Application number
PCT/CN2017/104545
Other languages
English (en)
French (fr)
Inventor
代亚亚
胡锋
张涛
赵以权
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Priority to EP17893499.8A priority Critical patent/EP3518124A4/en
Publication of WO2018133452A1 publication Critical patent/WO2018133452A1/zh
Priority to US16/393,417 priority patent/US20190251143A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols

Definitions

  • the present invention relates to the field of computer technologies, and in particular, to a webpage rendering method and related devices.
  • the embodiment of the invention discloses a webpage rendering method and related device, which can improve the rendering efficiency of the webpage in a high concurrent scenario and reduce the memory overhead of the server.
  • a first aspect of the embodiment of the present invention discloses a webpage rendering method, which may include:
  • the client may receive the initial page content returned by the server based on the page load request, where the initial page content includes a front end framework, such as a UEE framework, and at least one Document Object Model (Document Object Model, DOM).
  • the client may load the at least one DOM based on the front-end framework, and obtain a page template and page metadata matching each DOM based on the feature attributes of each DOM, thereby each DOM based on the page template of each DOM matching
  • the matched page metadata is rendered, the HTML fragment of each DOM is obtained, and at least one HTML fragment of the DOM is composed into an HTML page, and the HTML page is displayed.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • the specific manner in which the client loads at least one DOM based on the front-end framework may be:
  • the client loads at least one DOM into the front-end framework and determines the target DOM, wherein the target DOM is the DOM recognized by the front-end framework from the at least one DOM;
  • the specific manner in which the client obtains the page template and page metadata matching each DOM based on the feature attributes of each DOM may be:
  • the client For each DOM in the target DOM, the client obtains page templates and page metadata that match each DOM based on the feature attributes of each DOM.
  • the method may further include:
  • the client When receiving the page customization request, the client displays a customized interface, receives the configuration operation of the user in the customized interface, and obtains the page metadata generated by the configuration operation, thereby establishing an association relationship between the page metadata and the first attribute of the DOM.
  • the page metadata is sent to the server so that the server saves the page metadata.
  • the client provides a customized and customized interface, which enables flexible and efficient page configuration, enabling users who do not understand the technology to achieve product customization, reduce customization thresholds, and enhance customization effects, thereby reducing product secondary customization development and maintenance to a certain extent. the cost of.
  • the feature attribute may specifically include a first attribute and a second attribute, where the first attribute may be a meta attribute, and the second attribute may be a name attribute or another attribute, such as a component-name attribute.
  • the meta-id attribute and the like are not limited in the embodiment of the present invention.
  • the specific manner in which the client obtains the page template and the page metadata matching each DOM based on the feature attributes of each DOM may include the following:
  • the initial page content may further include a page template and page metadata, and the client may thereby find a page template matching the second attribute of each DOM from the initial page content, and a page element associated with the first attribute of each DOM data.
  • the page metadata and page templates are sent to the client along with the front-end framework and the DOM, which can reduce the information interaction between the client and the server, improve the rendering efficiency of the page, and reduce the running pressure on both sides of the client and the server.
  • the client sends a request message to the server, where the request message is used to request to obtain a page template and page metadata of each DOM, wherein the request message includes a second attribute and a first attribute of each DOM, and the client receives the server based on The request message returns a page template that matches the second attribute, and page metadata associated with the first attribute.
  • the initial page content may also include only the required page metadata
  • the client may find the page metadata associated with each DOM meta attribute from the initial page content, and the page template needs the client to send the server to the server separately.
  • the request message can be obtained.
  • the client sends a request message to the server, which can be understood as follows: 1. For each DOM, the client sends a first request message and a second request message to the server, where the first request message is used to obtain the DOM. a page template, the first request message includes a second attribute of the DOM, the second request message is used to obtain page metadata of the DOM, and the second request message includes a first attribute of the DOM; 2. for each DOM, The client sends a request message to the server, where the request message is used to obtain the page template and the page metadata of the DOM, the request message includes the second attribute and the first attribute of the DOM; 3.
  • the client For the page template, the client The server sends a request message, which is used to obtain a page template of each DOM in all DOMs identified by the front-end framework, the request message includes a second attribute of each DOM; for the page metadata, the client sends another page to the server a request message for obtaining page metadata of each DOM in all DOMs identified by the front-end framework, the request message including the first of each DOM 4. For all DOMs identified by the front-end framework, the client sends a request message to the server for requesting to obtain page templates and page metadata for each DOM in all DOMs. The request message contains all DOMs. The second attribute and the first attribute of each DOM.
  • the server after receiving the request message of the client, the server separately searches for the page metadata associated with the first attribute and the page template that matches the second attribute, thereby returning it to the client.
  • the client may also cache the page template locally, so when the page template needs to be acquired next time, the client may first search for the corresponding page template from the local, and if so, Can be obtained locally, if it does not exist, it needs to be obtained from the server. That is to say, the page template of each DOM obtained by the client can also be obtained locally. Cache the page template locally, so as to avoid getting the page template to the server every time the page is rendered, which can reduce the information interaction between the client and the server, improve the page rendering efficiency, and reduce the sides of the client and the server. Operating pressure.
  • a second aspect of the embodiment of the present invention discloses another webpage rendering method, which may include:
  • the server may obtain the initial page content that matches the page load request and send it to the client.
  • the initial page content includes a front end frame and at least one DOM.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • the method may further include:
  • the server determines the current load and, if the load exceeds the preset load threshold, performs an operation of obtaining initial page content that matches the page load request.
  • the server performs page rendering based on the page loading request, obtains source code of the HTML page, and sends the source code to the client, where the client is based on the source code. Show the HTML page.
  • the server may determine whether the page rendering is performed by the client side or the page rendering by the server side according to the current load situation. If the server load is too large, the server side performs page rendering. Thereby, the server running pressure can be alleviated and the page rendering efficiency can be improved. If the server load is small, page rendering is performed by the server side, which can improve the performance of the client side. In this way, you can flexibly implement page rendering and improve system performance.
  • a third aspect of the embodiment of the present invention discloses a client, which may include a processor, a transceiver, and an output device, and may be used to execute the webpage rendering method disclosed in the first aspect.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • the fourth aspect of the embodiment of the present invention discloses another client, which may include: a transceiver module, a loading module, an obtaining module, a rendering module, a display module, and an establishing module, and may be used to execute the webpage rendering method disclosed in the first aspect.
  • the physical device corresponding to the transceiver module may be the transceiver disclosed in the third aspect.
  • the loading module, the obtaining module, the rendering module, and the entity device corresponding to the establishing module may be the processor disclosed in the third aspect, and the physical device corresponding to the display module may be It is an output device disclosed in the third aspect.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • a fifth aspect of the embodiments of the present invention discloses a server, which may include: a processor, a transceiver, and a memory, and may be used to execute the webpage rendering method disclosed in the second aspect.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • the sixth aspect of the embodiment of the present invention discloses another server, which may include: a transceiver module, an obtaining module, a determining module, a rendering module, and a saving module, and may be used to execute the webpage rendering method disclosed in the second aspect.
  • the physical device corresponding to the transceiver module may be the transceiver disclosed in the fifth aspect
  • the entity device corresponding to the acquiring module, the determining module, and the rendering module may be the processor disclosed in the fifth aspect
  • the physical device corresponding to the saving module may be the fifth Aspect of the disclosed memory.
  • Page rendering by the client which can reduce server hardware deployment costs, reduce server stress, reduce server memory overhead, improve page rendering efficiency, and system performance in high concurrency scenarios.
  • the server may obtain the initial page content matched by the page loading request, and return the content to the client.
  • the initial page content includes the front-end framework and at least one DOM, and the client And loading at least one DOM based on the front-end framework, and obtaining a matching page template and page metadata based on the feature attributes of each DOM, thereby rendering the page metadata based on the page template, obtaining an HTML fragment of each DOM, and finally All HTML snippets make up an HTML page and display an HTML page.
  • the client performs page rendering, thereby reducing server hardware deployment cost, reducing server pressure, reducing server memory overhead, improving page rendering efficiency, and system performance in a high concurrent scenario.
  • FIG. 1 is a schematic structural diagram of a webpage rendering system according to an embodiment of the present invention.
  • FIG. 2 is a schematic flowchart of a webpage rendering method according to an embodiment of the present invention.
  • FIG. 3 is a schematic flowchart diagram of another webpage rendering method according to an embodiment of the present invention.
  • 4a is a first schematic diagram of a customized interface disclosed in an embodiment of the present invention.
  • 4b is a second schematic diagram of a customized interface disclosed in an embodiment of the present invention.
  • 4c is a third schematic diagram of a customized interface disclosed in an embodiment of the present invention.
  • 4d is a fourth schematic diagram of a customized interface disclosed in an embodiment of the present invention.
  • 4e is a fifth schematic diagram of a customized interface disclosed in an embodiment of the present invention.
  • FIG. 5 is a schematic structural diagram of a client according to an embodiment of the present disclosure.
  • FIG. 6 is a schematic structural diagram of another client according to an embodiment of the present disclosure.
  • FIG. 7 is a schematic structural diagram of a server according to an embodiment of the present invention.
  • FIG. 8 is a schematic structural diagram of another server according to an embodiment of the present invention.
  • the embodiment of the invention discloses a webpage rendering method and related device, which can improve the rendering efficiency of the webpage in a high concurrent scenario and reduce the memory overhead of the server. The details are described below separately.
  • FIG. 1 is a schematic structural diagram of a webpage rendering system according to an embodiment of the present invention.
  • a server and at least one client are included.
  • the server and the at least one client are connected through the Internet.
  • the server may be a stand-alone service device, or may be a cluster service device composed of multiple independent service devices, and the server may be a browser application (Application, APP).
  • APP Application, APP
  • the client may refer to a browser application, or may be a terminal device installed with a browser APP, and the terminal device may include, for example, a smart phone, a tablet computer, a notebook computer, a desktop computer, a vehicle terminal, and a smart wearable device.
  • the device and the like are not limited in the embodiment of the present invention.
  • the client can send a page load request to the server according to the operation of the user on the display interface, thereby displaying the corresponding HTML page, and the server can store multiple page contents, which can be loaded based on the page sent by the client. Requesting to obtain the corresponding page content, and sending it to the client, or performing page rendering based on the page loading request sent by the client, and sending the obtained HTML page to the client.
  • FIG. 2 is a schematic flowchart diagram of a webpage rendering method according to an embodiment of the present invention. As shown in FIG. 2, the method may include the following steps:
  • the client sends a page load request to the server.
  • the page loading request may be triggered by the user. For example, the user clicks on a webpage link, or enters a webpage address in the address bar of the webpage, and clicks the “enter” or “determine” function button, etc., the client. After detecting the above operation of the user, a page load request can be generated and sent to the server in the background.
  • the server receives the page load request and obtains the initial page content that matches the page load request.
  • the initial page content includes a front-end framework and at least one DOM, wherein the front-end framework mainly includes a World Wide Web for Internet experience, also called a World Wide Web (web) development framework, that is, a user experience environment (User The Experience Environment (UEE) framework, DOM, can also be called a page component.
  • UEE User The Experience Environment
  • DOM can also be called a page component.
  • Tags such as ⁇ body>, ⁇ uee:gadget> can be called DOM.
  • the at least one DOM included in the initial page content may be the original DOM or the user-configured DOM, which is not limited in the embodiment of the present invention.
  • the page loading request carries a web address that needs to access a webpage
  • the server stores a front-end framework and a plurality of DOMs that have a binding relationship with the webpage. Therefore, after receiving the page loading request sent by the client, the server The initial page content that matches the page load request can be further obtained.
  • the server sends the initial page content to the client.
  • the server may return it to the client.
  • the client receives the initial page content, and loads at least one DOM based on the front end framework, and obtains a page template and page metadata that match each DOM based on the feature attributes of each DOM.
  • the server may send the initial page content to the client, and the client may receive the corresponding initial page content, and the app.js may be loaded through the script script tag.
  • the client may further load the initial page content. Specifically, the client may load at least one DOM included in the initial page content based on the front end framework included in the initial page content.
  • the client may further acquire the page template and the page metadata that match the DOM based on the feature attributes of each DOM in the at least one DOM.
  • the specific manner in which the client loads at least one DOM based on the front-end framework may be:
  • the client loads at least one DOM into the front-end framework and determines the target DOM, wherein the target DOM is the DOM recognized by the front-end framework from the at least one DOM.
  • the specific manner in which the client obtains the page template and page metadata matching each DOM based on the feature attributes of each DOM may be:
  • the client For each DOM in the target DOM, the client obtains page templates and page metadata that match each DOM based on the feature attributes of each DOM.
  • the front-end framework can be configured with a location for the DOM, and after obtaining the front-end framework and the DOM, the client loads each DOM to a corresponding position of the front-end framework to form a page.
  • the UEE framework listens for the loading of each DOM, for example by the following sample code:
  • the client determines the DOM as the target DOM, and obtains the page frame and page metadata that match the feature attribute; if the currently loaded DOM is not the DOM recognized by the UEE frame, The client can not respond.
  • the client's page sends DOMContentLoaded to the UEE engine, and the UEE engine performs page rendering based on the obtained page template and page metadata.
  • the client may first load the DOM into the front-end framework, and then obtain the page template and the page metadata of each DOM, which may be performed simultaneously, or vice versa, which is not limited in the embodiment of the present invention.
  • the client renders each DOM matching page metadata based on each DOM matching page template to obtain an HTML fragment of each DOM.
  • the client after the page content is loaded and the page template and the page metadata of each DOM match are obtained, the client renders the page metadata based on the page template for each DOM, thereby obtaining the HTML fragment of the DOM.
  • the page template and the page metadata can be compiled into HTML fragments by a rendering engine such as an AngularJS engine.
  • the client composes at least one HTML fragment of the DOM into an HTML page and displays the HTML page.
  • the client generates a corresponding HTML fragment for each DOM, and after generating all the HTML fragments of the DOM, all the HTML fragments can be composed into an HTML page, thereby being displayed in the display interface of the client.
  • the server may obtain the initial page content matched by the page loading request, and return the content to the client, where the initial page content includes the front-end framework and at least one DOM, and the client
  • the terminal may load at least one DOM based on the front-end framework, and obtain a matching page template and page metadata based on the feature attributes of each DOM, thereby rendering the page metadata based on the page template, obtaining an HTML fragment of each DOM, and finally Make all HTML snippets into HTML pages and display HTML pages.
  • the client performs page rendering, thereby reducing server hardware deployment cost, reducing server pressure, reducing server memory overhead, improving page rendering efficiency, and system performance in a high concurrent scenario.
  • FIG. 3 is a schematic flowchart diagram of another webpage rendering method according to an embodiment of the present invention. As shown in FIG. 3, the method may include the following steps:
  • the client displays a customized interface when receiving a page customization request.
  • the page customization request may be triggered by the user.
  • the user clicks the function button of the page customization on the display interface of the client, and the client generates a page customization request; or may be sent by another device or the client.
  • the user is triggered on the other client, and the page customization request is generated by the other client, and is sent to the client, which is not limited in the embodiment of the present invention.
  • the client may further display a customized interface.
  • the customized interface can provide the user with the function of page customization, and the user can configure each customizable DOM on the customized interface, thereby changing the display style of the webpage.
  • the client receives the configuration operation in the customization interface, obtains page metadata generated by the configuration operation, and establishes an association relationship between the page metadata and the first attribute of the DOM.
  • the user can perform a configuration operation on the customizable DOM, and the client can receive the configuration operation of the user and obtain the page metadata generated by the configuration operation, thereby Establish a relationship between the page metadata of each DOM and the first attribute of the DOM.
  • the customized interface can be a blank interface, the user needs to display the DOM from the configuration page that is not available, such as adding the DOM that can be displayed in the page;
  • the customized interface can also be the original interface provided by the server, the original interface Contains some of the DOM attributes, that is, the original page metadata, the user can use the original page element in the original interface
  • the configuration of the data is modified, added, deleted, and the like, which is not limited in the embodiment of the present invention.
  • FIG. 4a shows the original interface provided by the server.
  • the original interface displays the customizable DOM and the non-customizable DOM.
  • the user can move the mouse to the customizable DOM area, or click through the touchable way to customize the DOM area.
  • the original interface displays the "Settings" button, and the user clicks the "Settings” button by mouse or touch.
  • the end can thus show the custom interface of the customizable DOM.
  • the customized interface may be specifically displayed in the form of a pop-up window, as shown in FIG. 4b, or may be a new interface, which is not limited in the embodiment of the present invention.
  • the user can configure the number of columns displayed in the form in the custom interface. For example, three columns can be set; the user can also configure the fields displayed on the page in the custom interface, and the selected fields can be selected from the available fields.
  • Field the available fields include service number, family number, personal number, processing time, interest, time interval, and the like.
  • the user can further configure the display field name, field name, display type, display order, etc. of the title, which may be a text box or input.
  • the box, the drop-down box, and the like are configured for the user.
  • the configuration interface is mainly used in the form of a drop-down box for the user to configure the page.
  • the customized interface may also display a function button such as “Edit”.
  • the page displays a more detailed customized interface, as shown in FIG. 4d, in which the interface is displayed.
  • the user can configure the properties of the control buttons corresponding to each field, such as read-only, writable, readable and writable, etc., and can also configure the verification rules of each control when inputting content, for example, the user clicks on the verification rule to select
  • the button can pop up the check rule selection box, the user only needs to select the required verification rule; it can also configure whether the control is available, that is, whether the control needs to be displayed in the page.
  • the above is only an example, and the specific implementation manner is not limited by the embodiment of the present invention.
  • the user may click the “save” button of the customized interface, and the client stores the generated page metadata in the script tag of the current page based on the user's configuration operation, and passes the identification (Identify). , ID) and the custom DOM meta attribute (can also be understood as a meta value) to establish a relationship.
  • the user-configured DOM meta "uee-6527997D-95E1-4C14-8347-99728D6C21D6"
  • the page metadata generated by the configuration operation can be saved in the front end file in json format.
  • the client sends the page metadata to the server.
  • the client may send the page metadata to the server, and the front end file may be sent to the server.
  • the server receives and saves the page metadata.
  • the server may save the same in the meta database of the server.
  • the client sends a page load request to the server.
  • the step 305 is the same as the implementation of the step 201 in the previous embodiment, and details are not described herein again. It is to be understood that the steps 301 to 304 may be performed before the step 305, or may be performed afterwards, which is not limited by the embodiment of the present invention.
  • the server receives the page load request and determines the current load.
  • the server may first determine the current load of the server. Specifically, it can detect the memory running status of the server, and/or the page loading received during the same time period. So, etc., to get the load information, the server thus determines the current load situation from the load information.
  • the external device can detect the running status of the server, thereby obtaining the load information of the server, and sending the information to the server, so that the server can determine the current load condition based on the load information.
  • the server obtains initial page content that matches the page load request.
  • the server may be configured with a load threshold, which may be 75% or 80%, which is not limited in the embodiment of the present invention. Therefore, after determining the current load, the server may determine whether the load exceeds a preset load threshold. If yes, obtain the initial page content that matches the page load request, and then send the content to the client, where the client side performs Page rendering.
  • a load threshold which may be 75% or 80%, which is not limited in the embodiment of the present invention. Therefore, after determining the current load, the server may determine whether the load exceeds a preset load threshold. If yes, obtain the initial page content that matches the page load request, and then send the content to the client, where the client side performs Page rendering.
  • a load threshold which may be 75% or 80%, which is not limited in the embodiment of the present invention. Therefore, after determining the current load, the server may determine whether the load exceeds a preset load threshold. If yes, obtain the initial page content that matches the page load request, and then send the content to the client, where the client
  • the server sends the initial page content to the client.
  • the client receives the initial page content, loads at least one DOM based on the front end framework, and obtains a page template and page metadata that match each DOM based on the feature attributes of each DOM.
  • step 308 and the step 309 may be the same as the step 203 and the step 204 in the previous embodiment, and details are not described herein again.
  • the feature attribute in the embodiment of the present invention may specifically include a first attribute and a second attribute, where the first attribute may be a meta attribute, and the second attribute may be a name attribute, or other Attributes, such as the component-name attribute, the meta-id attribute, and the like, are not limited in the embodiment of the present invention. It can be understood that each DOM can carry its own feature attribute when the server returns the DOM to the client.
  • the specific manner in which the client obtains the page template and page metadata matching each DOM based on the feature attributes of each DOM may include the following:
  • the initial page content may further include a page template and page metadata, and the client may thereby find a page template matching the second attribute of each DOM from the initial page content, and a page element associated with the first attribute of each DOM data.
  • the client sends a request message to the server, where the request message is used to request to obtain a page template and page metadata of each DOM, wherein the request message includes a second attribute and a first attribute of each DOM, and the server is thus based on the request of the client.
  • the message returns to the client a page template that matches the second attribute and the page metadata associated with the first attribute.
  • the server may further obtain the required page template and page metadata, thereby the page template and the page metadata.
  • the front-end framework and DOM are sent to the client along with the initial page content.
  • the client can find the associated page metadata and the matching page template from the initial page content through the meta attribute and the name attribute of the DOM, respectively.
  • the page metadata and page templates are sent to the client along with the front-end framework and the DOM, which can reduce the information interaction between the client and the server, improve the rendering efficiency of the page, and reduce the running pressure on both sides of the client and the server.
  • the client can use the name attribute of the DOM configuration, assuming richtex, find the page template named richtex in the template folder, and find the metadata of the corresponding ID according to the meta attribute of the uee:gadget to the meta database. .
  • the initial page content may also include only the required page metadata
  • the client may find the page metadata associated with each DOM meta attribute from the initial page content, and the page template needs the client to send the server to the server separately.
  • the request message can be obtained.
  • the client sends a request message to the server, which can be understood as follows: 1. For each DOM, the client sends a first request message and a second request message to the server, where the first request message is used to obtain the DOM. a page template, the first request message includes a second attribute of the DOM, the second request message is used to obtain page metadata of the DOM, and the second request message includes a first attribute of the DOM; 2. for each DOM, The client sends a request message to the server, where the request message is used to obtain the page template and the page metadata of the DOM, the request message includes the second attribute and the first attribute of the DOM; 3.
  • the client For the page template, the client The server sends a request message, which is used to obtain a page template of each DOM in all DOMs identified by the front-end framework, the request message includes a second attribute of each DOM; for the page metadata, the client sends another page to the server a request message for obtaining page metadata of each DOM in all DOMs identified by the front-end framework, the request message including the first of each DOM 4. For all DOMs identified by the front-end framework, the client sends a request message to the server for requesting to obtain page templates and page metadata for each DOM in all DOMs. The request message contains all DOMs. The second attribute and the first attribute of each DOM.
  • the server after receiving the request message of the client, the server separately searches for the page metadata associated with the first attribute and the page template that matches the second attribute, thereby returning it to the client.
  • the method for the client to obtain the page metadata and the page template of the DOM may be that the initial page content returned by the server includes the corresponding page template and the page metadata, and the client directly obtains the corresponding DOM from the initial page content.
  • the page template and the page metadata may be used; or the client sends a request message to the server to obtain the page template and the page metadata of each DOM, specifically, sending a request message to the server for each DOM, or All DOMs identified by the front-end framework send a request message, or send different request messages for each DOM's page metadata and page template, or send different page metadata and page templates for all DOMs identified by the front-end framework.
  • the request message is not limited in the embodiment of the present invention.
  • the client may also cache the page template locally, so when the page template needs to be acquired next time, the client may first search for the corresponding page template from the local, and if so, Can be obtained locally, if it does not exist, it needs to be obtained from the server. That is to say, the page template of each DOM obtained by the client can also be obtained locally. Cache the page template locally, so as to avoid getting the page template to the server every time the page is rendered, which can reduce the information interaction between the client and the server, improve the page rendering efficiency, and reduce the sides of the client and the server. Operating pressure.
  • the DOM required for different page load requests may be the same, and the client may pre-store or cache the page template of the common DOM, so that it can be obtained locally when the page template needs to be acquired, so that it is not necessary to frequently Perform information exchange between the server and the client, reduce server load, and improve page template acquisition efficiency.
  • the client renders each DOM matching page metadata based on each DOM matching page template to obtain an HTML fragment of each DOM.
  • the client can compile page templates and page metadata named richtex's uee:gadget into HTML fragments through the AngularJS engine.
  • the client composes at least one HTML fragment of the DOM into an HTML page, and displays the HTML page.
  • the specific implementation of the steps 310 and 311 is the same as the step 205 and the step 206 in the previous embodiment, and details are not described herein again.
  • the server performs page rendering based on the page load request, and obtains the source code of the HTML page.
  • the server sends the source code to the client.
  • the server may perform page rendering on the server side. That is to say, the server will perform page rendering based on the page loading request, thereby obtaining the source code of the HTML page, and then sending it to the client.
  • the client receives the source code and displays an HTML page based on the source code.
  • the client after receiving the source code of the HTML page sent by the server side, the client can directly display the HTML page based on the source code. It can reduce the operating pressure on the client side to a certain extent and improve system performance.
  • step 307 to step 311 and step 312 to step 314 are in a parallel relationship. If the current load of the server exceeds the preset load threshold, step 307 to step 312 are performed, and the current load of the server does not exceed the preset load. In the case of the threshold, the steps 312 to 314 may be performed, which are not limited in the embodiment of the present invention.
  • the server can determine whether the page rendering is performed by the client side or the server rendering by the server side, if the server is overloaded. Large, the page rendering by the client side, which can reduce the pressure on the server and improve the rendering efficiency of the page. If the server load is small, page rendering is performed by the server side, which can improve the performance of the client side. In this way, you can flexibly implement page rendering and improve system performance. Further, the client provides a customized customized interface, which can flexibly and efficiently implement page configuration, so that users who do not understand the technology can also customize the product, lower the customization threshold, and improve the customization effect, thereby reducing the secondary customization of the product to a certain extent. The cost of development and maintenance.
  • FIG. 5 is a schematic structural diagram of a client according to an embodiment of the present invention.
  • the client described in FIG. 5 may include: at least one processor 501, such as a central processing unit (CPU), a transceiver 502, an output device 503, a memory 504, and at least one communication bus 505. 501.
  • the transceiver 502, the output device 503, and the memory 504 are connected by a bus 505.
  • the output device 503 may be a display screen of the client 500 for outputting a display interface, such as a customized interface.
  • the above memory 504 may be a high speed RAM memory or a non-volatile memory such as a disk memory. Optionally, it may also be at least one storage device located in the processor.
  • the above-mentioned memory 504 is used to store a set of program codes.
  • the processor 501, the transceiver 502, and the output device 503 are used to call the program code stored in the memory 504, and perform the following operations:
  • the transceiver 502 is configured to: after sending a page load request to the server, receive the initial page content returned by the server based on the page load request, where the initial page content includes a front end framework, such as a UEE framework, and at least one DOM.
  • a front end framework such as a UEE framework
  • the processor 501 is configured to load the at least one DOM based on the front end framework, and obtain a page template and page metadata that match each DOM based on a feature attribute of each DOM.
  • the processor 501 is further configured to render the page metadata of each DOM matching based on the page template matched by each DOM to obtain an HTML fragment of each DOM.
  • the output device 503 is configured to compose an HTML fragment of at least one DOM into an HTML page and display the HTML page.
  • the specific manner in which the processor 501 loads at least one DOM based on the front-end framework may be:
  • the specific manner in which the processor 501 obtains the page template and the page metadata that match each DOM based on the feature attributes of each DOM may be:
  • page templates and page metadata matching the DOM are obtained based on the feature attributes of each DOM.
  • the output device 503 is further configured to display a customized interface when the transceiver 502 receives the page customization request.
  • the transceiver 502 is further configured to receive a configuration operation in the customized interface to obtain page metadata generated by the configuration operation.
  • the configuration operation can be triggered by the user.
  • the processor 501 is further configured to establish an association relationship between the page metadata and the first attribute of the DOM. Specifically, the ID is bound to the first attribute (meta value).
  • the transceiver 502 is further configured to send the page metadata to the server, so that the server saves the page metadata.
  • the feature attribute may specifically include a first attribute and a second attribute, where the first attribute may be a meta attribute, and the second attribute may be a name attribute, or other attributes, such as a component-name attribute.
  • the meta-id attribute and the like are not limited in the embodiment of the present invention. It can be understood that each server can carry its own feature attribute when returning the DOM to the client 500.
  • the specific manner in which the processor 501 acquires the page template and the page metadata that match each DOM based on the feature attributes of each DOM may include the following:
  • the initial page content may also include a page template and page metadata, and the processor 501 may thereby find a page template matching the second attribute of each DOM from the initial page content, and a page associated with the first attribute of each DOM Metadata.
  • the processor 501 sends a request message to the server through the transceiver 502, where the request message is used to request to acquire a page template and page metadata of each DOM, where the request message includes a second attribute and a first attribute of each DOM, and is sent and received.
  • the device 502 thus receives a page template that the server returns based on the request message and that matches the second attribute, and page metadata associated with the first attribute.
  • the initial page content may also include only required page metadata
  • the processor 501 may find the page metadata associated with the meta attribute of each DOM from the initial page content, and the page template requires the client 500 to the server. A separate request message can be sent to get it.
  • the processor 501 sends a request message to the server through the transceiver 502, which can be understood as: 1.
  • the transceiver 502 separately sends a first request message and a second request message to the server, where the first request message a page template for obtaining the DOM, the first request message includes a second attribute of the DOM, the second request message is used to obtain page metadata of the DOM, and the second request message includes a first attribute of the DOM;
  • the transceiver 502 sends a request message to the server, where the request message is used to obtain the page template and page metadata of the DOM, and the request message includes the second attribute and the first attribute of the DOM;
  • the transceiver 502 sends a request message to the server, where the request message is used to obtain a page template of each DOM in all DOMs identified by the front-end framework, the request message includes a second attribute of each DOM;
  • Data the transceiver 502 send
  • the server after receiving the request message of the client 500, the server separately searches for the page metadata associated with the first attribute and the page template that matches the second attribute, thereby returning it to the client 500.
  • the processor 501 may also cache the page template locally through the memory 504. Then, when the page template needs to be acquired next time, the processor 501 may first search for the corresponding page template from the local. If it exists, it can be obtained locally. If it does not exist, it needs to be obtained from the server. That is to say, the page template of each DOM obtained by the processor 501 can also be obtained locally.
  • the DOMs required for different page load requests may be the same, and the processor 501 may pre-store or cache the page templates of the common DOM, so that the page templates can be obtained locally when the page templates need to be acquired, so that frequent The information exchange between the server and the client is performed, the server load is reduced, and the page template acquisition efficiency is improved.
  • FIG. 6 is a schematic structural diagram of another client according to an embodiment of the present invention.
  • the client 600 can include:
  • the transceiver module 601 is configured to: after sending a page load request to the server, receive the initial page content returned by the server based on the page load request, where the initial page content includes a front end framework, such as a UEE framework, and at least one DOM.
  • a front end framework such as a UEE framework
  • the loading module 602 is configured to load the at least one DOM based on the front end framework.
  • the obtaining module 603 is configured to obtain a page template and page metadata that match each DOM based on a feature attribute of each DOM.
  • the rendering module 604 is configured to render each DOM matching page metadata based on the page template of each DOM matching to obtain an HTML fragment of each DOM.
  • the display module 605 is configured to compose an HTML fragment of at least one DOM into an HTML page and display the HTML page.
  • the specific manner in which the loading module 602 loads at least one DOM based on the front-end framework may be:
  • the specific manner in which the obtaining module 603 obtains the page template and the page metadata that match each DOM based on the feature attributes of each DOM may be:
  • page templates and page metadata matching the DOM are obtained based on the feature attributes of each DOM.
  • the client 600 may further include an establishing module 606, where:
  • the display module 605 is further configured to display the customized interface when the transceiver module 601 receives the page customization request.
  • the transceiver module 601 is further configured to receive a configuration operation in the customization interface to obtain page metadata generated by the configuration operation.
  • the configuration operation can be triggered by the user.
  • the establishing module 606 is configured to establish an association relationship between the page metadata and the first attribute of the DOM. Specifically, the ID is bound to the first attribute (meta value).
  • the transceiver module 601 is further configured to send the page metadata to the server, so that the server saves the page metadata.
  • the feature attribute may specifically include a first attribute and a second attribute, where the first attribute may be a meta attribute, and the second attribute may be a name attribute, or other attributes, such as a component-name attribute.
  • the meta-id attribute and the like are not limited in the embodiment of the present invention. It can be understood that each server can carry its own feature attribute when returning the DOM to the client 600.
  • the specific manner in which the obtaining module 603 obtains the page template and the page metadata that match each DOM based on the feature attributes of each DOM may include the following:
  • the initial page content may further include a page template and page metadata, and the obtaining module 603 may thereby find a page template matching the second attribute of each DOM from the initial page content, and a page associated with the first attribute of each DOM Metadata.
  • the obtaining module 603 sends a request message to the server through the transceiver module 601, where the request message is used to request to obtain a page template and page metadata of each DOM, where the request message includes a second attribute and a first attribute of each DOM, and is sent and received.
  • the module 601 thus receives a page template that the server returns based on the request message that matches the second attribute, and page metadata associated with the first attribute.
  • the initial page content may also include only required page metadata
  • the obtaining module 603 may find the page metadata associated with the meta attribute of each DOM from the initial page content, and the page template requires the client 600 to the server. A separate request message can be sent to get it.
  • the sending module 603 sends a request message to the server through the transceiver module 601.
  • the message can be understood as: 1.
  • the transceiver module 601 sends a first request message and a second request message to the server, where the first request message is sent.
  • the transceiver module 601 sends a request message to the server, the request message is used to obtain the page template and the page metadata of the DOM, and the request message includes the second attribute and the first attribute of the DOM;
  • the transceiver module 601 sends a request message to the server, where the request message is used to obtain a page template for each DOM in all DOMs identified by the front-end framework, the request message includes a second attribute of each DOM;
  • the transceiver module 601 sends another request message to the server, and the request message is used to obtain the page element of each DOM in all the DOMs identified by the front-end framework.
  • the transceiver module 601 sends a request message to the server for requesting to obtain a page of each DOM in all DOMs.
  • the request message contains the second attribute and the first attribute of each DOM in all DOM.
  • the server after receiving the request message of the client 600, the server separately searches for the page metadata associated with the first attribute and the page template that matches the second attribute, thereby returning it to the client 600.
  • the obtaining module 603 may also cache the page template locally after the page template is obtained. Then, when the page template needs to be acquired next time, the obtaining module 603 may firstly find out whether the corresponding page template exists in the local, if any , can be obtained locally, if it does not exist, it needs to be obtained from the server. That is to say, the page template of each DOM obtained by the obtaining module 603 may also be locally obtained.
  • the DOMs required for different page load requests may be the same, and the obtaining module 603 may pre-store or cache the page templates of the common DOM, so that the page templates can be obtained locally when the page templates need to be acquired, so that the frequent The information exchange between the server and the client is performed, the server load is reduced, and the page template acquisition efficiency is improved.
  • the client after sending a page load request to the server, the client receives the initial page content returned by the server, which includes a front-end framework and at least one DOM, and loads at least based on the front-end framework.
  • a DOM and matching the page template and page metadata based on the feature attributes of each DOM, thereby rendering the page metadata based on the page template, obtaining the HTML fragment of each DOM, and finally forming all the HTML fragments into an HTML page.
  • the client performs page rendering, thereby reducing server hardware deployment cost, reducing server pressure, reducing server memory overhead, improving page rendering efficiency, and system performance in a high concurrent scenario.
  • the server may determine whether the page rendering is performed by the client side or the page rendering by the server side according to the current load situation. If the server load is too large, the server side performs the client side. Page rendering, which can reduce the pressure on the server and improve the rendering efficiency of the page. If the server load is small, page rendering is performed by the server side, which can improve the performance of the client side. In this way, you can flexibly implement page rendering and improve system performance. Further, the client can provide a customized customized interface, which can flexibly and efficiently implement page configuration, so that users who do not understand the technology can also customize the product, lower the customization threshold, and improve the customization effect, thereby reducing the product twice to a certain extent. Custom development and maintenance costs.
  • FIG. 7 is a schematic structural diagram of a server according to an embodiment of the present invention.
  • the server depicted in FIG. 7 may include at least one processor 701, such as a CPU, a transceiver 702, a memory 704, and at least one communication bus 704.
  • the processor 701, the transceiver 702, and the memory 703 are connected by a bus 704.
  • the memory 703 may be a high speed RAM memory or a non-volatile memory such as a disk memory. Optionally, it may also be at least one storage device located in the processor.
  • the above-mentioned memory 703 is used to store a set of program codes, and the processor 701 and the transceiver 702 are used to call the program code stored in the memory 703, and perform the following operations:
  • the transceiver 702 is configured to receive a page load request sent by the client.
  • the processor 701 is configured to obtain initial page content that matches the page load request, where the initial page content includes a front end frame and at least one DOM.
  • the transceiver 702 is further configured to send the initial page content to the client.
  • the processor 701 is further configured to determine, after the transceiver 702 receives the page loading request sent by the client, the current load of the server 700, and if the load exceeds a preset load threshold, Gets the operation of the initial page content that matches the page load request.
  • the processor 701 is further configured to perform page rendering based on the page loading request to obtain a source code of the HTML page, if the load does not exceed a preset load threshold.
  • the transceiver 702 is further configured to send the source code to the client, where the client displays the HTML page based on the source code.
  • the transceiver 702 is further configured to receive page metadata sent by the client.
  • the memory 703 is configured to save the page metadata.
  • the page metadata may specifically be data generated by the user after configuring the page.
  • the initial page content may further include a page template and page metadata.
  • the client can find the page target and page metadata of each DOM matching from the initial page content.
  • the transceiver 702 is further configured to receive a request message sent by the client, where the request message is used to request to obtain a page template and page metadata of each DOM, where the request message includes a second attribute and a second of each DOM An attribute.
  • the transceiver 702 is further configured to return, to the client, a page template that matches the second attribute, and page metadata associated with the first attribute, based on the request message.
  • FIG. 8 is a schematic structural diagram of another server according to an embodiment of the present invention.
  • the server 800 can include:
  • the transceiver module 801 is configured to receive a page load request sent by the client.
  • the obtaining module 802 is configured to obtain initial page content that matches the page loading request, where the initial page content includes a front end frame and at least one DOM.
  • the transceiver module 801 is further configured to send the initial page content to the client.
  • the server 800 may further include:
  • the determining module 803 is configured to determine, after the transceiver module 801 receives the page loading request sent by the client, the current load of the server 800, and if the load exceeds the preset load threshold, trigger the obtaining module 802 to perform the obtaining and the page. The operation of loading the initial page content that matches the request.
  • the server 800 may further include a rendering module 804, where:
  • the rendering module 804 is configured to perform page rendering based on the page loading request to obtain the source code of the HTML page if the load does not exceed the preset load threshold.
  • the transceiver module 801 is further configured to send the source code to the client, and the client displays the HTML page based on the source code.
  • the server 800 may further include a saving module 805, where:
  • the transceiver module 801 is further configured to receive page metadata sent by the client.
  • the saving module 805 is configured to save the page metadata.
  • the page metadata may specifically be data generated by the user after configuring the page.
  • the initial page content may further include a page template and page metadata.
  • the client can find the page target and page metadata of each DOM matching from the initial page content.
  • the transceiver module 601 is further configured to receive a request message sent by the client, where the request message is used to request to obtain a page template and page metadata of each DOM, where the request message includes a second attribute and a second of each DOM An attribute.
  • the transceiver module 601 is further configured to return, to the client, a page template that matches the second attribute, and page metadata associated with the first attribute, based on the request message.
  • the server may obtain the initial page content matched by the page loading request, and return the content to the client, where the initial page content includes the front end frame and at least one The DOM, the client can load at least one DOM based on the front-end framework, and obtain the matching page template and page metadata based on the feature attributes of each DOM, thereby rendering the page metadata based on the page template, and obtaining the HTML of each DOM. Fragment, and finally all HTML snippets into HTML pages and display HTML pages.
  • the client performs page rendering, thereby reducing server hardware deployment cost, reducing server pressure, reducing server memory overhead, improving page rendering efficiency, and system performance in a high concurrent scenario.
  • the server may determine whether the page rendering is performed by the client side or the page rendering by the server side according to the current load situation. If the server load is too large, the server side performs the client side. Page rendering, which can reduce the pressure on the server and improve the rendering efficiency of the page. If the server load is small, page rendering is performed by the server side, which can improve the performance of the client side. In this way, you can flexibly implement page rendering and enhance the system. System performance.
  • the client can provide a customized customized interface, which can flexibly and efficiently implement page configuration, so that users who do not understand the technology can also customize the product, lower the customization threshold, and improve the customization effect, thereby reducing the product twice to a certain extent. Custom development and maintenance costs.
  • the modules in the client and the server may be merged, divided, and deleted according to actual needs.
  • the client and the server in the embodiment of the present invention may be implemented by a general-purpose integrated circuit, such as a CPU (Central Processing Unit) or an ASIC (Application Specific Integrated Circuit).
  • a general-purpose integrated circuit such as a CPU (Central Processing Unit) or an ASIC (Application Specific Integrated Circuit).
  • the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种网页渲染方法及相关设备。其中，该方法包括：服务器在接收到客户端的页面加载请求后，可以获取页面加载请求匹配的初始页面内容，返回给客户端，初始页面内容包括前端框架和至少一个DOM，客户端可以基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与之匹配的页面模板和页面元数据，从而基于页面模板将页面元数据进行渲染，得到每个DOM的HTML片段，最后将所有HTML片段组成HTML页面，并展示HTML页面。该方法及相关设备由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。

Description

一种网页渲染方法及相关设备
本申请要求于2017年1月20日提交中国专利局、申请号为201710042896.3，发明名称为“一种网页渲染方法及相关设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本发明涉及计算机技术领域，具体涉及一种网页渲染方法及相关设备。
背景技术
随着前端技术的不断发展，网页已从单纯的信息展示发展为用户可参与网页内容的生成，即，用户可进行网页定制。通常情况下，用户在进行网页定制时，修改后的页面元数据一般会保存到数据库中，在进行页面渲染时，页面元数据在服务器解析编译，并渲染成完整的超文本标记语言(Hyper Text Mark-up Language，HTML)页面，从而返回给浏览器客户端展示。如果大量页面同时请求渲染，服务器需要同时对大量的元数据进行转换，不仅会降低渲染效率，还会增加服务器的内存开销。
发明内容
本发明实施例公开了一种网页渲染方法及相关设备，可以在高并发场景下提高网页渲染效率，减少服务器的内存开销。
本发明实施例第一方面公开了一种网页渲染方法，该方法可以包括：
客户端在向服务器发送页面加载请求后，可接收服务器基于该页面加载请求返回的初始页面内容，其中，该初始页面内容包括前端框架，例如UEE框架，以及至少一个文档对象模型(Document Object Model，DOM)。客户端可以基于前端框架加载该至少一个DOM，以及基于每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据，从而基于该每个DOM匹配的页面模板将该每个DOM匹配的页面元数据进行渲染，得到该每个DOM的HTML片段，并将至少一个DOM的HTML片段组成HTML页面，并展示该HTML页面。
由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
可选的，客户端基于前端框架加载至少一个DOM的具体方式可以为：
客户端将至少一个DOM加载至前端框架，并确定目标DOM，其中，目标DOM为前端框架从至少一个DOM中识别出的DOM；
那么客户端基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以为：
针对目标DOM中的每个DOM，客户端基于该每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
可选的，客户端向服务器发送页面加载请求后，接收服务器基于该页面加载请求返回的初始页面内容之前，该方法还可以包括：
客户端在接收到页面定制请求时，展示定制界面，接收用户在定制界面中的配置操作，得到由配置操作产生的页面元数据，从而建立起页面元数据与DOM的第一属性的关联关系，并将该页面元数据发送至服务器，以便服务器保存该页面元数据。
客户端提供可视化的定制界面，能够灵活高效的实现页面配置，让不懂技术的用户也能实现产品定制，降低定制门槛，提升定制效果，从而能够在一定程度上降低产品二次定制开发和维护的成本。
可选的，该特征属性具体可包括第一属性和第二属性，第一属性具体可为元(meta)属性，第二属性具体可为名称name属性，或者其他属性，如component-name属性、meta-id属性等，本发明实施例不做限定。
那么客户端基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以包括以下几种：
方式一、
初始页面内容还可以包括页面模板和页面元数据，客户端从而可以从初始页面内容中查找与每个DOM的第二属性相匹配的页面模板，以及与每个DOM的第一属性关联的页面元数据。页面元数据和页面模板与前端框架和DOM一起发送给客户端，可以减少客户端与服务器之间的信息交互，能够提高页面渲染效率，并减少客户端与服务器两侧的运行压力。
方式二、
客户端向服务器发送请求消息，该请求消息用于请求获取每个DOM的页面模板和页面元数据，其中，该请求消息包含每个DOM的第二属性和第一属性，客户端从而接收服务器基于该请求消息返回与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
可选的，初始页面内容还可以只包括所需的页面元数据，客户端可以从初始页面内容中查找与每个DOM的meta属性关联的页面元数据，而页面模板需要客户端向服务器发送单独的请求消息才能获取。
针对方式二，客户端向服务器发送请求消息可以理解为：1.针对每个DOM，客户端向服务器分别发送第一请求消息和第二请求消息，其中，第一请求消息用于获取该DOM的页面模板，第一请求消息包含了该DOM的第二属性，第二请求消息用于获取该DOM的页面元数据，第二请求消息包含了该DOM的第一属性；2.针对每个DOM，客户端向服务器发送一请求消息，该请求消息用于获取该DOM的页面模板和页面元数据，该请求消息包含了该DOM的第二属性和第一属性；3.针对页面模板，客户端向服务器发送一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面模板，该请求消息包含了每个DOM的第二属性；针对页面元数据，客户端向服务器发送另一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面元数据，该请求消息包含了每个DOM的第一属性；4.针对前端框架识别的所有DOM，客户端向服务器发送一个请求消息，该请求消息用于请求获取所有DOM中每个DOM的页面模板和页面元数据，该请求消息包含了所有DOM中每个DOM的第二属性和第一属性。
因此，服务器在接收到客户端的请求消息后，会分别查找与第一属性关联的页面元数据，以及与第二属性相匹配的页面模板，从而将其返回给客户端。
可选的，客户端在获取到页面模板后，还可以将页面模板缓存在本地，那么在下次需要获取页面模板时，客户端可以首先从本地中查找是否存在相应的页面模板，如果存在，则可从本地获取，如果不存在，则需要从服务器获取。也就是说，客户端获取的每个DOM的页面模板也可以是从本地获取的。将页面模板缓存在本地，从而避免每次进行页面渲染时都需要向服务器获取页面模板，可以减少客户端与服务器之间的信息交互，能够提高页面渲染效率，并减少客户端与服务器两侧的运行压力。
本发明实施例第二方面公开了另一种网页渲染方法，该方法可以包括：
服务器在接收到客户端发送的页面加载请求时，可获取与该页面加载请求匹配的初始页面内容，并将其发送给客户端。其中，该初始页面内容包括前端框架以及至少一个DOM。
由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
可选的，服务器接收客户端发送的页面加载请求之后，该方法还可以包括：
服务器确定当前的负载，并在负载超过预设负载阈值的情况下，执行获取与该页面加载请求匹配的初始页面内容的操作。
可选的，服务器在该负载未超过预设负载阈值的情况下，基于该页面加载请求进行页面渲染，得到HTML页面的源代码，从而向客户端发送该源代码，由客户端基于该源代码展示HTML页面。
服务器在接收到客户端的页面加载请求后，可以结合当前的负载情况确定是由客户端侧进行页面渲染，还是由服务器端进行页面渲染，如果服务器负载过大，则由客户端侧进行页面渲染，从而可以减轻服务器运行压力，提高页面渲染效率。如果服务器负载较小，则由服务器端进行页面渲染，从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染，提升系统性能。
可选的，
本发明实施例第三方面公开了一种客户端，可以包括处理器、收发器和输出装置，可用于执行第一方面公开的网页渲染方法。由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
本发明实施例第四方面公开了另一种客户端，可以包括：收发模块、加载模块、获取模块、渲染模块、展示模块以及建立模块，可用于执行第一方面公开的网页渲染方法。其中，收发模块对应的实体设备可以是第三方面公开的收发器，加载模块、获取模块、渲染模块以及建立模块对应的实体设备可以是第三方面公开的处理器，展示模块对应的实体设备可以是第三方面公开的输出装置。由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
本发明实施例第五方面公开了一种服务器，可以包括：处理器、收发器和存储器，可用于执行第二方面公开的网页渲染方法。由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
本发明实施例第六方面公开了另一种服务器，可以包括：收发模块、获取模块、确定模块、渲染模块以及保存模块，可用于执行第二方面公开的网页渲染方法。其中，收发模块对应的实体设备可以是第五方面公开的收发器，获取模块、确定模块、渲染模块对应的实体设备可以是第五方面公开的处理器，保存模块对应的实体设备可以是第五方面公开的存储器。由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
实施本发明实施例，具有如下有益效果：
本发明实施例中，服务器在接收到客户端的页面加载请求后，可以获取页面加载请求匹配的初始页面内容，返回给客户端，初始页面内容包括前端框架和至少一个DOM，客户端从 而基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与之匹配的页面模板和页面元数据，从而基于页面模板将页面元数据进行渲染，得到每个DOM的HTML片段，最后将所有HTML片段组成HTML页面，并展示HTML页面。本发明实施例中，由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例公开的一种网页渲染系统的结构示意图；
图2是本发明实施例公开的一种网页渲染方法的流程示意图；
图3是本发明实施例公开的另一种网页渲染方法的流程示意图；
图4a是本发明实施例公开的定制界面的第一示意图；
图4b是本发明实施例公开的定制界面的第二示意图；
图4c是本发明实施例公开的定制界面的第三示意图；
图4d是本发明实施例公开的定制界面的第四示意图；
图4e是本发明实施例公开的定制界面的第五示意图；
图5是本发明实施例公开的一种客户端的结构示意图；
图6是本发明实施例公开的另一种客户端的结构示意图；
图7是本发明实施例公开的一种服务器的结构示意图；
图8是本发明实施例公开的另一种服务器的结构示意图。
具体实施方式
下面将结合附图，对本发明的实施例进行描述。
本发明实施例公开了一种网页渲染方法及相关设备，可以在高并发场景下提高网页渲染效率，减少服务器的内存开销。以下分别进行详细说明。
请参阅图1，图1是本发明实施例公开的一种网页渲染系统的结构示意图。在图1所示的系统中，包括服务器和至少一个客户端。其中，服务器和至少一个客户端通过互联网连接，服务器可以是一个独立的服务设备，也可以是由多个独立的服务设备共同构成的集群服务设备，该服务器可以为浏览器应用(Application，APP)提供后台服务；客户端可以是指浏览器应用，也可以是指安装有浏览器APP的终端设备，该终端设备可以包括如智能手机、平板电脑、笔记本电脑、台式电脑、车载终端、智能可穿戴设备等，本发明实施例不做限定。
在图1所描述的系统中，客户端可以根据用户在显示界面的操作向服务器发送页面加载请求，从而展示相应的HTML页面，服务器可以存储有多种页面内容，可以基于客户端发送的页面加载请求获取相应的页面内容，并发送给客户端，也可以基于客户端发送的页面加载请求进行页面渲染，并将得到的HTML页面发送给客户端。
基于图1所示的系统，本发明实施例公开了一种网页渲染方法。请参阅图2，图2是本发明实施例公开的一种网页渲染方法的流程示意图。如图2所示，该方法可以包括以下步骤：
201、客户端向服务器发送页面加载请求。
本发明实施例中，页面加载请求可以是用户触发的，例如，用户点击了一个网页链接，或者在网页的地址栏输入了网页地址，并点击“进入”或“确定”功能按键等，客户端在检测到用户的上述操作后，从而可以生成页面加载请求，并将其发送至后台的服务器。
202、服务器接收页面加载请求，并获取与页面加载请求匹配的初始页面内容。
本发明实施例中，初始页面内容包括前端框架以及至少一个DOM，其中，前端框架主要包括面向互联网体验的万维网，也称全球广域网(World Wide Web，web)开发框架，即，用户体验环境(User Experience Environment，UEE)框架，DOM，也可以称为页面组件，如<body>、<uee:gadget>这类标签就可以称为DOM。
需要说明的是，初始页面内容包括的至少一个DOM中，可以是原始DOM，也可以是经过用户配置后的DOM，本发明实施例不做限定。
本发明实施例中，页面加载请求携带有需要访问网页的网址，服务器存储有与网址具有绑定关系的前端框架和多个DOM，因此，服务器在接收到客户端发送的页面加载请求后，从而可以进一步获取与页面加载请求匹配的初始页面内容。
203、服务器向客户端发送初始页面内容。
本发明实施例中，服务器在获取到与页面加载请求匹配的前端框架和至少一个DOM后，可以将其返回给客户端。
204、客户端接收初始页面内容，并基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据。
本发明实施例中，服务器在获取到与页面加载请求匹配的初始页面内容后，可以将其发送给客户端，客户端从而可以接收对应的初始页面内容，具体可以通过脚本script标签加载app.js的方式引入UEE框架。客户端在接收到服务器发送的初始页面内容后，进而可以加载该初始页面内容，具体可以基于该初始页面内容包括的前端框架加载该初始页面内容包括的至少一个DOM。
进一步的，客户端在接收到初始页面内容后，还可以基于至少一个DOM中每个DOM的特征属性获取与该DOM匹配的页面模板和页面元数据。
具体的，客户端基于前端框架加载至少一个DOM的具体方式可以为：
客户端将至少一个DOM加载至前端框架，并确定目标DOM，其中，目标DOM为前端框架从至少一个DOM中识别出的DOM。
那么客户端基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以为：
针对目标DOM中的每个DOM，客户端基于该每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
具体实现中，前端框架可为DOM配置有位置，客户端在获取到前端框架和DOM后，会将每个DOM加载至前端框架相应的位置，从而组成页面。客户端在加载每个DOM时，UEE框架监听每个DOM的加载，例如通过以下示例代码加载：
document.addeventListener('DOMContentLoaded',function(){...},false)
如果当前加载的DOM是UEE框架识别的DOM，客户端从而将该DOM确定为目标DOM，并获取与之特征属性匹配的页面框架和页面元数据；如果当前加载的DOM不是UEE框架识别的DOM，客户端可不做响应。
进一步的，每个DOM加载完成后，客户端的页面都会发送DOMContentLoaded给UEE引擎，UEE引擎从而基于获取的页面模板和页面元数据进行页面渲染。
可以理解的是，客户端可以是先将DOM加载至前端框架，再获取每个DOM的页面模板和页面元数据，也可以是同时进行，还可以相反，本发明实施例不做限定。
205、客户端基于每个DOM匹配的页面模板将每个DOM匹配的页面元数据进行渲染，得到每个DOM的HTML片段。
本发明实施例中，在页面内容加载完成，以及获取到每个DOM匹配的页面模板和页面元数据后，客户端会针对每个DOM，基于页面模板将页面元数据进行页面渲染，从而得到该DOM的HTML片段。具体可以通过渲染引擎，如AngularJS引擎将页面模板和页面元数据编译生成HTML片段。
206、客户端将至少一个DOM的HTML片段组成HTML页面，并展示该HTML页面。
本发明实施例中，客户端针对每个DOM都生成一个相应的HTML片段，并在生成所有DOM的HTML片段后，可以将所有HTML片段组成HTML页面，从而在客户端的显示界面中展示。
可见，在图2所描述的方法中，服务器在接收到客户端的页面加载请求后，可以获取页面加载请求匹配的初始页面内容，返回给客户端，初始页面内容包括前端框架和至少一个DOM，客户端可以基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与之匹配的页面模板和页面元数据，从而基于页面模板将页面元数据进行渲染，得到每个DOM的HTML片段，最后将所有HTML片段组成HTML页面，并展示HTML页面。本发明实施例中，由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。
基于图1所示的系统，本发明实施例公开了另一种网页渲染方法。请参阅图3，图3是本发明实施例公开的另一种网页渲染方法的流程示意图。如图3所示，该方法可以包括以下步骤：
301、客户端在接收到页面定制请求时，展示定制界面。
本发明实施例中，页面定制请求可以是用户触发的，例如，用户在客户端的显示界面点击页面定制的功能按钮，客户端从而生成页面定制请求；也可以是由其他设备或者客户端发送的，例如用户在其他客户端上触发，由其他客户端生成页面定制请求，并发送给该客户端，本发明实施例不做限定。
本发明实施例中，客户端在接收到页面定制请求后，进而可以展示定制界面。其中，定制界面可以为用户提供页面定制的功能，用户在定制界面上可以对各个可定制DOM进行配置，从而改变网页的展示风格。
302、客户端接收在定制界面中的配置操作，得到由配置操作产生的页面元数据，并建立页面元数据与DOM的第一属性的关联关系。
本发明实施例中，客户端在展示定制界面后，用户可以在定制界面上对可定制DOM进行配置操作，客户端可以接收到用户的配置操作，并得到由配置操作产生的页面元数据，从而建立每个DOM的页面元数据与该DOM的第一属性的关联关系。
可以理解的是，定制界面可以是空白界面，用户需要从无到有的配置页面所需展示的DOM，如添加页面中可以展示的DOM；定制界面也可以是服务器端提供的原始界面，原始界面中包含了部分DOM的属性，即，原始的页面元数据，用户可以在原始界面中对原始的页面元 数据进行修改、添加、删除等配置操作，本发明实施例不做限定。
举例来说，以表单模板DOM在设计者系统定制为例，请一并参阅图4a～图4e，图4a示出了服务器端提供的原始界面，原始界面中展示了可定制DOM以及不可定制DOM，用户可以将鼠标移动至可定制DOM区域，也可以通过触控方式点击可定制DOM区域，原始界面中从而展示了“设置”按钮，用户通过鼠标或者触控方式点击该“设置”按钮，客户端从而可以展示该可定制DOM的定制界面。该定制界面具体可以是以弹窗的形式展示，如图4b所示，也可以是一个新界面，本发明实施例不做限定。
在图4b中，用户可在定制界面中配置表单展示的列数，例如，可设置3列；用户也可以在定制界面配置页面展示的字段，具体可从可供选择的字段中选中需要展示的字段。其中，可供选择的字段包括如服务号码、家庭号码、个人号码、处理时间、兴趣、时间间隔等。在选中页面需要展示的字段(服务号码、家庭号码、处理时间、定制字段)后，用户可进一步配置标题的展示字段名称、字段名、展示类型、展示顺序等，具体可以是以文本框、输入框、下拉框等形式供用户配置，如图4c所示，配置界面主要是以下拉框的形式供用户进行页面配置。
进一步的，在图4c中，定制界面还可以展示如“编辑”字样的功能按钮，当用户点击“编辑”按钮后，页面从而展示更加详细的定制界面，如图4d所示，在该界面中，用户可以配置每个字段对应的控件按钮的属性，如只读、可写、可读可写等；也可以配置每个控件在输入内容时的校验规则，例如，用户点击校验规则选择按钮可以弹出校验规则选择框，用户只需选择所需的校验规则即可；还可以配置该控件是否可用，也即是，在页面中是否需要展示该控件。以上只是举例，具体实现方式本发明实施例不做限定。
进一步的，用户在配置完成后，可以点击定制界面的“保存”按钮，客户端从而基于用户的配置操作，将产生的页面元数据存放在当前页面中的script标签里，并通过身份标识(Identify，ID)与定制DOM的meta属性(也可以理解为meta值)建立关联关系。如图4e所示，被用户配置的DOM的meta＝"uee-6527997D-95E1-4C14-8347-99728D6C21D6"，相应的，配置操作所产生的页面原数据的id＝"uee-6527997D-95E1-4C14-8347-99728D6C21D6"，从而通过meta关联页面元数据。在图4e中，配置操作产生的页面元数据可以json格式保存在前端文件中。
303、客户端将该页面元数据发送至服务器。
本发明实施例中，客户端得到由用户的配置操作所产生的页面元数据后，可将其发送给服务器，具体可以将前端文件发送给服务器。
304、服务器接收并保存该页面元数据。
本发明实施例中，服务器在接收到客户端侧配置的页面元数据后，从而可以将其保存在服务器的meta数据库中。
305、客户端向服务器发送页面加载请求。
本发明实施例中，步骤305与上一实施例中步骤201的实现方式相同，本发明实施例在此不再赘述。可以理解的是步骤301～步骤304可在步骤305之前执行，也可以在之后执行，本发明实施例不做限定。
306、服务器接收页面加载请求，并确定当前的负载。
本发明实施例中，服务器在接收到客户端的页面加载请求后，首先可以确定该服务器的当前负载。具体可检测服务器的内存运行状态，和/或在同一时间段内所接收的页面加载请 求，等等，得到负载信息，服务器从而从负载信息中确定当前的负载情况。
可选的，外部设备可检测服务器的运行状态，从而得到服务器的负载信息，并将其发送给服务器，服务器从而可以基于该负载信息确定当前的负载情况。
307、在负载超过预设负载阈值的情况下，服务器获取与页面加载请求匹配的初始页面内容。
本发明实施例中，为了避免负载过大而导致服务器的运行性能下降，服务器可预先设置负载阈值，该预设负载阈值可以是75％，也可以是80％，本发明实施例不做限定。因此，当服务器确定当前的负载后，可判断该负载是否超过预设负载阈值，如果超过，则获取与该页面加载请求匹配的初始页面内容，从而将其发送给客户端，由客户端侧进行页面渲染。具体上一实施例中步骤202的实现方式，本发明实施例在此不再赘述。
308、服务器向客户端发送初始页面内容。
309、客户端接收初始页面内容，并基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据。
本发明实施例中，步骤308与步骤309的具体实现方式可同上一实施例中步骤203和步骤204，本发明实施例在此不再赘述。
基于用户在定制界面对DOM的配置操作，本发明实施例中的特征属性具体可包括第一属性和第二属性，第一属性具体可为meta属性，第二属性具体可为name属性，或者其他属性，如component-name属性、meta-id属性等，本发明实施例不做限定。可以理解的是，服务器在向客户端返回DOM时，每个DOM可携带各自的特征属性。
需要说明的是，客户端基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以包括以下几种：
方式一、
初始页面内容还可以包括页面模板和页面元数据，客户端从而可以从初始页面内容中查找与每个DOM的第二属性相匹配的页面模板，以及与每个DOM的第一属性关联的页面元数据。
方式二、
客户端向服务器发送请求消息，该请求消息用于请求获取每个DOM的页面模板和页面元数据，其中，该请求消息包含每个DOM的第二属性和第一属性，服务器从而基于客户端的请求消息向客户端返回与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
针对方式一，服务器在接收到客户端的页面加载请求，并确定该页面加载请求匹配的前端框架和DOM后，可以进一步获取所需的页面模板和页面元数据，从而将页面模板和页面元数据与前端框架和DOM作为初始页面内容一起发送给客户端。客户端在需要获取每个DOM对应的页面模板和页面元数据时，即可通过DOM的meta属性和name属性分别从初始页面内容中查找关联的页面元数据以及匹配的页面模板。页面元数据和页面模板与前端框架和DOM一起发送给客户端，可以减少客户端与服务器之间的信息交互，能够提高页面渲染效率，并减少客户端与服务器两侧的运行压力。
举例来说，客户端可通过DOM配置的name属性，假设为richtex，到模板文件夹中找到名称为richtex的页面模板，并可以根据uee:gadget的meta属性到meta数据库中查找相应ID的元数据。
可选的，初始页面内容还可以只包括所需的页面元数据，客户端可以从初始页面内容中查找与每个DOM的meta属性关联的页面元数据，而页面模板需要客户端向服务器发送单独 的请求消息才能获取。
针对方式二，客户端向服务器发送请求消息可以理解为：1.针对每个DOM，客户端向服务器分别发送第一请求消息和第二请求消息，其中，第一请求消息用于获取该DOM的页面模板，第一请求消息包含了该DOM的第二属性，第二请求消息用于获取该DOM的页面元数据，第二请求消息包含了该DOM的第一属性；2.针对每个DOM，客户端向服务器发送一请求消息，该请求消息用于获取该DOM的页面模板和页面元数据，该请求消息包含了该DOM的第二属性和第一属性；3.针对页面模板，客户端向服务器发送一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面模板，该请求消息包含了每个DOM的第二属性；针对页面元数据，客户端向服务器发送另一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面元数据，该请求消息包含了每个DOM的第一属性；4.针对前端框架识别的所有DOM，客户端向服务器发送一个请求消息，该请求消息用于请求获取所有DOM中每个DOM的页面模板和页面元数据，该请求消息包含了所有DOM中每个DOM的第二属性和第一属性。
因此，服务器在接收到客户端的请求消息后，会分别查找与第一属性关联的页面元数据，以及与第二属性相匹配的页面模板，从而将其返回给客户端。
综上所述，客户端获取DOM的页面元数据和页面模板的方式可以是服务器返回的初始页面内容包含了相应的页面模板和页面元数据，客户端直接从初始页面内容获取每个DOM对应的页面模板和页面元数据即可；也可以是客户端向服务器发送请求消息以获取每个DOM的页面模板和页面元数据，具体分为，就每个DOM向服务器发送一个请求消息，或者，就前端框架识别的所有DOM发送一个请求消息，或者，就每个DOM的页面元数据和页面模板分别发送不同的请求消息，或者，就前端框架识别的所有DOM的页面元数据和页面模板分别发送不同的请求消息，本发明实施例不做限定。
可选的，客户端在获取到页面模板后，还可以将页面模板缓存在本地，那么在下次需要获取页面模板时，客户端可以首先从本地中查找是否存在相应的页面模板，如果存在，则可从本地获取，如果不存在，则需要从服务器获取。也就是说，客户端获取的每个DOM的页面模板也可以是从本地获取的。将页面模板缓存在本地，从而避免每次进行页面渲染时都需要向服务器获取页面模板，可以减少客户端与服务器之间的信息交互，能够提高页面渲染效率，并减少客户端与服务器两侧的运行压力。
需要说明的是，不同的页面加载请求所需的DOM可能存在相同的，那么客户端可以预先存储或者缓存常用DOM的页面模板，从而可以在需要获取页面模板时从本地获取，这样不需要频繁地进行服务器与客户端之间的信息交互，减少服务器负载，提高页面模板获取效率。
310、客户端基于每个DOM匹配的页面模板将每个DOM匹配的页面元数据进行渲染，得到每个DOM的HTML片段。
举例来说，客户端通过AngularJS引擎可以将名称为richtex的uee:gadget的页面模板和页面元数据编译生成HTML片段。
311、客户端将至少一个DOM的HTML片段组成HTML页面，并展示该HTML页面。
本发明实施例中，步骤310与步骤311的具体实现方式同上一实施例中步骤205和步骤206，本发明实施例在此不再赘述。
312、在负载未超过预设负载阈值的情况下，服务器基于页面加载请求进行页面渲染，得到HTML页面的源代码。
313、服务器向客户端发送该源代码。
本发明实施例中，服务器在确定当前的负载情况后，如果判断该负载未超过预设负载阈值，则可以在服务器侧进行页面渲染。也即是说，服务器会基于该页面加载请求，进行页面渲染，从而得到HTML页面的源代码，从而将其发送给客户端。
314、客户端接收该源代码，并基于该源代码展示HTML页面。
本发明实施例中，客户端在接收到服务器侧发送的HTML页面的源代码后，从而可以基于该源代码直接展示HTML页面。能够在一定程度上减轻客户端侧的运行压力，提高系统性能。
可以理解的是步骤307～步骤311与步骤312～步骤314为并列关系，在服务器的当前负载超过预设负载阈值的情况下，执行步骤307～步骤312，在服务器的当前负载未超过预设负载阈值的情况下，可以执行步骤312～步骤314，本发明实施例不做限定。
可见，在图3所描述的方法中，服务器在接收到客户端的页面加载请求后，可以结合当前的负载情况确定是由客户端侧进行页面渲染，还是由服务器端进行页面渲染，如果服务器负载过大，则由客户端侧进行页面渲染，从而可以减轻服务器运行压力，提高页面渲染效率。如果服务器负载较小，则由服务器端进行页面渲染，从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染，提升系统性能。进一步的，客户端提供可视化的定制界面，能够灵活高效的实现页面配置，让不懂技术的用户也能实现产品定制，降低定制门槛，提升定制效果，从而能够在一定程度上降低产品二次定制开发和维护的成本。
基于图1所示的系统，本发明实施例公开了一种客户端。请参阅图5，图5是本发明实施例公开的一种客户端的结构示意图。其中，图5所描述的客户端可以包括：至少一个处理器501，如中央处理器(Central Processing Unit，CPU)，收发器502、输出装置503、存储器504以及至少一个通信总线505，上述处理器501、收发器502、输出装置503和存储器504通过总线505连接。
其中，上述输出装置503具体可为客户端500的显示屏，用于输出显示界面，如定制界面。
上述存储器504可以是高速RAM存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。可选的，还可以是至少一个位于处理器的存储装置。
上述存储器504用于存储一组程序代码，上述处理器501、收发器502以及输出装置503用于调用存储器504中存储的程序代码，执行如下操作：
收发器502，用于向服务器发送页面加载请求后，接收服务器基于该页面加载请求返回的初始页面内容，其中，该初始页面内容包括前端框架，例如UEE框架，以及至少一个DOM。
处理器501，用于基于该前端框架加载该至少一个DOM，并基于每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
处理器501，还用于基于该每个DOM匹配的页面模板将该每个DOM匹配的页面元数据进行渲染，得到该每个DOM的HTML片段。
输出装置503，用于将至少一个DOM的HTML片段组成HTML页面，并展示该HTML页面。
作为一种可行的实施方式，处理器501基于前端框架加载至少一个DOM的具体方式可以为：
将至少一个DOM加载至前端框架，并确定目标DOM，其中，目标DOM为前端框架从至少 一个DOM中识别出的DOM。
那么处理器501基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以为：
针对目标DOM中的每个DOM，基于该每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
作为另一种可行的实施方式，上述输出装置503，还用于在收发器502接收到页面定制请求时，展示定制界面。
上述收发器502，还用于接收在该定制界面中的配置操作，得到由该配置操作产生的页面元数据。其中，该配置操作可由用户触发。
上述处理器501，还用于建立该页面元数据与DOM的第一属性的关联关系。具体通过ID与第一属性(meta值)绑定。
上述收发器502，还用于将该页面元数据发送至服务器，以便服务器保存该页面元数据。
作为又一种可行的实施方式，该特征属性具体可包括第一属性和第二属性，第一属性具体可为meta属性，第二属性具体可为name属性，或者其他属性，如component-name属性、meta-id属性等，本发明实施例不做限定。可以理解的是，服务器在向客户端500返回DOM时，每个DOM可携带各自的特征属性。
因此，处理器501基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以包括以下几种：
方式一、
初始页面内容还可以包括页面模板和页面元数据，处理器501从而可以从初始页面内容中查找与每个DOM的第二属性相匹配的页面模板，以及与每个DOM的第一属性关联的页面元数据。
方式二、
处理器501通过收发器502向服务器发送请求消息，该请求消息用于请求获取每个DOM的页面模板和页面元数据，其中，该请求消息包含每个DOM的第二属性和第一属性，收发器502从而接收服务器基于该请求消息返回的与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
可选的，初始页面内容还可以只包括所需的页面元数据，处理器501可以从初始页面内容中查找与每个DOM的meta属性关联的页面元数据，而页面模板需要客户端500向服务器发送单独的请求消息才能获取。
针对方式二，处理器501通过收发器502向服务器发送请求消息可以理解为：1.针对每个DOM，收发器502向服务器分别发送第一请求消息和第二请求消息，其中，第一请求消息用于获取该DOM的页面模板，第一请求消息包含了该DOM的第二属性，第二请求消息用于获取该DOM的页面元数据，第二请求消息包含了该DOM的第一属性；2.针对每个DOM，收发器502向服务器发送一请求消息，该请求消息用于获取该DOM的页面模板和页面元数据，该请求消息包含了该DOM的第二属性和第一属性；3.针对页面模板，收发器502向服务器发送一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面模板，该请求消息包含了每个DOM的第二属性；针对页面元数据，收发器502向服务器发送另一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面元数据，该请求消息包含了每个DOM的第一属性；4.针对前端框架识别的所有DOM，收发器502向服务器发送一个请求 消息，该请求消息用于请求获取所有DOM中每个DOM的页面模板和页面元数据，该请求消息包含了所有DOM中每个DOM的第二属性和第一属性。
因此，服务器在接收到客户端500的请求消息后，会分别查找与第一属性关联的页面元数据，以及与第二属性相匹配的页面模板，从而将其返回给客户端500。
可选的，处理器501在获取到页面模板后，还可以通过存储器504将页面模板缓存在本地，那么在下次需要获取页面模板时，处理器501可以首先从本地中查找是否存在相应的页面模板，如果存在，则可从本地获取，如果不存在，则需要从服务器获取。也就是说处理器501获取的每个DOM的页面模板也可以是从本地获取的。
需要说明的是，不同的页面加载请求所需的DOM可能存在相同的，那么处理器501可以预先存储或者缓存常用DOM的页面模板，从而可以在需要获取页面模板时从本地获取，这样不需要频繁地进行服务器与客户端之间的信息交互，减少服务器负载，提高页面模板获取效率。
请参阅图6，图6是本发明实施例公开的另一种客户端的结构示意图。如图6所示，该客户端600可以包括：
收发模块601，用于向服务器发送页面加载请求后，接收服务器基于该页面加载请求返回的初始页面内容，其中，该初始页面内容包括前端框架，例如UEE框架，以及至少一个DOM。
加载模块602，用于基于该前端框架加载该至少一个DOM。
获取模块603，用于基于每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
渲染模块604，用于基于该每个DOM匹配的页面模板将该每个DOM匹配的页面元数据进行渲染，得到该每个DOM的HTML片段。
展示模块605，用于将至少一个DOM的HTML片段组成HTML页面，并展示该HTML页面。
作为一种可行的实施方式，加载模块602基于前端框架加载至少一个DOM的具体方式可以为：
将至少一个DOM加载至前端框架，并确定目标DOM，其中，目标DOM为前端框架从至少一个DOM中识别出的DOM。
那么获取模块603基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以为：
针对目标DOM中的每个DOM，基于该每个DOM的特征属性获取与该每个DOM匹配的页面模板和页面元数据。
作为另一种可行的实施方式，该客户端600还可以包括建立模块606，其中：
展示模块605，还用于在收发模块601接收到页面定制请求时，展示定制界面。
收发模块601，还用于接收在该定制界面中的配置操作，得到由该配置操作产生的页面元数据。其中，该配置操作可由用户触发。
建立模块606，用于建立该页面元数据与DOM的第一属性的关联关系。具体通过ID与第一属性(meta值)绑定。
所述收发模块601，还用于将该页面元数据发送至服务器，以便服务器保存该页面元数据。
作为又一种可行的实施方式，该特征属性具体可包括第一属性和第二属性，第一属性具体可为meta属性，第二属性具体可为name属性，或者其他属性，如component-name属性、 meta-id属性等，本发明实施例不做限定。可以理解的是，服务器在向客户端600返回DOM时，每个DOM可携带各自的特征属性。
因此，获取模块603基于每个DOM的特征属性获取与每个DOM匹配的页面模板和页面元数据的具体方式可以包括以下几种：
方式一、
初始页面内容还可以包括页面模板和页面元数据，获取模块603从而可以从初始页面内容中查找与每个DOM的第二属性相匹配的页面模板，以及与每个DOM的第一属性关联的页面元数据。
方式二、
获取模块603通过收发模块601向服务器发送请求消息，该请求消息用于请求获取每个DOM的页面模板和页面元数据，其中，该请求消息包含每个DOM的第二属性和第一属性，收发模块601从而接收服务器基于该请求消息返回的与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
可选的，初始页面内容还可以只包括所需的页面元数据，获取模块603可以从初始页面内容中查找与每个DOM的meta属性关联的页面元数据，而页面模板需要客户端600向服务器发送单独的请求消息才能获取。
针对方式二，获取模块603通过收发模块601向服务器发送请求消息可以理解为：1.针对每个DOM，收发模块601向服务器分别发送第一请求消息和第二请求消息，其中，第一请求消息用于获取该DOM的页面模板，第一请求消息包含了该DOM的第二属性，第二请求消息用于获取该DOM的页面元数据，第二请求消息包含了该DOM的第一属性；2.针对每个DOM，收发模块601向服务器发送一请求消息，该请求消息用于获取该DOM的页面模板和页面元数据，该请求消息包含了该DOM的第二属性和第一属性；3.针对页面模板，收发模块601向服务器发送一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面模板，该请求消息包含了每个DOM的第二属性；针对页面元数据，收发模块601向服务器发送另一请求消息，该请求消息用于获取前端框架识别的所有DOM中每个DOM的页面元数据，该请求消息包含了每个DOM的第一属性；4.针对前端框架识别的所有DOM，收发模块601向服务器发送一个请求消息，该请求消息用于请求获取所有DOM中每个DOM的页面模板和页面元数据，该请求消息包含了所有DOM中每个DOM的第二属性和第一属性。
因此，服务器在接收到客户端600的请求消息后，会分别查找与第一属性关联的页面元数据，以及与第二属性相匹配的页面模板，从而将其返回给客户端600。
可选的，获取模块603在获取到页面模板后，还可以将页面模板缓存在本地，那么在下次需要获取页面模板时，获取模块603可以首先从本地中查找是否存在相应的页面模板，如果存在，则可从本地获取，如果不存在，则需要从服务器获取。也就是说，获取模块603获取的每个DOM的页面模板也可以是从本地获取的。
需要说明的是，不同的页面加载请求所需的DOM可能存在相同的，那么获取模块603可以预先存储或者缓存常用DOM的页面模板，从而可以在需要获取页面模板时从本地获取，这样不需要频繁地进行服务器与客户端之间的信息交互，减少服务器负载，提高页面模板获取效率。
可见，在图5和图6所描述的客户端中，客户端在向服务器发送页面加载请求后，接收到服务器返回的初始页面内容，其包括前端框架和至少一个DOM，并基于前端框架加载至少 一个DOM，以及基于每个DOM的特征属性获取与之匹配的页面模板和页面元数据，从而基于页面模板将页面元数据进行渲染，得到每个DOM的HTML片段，最后将所有HTML片段组成HTML页面，并展示HTML页面。本发明实施例中，由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。进一步的，服务器在接收到客户端的页面加载请求后，可以结合当前的负载情况确定是由客户端侧进行页面渲染，还是由服务器端进行页面渲染，如果服务器负载过大，则由客户端侧进行页面渲染，从而可以减轻服务器运行压力，提高页面渲染效率。如果服务器负载较小，则由服务器端进行页面渲染，从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染，提升系统性能。进一步的，客户端可提供可视化的定制界面，能够灵活高效的实现页面配置，让不懂技术的用户也能实现产品定制，降低定制门槛，提升定制效果，从而能够在一定程度上降低产品二次定制开发和维护的成本。
基于图1所示的系统，本发明实施例公开了一种服务器。请参阅图7，图7是本发明实施例公开的一种服务器的结构示意图。其中，图7所描述的服务器可以包括：至少一个处理器701，如CPU，收发器702、存储器704以及至少一个通信总线704，上述处理器701、收发器702和存储器703通过总线704连接。
其中，上述存储器703可以是高速RAM存储器，也可为非不稳定的存储器(non-volatile memory)，例如磁盘存储器。可选的，还可以是至少一个位于处理器的存储装置。
上述存储器703用于存储一组程序代码，上述处理器701以及收发器702用于调用存储器703中存储的程序代码，执行如下操作：
收发器702，用于接收客户端发送的页面加载请求。
处理器701，用于获取与该页面加载请求匹配的初始页面内容，其中，该初始页面内容包括前端框架以及至少一个DOM。
收发器702，还用于将该初始页面内容发送给该客户端。
作为一种可行的实施方式，处理器701，还用于在收发器702接收到客户端发送的页面加载请求后，确定服务器700当前的负载，并在该负载超过预设负载阈值的情况下，获取与该页面加载请求匹配的初始页面内容的操作。
作为另一种可行的实施方式，处理器701，还用于在该负载未超过预设负载阈值的情况下，基于该页面加载请求进行页面渲染，得到HTML页面的源代码。
收发器702，还用于向该客户端发送该源代码，由该客户端基于该源代码展示该HTML页面。
作为又一种可行的实施方式，收发器702，还用于接收该客户端发送的页面元数据。
存储器703，用于保存该页面元数据。其中，该页面元数据具体可为用户对页面进行配置后产生的数据。
作为又一种可行的实施方式，收发器702在向客户端发送初始页面内容时，该初始页面内容还可包括页面模板和页面元数据。这样客户端就可以从初始页面内容中查找到每个DOM匹配的页面目标和页面元数据。
或者，
收发器702，还用于接收该客户端发送的请求消息，其中，该请求消息用于请求获取每个DOM的页面模板和页面元数据，该请求消息包含该每个DOM的第二属性和第一属性。
收发器702，还用于基于该请求消息向该客户端返回与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
请参阅图8，图8是本发明实施例公开的另一种服务器的结构示意图。如图8所示，该服务器800可以包括：
收发模块801，用于接收客户端发送的页面加载请求。
获取模块802，用于获取与该页面加载请求匹配的初始页面内容，其中，该初始页面内容包括前端框架以及至少一个DOM。
收发模块801，还用于将该初始页面内容发送给该客户端。
作为一种可行的实施方式，该服务器800还可以包括：
确定模块803，用于在收发模块801接收到客户端发送的页面加载请求后，确定服务器800当前的负载，并在该负载超过预设负载阈值的情况下，触发获取模块802执行获取与该页面加载请求匹配的初始页面内容的操作。
作为另一种可行的实施方式，该服务器800还可以包括渲染模块804，其中：
渲染模块804，用于在该负载未超过预设负载阈值的情况下，基于该页面加载请求进行页面渲染，得到HTML页面的源代码。
那么收发模块801，还用于向该客户端发送该源代码，由该客户端基于该源代码展示该HTML页面。
作为又一种可行的实施方式，该服务器800还可以包括保存模块805，其中：
收发模块801，还用于接收该客户端发送的页面元数据。
保存模块805，用于保存该页面元数据。其中，该页面元数据具体可为用户对页面进行配置后产生的数据。
作为又一种可行的实施方式，收发模块801在向客户端发送初始页面内容时，该初始页面内容还可包括页面模板和页面元数据。这样客户端就可以从初始页面内容中查找到每个DOM匹配的页面目标和页面元数据。
或者，
收发模块601，还用于接收该客户端发送的请求消息，其中，该请求消息用于请求获取每个DOM的页面模板和页面元数据，该请求消息包含该每个DOM的第二属性和第一属性。
收发模块601，还用于基于该请求消息向该客户端返回与第二属性相匹配的页面模板，以及与第一属性关联的页面元数据。
可见，在图7和图8所描述的服务器中，服务器在接收到客户端的页面加载请求后，可以获取页面加载请求匹配的初始页面内容，返回给客户端，初始页面内容包括前端框架和至少一个DOM，客户端可以基于前端框架加载至少一个DOM，以及基于每个DOM的特征属性获取与之匹配的页面模板和页面元数据，从而基于页面模板将页面元数据进行渲染，得到每个DOM的HTML片段，最后将所有HTML片段组成HTML页面，并展示HTML页面。本发明实施例中，由客户端进行页面渲染，从而能够在高并发场景下，降低服务器硬件部署成本，减轻服务器压力，减少服务器内存开销，提高页面渲染效率以及系统性能。进一步的，服务器在接收到客户端的页面加载请求后，可以结合当前的负载情况确定是由客户端侧进行页面渲染，还是由服务器端进行页面渲染，如果服务器负载过大，则由客户端侧进行页面渲染，从而可以减轻服务器运行压力，提高页面渲染效率。如果服务器负载较小，则由服务器端进行页面渲染，从而可以提高客户端侧的运行性能。通过这种方式可以灵活地实现页面渲染，提升系 统性能。进一步的，客户端可提供可视化的定制界面，能够灵活高效的实现页面配置，让不懂技术的用户也能实现产品定制，降低定制门槛，提升定制效果，从而能够在一定程度上降低产品二次定制开发和维护的成本。
需要说明的是，在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其他实施例的相关描述。其次，本领域技术人员也应该知悉，说明书中所涉及的动作和模块并不一定是本发明所必须的。
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
本发明实施例客户端、服务器中的模块可以根据实际需要进行合并、划分和删减。
本发明实施例中所述客户端和服务器，可以通过通用集成电路，例如CPU(Central Processing Unit，中央处理器)，或通过ASIC(Application Specific Integrated Circuit，专用集成电路)来实现。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。
以上对本发明实施例公开的一种网页渲染方法及相关设备进行了详细介绍，本文中应用了具体实例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (20)

  1. 一种网页渲染方法，其特征在于，包括：
    客户端向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的初始页面内容，所述初始页面内容包括前端框架以及至少一个文档对象模型DOM；
    所述客户端基于所述前端框架加载所述至少一个DOM，并基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据；
    所述客户端基于所述每个DOM匹配的页面模板将所述每个DOM匹配的页面元数据进行渲染，得到所述每个DOM的超文本标记语言HTML片段；
    所述客户端将所述至少一个DOM的HTML片段组成HTML页面，并展示所述HTML页面。
  2. 根据权利要求1所述的方法，其特征在于，所述客户端基于所述前端框架加载所述至少一个DOM，包括：
    所述客户端将所述至少一个DOM加载至所述前端框架，并确定目标DOM，所述目标DOM为所述前端框架从所述至少一个DOM中识别出的DOM；
    所述客户端基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据，包括：
    针对所述目标DOM中的每个DOM，所述客户端基于所述每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据。
  3. 根据权利要求1或2所述的方法，其特征在于，所述客户端向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的初始页面内容之前，所述方法还包括：
    所述客户端在接收到页面定制请求时，展示定制界面；
    所述客户端接收在所述定制界面中的配置操作，得到由所述配置操作产生的页面元数据；
    所述客户端建立所述页面元数据与DOM的第一属性的关联关系，并将所述页面元数据发送至所述服务器，以便所述服务器保存所述页面元数据。
  4. 根据权利要求3所述的方法，其特征在于，所述特征属性包括第二属性和第一属性，所述初始页面内容还包括页面模块和页面元数据；
    所述客户端基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据，包括：
    所述客户端从所述初始页面内容中查找与所述每个DOM的第二属性相匹配的页面模板，以及与所述每个DOM的第一属性关联的页面元数据。
  5. 根据权利要求3所述的方法，其特征在于，所述特征属性包括名称第二属性和第一属性，所述客户端基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据，包括：
    所述客户端向所述服务器发送请求消息，所述请求消息用于请求获取每个DOM的页面模板和页面元数据，所述请求消息包含所述每个DOM的第二属性和第一属性；
    所述客户端接收所述服务器基于所述请求消息返回的与所述第二属性相匹配的页面模板，以及与所述第一属性关联的页面元数据。
  6. 一种网页渲染方法，其特征在于，包括：
    服务器接收客户端发送的页面加载请求；
    所述服务器获取与所述页面加载请求匹配的初始页面内容，所述初始页面内容包括前端框架以及至少一个DOM；
    所述服务器将所述初始页面内容发送给所述客户端。
  7. 根据权利要求6所述的方法，其特征在于，所述服务器接收客户端发送的页面加载请求之后，所述方法还包括：
    所述服务器确定当前的负载，并在所述负载超过预设负载阈值的情况下，执行所述获取与所述页面加载请求匹配的初始页面内容的操作。
  8. 根据权利要求7所述的方法，其特征在于，所述方法还包括：
    所述服务器在所述负载未超过所述预设负载阈值的情况下，基于所述页面加载请求进行页面渲染，得到HTML页面的源代码；
    所述服务器向所述客户端发送所述源代码，由所述客户端基于所述源代码展示所述HTML页面。
  9. 根据权利要求6～8任一项所述的方法，其特征在于，所述服务器接收客户端发送的页面加载请求之前，所述方法还包括：
    所述服务器接收所述客户端发送的页面元数据，并保存所述页面元数据。
  10. 根据权利要求6～8任一项所述的方法，其特征在于，所述初始页面内容还包括页面模板和页面元数据；
    或者，
    所述服务器将所述初始页面内容发送给所述客户端之后，所述方法还包括：
    所述服务器接收所述客户端发送的请求消息，所述请求消息用于请求获取每个DOM的页面模板和页面元数据，所述请求消息包含所述每个DOM的第二属性和第一属性；
    所述服务器基于所述请求消息向所述客户端返回与所述第二属性相匹配的页面模板，以及与所述第一属性关联的页面元数据。
  11. 一种客户端，其特征在于，包括：
    收发模块，用于向服务器发送页面加载请求后，接收所述服务器基于所述页面加载请求返回的初始页面内容，所述初始页面内容包括前端框架以及至少一个DOM；
    加载模块，用于基于所述前端框架加载所述至少一个DOM；
    获取模块，用于基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据；
    渲染模块，用于基于所述每个DOM匹配的页面模板将所述每个DOM匹配的页面元数据进行渲染，得到所述每个DOM的HTML片段；
    展示模块，用于将所述至少一个DOM的HTML片段组成HTML页面，并展示所述HTML页面。
  12. 根据权利要求11所述的客户端，其特征在于，所述加载模块基于所述前端框架加载所述至少一个DOM的具体方式为：
    将所述至少一个DOM加载至所述前端框架，并确定目标DOM，所述目标DOM为所述前端框架从所述至少一个DOM中识别出的DOM；
    所述获取模块基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据的具体方式为：
    针对所述目标DOM中的每个DOM，基于所述每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据。
  13. 根据权利要求11或12所述的客户端，其特征在于，
    所述展示模块，还用于在所述收发模块接收到页面定制请求时，展示定制界面；
    所述收发模块，还用于接收在所述定制界面中的配置操作，得到由所述配置操作产生的页面元数据；
    所述客户端还包括：
    建立模块，用于建立所述页面元数据与DOM的第一属性的关联关系；
    所述收发模块，还用于将所述页面元数据发送至所述服务器，以便所述服务器保存所述页面元数据。
  14. 根据权利要求13所述的客户端，其特征在于，所述特征属性包括第二属性和第一属性，所述初始页面内容还包括页面模块和页面元数据；
    所述获取模块基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据的具体方式为：
    从所述初始页面内容中查找与所述每个DOM的第二属性相匹配的页面模板，以及与所述每个DOM的第一属性关联的页面元数据。
  15. 根据权利要求13所述的客户端，其特征在于，所述特征属性包括名称第二属性和第一属性，所述获取模块基于每个DOM的特征属性获取与所述每个DOM匹配的页面模板和页面元数据的具体方式为：
    向所述服务器发送请求消息，所述请求消息用于请求获取每个DOM的页面模板和页面元数据，所述请求消息包含所述每个DOM的第二属性和第一属性；
    接收所述服务器基于所述请求消息返回的与所述第二属性相匹配的页面模板，以及与所述第一属性关联的页面元数据。
  16. 一种服务器，其特征在于，包括：
    收发模块，用于接收客户端发送的页面加载请求；
    获取模块，用于获取与所述页面加载请求匹配的初始页面内容，所述初始页面内容包括前端框架以及至少一个DOM；
    所述收发模块，还用于将所述初始页面内容发送给所述客户端。
  17. 根据权利要求16所述的服务器，其特征在于，所述服务器还包括：
    确定模块，用于确定所述服务器当前的负载，并在所述负载超过预设负载阈值的情况下，触发所述获取模块执行所述获取与所述页面加载请求匹配的初始页面内容的操作。
  18. 根据权利要求17所述的服务器，其特征在于，所述服务器还包括：
    渲染模块，用于在所述负载未超过所述预设负载阈值的情况下，基于所述页面加载请求进行页面渲染，得到HTML页面的源代码；
    所述收发模块，还用于向所述客户端发送所述源代码，由所述客户端基于所述源代码展示所述HTML页面。
  19. 根据权利要求16～18任一项所述的服务器，其特征在于，
    所述收发模块，还用于接收所述客户端发送的页面元数据；
    所述服务器还包括：
    保存模块，用于保存所述页面元数据。
  20. 根据权利要求16～18任一项所述的服务器，其特征在于，所述初始页面内容还包括页面模板和页面元数据；
    或者，
    所述收发模块，还用于接收所述客户端发送的请求消息，所述请求消息用于请求获取每个DOM的页面模板和页面元数据，所述请求消息包含所述每个DOM的第二属性和第一属性；
    所述收发模块，还用于基于所述请求消息向所述客户端返回与所述第二属性相匹配的页面模板，以及与所述第一属性关联的页面元数据。
PCT/CN2017/104545 2017-01-20 2017-09-29 一种网页渲染方法及相关设备 WO2018133452A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
EP17893499.8A EP3518124A4 (en) 2017-01-20 2017-09-29 WEB PAGE RENDERING METHOD AND DEVICE THEREOF
US16/393,417 US20190251143A1 (en) 2017-01-20 2019-04-24 Web page rendering method and related device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710042896.3 2017-01-20
CN201710042896.3A CN108334517A (zh) 2017-01-20 2017-01-20 一种网页渲染方法及相关设备

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US16/393,417 Continuation US20190251143A1 (en) 2017-01-20 2019-04-24 Web page rendering method and related device

Publications (1)

Publication Number Publication Date
WO2018133452A1 true WO2018133452A1 (zh) 2018-07-26

Family

ID=62907787

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/104545 WO2018133452A1 (zh) 2017-01-20 2017-09-29 一种网页渲染方法及相关设备

Country Status (4)

Country Link
US (1) US20190251143A1 (zh)
EP (1) EP3518124A4 (zh)
CN (1) CN108334517A (zh)
WO (1) WO2018133452A1 (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109324788A (zh) * 2018-09-05 2019-02-12 湖南华诺科技有限公司 一种基于React和Nodejs的服务端渲染方法
CN110058856A (zh) * 2019-04-28 2019-07-26 恒生电子股份有限公司 页面配置方法及装置
CN112487319A (zh) * 2020-11-26 2021-03-12 清创网御(合肥)科技有限公司 一种基于dom树路径匹配的文章解析方法
CN112800370A (zh) * 2021-01-28 2021-05-14 金蝶蝶金云计算有限公司 业务单据的处理方法、装置、计算机设备和存储介质
CN113761431A (zh) * 2020-09-24 2021-12-07 北京沃东天骏信息技术有限公司 一种校验页面完整性的方法和装置

Families Citing this family (23)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110968991A (zh) * 2018-09-28 2020-04-07 北京国双科技有限公司 一种文字的编辑方法及相关装置
CN109542427B (zh) * 2018-11-30 2022-07-01 深圳市元征科技股份有限公司 一种系统定制方法、装置及电子设备和存储介质
CN109684576A (zh) * 2018-12-14 2019-04-26 平安城市建设科技(深圳)有限公司 网页资源懒加载监控方法、装置、设备及存储介质
CN109756393B (zh) * 2018-12-27 2021-04-30 阿里巴巴（中国）有限公司 信息处理方法、系统、介质和计算设备
CN109739503A (zh) * 2018-12-28 2019-05-10 深圳竹云科技有限公司 一种基于用户需求动态化控制页面生成的系统
CN110321510A (zh) * 2019-05-09 2019-10-11 苏州乐米信息科技股份有限公司 页面渲染方法和系统
CN110442808A (zh) * 2019-06-28 2019-11-12 苏宁云计算有限公司 页面渲染加速方法和装置
CN110717484B (zh) * 2019-10-11 2021-07-27 支付宝(杭州)信息技术有限公司 一种图像处理方法和系统
CN110765251B (zh) * 2019-10-21 2022-11-22 百度在线网络技术（北京）有限公司 渲染方法、服务器、电子设备及存储介质
CN112699326B (zh) * 2019-10-23 2023-03-14 上海哔哩哔哩科技有限公司 一种网页页面渲染控制方法及装置
CN111124528B (zh) * 2019-11-11 2023-06-27 泰康保险集团股份有限公司 页面加载方法、装置、电子设备及计算机可读存储介质
CN111026988A (zh) * 2019-11-15 2020-04-17 浙江数链科技有限公司 一种页面加载的方法、装置、系统及计算机设备
CN112947915A (zh) * 2019-12-11 2021-06-11 顺丰科技有限公司 一种自定义页面的方法、装置及存储介质
CN111078219B (zh) * 2019-12-13 2023-10-03 北京金山云网络技术有限公司 页面显示方法、装置、系统、电子设备及存储介质
CN111177618B (zh) * 2019-12-17 2023-08-11 腾讯科技（深圳）有限公司 网站搭建方法、装置、设备及计算机可读存储介质
CN111143732A (zh) * 2019-12-20 2020-05-12 贝壳技术有限公司 网页渲染方法及装置
CN112182078B (zh) * 2020-09-17 2023-08-22 建信人寿保险股份有限公司 一种电子产品的发布、使用方法、装置、设备及存储介质
CN112163178A (zh) * 2020-09-27 2021-01-01 珠海格力电器股份有限公司 页面数据的显示方法和装置、存储介质、电子装置
CN112153064B (zh) * 2020-09-28 2022-11-22 上海缓存命中科技有限公司 应用商店及其使用方法
CN112774193A (zh) * 2021-01-14 2021-05-11 江苏卫健信息科技有限公司 一种云游戏的图像渲染方法
US11836212B2 (en) * 2021-12-03 2023-12-05 Atlassian Pty Ltd. Systems and methods for rendering interactive web pages
CN114153547B (zh) * 2021-12-06 2023-11-17 珠海金山数字网络科技有限公司 管理页面显示方法及装置
US20230188591A1 (en) * 2021-12-14 2023-06-15 Sap Se Recorder for webgui application

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8639680B1 (en) * 2012-05-07 2014-01-28 Google Inc. Hidden text detection for search result scoring
CN103970882A (zh) * 2014-05-19 2014-08-06 小米科技有限责任公司 渲染页面的方法及装置
CN104035753A (zh) * 2013-03-04 2014-09-10 优视科技有限公司 一种双WebView展示定制页面的方法及系统
CN104639653A (zh) * 2015-03-05 2015-05-20 北京掌中经纬技术有限公司 基于云架构的自适应方法及系统
CN106294594A (zh) * 2016-07-29 2017-01-04 东软集团股份有限公司 页面渲染方法及装置

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140053056A1 (en) * 2012-08-16 2014-02-20 Qualcomm Incorporated Pre-processing of scripts in web browsers
US9576070B2 (en) * 2014-04-23 2017-02-21 Akamai Technologies, Inc. Creation and delivery of pre-rendered web pages for accelerated browsing

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8639680B1 (en) * 2012-05-07 2014-01-28 Google Inc. Hidden text detection for search result scoring
CN104035753A (zh) * 2013-03-04 2014-09-10 优视科技有限公司 一种双WebView展示定制页面的方法及系统
CN103970882A (zh) * 2014-05-19 2014-08-06 小米科技有限责任公司 渲染页面的方法及装置
CN104639653A (zh) * 2015-03-05 2015-05-20 北京掌中经纬技术有限公司 基于云架构的自适应方法及系统
CN106294594A (zh) * 2016-07-29 2017-01-04 东软集团股份有限公司 页面渲染方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP3518124A4 *

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109324788A (zh) * 2018-09-05 2019-02-12 湖南华诺科技有限公司 一种基于React和Nodejs的服务端渲染方法
CN109324788B (zh) * 2018-09-05 2020-11-06 湖南华诺科技有限公司 一种基于React和Nodejs的服务端渲染方法
CN110058856A (zh) * 2019-04-28 2019-07-26 恒生电子股份有限公司 页面配置方法及装置
CN110058856B (zh) * 2019-04-28 2023-08-01 恒生电子股份有限公司 页面配置方法及装置
CN113761431A (zh) * 2020-09-24 2021-12-07 北京沃东天骏信息技术有限公司 一种校验页面完整性的方法和装置
CN112487319A (zh) * 2020-11-26 2021-03-12 清创网御(合肥)科技有限公司 一种基于dom树路径匹配的文章解析方法
CN112800370A (zh) * 2021-01-28 2021-05-14 金蝶蝶金云计算有限公司 业务单据的处理方法、装置、计算机设备和存储介质
CN112800370B (zh) * 2021-01-28 2024-04-30 金蝶蝶金云计算有限公司 业务单据的处理方法、装置、计算机设备和存储介质

Also Published As

Publication number Publication date
US20190251143A1 (en) 2019-08-15
EP3518124A1 (en) 2019-07-31
EP3518124A4 (en) 2019-10-02
CN108334517A (zh) 2018-07-27

Similar Documents

Publication Publication Date Title
WO2018133452A1 (zh) 一种网页渲染方法及相关设备
US11675969B2 (en) Dynamic native content insertion
US10824691B2 (en) Page rendering method, device, and data storage medium
US20220318336A1 (en) Method and Terminal Device for Extracting Web Page Content
US9355081B2 (en) Transforming HTML forms into mobile native forms
US20170371974A1 (en) Method for loading webpage, client and programmable device
US9904936B2 (en) Method and apparatus for identifying elements of a webpage in different viewports of sizes
US9563611B2 (en) Merging web page style addresses
US9710440B2 (en) Presenting fixed format documents in reflowed format
US9934206B2 (en) Method and apparatus for extracting web page content
US20150040098A1 (en) Systems and methods for developing and delivering platform adaptive web and native application content
WO2013178094A1 (zh) 页面显示方法及装置
RU2010151913A (ru) Показ рекламных объявлений на основе взаимодействия с веб-страницей
CN105095394A (zh) 网页生成方法和装置
CN106951270B (zh) 一种代码处理方法、系统及服务器
US9772986B2 (en) Transforming HTML forms into mobile native forms
TW201525740A (zh) 網頁顯示方法和裝置及電腦可讀取儲存介質
US10095791B2 (en) Information search method and apparatus
CN114491354A (zh) 一种页面生成方法、装置及计算机可读存储介质
CN113050921A (zh) 一种网页转换方法、装置、存储介质和计算机设备
US20170315971A1 (en) Program for displaying webpage, terminal device, and server device
US20240126978A1 (en) Determining attributes for elements of displayable content and adding them to an accessibility tree
CN116861922A (zh) 网页文本处理方法、装置、电子设备以及存储介质
CN115544343A (zh) 汽车信息收集方法、装置、电子设备及存储介质
CN118113398A (zh) 页面跳转的处理、页面内容提供方法、设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17893499

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2017893499

Country of ref document: EP

Effective date: 20190426

NENP Non-entry into the national phase

Ref country code: DE