CN113010827B - Page rendering method and device, electronic equipment and storage medium - Google Patents

Page rendering method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN113010827B
CN113010827B CN202110284442.3A CN202110284442A CN113010827B CN 113010827 B CN113010827 B CN 113010827B CN 202110284442 A CN202110284442 A CN 202110284442A CN 113010827 B CN113010827 B CN 113010827B
Authority
CN
China
Prior art keywords
page
rendering
markup language
hypertext markup
server
Prior art date
Legal status (The legal status 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 status listed.)
Active
Application number
CN202110284442.3A
Other languages
Chinese (zh)
Other versions
CN113010827A (en
Inventor
王宁
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Baidu Netcom Science and Technology Co Ltd
Original Assignee
Beijing Baidu Netcom Science and Technology Co Ltd
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 Beijing Baidu Netcom Science and Technology Co Ltd filed Critical Beijing Baidu Netcom Science and Technology Co Ltd
Priority to CN202110284442.3A priority Critical patent/CN113010827B/en
Publication of CN113010827A publication Critical patent/CN113010827A/en
Application granted granted Critical
Publication of CN113010827B publication Critical patent/CN113010827B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986Document structures and storage, e.g. HTML extensions
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The disclosure discloses a page rendering method, a page rendering device, electronic equipment and a storage medium, relates to the technical field of computers, and particularly relates to the field of webpage application. The page rendering method comprises the following specific implementation scheme: acquiring a call request from a server, wherein the call request is sent when the server acquires an access request from a client; in response to the call request, calling the isomorphic renderer, and executing rendering operation according to the static resources of the page, the hypertext markup language structure information and the content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in the development stage of the page; and returning the rendered hypertext markup language file to the server.

Description

Page rendering method and device, electronic equipment and storage medium
Technical Field
The present disclosure relates to the field of computer technology, and in particular, to the field of web page applications.
Background
The process of delivering the web page to the user for access from scratch can be divided into a local development process and an online delivery process.
In the local development stage, a developer can write and output static resources such as template structures, styles, client scripts, pictures and the like according to HTML, CSS, javaScript and template grammar. After online delivery, when a user accesses a uniform resource locator (i.e., URL, uniform Resource Locator) through a browser to request a web page, the server side may dynamically render the page and return the rendered page to the browser.
Disclosure of Invention
The present disclosure provides a page rendering method, apparatus, electronic device, storage medium, and computer program product.
According to an aspect of the present disclosure, there is provided a page rendering method including: acquiring a call request from a server, wherein the call request is sent when the server acquires an access request from a client; in response to the call request, calling the isomorphic renderer, and executing rendering operation according to the static resources of the page, the hypertext markup language structure information and the content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in the development stage of the page; and returning the rendered hypertext markup language file to the server.
According to another aspect of the present disclosure, there is provided a page rendering apparatus including: the device comprises an acquisition module, a response module and a sending module.
The acquisition module is used for acquiring a call request from a server, wherein the call request is sent when the server acquires an access request from a client.
And the response module is used for responding to the calling request, calling the isomorphic renderer and executing rendering operation according to the static resource of the page, the hypertext markup language structure information and the content data of the page, wherein the isomorphic renderer is utilized in advance to carry out simulated rendering in the development stage of the page.
And the sending module is used for returning the hypertext markup language file after rendering to the server.
According to another aspect of the present disclosure, there is provided an electronic device including: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method as described above.
According to another aspect of the present disclosure, there is provided a non-transitory computer-readable storage medium storing computer instructions for causing the computer to perform the method as described above.
According to another aspect of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements a method as described above.
It should be understood that the description in this section is not intended to identify key or critical features of the embodiments of the disclosure, nor is it intended to be used to limit the scope of the disclosure. Other features of the present disclosure will become apparent from the following specification.
Drawings
The drawings are for a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:
FIG. 1 schematically illustrates an exemplary system architecture to which page rendering methods and apparatus may be applied, according to embodiments of the present disclosure;
FIG. 2 schematically illustrates a flow chart of a page rendering method according to an embodiment of the disclosure;
FIG. 3 schematically illustrates a flow diagram of page rendering by an isomorphic renderer in a production environment in accordance with an embodiment of the disclosure;
FIG. 4 schematically illustrates a flow diagram of page rendering by a homogeneous renderer in a development environment in accordance with an embodiment of the present disclosure;
FIG. 5 schematically illustrates a schematic diagram of invoking a isomorphic renderer API in accordance with an embodiment of the present disclosure;
FIG. 6 schematically illustrates a block diagram of a page rendering apparatus according to an embodiment of the disclosure; and
fig. 7 schematically illustrates a block diagram of an electronic device adapted to implement a page rendering method according to an embodiment of the disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below in conjunction with the accompanying drawings, which include various details of the embodiments of the present disclosure to facilitate understanding, and should be considered as merely exemplary. Accordingly, one of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
When a user accesses a URL to request a web page through a browser, implementation schemes of a server-side dynamic page rendering technology are mainly classified into three types in the related art.
First, template engine based rendering techniques. The principle is that a webpage developer writes a template structure, a pattern and a client script by using a template grammar under a template engine frame, then places the written template under a specific directory of a server, when a client requests, the template engine dynamically compiles and replaces the template in real time, and returns fully rendered page content to be displayed to a user.
However, in the process of realizing the method, the problems that the components are difficult to multiplex, the components cannot be optimized in advance without constructing a compiling stage, front and back end codes are inappropriately managed and are difficult to realize front and back end separation development, and when a plurality of persons are applied to collaborative development at an enterprise level, the front and back end labor division is not definite, so that the communication cost is high, the development efficiency is influenced, the page rendering performance optimization flow is not smooth and the like are even caused.
And the second type is based on a server-side rendering module independent of a specific technical stack. The principle is that a page developer packs out page application bundle js for Server-Side Rendering (SSR) execution in a construction and compiling stage, and finally, the page application bundle js is deployed on line to be executed under a specific Server environment.
However, in the process of implementing the present disclosure, it is found that, based on the server-side rendering module that is independent of the specific technology stack, it is a challenging task to ensure that the components and pages rendered in the local development stage can smoothly run in the rendering environment of the cloud, and especially when the components rely on the specific objects of the browser that are used in the local development, the challenges are greater. Although a test environment is provided for debugging, a server-side rendering module needs to be independently started, a debugging result cannot be verified in time, a bundle.js file needs to be produced by waiting for compiling and landing, a debugging process is long, and online risks are large.
Third, a front-to-back generic framework based on technology-specific stack integration. The principle is based on isomorphic rendering encapsulation of the front-end framework, then exposing interfaces, and the page developer uses the exposed interfaces to code components and pages. Namely, a code is simultaneously operated on a server side and a client side, a developer only pays attention to service realization, and the framework controls development and construction on a development machine and switching of cloud production environments. Corresponding frames are as follows: next.js based on the exact technology stack, nuxt.js based on the Vue technology stack.
Front and back general frameworks based on specific technology stack integration, such as isomorphic rendering based on front end frameworks such as compact/Vue, can write the same code, run on a server side and a client side at the same time, and a developer only needs to pay attention to service implementation, so that the same rendering flow as that of an online environment is used in a developer environment. However, in implementing the present disclosure, it was found that just because the integrated package is too compact, the developer must use the exposed API interfaces of his or her framework to share the ability to use the framework, and that too much code is intrusive, which makes the framework binding problem more pronounced, and the amount of code modification increases in proportion to engineering pages when accessing the framework or migrating the framework.
With the advent of AJAX (i.e., asynchronous JavaScript And XML, representing an acronym for asynchronous JavaScript and extensible markup language XML) technology, web applications have enabled them to display the content of different pages without refreshing, which may be referred to as single page applications (SPA, single Page Application).
In a single page application, there is typically only one hypertext markup language (i.e., hyper Text Markup Language, HTML for short, which represents a standard markup language for creating web pages) file, and the page content is dynamically rendered according to the accessed URL matching the corresponding routing script. The single page application optimizes the user experience and brings a plurality of problems, such as unfriendly search engine optimization (SEO, search Engine Optimization), overlong first screen visibility time and the like. It should be noted that the hypertext markup language file is not limited to a single page application, but may be applied to other types of applications.
To solve some or all of the above problems, web page staticizing techniques have been developed. In the related art, the web page staticizing technology mainly includes the following.
Client Rendering (i.e., CSR, client-Side Rendering): the user accesses the URL through the client to request the HTML file, the front end dynamically renders the page content according to the route, the API is executed to acquire data, but the process of displaying the final state page content is longer, and a certain white screen time exists.
Prerendering (i.e., prerendering): HTML files matching the prerendered paths are generated in the build phase (where there is a corresponding HTML file for each route that needs prerendering). The constructed HTML file does not contain personalized content of the user, and the data is required to be requested to be secondarily rendered and supplemented.
Rendering at a server: the user accesses the URL through the client, and the server combines and renders the URL with the HTML template according to the data required by the access path request to generate a final HTML file, and returns the final HTML file to the client browser. The HTML received by the client browser includes the entire content of the user's personalized information.
Server rendering may dynamically compile the outgoing HTML file in real-time for each rendering request. By the method, the crawler grabbing tool of the search engine can directly view the fully-rendered page, and the fully-rendered page can be seen without waiting for JavaScript to download and execute.
But the key problems still affecting development efficiency in server-side rendering need to be solved. For example, first, component environments need to be compatible, and unobstructed page components run in browser environments (i.e., client environments), and compatible server-side rendering environments need to be considered. Secondly, the construction setting and deployment are normalized, and a set of normalized delivery flow is needed to construct and deploy page application bundle.js read by a node.js server of a server side rendering environment. Thirdly, the page developer needs to write the server-side code, consider the load of the server side, have load balancing, cache and the like, and reasonably use the resources.
The method and the device are used for constructing an isomorphic page renderer, namely the isomorphic page renderer, then are uniformly introduced into a local development environment and an online cloud production environment, and are uniformly upgraded and maintained, so that the problems encountered when the isomorphic technology is used for developing the webpage are solved, and the development efficiency of a webpage writer is improved.
The embodiment of the disclosure provides a page rendering method, which comprises the following steps: acquiring a call request from a server, wherein the call request is sent when the server acquires an access request from a client; in response to the call request, calling the isomorphic renderer, and executing rendering operation according to the static resources of the page, the hypertext markup language structure information and the content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in the development stage of the page; and returning the rendered hypertext markup language file to the server.
Fig. 1 schematically illustrates an exemplary system architecture to which page rendering methods and apparatuses may be applied according to embodiments of the present disclosure.
It should be noted that fig. 1 is only an example of a system architecture to which embodiments of the present disclosure may be applied to assist those skilled in the art in understanding the technical content of the present disclosure, but does not mean that embodiments of the present disclosure may not be used in other devices, systems, environments, or scenarios.
As shown in fig. 1, a system architecture 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired and/or wireless communication links, and the like.
The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications may be installed on the terminal devices 101, 102, 103, such as a knowledge reading class application, a web browser application, a search class application, an instant messaging tool, a mailbox client and/or social platform software, etc. (as examples only).
The terminal devices 101, 102, 103 may be a variety of electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop and desktop computers, and the like.
The server 105 may be a server providing various services, such as a background management server (by way of example only) providing support for content browsed by the user using the terminal devices 101, 102, 103. The background management server may analyze and process the received data such as the user request, and feed back the processing result (e.g., the web page, information, or data obtained or generated according to the user request) to the terminal device.
The page rendering methods provided by embodiments of the present disclosure may be generally performed by the server 105. Accordingly, the page rendering apparatus provided by the embodiments of the present disclosure may be generally provided in the server 105. The page rendering method provided by the embodiments of the present disclosure may also be performed by a server or a server cluster that is different from the server 105 and is capable of communicating with the terminal devices 101, 102, 103 and/or the server 105. Accordingly, the page rendering apparatus provided by the embodiments of the present disclosure may also be provided in a server or a server cluster that is different from the server 105 and is capable of communicating with the terminal devices 101, 102, 103 and/or the server 105.
It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Fig. 2 schematically illustrates a flow chart of a page rendering method according to an embodiment of the disclosure.
As shown in fig. 2, the method includes operations S210 to S230.
In operation S210, a call request from a server is acquired, wherein the call request is transmitted in a case where the server acquires an access request from a client.
In operation S220, in response to the call request, the isomorphic renderer is called, and a rendering operation is performed according to the static resources of the page, the hypertext markup language structure information, and the content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in the development stage of the page.
In operation S230, the rendered hypertext markup language file is returned to the server.
According to embodiments of the present disclosure, a user may request access to a page through a client, which may include, for example, but not limited to, a browser or the like. The client may send an access request to a server of the server.
According to the embodiment of the disclosure, after the server side obtains the access request, the server side may send a call request to the isomorphic renderer, where the call request may include information carried by the access request, for example, page address information requesting access.
According to embodiments of the present disclosure, the isomorphic renderer may perform rendering operations according to static resources of the page, hypertext markup language structure information, and content data of the page in response to the call request.
According to the embodiment of the disclosure, the page requested to be accessed by the client side is simulated and rendered by the isomorphic renderer in advance in the development stage.
According to embodiments of the present disclosure, the hypertext markup language document may also be referred to as an HTML document. According to embodiments of the present disclosure, static resources may include, for example, cascading style sheets (CSS, cascading Style Sheets), javaScript scripts, and the like. The content data of the page may include, for example, pictures, text information, and the like.
According to the embodiment of the disclosure, isomorphic renderers are uniformly introduced in a local development environment and an online cloud production environment, and are uniformly upgraded and maintained, and rendering operations are executed according to static resources of pages, hypertext markup language structure information and content data of the pages in a mode of calling the isomorphic renderers, so that hypertext markup language files are obtained. Because the isomorphic renderers are utilized in advance for simulation rendering in the development stage of the page, the page development environment and the online environment components are consistent in performance, the difference of the running environment is eliminated, the development efficiency is improved, and the project risk is reduced.
According to the embodiment of the disclosure, the unobstructed page component runs in the production environment (namely the client environment), and the server rendering environment can be automatically compatible. The method helps the developer save time for long-term optimization and enables website construction capability.
According to an embodiment of the present disclosure, performing a rendering operation according to a static resource of a page, hypertext markup language structure information, and content data of the page includes:
analyzing page route parameters in the call request, and acquiring service parameters of the dependent interfaces;
obtaining static resources and hypertext markup language structure information of the page according to the page routing parameters;
obtaining content data of the page according to the service parameters of the dependent interface;
generating a rendering environment for rendering the page; and
in a rendering environment, a rendering operation is performed according to static resources of the page, the hypertext markup language structure information, and content data of the page.
The method illustrated in fig. 2 is further described below with reference to fig. 3 in conjunction with an exemplary embodiment.
Fig. 3 schematically illustrates a flow diagram of page rendering by an isomorphic renderer in a production environment in accordance with an embodiment of the present disclosure.
As shown in fig. 3, the method includes operations S301 to S306. It should be noted that the operations described in the embodiments of the present disclosure may be performed simultaneously or sequentially without departing from the logical execution order in the art.
In operation S301, the server transmits a call request to request a context.
In operation S302, the isomorphic renderer, after receiving the call request, parses the page routing parameters in response to the call request. Static resources of the page and the structural information of the hypertext markup language can be obtained according to the page routing parameters.
The isomorphic renderer can also acquire dependent interface service parameters in operation S303. And obtaining the content data of the page according to the dependent interface service parameters.
In operation S304, a context rendering environment for rendering a page is generated.
In operation S305, rendering is performed in the generated rendering environment using the above information and data, resulting in a completely rendered HTML file.
In operation S306, the completely rendered HTML file is returned to the server side.
According to embodiments of the present disclosure, after returning the fully rendered HTML file to the server, the server may return the fully rendered HTML file to the client. According to the embodiment of the disclosure, since the rendering operation is performed by the isomorphic renderer, the hypertext markup language file is obtained without rendering at the client. The web crawler can directly analyze the content carried in the file. The webpage white screen time is shortened, relatively excellent use experience can be provided for the user, the passenger acquisition cost is reduced, and meanwhile, the user viscosity is improved.
According to an embodiment of the present disclosure, performing simulated rendering with an isomorphic renderer in advance in a development stage of a page includes: invoking a hypertext markup language webpage package plug-in and a prerendering plug-in through a packaging tool, wherein the hypertext markup language webpage package plug-in is used for creating a hypertext markup language text; acquiring static resources of the page by monitoring a first target hook of the hypertext markup language webpage package plug-in; acquiring the structural information of the page by monitoring a second target hook of the hypertext markup language webpage package plug-in; and calling the isomorphic renderer, and performing simulated rendering according to the static resources of the page and the structural information of the page.
According to embodiments of the present disclosure, the packaging tool may be, for example, a weback plug-in system. The weback plug-in system is a static module packaging tool for JavaScript applications. When the weback plug-in system processes an application, it builds a dependency graph internally, which maps to each module required for an item and generates one or more packages.
The weback plug-in system may obtain the compiled context and the hot update function of each build. The object contains the current module resources, compilation generation resources, changed files, etc. When the weback plugin system is operating in development mode, a new compilation will be created each time a file change is detected. The compiled object also provides many event callbacks for the plug-in to extend.
According to embodiments of the present disclosure, a hypertext markup language web page package plug-in is a plug-in for creating an HTML file, which may include, for example, HTML-weback-plug in. The method has the effects that when the weback plugin system is used for packaging, an HTML file is created, and the static file packaged by the weback plugin system is automatically inserted into the HTML file.
According to embodiments of the present disclosure, a pre-rendering plug-in may be used to pre-transition a page from a blank page to an intermediate state with content such that subsequent users accessing the page will see the page directly from the intermediate state to fully rendered without seeing the original blank page. Prerendering may be performed at the compile build stage of a page.
According to an embodiment of the present disclosure, the first target hook includes a resource tag generation front hook; the second object hook includes a post-template-execution hook.
According to the embodiment of the disclosure, the isomorphic renderer can be called, and simulated rendering is performed according to the static resources of the page and the structural information of the page. According to an embodiment of the present disclosure, the isomorphic renderer may also perform simulated rendering using operations S301 to S305 described above.
According to the embodiment of the disclosure, efficient development of static web pages is realized based on isomorphic renderers.
According to the embodiment of the disclosure, after the isomorphic renderer obtains the hypertext markup language file through the simulated rendering, the hypertext markup language file obtained through the simulated rendering may also be sent to the packaging tool; the identification of the hypertext markup language file is added to the resource inventory.
According to an embodiment of the disclosure, the resource list may include identifiers of hypertext markup language files corresponding to the plurality of pages, respectively. And searching the corresponding hypertext markup language file according to the identification of the hypertext markup language file.
According to an embodiment of the present disclosure, invoking a isomorphic renderer, performing simulated rendering according to static resources of a page and structural information of the page includes: and calling an isomorphic renderer, and rendering according to static resources of the page and structural information of the page and combining the rendering capability of the original server side of the page development frame to obtain the hypertext markup language file.
According to embodiments of the present disclosure, javaScript scripts may be executed in an eval environment. The JavaScript module for exporting the page can be executed by using eval, the required browser host environment is simulated through a JavaScript document object model (JSDOM, javaScrip Document Object Model), and the static HTML file of the page is generated by combining the original server rendering capability of the webpage frame. Where eval is a library that can execute JavaScript code in an interface-free graphical environment.
According to embodiments of the present disclosure, the static resources may include JavaScript scripts.
According to an embodiment of the present disclosure, invoking an isomorphic renderer, and according to static resources of a page and structural information of the page, combining native server rendering capabilities of a page development framework, rendering to obtain a hypertext markup language file includes: executing JavaScript script under eval environment, combining the rendering capability of the native server of the page development framework, and displaying the rendering effect of the hypertext markup language file.
According to the embodiment of the disclosure, the JavaScript module for exporting the current page can be executed by using eval, and debugging information can be displayed in real time in cooperation with the rendering capability of the isomorphic renderer.
According to the embodiment of the disclosure, through the development and debugging process, the code can be ensured to directly run in the rendering environment of the on-line node. Js server. And then in the compiling stage of weback construction, the business codes are operated in a node. Js environment in a target mode, and a bundle of business. And generating the HTML file in the node. Js and the HTTP server by using the rendering capability of the same server-side renderer.
According to the embodiment of the disclosure, the problem of rendering of the server from the tangent plane is solved by using the packing tool and the plug-in the development stage, so that the method has the advantages of almost no intrusion code into the original page, and real-time debugging without cross-module in the development stage. The method of calling the renderer API isomorphic with the development environment in the production environment ensures that the development environment and the online environment component are consistent in performance, eliminates the running environment difference, improves the research and development efficiency and reduces the project risk.
According to the embodiment of the disclosure, even in an environment with poor network signals, the server side rendering can rapidly present page contents without waiting until the execution of the JavaScript is completed, so that the invisible time of the page is reduced, and a blank page can not be seen even if the browser does not support rendering as long as the browser is connected to the Internet.
Fig. 4 schematically illustrates a flow diagram of page rendering by a homogeneous renderer in a development environment in accordance with an embodiment of the present disclosure.
As shown in fig. 4, the method includes operations S401 to S417. It should be noted that the operations described in the embodiments of the present disclosure may be performed simultaneously or sequentially without departing from the logical execution order in the art.
In operation S401, the weback plugin system calls a plugin (HTML-weback-plugin) for creating an HTML file.
In operation S402, the weback plugin system invokes the prerendering plugin.
In operation S403, the prerendering plug-in acquires the static resources of the page by listening to hooks (before Asset Tag Generation hook) before generating the resource tag of html-weback-plug in.
According to embodiments of the present disclosure, static resources may include, but are not limited to, CSS, javaScript scripts and pictures, etc.
In operation S404, the prerendering plug-in may cache the acquired static resources.
In operation S405, the prerendering plug-in returns response (callback) information to the html-weback-plug in.
In operation S406, the prerendering plug-in acquires HTML structure information of the compiled page by listening to hooks (after Template Execution hook) of HTML-weback-plug in after completion of the compilation of the HTML template.
According to embodiments of the present disclosure, page generic content and the like may be included in the HTML structure information.
In operation S407, the prerender plug-in buffers the acquired HTML structure information.
In operation S408, the prerendering plug-in returns response information to the html-weback-plug in.
In operation S409, the prerendering plug-in listens to the pre-HTML pre-production hook (before email hook) of HTML-weback-plug in, triggering prerendering.
In operation S410, the prerendering plug-in sends static resources of the page and the HTML template to the isomorphic renderer.
In operation S411, the isomorphic renderer parses the page routing parameters.
In operation S412, the isomorphic renderer acquires the dependent interface service parameters.
In operation S413, the isomorphic renderer generates a local context for rendering.
In operation S414, the isomorphic renderer performs rendering, resulting in a fully rendered HTML file.
In operation S415, the isomorphic renderer returns the fully rendered HTML file to the pre-rendering plug-in.
In operation S416, the prerendering plug-in returns the fully rendered HTML file to the HTML-weback-plug in.
In operation S417, the HTML-weback-plugin returns the fully rendered HTML file to the weback plugin system, so that the weback plugin system adds the fully rendered HTML file to the resource manifest.
According to the embodiment of the disclosure, the weback plug-in system can display the completely rendered HTML file through a console, and the console can display the produced file in real time.
Fig. 5 schematically illustrates a schematic diagram of invoking a isomorphic renderer API in accordance with an embodiment of the present disclosure.
As shown in FIG. 5, the method can be established in a development environment in a weback plugin system, an HTML-weback-plugin (a plugin for creating an HTML file), a prerendering plugin and a webpage framework native server rendering. Node. Js, HTTP Server and Server rendering are established in the production environment.
According to the embodiment of the disclosure, in a development environment and a production environment, the method can realize the steps of analyzing routing parameters, acquiring data parameters, generating a rendering environment and executing rendering operation by calling an API (application program interface) of the isomorphic renderer.
According to the embodiment of the disclosure, the advantages of independent deployment of the server-side rendering module based on the independent specific technical stack and real-time rendering based on the development stages of the front and rear universal frames of the specific technical stack integration are fused. According to the embodiment of the disclosure, the isomorphic renderer can be designed and realized based on the principle of unified standard configuration, on one hand, the isomorphic renderer can be integrated into a webpack render plugin plug-in for real-time rendering and debugging in a development stage, and on the other hand, the isomorphic renderer can be integrated into a node. Js server of a production environment for real-time rendering and production of online page access.
Through the embodiment of the disclosure, the page development environment and the online environment component are consistent in performance, the difference of the running environment is eliminated, the research and development efficiency is improved, and the project risk is reduced.
Fig. 6 schematically shows a block diagram of a page rendering apparatus according to an embodiment of the present disclosure.
As shown in fig. 6, the page rendering apparatus 600 includes: an acquisition module 610, a response module 620, and a transmission module 630.
The obtaining module 610 is configured to obtain a call request from a server, where the call request is sent when the server obtains an access request from a client.
The response module 620 is configured to call the isomorphic renderer in response to the call request, and perform rendering operation according to the static resource of the page, the hypertext markup language structure information, and the content data of the page, where simulated rendering is performed in advance by using the isomorphic renderer in the development stage of the page.
The sending module 630 is configured to return the rendered hypertext markup language file to the server.
According to the embodiment of the disclosure, isomorphic renderers are uniformly introduced in a local development environment and an online cloud production environment, and are uniformly upgraded and maintained, and rendering operations are executed according to static resources of pages, hypertext markup language structure information and content data of the pages in a mode of calling the isomorphic renderers, so that hypertext markup language files are obtained. Because the isomorphic renderers are utilized in advance for simulation rendering in the development stage of the page, the page development environment and the online environment components are consistent in performance, the difference of the running environment is eliminated, the development efficiency is improved, and the project risk is reduced.
According to an embodiment of the present disclosure, the response module includes: the device comprises an analysis unit, a first obtaining unit, a second obtaining unit, a generating unit and an executing unit.
And the analyzing unit is used for analyzing the page routing parameters in the calling request and acquiring the service parameters of the dependent interfaces.
The first obtaining unit is used for obtaining the static resources of the page and the hypertext markup language structure information according to the page routing parameters.
And the second obtaining unit is used for obtaining the content data of the page according to the dependent interface service parameters.
And the generation unit is used for generating a rendering environment for rendering the page.
And the execution unit is used for executing rendering operation according to the static resource of the page, the HTML structure information and the content data of the page under the rendering environment.
According to embodiments of the present disclosure, the page rendering device 600 may include a packaging tool, a hypertext markup language webpage package plug-in, a pre-rendering plug-in.
According to an embodiment of the present disclosure, performing, in advance, analog rendering using the isomorphic renderer in the development stage of the page includes: invoking a hypertext markup language webpage package plug-in and a prerendering plug-in through a packaging tool, wherein the hypertext markup language webpage package plug-in is used for creating a hypertext markup language text; the first target hook of the hypertext markup language webpage package plug-in can be monitored through the prerendering plug-in, and the static resources of the webpage are obtained; monitoring a second target hook of the hypertext markup language webpage package plug-in through a prerendering plug-in to acquire structural information of the webpage; and the prerendering plug-in calls the isomorphic renderer, and carries out simulated rendering according to the static resources of the page and the structural information of the page.
According to an embodiment of the present disclosure, the isomorphic renderer may send a hypertext markup language file obtained by analog rendering to the above-described packaging tool; and adding the identification of the hypertext markup language file to a resource list.
According to an embodiment of the present disclosure, the first target hook includes a resource tag generation front hook; the second object hook includes a post-template-execution hook.
According to an embodiment of the present disclosure, the invoking the isomorphic renderer, performing simulated rendering according to the static resource of the page and the structure information of the page includes: and calling the isomorphic renderer, and rendering according to the static resources of the page and the structural information of the page and combining the rendering capability of the native server of the page development framework to obtain the hypertext markup language file.
According to an embodiment of the present disclosure, the static resource includes JavaScript script.
According to an embodiment of the present disclosure, the pre-rendering plug-in calls the isomorphic renderer, and according to static resources of the page and structure information of the page, and in combination with native server rendering capability of a page development framework, rendering to obtain the hypertext markup language file includes: executing the JavaScript script in the eval environment, combining the rendering capability of the native server of the page development framework, and displaying the rendering effect of the hypertext markup language file.
According to embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium and a computer program product.
According to an embodiment of the present disclosure, an electronic device includes: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor, the instructions being executable by the at least one processor to enable the at least one processor to perform the method as described above.
According to an embodiment of the present disclosure, a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method as described above.
According to an embodiment of the present disclosure, a computer program product comprising a computer program which, when executed by a processor, implements a method as described above.
Fig. 7 illustrates a schematic block diagram of an example electronic device 700 that may be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be exemplary only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 7, the apparatus 700 includes a computing unit 701 that can perform various appropriate actions and processes according to a computer program stored in a Read Only Memory (ROM) 702 or a computer program loaded from a storage unit 708 into a Random Access Memory (RAM) 703. In the RAM 703, various programs and data required for the operation of the device 700 may also be stored. The computing unit 701, the ROM 702, and the RAM 703 are connected to each other through a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
Various components in device 700 are connected to I/O interface 705, including: an input unit 706 such as a keyboard, a mouse, etc.; an output unit 707 such as various types of displays, speakers, and the like; a storage unit 708 such as a magnetic disk, an optical disk, or the like; and a communication unit 709 such as a network card, modem, wireless communication transceiver, etc. The communication unit 709 allows the device 700 to exchange information/data with other devices via a computer network, such as the internet, and/or various telecommunication networks.
The computing unit 701 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of computing unit 701 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various specialized Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 701 performs the respective methods and processes described above, such as a page rendering method. For example, in some embodiments, the page rendering method may be implemented as a computer software program tangibly embodied on a machine-readable medium, such as storage unit 708. In some embodiments, part or all of the computer program may be loaded and/or installed onto device 700 via ROM 702 and/or communication unit 709. When a computer program is loaded into the RAM 703 and executed by the computing unit 701, one or more steps of the page rendering method described above may be performed. Alternatively, in other embodiments, the computing unit 701 may be configured to perform the page rendering method by any other suitable means (e.g. by means of firmware).
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuit systems, field Programmable Gate Arrays (FPGAs), application Specific Integrated Circuits (ASICs), application Specific Standard Products (ASSPs), systems On Chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, which may be a special purpose or general-purpose programmable processor, that may receive data and instructions from, and transmit data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for carrying out methods of the present disclosure may be written in any combination of one or more programming languages. These program code may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus such that the program code, when executed by the processor or controller, causes the functions/operations specified in the flowchart and/or block diagram to be implemented. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package, partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. The machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and pointing device (e.g., a mouse or trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user may be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic input, speech input, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a background component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such background, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), wide Area Networks (WANs), and the internet.
The computer system may include a client and a server. The client and server are typically remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other.
It should be appreciated that various forms of the flows shown above may be used to reorder, add, or delete steps. For example, the steps recited in the present disclosure may be performed in parallel or sequentially or in a different order, provided that the desired results of the technical solutions of the present disclosure are achieved, and are not limited herein.
The above detailed description should not be taken as limiting the scope of the present disclosure. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives are possible, depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present disclosure are intended to be included within the scope of the present disclosure.

Claims (13)

1. A method of page rendering, comprising:
acquiring a call request from a server, wherein the call request is sent under the condition that the server acquires an access request from a client;
responding to the calling request, calling an isomorphic renderer, and executing rendering operation according to static resources of a page, hypertext markup language structure information and content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in a development stage of the page, and the environment for executing the rendering operation is consistent with the environment for performing the simulated rendering; and
and returning the hypertext markup language file after rendering to the server.
2. The method of claim 1, wherein the performing a rendering operation based on the static resources of the page, the hypertext markup language structural information, and the content data of the page comprises:
Analyzing the page routing parameters in the call request and acquiring the service parameters of the dependent interfaces;
obtaining static resources of the page and the hypertext markup language structure information according to the page routing parameters;
obtaining content data of the page according to the dependent interface service parameters;
generating a rendering environment for rendering the page; and
and under the rendering environment, performing rendering operation according to the static resource of the page, the hypertext markup language structure information and the content data of the page.
3. The method of claim 1, wherein the simulated rendering with the isomorphic renderer in advance during a development phase of the page comprises:
invoking a hypertext markup language webpage package plug-in and a prerendering plug-in through a packaging tool, wherein the hypertext markup language webpage package plug-in is used for creating a hypertext markup language text;
acquiring static resources of the page by monitoring a first target hook of the hypertext markup language webpage package plug-in;
acquiring the structural information of the page by monitoring a second target hook of the hypertext markup language webpage package plug-in; and
And calling the isomorphic renderer, and performing simulated rendering according to the static resources of the page and the structural information of the page.
4. A method according to claim 3, further comprising:
sending a hypertext markup language file obtained through simulated rendering to the packaging tool; and
and adding the identification of the hypertext markup language file to a resource list.
5. The method of claim 3, wherein the first target hook comprises a resource tag pre-generation hook; the second object hook includes a post-template-execution hook.
6. The method of claim 3, wherein the invoking the isomorphic renderer to perform simulated rendering based on the static resources of the page and the structural information of the page comprises:
and calling the isomorphic renderer, and rendering to obtain the hypertext markup language file according to the static resources of the page and the structural information of the page and combining the rendering capability of the native server of the page development frame.
7. The method of claim 6, wherein the static resource comprises JavaScript script.
8. The method of claim 7, wherein the invoking the isomorphic renderer, rendering the hypertext markup language file according to the static resources of the page and the structural information of the page in combination with a page development framework native server rendering capability comprises:
Executing the JavaScript script in an eval environment, combining the rendering capability of the native server of the page development framework, and displaying the rendering effect of the hypertext markup language file.
9. A page rendering apparatus comprising:
the system comprises an acquisition module, a processing module and a processing module, wherein the acquisition module is used for acquiring a call request from a server, wherein the call request is sent under the condition that the server acquires an access request from a client;
the response module is used for responding to the calling request, calling the isomorphic renderer and executing rendering operation according to static resources of the page, the hypertext markup language structure information and the content data of the page, wherein the isomorphic renderer is utilized in advance to perform simulated rendering in the development stage of the page, and the environment for executing the rendering operation is consistent with the environment for performing simulated rendering; and
and the sending module is used for returning the hypertext markup language file after rendering to the server.
10. The apparatus of claim 9, wherein the response module comprises:
the analyzing unit is used for analyzing the page routing parameters in the calling request and acquiring the service parameters of the dependent interfaces;
the first obtaining unit is used for obtaining static resources of the page and the hypertext markup language structure information according to the page routing parameters;
A second obtaining unit, configured to obtain content data of the page according to the dependent interface service parameter;
a generation unit for generating a rendering environment for rendering the page; and
and the execution unit is used for executing rendering operation according to the static resource of the page, the hypertext markup language structure information and the content data of the page in the rendering environment.
11. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.
12. A non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method of any one of claims 1-8.
13. A computer program product comprising a computer program which, when executed by a processor, implements the method according to any of claims 1-8.
CN202110284442.3A 2021-03-16 2021-03-16 Page rendering method and device, electronic equipment and storage medium Active CN113010827B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110284442.3A CN113010827B (en) 2021-03-16 2021-03-16 Page rendering method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110284442.3A CN113010827B (en) 2021-03-16 2021-03-16 Page rendering method and device, electronic equipment and storage medium

Publications (2)

Publication Number Publication Date
CN113010827A CN113010827A (en) 2021-06-22
CN113010827B true CN113010827B (en) 2024-03-22

Family

ID=76408979

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110284442.3A Active CN113010827B (en) 2021-03-16 2021-03-16 Page rendering method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN113010827B (en)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113704660A (en) * 2021-06-24 2021-11-26 青岛海尔科技有限公司 Method and device for acquiring rendered page view and electronic equipment
CN113810738B (en) * 2021-11-17 2022-02-18 畅捷通信息技术股份有限公司 Method and device for rendering pseudo B terminal based on concentrator and storage medium
CN114675916A (en) * 2022-03-02 2022-06-28 青岛海尔科技有限公司 Screen layout generation method, device, equipment and storage medium
CN115334161B (en) * 2022-07-25 2023-06-27 盐城金堤科技有限公司 Access request processing method and device, storage medium and electronic equipment
CN117555593B (en) * 2024-01-11 2024-04-09 麒麟软件有限公司 Multi-terminal self-adaptive Web desktop environment

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7415697B1 (en) * 2001-10-04 2008-08-19 Perot Systems Corporation Method and system for providing visualization of underlying architecture of a software system
CN106991154A (en) * 2017-03-29 2017-07-28 百度在线网络技术(北京)有限公司 Webpage rendering intent, device, terminal and server
CN108984169A (en) * 2017-06-01 2018-12-11 刘开元 A kind of cross-platform Multielement integration development system
CN110020367A (en) * 2017-12-15 2019-07-16 阿里巴巴集团控股有限公司 A kind of page rendering method and device
CN111124574A (en) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 First screen rendering acceleration method, development terminal, server, system and electronic equipment
CN111506387A (en) * 2020-03-02 2020-08-07 百度在线网络技术(北京)有限公司 Page pre-rendering method and device, electronic equipment and storage medium
CN111813686A (en) * 2020-07-20 2020-10-23 腾讯科技(深圳)有限公司 Game testing method and device, testing terminal and storage medium
CN111859236A (en) * 2020-06-19 2020-10-30 苏州浪潮智能科技有限公司 Server rendering page generation method and system based on dynamic form verification
CN111880788A (en) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 Page rendering method, device, client and computer readable storage medium

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7415697B1 (en) * 2001-10-04 2008-08-19 Perot Systems Corporation Method and system for providing visualization of underlying architecture of a software system
CN106991154A (en) * 2017-03-29 2017-07-28 百度在线网络技术(北京)有限公司 Webpage rendering intent, device, terminal and server
CN108984169A (en) * 2017-06-01 2018-12-11 刘开元 A kind of cross-platform Multielement integration development system
CN110020367A (en) * 2017-12-15 2019-07-16 阿里巴巴集团控股有限公司 A kind of page rendering method and device
CN111124574A (en) * 2019-12-18 2020-05-08 南京三百云信息科技有限公司 First screen rendering acceleration method, development terminal, server, system and electronic equipment
CN111506387A (en) * 2020-03-02 2020-08-07 百度在线网络技术(北京)有限公司 Page pre-rendering method and device, electronic equipment and storage medium
CN111880788A (en) * 2020-06-12 2020-11-03 北京三快在线科技有限公司 Page rendering method, device, client and computer readable storage medium
CN111859236A (en) * 2020-06-19 2020-10-30 苏州浪潮智能科技有限公司 Server rendering page generation method and system based on dynamic form verification
CN111813686A (en) * 2020-07-20 2020-10-23 腾讯科技(深圳)有限公司 Game testing method and device, testing terminal and storage medium

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于网页的可视化网络医学影像平台设计;向俊;叶青;袁勋;;生物医学工程学杂志;20170425(02);全文 *

Also Published As

Publication number Publication date
CN113010827A (en) 2021-06-22

Similar Documents

Publication Publication Date Title
CN113010827B (en) Page rendering method and device, electronic equipment and storage medium
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
US11829436B2 (en) Method and apparatus of pre-rendering page, electronic device, and storage medium
CN110020329B (en) Method, device and system for generating webpage
CN109582317B (en) Method and apparatus for debugging hosted applications
CN112395027B (en) Widget interface generation method and device, storage medium and electronic equipment
CN113760324A (en) Method and device for constructing micro front-end application
CN111026634A (en) Interface automation test system, method, device and storage medium
CN113050940A (en) Method for previewing small program, related device and computer program product
CN110795649A (en) Target page display method, device and system and electronic equipment
CN115309470B (en) Method, device, equipment and storage medium for loading widget
CN114398023A (en) File generation method and page configuration method and device
US11438403B2 (en) Page presentation method and system, computer system, and computer readable medium
CN111414154A (en) Method and device for front-end development, electronic equipment and storage medium
CN115617420A (en) Application program generation method, device, equipment and storage medium
CN110647327A (en) Method and device for dynamic control of user interface based on card
CN113656041A (en) Data processing method, device, equipment and storage medium
CN114090118A (en) Method, device and equipment for starting small program and storage medium
CN113760274A (en) Front-end component logic injection method and device
CN113642295B (en) Page typesetting method, device and computer program product
CN113361235B (en) HTML file generation method and device, electronic equipment and readable storage medium
CN116561075B (en) Method for generating dynamic link library file, method and device for calling operator
CN117608732A (en) Web application dynamic rendering device, method, equipment and medium
CN116662031A (en) Method and device for determining target script, electronic equipment and storage medium
CN117149248A (en) Micro front end construction method, device, equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant