CN113010827A - 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
CN113010827A
CN113010827A CN202110284442.3A CN202110284442A CN113010827A CN 113010827 A CN113010827 A CN 113010827A CN 202110284442 A CN202110284442 A CN 202110284442A CN 113010827 A CN113010827 A CN 113010827A
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.)
Granted
Application number
CN202110284442.3A
Other languages
Chinese (zh)
Other versions
CN113010827B (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

Images

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, and relates to the technical field of computers, in particular to the field of webpage application. The specific implementation scheme of the page rendering method is as follows: acquiring a calling request from a server, wherein the calling 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 the page, structural information of the hypertext markup language and content data of the page, wherein the isomorphic renderer is used for performing simulated rendering in advance 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 more particularly, to web page applications.
Background
A webpage is delivered to a user from the beginning to the end, and the process of access and use can be divided into a local development process and an online delivery process.
In the local development stage, a developer can compile static resources such as a template structure, a style, a client script, a picture and the like according to HTML, CSS, JavaScript and template grammar. After online delivery, when a user accesses a Uniform Resource Locator (i.e., a URL) through a browser to request a web page, the server may dynamically render the page and return the rendered page to the browser.
Disclosure of Invention
The disclosure provides a page rendering method, a page rendering device, an electronic device, a storage medium and a computer program product.
According to an aspect of the present disclosure, there is provided a page rendering method, including: acquiring a calling request from a server, wherein the calling 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 the page, structural information of the hypertext markup language and content data of the page, wherein the isomorphic renderer is used for performing simulated rendering in advance 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 obtaining module is used for obtaining a calling request from a server, wherein the calling request is sent under the condition that the server obtains 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 resources of the page, the structural information of the hypertext markup language and the content data of the page, wherein the isomorphic renderer is used for carrying out simulation rendering in advance in the development stage of the page.
And the sending module is used for returning the rendered hypertext markup language file 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 having stored thereon computer instructions for causing the computer to perform the method as described above.
According to another aspect of the present disclosure, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the method as described above.
It should be understood that the statements in this section do not necessarily identify key or critical features of the embodiments of the present disclosure, nor do they limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.
Drawings
The drawings are included to provide 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 the page rendering method and apparatus may be applied, according to an embodiment of the disclosure;
FIG. 2 schematically shows a flow diagram of a page rendering method according to an embodiment of the disclosure;
FIG. 3 schematically illustrates a flow diagram of a homogeneous renderer for page rendering in a production environment, in accordance with an embodiment of the present disclosure;
FIG. 4 schematically illustrates a flow diagram for page rendering by a homogeneous renderer in a development environment, according to an embodiment of the disclosure;
FIG. 5 schematically illustrates a schematic diagram of invoking a homogeneous renderer API, according to an embodiment of the present disclosure;
FIG. 6 schematically shows a block diagram of a page rendering apparatus according to an embodiment of the present disclosure; and
fig. 7 schematically shows a block diagram of an electronic device adapted to implement a page rendering method according to an embodiment of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those 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 request web page through a browser, in the related art, implementation schemes of server-side dynamic page rendering technologies are mainly classified into three categories.
The first category, rendering techniques based on a template engine. The principle is that a webpage developer uses template grammar to compile template structures, styles and client scripts under a template engine framework, then the compiled templates are put into a specific directory of a server, when a client requests, the template engine dynamically compiles and replaces the templates in real time, and completely rendered page contents are returned and displayed to a user.
However, in the process of implementing the present disclosure, it is found that components are difficult to reuse in a template compiled based on a template grammar, component optimization cannot be performed in advance without a compiling stage, front-end and back-end codes are not managed properly and mixed together, and front-end and back-end separate development is difficult to implement.
And the second type is based on a server-side rendering module independent of a specific technology stack. The principle is that a page developer packs page application bundle.js for Server-Side Rendering (SSR) execution in a building and compiling stage, and finally, the page application bundle is online deployed to a specific Server environment for execution.
However, in the process of implementing the present disclosure, it is found that, based on a server-side rendering module independent of a specific technology stack, it is a challenging matter to ensure that components and pages rendered in a local development stage can smoothly run in a cloud-side rendering environment, and especially when the components depend on a specific object of a browser used in local development, the challenge is greater. Although a test environment is provided for debugging, a server-side rendering module needs to be separately started, a debugging result cannot be verified in time, a bundle.
The third category, a generic framework front and back based on technology-specific stack integration. The principle is to render the package isomorphically based on the front-end framework and then expose the interfaces that page developers use to do code writing of components and pages. Namely, a code is simultaneously operated at a server and a client, developers only pay attention to service implementation, and development construction and switching of cloud production environments on a development machine are controlled by a framework. The corresponding frames are as follows: next.js based on the read technology stack, nuxt.js based on the Vue technology stack.
The same code can be written based on isomorphic rendering of front-end frames such as React/Vue and the like based on a front-end frame integrated by a specific technology stack, and the front-end frame and the back-end frame simultaneously run on a server and a client, so that developers only need to pay attention to service implementation and use rendering processes which are the same as those of an online environment in a development machine environment. However, in the process of implementing the present disclosure, it is found that because the integration encapsulation is too tight, the developer must use the API interface exposed by the framework to enjoy the capability of the framework, so that the code is too intrusive, which makes the framework binding problem more prominent, and the amount of code modification when accessing the framework or migrating the framework increases in proportion to the engineering page.
With the advent of AJAX (i.e., Asynchronous JavaScript And XML, which represents an abbreviation of Asynchronous JavaScript And extensible markup language XML), a web Application can display contents of different pages in a non-refreshed state, And such a web Application may be referred to as a Single Page Application (SPA).
In a single-page application, generally, only one hypertext Markup Language (HTML, which is a standard Markup Language for creating a web page) file is used, and a corresponding routing script is matched according to an accessed URL to dynamically render page contents. While single-page applications optimize user experience, many problems are also brought, such as Search Engine Optimization (SEO) unfriendliness, long first-screen visibility time, and the like. It should be noted that the html document is not limited to a single page application, and may be applied to other types of applications.
In order 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 techniques.
Client Rendering (i.e., CSR, Client-Side Rendering): a user accesses the URL through the client to request the HTML file, the front end dynamically renders page content according to the route, and executes the API to acquire data, but the process of displaying the final page content is long, and certain screen blank time exists.
Prerendering (i.e. Prerendering): HTML files that match the prerender paths are generated during the build phase (where there is a corresponding HTML file for each route that needs prerendering). The constructed HTML file does not comprise personalized content of a user and needs to request data for secondary rendering and supplement.
Rendering at a server side: and the user accesses the URL through the client, the server requests required data according to the access path, and then the required data and the HTML template are combined and rendered to generate a final HTML file which is returned to the client browser. The HTML received by the client browser includes all the content of the user's personalization information.
Server rendering may dynamically compile a straight out HTML file in real time for each rendering request. By the method, the search engine crawler grabbing tool can directly view the fully rendered page without waiting for the JavaScript to be downloaded and executed to view the fully rendered page.
Rendering on the server side still has some key problems that affect development efficiency. For example, for one, the component environment needs to be compatible, running a unobstructed page component in a browser environment (i.e., a client environment) needs to consider a compatible server-side rendering environment. Secondly, establishing, setting and deploying standardization, and establishing and deploying a page application bundle.js read by a node.js server of a server-side rendering environment need a set of standardized delivery process. Third, the page developer needs to write server-side codes, consider the load of the server side, have load balancing, caching, and the like, and reasonably use the resources.
According to the webpage renderer, the isomorphic renderer is constructed, then the local development environment and the online cloud production environment are uniformly introduced, and the uniform upgrading and maintenance are carried out, so that the problems encountered when the webpage is developed by using the isomorphic technology are solved, and the development efficiency of a webpage writer is improved.
The embodiment of the disclosure provides a page rendering method, which includes: acquiring a calling request from a server, wherein the calling 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 the page, structural information of the hypertext markup language and content data of the page, wherein the isomorphic renderer is used for performing simulated rendering in advance in the development stage of the page; and returning the rendered hypertext markup language file to the server.
Fig. 1 schematically shows an exemplary system architecture to which the page rendering method and apparatus may be applied, according to an embodiment of the present disclosure.
It should be noted that fig. 1 is only an example of a system architecture to which the embodiments of the present disclosure may be applied to help those skilled in the art understand the technical content of the present disclosure, and does not mean that the embodiments of the present disclosure may not be applied to other devices, systems, environments or scenarios.
As shown in fig. 1, the system architecture 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired and/or wireless communication links, and so forth.
The user may use the terminal devices 101, 102, 103 to interact with the server 105 via the network 104 to receive or send messages or the like. The terminal devices 101, 102, 103 may have installed thereon various communication client applications, such as a knowledge reading application, a web browser application, a search application, an instant messaging tool, a mailbox client, and/or social platform software, etc. (by way of example only).
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
The server 105 may be a server providing various services, such as a background management server (for example only) providing support for content browsed by the user using the terminal devices 101, 102, 103. The background management server may analyze and perform other processing on the received data such as the user request, and feed back a processing result (e.g., a webpage, information, or data obtained or generated according to the user request) to the terminal device.
The page rendering method provided by the 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 disposed in the server 105. The page rendering method provided by the embodiment of the present disclosure may also be performed by a server or a server cluster different from the server 105 and capable of communicating with the terminal devices 101, 102, 103 and/or the server 105. Accordingly, the page rendering apparatus provided by the embodiment of the present disclosure may also be disposed in a server or a server cluster different from the server 105 and 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 shows a flow chart of a page rendering method according to an embodiment of the present disclosure.
As shown in fig. 2, the method includes operations S210 to S230.
In operation S210, a call request from a server is obtained, where the call request is sent when the server obtains 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 resource of the page, the html structure information, and the content data of the page, wherein a simulated rendering is performed by the isomorphic renderer in advance in a 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 is not limited to, a browser or the like. The client may send the access request to a server of the server.
According to the embodiment of the disclosure, after the server acquires the access request, the server may send a call request to the homogeneous renderer, where the call request may include information carried by the access request, for example, address information of a page requested to be accessed.
According to an embodiment of the present disclosure, the homogeneous renderer may perform a rendering operation according to static resources of the page, hypertext markup language structure information, and content data of the page in response to the invocation request.
According to the embodiment of the disclosure, the page requested to be accessed by the client is subjected to simulation rendering by utilizing the isomorphic renderer in advance in the development stage.
According to embodiments of the present disclosure, hypertext markup language files may also be referred to as HTML files. According to an embodiment of the present disclosure, the static resources may include, for example, Cascading Style Sheets (CSSs), 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 into a local development environment and an online cloud production environment, are uniformly upgraded and maintained, and are called to perform rendering operation according to static resources of a page, hypertext markup language structure information and content data of the page, so that a hypertext markup language file is obtained. Because the isomorphic renderer is utilized to perform simulation rendering in advance in the development stage of the page, the page development environment and the online environment assembly are consistent in performance, the difference of the operating environment is eliminated, the research and development efficiency is improved, and the project risk is reduced.
According to the embodiment of the disclosure, the page component running smoothly under the production environment (namely the client environment) can be automatically compatible with the server rendering environment. The method helps the developer save time of long-term optimization and enables website building 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 the page routing parameters in the calling request and acquiring the dependent interface service parameters;
obtaining static resources and hypertext markup language structure information of the page according to the page routing parameters;
acquiring content data of the page according to the dependent interface service parameters;
generating a rendering environment for rendering a page; and
and under the rendering environment, performing rendering operation according to the static resources of the page, the structural information of the hypertext markup language and the content data of the page.
The method of fig. 2 is further described with reference to fig. 3 in conjunction with specific embodiments.
FIG. 3 schematically illustrates a flow diagram for page rendering by a homogeneous renderer in a production environment, according to an embodiment of the 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 sends a call request to request a context.
In operation S302, the homogeneous renderer, after receiving the call request, parses the page routing parameters in response to the call request. And obtaining static resources and hypertext markup language structure information of the page according to the page routing parameters.
The homogeneous renderer may also acquire the 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 contextual rendering environment for rendering a page is generated.
In operation S305, using the above information and data, rendering is performed in the generated rendering environment, resulting in a fully rendered HTML file.
In operation S306, the fully rendered HTML file is returned to the server.
According to an embodiment of the 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, because the rendering operation is executed through the isomorphic renderer, the hypertext markup language file is obtained, and the rendering is not required to be performed at the client. So that the web crawler can directly parse the content carried in the file. The method has the advantages of shortening the time of white screen of the webpage, providing more extreme use experience for users, reducing the cost of getting customers and improving the viscosity of the users.
According to the embodiment of the disclosure, the simulation rendering by utilizing the isomorphic renderer in advance in the development stage of the page comprises the following steps: calling 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 method comprises the steps of acquiring static resources of a page by monitoring a first target hook of a hypertext markup language web page package plug-in; acquiring 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 to perform 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 webpack plug-in system. The webpack plug-in system is a static module packaging tool for JavaScript applications. When the webpack plugin system processes an application, it internally builds a dependency graph (dependency graph) that maps to each module required for the project and generates one or more packages.
The webpack plugin system can acquire the compiling context built each time and hot update functions. The object contains current module resources, compilation resources, changed files, etc. When the webpack plugin system is running 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 an embodiment of the present disclosure, the hypertext markup language web page package plug-in is a plug-in for creating an HTML file, and the plug-in for creating the HTML file may include HTML-webpack-plug, for example. The method has the functions that when the webpack plug-in system is used for packaging, an HTML file is created, and the static file packaged by the webpack plug-in system is automatically inserted into the HTML file.
According to embodiments of the present disclosure, a prerender plug-in may be used to pre-transition a page from a blank page to an intermediate state with content, such that when a subsequent user accesses the page, what is seen will be a page that is directly changed from the intermediate state to a full rendering, without seeing the original blank page. The pre-rendering may be performed during a compilation build phase of the page.
According to an embodiment of the present disclosure, the first target hook comprises a resource tag pre-generation hook; the second target hooks include template post-execution hooks.
According to the embodiment of the disclosure, a isomorphic renderer can be called to perform 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 also perform the simulation rendering using the operations S301 to S305 described above.
According to the embodiment of the disclosure, the efficient development of the static webpage is realized based on the isomorphic renderer.
According to the embodiment of the disclosure, after the hypertext markup language file obtained by the isomorphic renderer through the simulation rendering, the hypertext markup language file obtained through the simulation rendering can be sent to a packaging tool; the identity of the hypertext markup language file is added to the resource manifest.
According to the embodiment of the disclosure, the resource list may include identifiers of hypertext markup language documents corresponding to the plurality of pages respectively. The corresponding hypertext markup language file can be found according to the mark of the hypertext markup language file.
According to the embodiment of the disclosure, calling the isomorphic renderer, and performing simulated rendering according to the static resource of the page and the structural information of the page comprises: and calling a 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 by combining the rendering capability of the native server of the page development framework.
According to the embodiment of the disclosure, the JavaScript script can be executed in the eval environment. Namely, a JavaScript module for exporting the eval execution page can be used to simulate a required browser host environment through a JavaScript Document Object Model (JSDOM), and a static HTML file of the page is generated in combination with the native server rendering capability of the web page frame. Wherein eval is a library that can execute JavaScript code in an interface-less graphics environment.
According to embodiments of the present disclosure, the static resource may include a JavaScript script.
According to the embodiment of the disclosure, calling a isomorphic renderer, and according to the static resources of the page and the structural information of the page, combining the rendering capability of the native server of the page development framework, rendering to obtain the hypertext markup language file comprises: and executing the JavaScript in the eval environment, and displaying the rendering effect of the hypertext markup language file by combining the rendering capability of the native server of the page development frame.
According to the embodiment of the disclosure, the JavaScript module exported by the current page can be executed by eval, and the debugging information can be displayed in real time by matching 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 be directly operated on the online node. And then, constructing a compiling stage in webpack, running the service codes in a node.js environment in a target mode, and packaging a bundle.js to be deployed at a server. Js and HTTP server, using the rendering capability of the same server-side renderer to produce HTML file.
According to the embodiment of the disclosure, because the problem of rendering at the server side is solved from the tangent plane by using the packaging tool and the plug-in the development stage, almost no invasive code enters the original page, and the real-time debugging can be realized without cross-module in the development stage. The mode of calling the renderer API which is isomorphic with the development environment in the production environment ensures that the development environment and the online environment assembly are consistent in performance, eliminates the difference of the operation environment, improves the research and development efficiency and reduces the project risk.
According to the embodiment of the disclosure, even in an environment with a poor network signal, the content of the page can be quickly presented without waiting for the JavaScript script to be executed, the invisible time of the page is reduced, and the 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 for page rendering by a homogeneous renderer in a development environment, according to an embodiment of the 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 webpack plug-in system calls a plug-in (HTML-webpack-plugin) for creating an HTML file.
In operation S402, the webpack plugin system calls a prerender plugin.
In operation S403, the prerender plugin acquires the static resource of the page by listening to a hook (before resource Tag Generation hook) of the html-webpack-plugin before generating the resource Tag.
According to the embodiment of the disclosure, the static resources may include, but are not limited to CSS, JavaScript script, picture, and the like.
In operation S404, the prerender plug-in may cache the acquired static resource.
In operation S405, the prerender plug-in returns response (callback) information to the html-webpack-plugin.
In operation S406, the prerender plug-in acquires HTML structure information of the compiled page by listening to a hook (after Template Execution hook) of the HTML-webpack after completion of the compilation of the HTML Template.
According to an embodiment of the present disclosure, page general content and the like may be included in the HTML structure information.
In operation S407, the prerender plug-in caches the acquired HTML structure information.
In operation S408, the prerender plug-in returns response information to the html-webpack-plugin.
In operation S409, the prerender plug-in listens to a hook (before Emit hook) before HTML output of the HTML-webpack, triggering prerender.
In operation S410, the prerender plug-in sends the static resources and HTML templates of the page 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 homogeneous renderer generates a local context environment for rendering.
In operation S414, the isomorphic renderer performs rendering, resulting in a fully rendered HTML file.
In operation S415, the isomorphic renderer returns a fully rendered HTML file to the pre-rendering plug-in.
In operation S416, the prerender plug-in returns a fully rendered HTML file to the HTML-webpack-plugin.
In operation S417, the HTML-webpack-plugin returns the fully rendered HTML file to the webpack plug-in system so that the webpack plug-in system adds the fully rendered HTML file to the resource manifest.
According to the embodiment of the disclosure, the webpack plugin system can display the completely rendered HTML file through the console, and the console can display the produced file in real time.
FIG. 5 schematically illustrates a schematic diagram of invoking a homogeneous renderer API according to an embodiment of the disclosure.
As shown in fig. 5, it can be established in the development environment in webpack plugin system, HTML-webpack-plugin (a plugin for creating HTML files), pre-rendering plugin, and web frame native server rendering. And establishing node.js, HTTP Server and Server rendering in the production environment.
According to the embodiment of the disclosure, in a development environment and a production environment, the routing parameters can be analyzed, the data parameters can be obtained, the rendering environment can be generated, and the rendering operation can be executed in a mode of calling the API of the isomorphic renderer.
According to the embodiment of the disclosure, the advantages of independent deployment of the server-side rendering module based on specific technology stack independence and real-time rendering of the development stage of the front and back universal framework based on specific technology stack integration are fused. According to the embodiment of the disclosure, the isomorphic renderer can be designed and realized based on the principle of standard configuration unification, on one hand, the isomorphic renderer can be integrated into a webpack render plugin for real-time rendering debugging in the development stage, and on the other hand, the isomorphic renderer can be integrated into a node.
Through the embodiment of the disclosure, the page development environment and the online environment component are consistent in performance, the difference of the operation 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 sending 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 invoke an isomorphic renderer in response to the invocation request, and execute a rendering operation according to the static resource of the page, the html structure information, and the content data of the page, where the isomorphic renderer is used to perform a simulation rendering in advance during a development phase 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 into a local development environment and an online cloud production environment, are uniformly upgraded and maintained, and are called to perform rendering operation according to static resources of a page, hypertext markup language structure information and content data of the page, so that a hypertext markup language file is obtained. Because the isomorphic renderer is utilized to perform simulation rendering in advance in the development stage of the page, the page development environment and the online environment assembly are consistent in performance, the difference of the operating environment is eliminated, the research and 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 analysis unit is used for analyzing the page routing parameters in the calling request and acquiring the dependent interface service parameters.
A first obtaining unit, configured to obtain the static resource of the page and the structural information of the html according to the page routing parameter.
And the second obtaining unit is used for obtaining the content data of the page according to the dependent interface service parameters.
A generating unit to generate a rendering environment for rendering a page.
And the execution unit is used for executing rendering operation according to the static resource of the page, the structural information of the hypertext markup language and the content data of the page in the rendering environment.
According to an embodiment of the present disclosure, the page rendering apparatus 600 may include a packaging tool, a hypertext markup language web page package plug-in, and a pre-rendering plug-in.
According to the embodiment of the disclosure, the simulation rendering by using the isomorphic renderer in advance in the development stage of the page comprises: calling 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; monitoring a first target hook of the hypertext markup language web page package plug-in through a pre-rendering plug-in to obtain static resources of the page; monitoring a second target hook of the hypertext markup language webpage package plug-in through a pre-rendering plug-in to obtain the structural information of the webpage; and calling the isomorphic renderer by the pre-rendering plug-in, and performing simulation 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 the simulated rendering to the packaging tool; and adding the mark of the hypertext mark-up 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 target hook includes a template post-execution hook.
According to an embodiment of the present disclosure, the invoking the isomorphic renderer and performing simulated rendering according to the static resource of the page and the structural information of the page includes: 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 by combining the rendering capability of the native server of the page development framework.
According to an embodiment of the present disclosure, the static resource includes a JavaScript script.
According to the embodiment of the disclosure, the pre-rendering plug-in calls the isomorphic renderer, and the step of rendering the hypertext markup language file to obtain the hypertext markup language file according to the static resource of the page and the structural information of the page and by combining the rendering capability of the native server of the page development framework comprises the following steps: and executing the JavaScript in the eval environment, and displaying the rendering effect of the hypertext markup language file by combining the rendering capability of the native server of the page development frame.
The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.
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 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 having stored thereon computer instructions for causing a computer to perform the method as described above.
According to an embodiment of the disclosure, a computer program product comprising a computer program which, when executed by a processor, implements the method as described above.
FIG. 7 illustrates a schematic block diagram of an example electronic device 700 that can 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 phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 7, the device 700 comprises a computing unit 701, which may perform various suitable 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 can also be stored. The computing unit 701, the ROM 702, and the RAM 703 are connected to each other by a bus 704. An input/output (I/O) interface 705 is also connected to bus 704.
Various components in the device 700 are connected to the I/O interface 705, including: an input unit 706 such as a keyboard, a mouse, or the like; an output unit 707 such as various types of displays, speakers, and the like; a storage unit 708 such as a magnetic disk, 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.
Computing unit 701 may be a variety of general purpose and/or special purpose processing components with processing and computing capabilities. Some examples of the 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, and so forth. The calculation unit 701 executes 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 in a machine-readable medium, such as storage unit 708. In some embodiments, part or all of a computer program may be loaded onto and/or installed onto device 700 via ROM 702 and/or communications unit 709. When the 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 circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a 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 that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes 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 codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. 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. A 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 a pointing device (e.g., a mouse or a 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 can 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, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end 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 back-end, 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 clients and servers. A client and server are generally 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 understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel, sequentially, or in different orders, as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved, and the present disclosure is not limited herein.
The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the scope of protection of the present disclosure.

Claims (13)

1. A page rendering method, comprising:
the method comprises the steps of obtaining a calling request from a server, wherein the calling request is sent under the condition that the server obtains 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 used for simulation rendering in advance in the development stage of the page; and
and returning the rendered hypertext markup language file to the server.
2. The method of claim 1, wherein the performing rendering operations based on the static resources of the page, the hypertext markup language structure information, and the content data of the page comprises:
analyzing the page routing parameters in the calling request and acquiring the dependent interface service parameters;
obtaining static resources of the page and the structural information of the hypertext markup language according to the page routing parameters;
acquiring content data of the page according to the dependent interface service parameters;
generating a rendering environment for rendering a page; and
and under the rendering environment, performing rendering operation according to the static resources of the page, the structural information of the hypertext markup language and the content data of the page.
3. The method of claim 1, wherein pre-simulating rendering with the isomorphic renderer during a development phase of the page comprises:
calling 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 web page package plug-in;
acquiring 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. The method of claim 3, further comprising:
sending a hypertext markup language file obtained through simulation rendering to the packaging tool; and
and adding the mark of the hypertext mark-up 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 target hooks include template post-execution hooks.
6. The method of claim 3, wherein the invoking the isomorphic renderer, the simulated rendering according to 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 by combining the rendering capability of a native server of a page development framework.
7. The method of claim 6, wherein the static resource comprises a JavaScript script.
8. The method of claim 7, wherein the invoking the isomorphic renderer, according to the static resources of the page and the structural information of the page, in combination with a native server rendering capability of a page development framework, to render the hypertext markup language document comprises:
and executing the JavaScript in the eval environment, and displaying the rendering effect of the hypertext markup language file by combining the rendering capability of the native server of the page development frame.
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 calling request from a server, and the calling 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, hypertext markup language structure information and content data of the page, wherein the isomorphic renderer is used for carrying out simulation rendering in advance in the development stage of the page; and
and the sending module is used for returning the rendered hypertext markup language file to the server.
10. The apparatus of claim 9, wherein the response module comprises:
the analysis unit is used for analyzing the page routing parameters in the calling request and acquiring the dependent interface service parameters;
the first obtaining unit is used for obtaining the static resources of the page and the structural information of the hypertext markup language 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 configured to generate a rendering environment for rendering a page; and
and the execution unit is used for executing rendering operation according to the static resources of the page, the structural information of the hypertext markup language 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 content of the first and second substances,
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 having stored thereon 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 one 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 true CN113010827A (en) 2021-06-22
CN113010827B 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)

Cited By (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
CN113810738A (en) * 2021-11-17 2021-12-17 畅捷通信息技术股份有限公司 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
CN115334161A (en) * 2022-07-25 2022-11-11 盐城金堤科技有限公司 Access request processing method and device, storage medium and electronic equipment
CN117555593A (en) * 2024-01-11 2024-02-13 麒麟软件有限公司 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
向俊;叶青;袁勋;: "基于网页的可视化网络医学影像平台设计", 生物医学工程学杂志, no. 02, 25 April 2017 (2017-04-25) *

Cited By (8)

* 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
CN113810738A (en) * 2021-11-17 2021-12-17 畅捷通信息技术股份有限公司 Method and device for rendering pseudo B terminal based on concentrator and storage medium
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
CN115334161A (en) * 2022-07-25 2022-11-11 盐城金堤科技有限公司 Access request processing method and device, storage medium and electronic equipment
CN115334161B (en) * 2022-07-25 2023-06-27 盐城金堤科技有限公司 Access request processing method and device, storage medium and electronic equipment
CN117555593A (en) * 2024-01-11 2024-02-13 麒麟软件有限公司 Multi-terminal self-adaptive Web desktop environment
CN117555593B (en) * 2024-01-11 2024-04-09 麒麟软件有限公司 Multi-terminal self-adaptive Web desktop environment

Also Published As

Publication number Publication date
CN113010827B (en) 2024-03-22

Similar Documents

Publication Publication Date Title
CN113010827B (en) Page rendering method and device, electronic equipment and storage medium
EP3518124A1 (en) Webpage rendering method and related device
EP3896567B1 (en) Page pre-rendering method and apparatus, electronic device, and storage medium
CN105718313A (en) Application operation method and device
CN109558323B (en) System, method and apparatus for debugging pages
CN109582317B (en) Method and apparatus for debugging hosted applications
CN110895471A (en) Installation package generation method, device, medium and electronic equipment
CN111026634A (en) Interface automation test system, method, device and storage medium
CN111324833A (en) Page display method, device, electronic design and computer readable medium
CN110727429A (en) Front-end page generation method, device and equipment
CN113050940A (en) Method for previewing small program, related device and computer program product
CN111026439A (en) Application program compatibility method, device, equipment and computer storage medium
CN111797020A (en) Mock data method and device based on dynamic bytecode
CN112395027B (en) Widget interface generation method and device, storage medium and electronic equipment
CN113495730A (en) Resource package generation and analysis method and device
CN114398023A (en) File generation method and page configuration method and device
CN114217789A (en) Function component expansion method, device, equipment, storage medium and program product
CN109582580B (en) System, method and apparatus for debugging pages
CN111414154A (en) Method and device for front-end development, electronic equipment and storage medium
CN113050921A (en) Webpage conversion method, device, storage medium and computer equipment
CN115061678A (en) Code compiling method and client based on browser proxy service
CN114911541A (en) Configuration information processing method and device, electronic equipment and storage medium
CN113656041A (en) Data processing method, device, equipment and storage medium
CN113961279A (en) Page rendering method, device, server and storage medium
CN113315829A (en) Client offline H5 page loading method and device, computer equipment and 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