WO2023142578A1 - 网页页面的渲染方法、装置、设备及存储介质 - Google Patents

网页页面的渲染方法、装置、设备及存储介质 Download PDF

Info

Publication number
WO2023142578A1
WO2023142578A1 PCT/CN2022/129536 CN2022129536W WO2023142578A1 WO 2023142578 A1 WO2023142578 A1 WO 2023142578A1 CN 2022129536 W CN2022129536 W CN 2022129536W WO 2023142578 A1 WO2023142578 A1 WO 2023142578A1
Authority
WO
WIPO (PCT)
Prior art keywords
plug
web page
server
rendering
page
Prior art date
Application number
PCT/CN2022/129536
Other languages
English (en)
French (fr)
Inventor
张宇昂
Original Assignee
腾讯科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 腾讯科技（深圳）有限公司 filed Critical 腾讯科技（深圳）有限公司
Priority to EP22923375.4A priority Critical patent/EP4398129A1/en
Priority to US18/349,950 priority patent/US20230359688A1/en
Publication of WO2023142578A1 publication Critical patent/WO2023142578A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the embodiments of the present application relate to the technical field of webpage development, and in particular to a method, device, device, and storage medium for rendering a webpage.
  • Commonly used web page rendering methods mainly include server side rendering (Server Side Render, SSR) and client side rendering (Client Side Render, CSR).
  • SSR server side rendering
  • CSR Client Side Render
  • the principle of SSR is to assemble Hyper Text Markup Language (HTML) pages and their corresponding dynamic data on the server side, and then directly present the complete page (rendering result) on the client side.
  • the principle of CSR is that the assembly of HTML pages and dynamic data occurs on the client side.
  • the server-side rendering framework based on the front-end framework realizes server-side resource saving, server-side rendering, fast loading of the first screen, and search engine optimization (Search Engine Optimization, SEO) and other effects .
  • the server-side rendering framework can only support a single front-end framework, that is, the server-side rendering framework corresponds to the front-end framework one by one, and the server-side rendering framework is only applicable to a single front-end framework scenario.
  • the present application provides a web page rendering method, device, equipment and storage medium. Described technical scheme is as follows:
  • a method for rendering a web page is provided, the method is executed by a terminal, and the method includes:
  • the front-end plug-in is decoupled from the server-side plug-in running in the server, and the server-side plug-in is used to provide a webpage rendering function located at the server;
  • the rendering result of the web page fed back by the server-side plug-in is received through the front-end plug-in.
  • a method for rendering a web page is provided, the method is executed by a server, and the method includes:
  • the server plug-in is decoupled from the front-end plug-in running in the front-end application, and the server plug-in is used to provide a webpage rendering function at the server side;
  • a web page rendering device comprising:
  • the running module is used to run the front-end plug-in in the front-end application, the front-end plug-in is decoupled from the server-side plug-in running in the server, and the server-side plug-in is used to provide a webpage rendering function located on the server side;
  • a rendering module configured to request the server plug-in to render the web page source code of the web page through the front-end plug-in in response to the opening operation of the web page;
  • the receiving module is configured to receive the rendering result of the web page fed back by the server plug-in through the front-end plug-in.
  • the running module is further configured to run a front-end plug-in corresponding to a first front-end framework in the front-end application, and the first front-end framework is a front-end framework used by the front-end application;
  • front-end plug-ins corresponding to different front-end frameworks have the same operation logic and different adaptation designs.
  • the rendering module includes:
  • a sending unit configured to send a client request to the server plug-in through the front-end plug-in in response to the opening operation of the web page, and the client request carries application layer protocol information parameters;
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the receiving module is further configured to receive the degraded rendering result fed back by the server-side plug-in through the front-end plug-in, and the degraded rendering result is the web page of the web page by the server-side plug-in The rendering result obtained when the source code rendering fails.
  • the rendering module includes:
  • the rendering unit is configured to use the front-end plug-in to perform client-side rendering based on the degraded rendering result to obtain the rendering result of the web page.
  • the web page source code of the web page includes a page layout layer code and a page actual content display layer code
  • the page layout layer code is a code that has nothing to do with application logic in the web page source code
  • the page actual content display layer code The code is the code related to the application logic in the source code of the web page
  • the degraded rendering result is a rendering result obtained by rendering the page layout layer code by the server plug-in.
  • the rendering module further includes:
  • the obtaining unit is configured to obtain the actual content display layer code of the page from the server through the front-end plug-in.
  • the rendering unit is further configured to use the degraded rendering result as a rendering skeleton through the front-end plug-in, render the page content related to the application logic in the rendering skeleton based on the actual content display layer code of the page, and obtain The rendering result of the web page.
  • a web page rendering device comprising:
  • the running module is used to run the server plug-in on the server side, the server plug-in is decoupled from the front-end plug-in running in the front-end application, and the server plug-in is used to provide a web page rendering function on the server side;
  • a rendering module configured to render the web page source code of the web page requested by the front-end plug-in through the server plug-in to obtain a rendering result of the web page
  • a feedback module configured to feed back the rendering result of the web page to the front-end plug-in.
  • the running module is further configured to run a server plug-in corresponding to the first back-end framework on the server, and the first back-end framework is a back-end used by the server end frame;
  • the service plug-ins corresponding to different back-end frameworks have the same operating logic and different adaptation designs.
  • the rendering module includes:
  • a receiving unit configured to receive a client request sent by the front-end plug-in through the server plug-in, the client request carrying application layer protocol information parameters;
  • a determining unit configured to determine the rendering mode of the web page according to the application layer protocol information parameters
  • a rendering unit configured to render the web page source code of the web page based on the rendering mode, to obtain a rendering result of the web page.
  • the server plug-in when an error occurs when the server plug-in is running or loading data, the server plug-in fails to render the web page source code of the web page to obtain a degraded rendering result;
  • the feedback module is configured to feed back the degraded rendering result to the front-end plug-in.
  • the web page source code of the web page includes a page layout layer code and a page actual content display layer code
  • the page layout layer code is a code that has nothing to do with application logic in the web page source code
  • the The actual content display layer code of the page is the code related to the application logic in the source code of the web page
  • the degraded rendering result is obtained by rendering the page layout layer code by the server plug-in.
  • a computer device includes: a processor and a memory, at least one computer program is stored in the memory, and at least one computer program is loaded and executed by the processor to realize the above-mentioned The rendering method of the web page.
  • a computer storage medium is provided, at least one computer program is stored in the computer-readable storage medium, and at least one computer program is loaded and executed by a processor to realize the rendering of the web page as described in the above aspect method.
  • a computer program product includes computer instructions, the computer instructions are stored in a computer-readable storage medium; the computer instructions are executed by a processor of a computer device from the The computer-readable storage medium is read and executed, so that the computer device executes the method for rendering a web page as described in the above aspect.
  • Running the front-end plug-in in the front-end application in response to the opening operation of the web page, requesting the server-side plug-in to render the web page source code of the web page through the front-end plug-in; receiving the rendering result of the web page fed back by the server-side plug-in through the front-end plug-in.
  • the technical solution provided by the embodiment of the present application realizes the server-side rendering process of the web page by inserting plug-ins in the front-end frame and the back-end frame, so that the front-end frame inserted with the front-end plug-in can be applied to various front-ends according to the difference of the front-end plug-ins frame the scene.
  • the problem of one-to-one correspondence between the front-end framework and the server-side framework in the related art is solved, and the front-end plug-in and the server-side plug-in provided by this application are decoupled from each other.
  • the terminal will use the front-end framework 2 and the front-end plug-in 2 corresponding to the front-end framework 2 after the replacement, and the server does not need to change the original server-side plug-in. That is to say, it is realized that one server-side plug-in corresponds to multiple front-end plug-ins, and one server-side framework corresponds to multiple front-end frameworks at the same time.
  • FIG. 1 is a schematic diagram of the system configuration of a web page rendering system provided by an exemplary embodiment of the present application
  • FIG. 2 is a flow chart of a method for rendering a webpage provided in an exemplary embodiment of the present application
  • FIG. 3 is a flow chart of a method for rendering a webpage provided in an exemplary embodiment of the present application
  • Fig. 4 is a schematic diagram of an adaptation design of a front-end plug-in provided by an exemplary embodiment of the present application
  • Fig. 5 is a schematic diagram of an overall structural framework including a front-end plug-in and a server-side plug-in provided by an exemplary embodiment of the present application;
  • FIG. 6 is a flow chart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • FIG. 7 is a schematic diagram of a rendering mode degradation process framework provided by an exemplary embodiment of the present application.
  • FIG. 8 is a schematic diagram of a rendering mode degradation process framework provided by an exemplary embodiment of the present application.
  • FIG. 9 is a flow chart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • FIG. 10 is a flow chart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • FIG. 11 is a flow chart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • Fig. 12 is a block diagram of a rendering device for a web page provided by an exemplary embodiment of the present application.
  • Fig. 13 is a block diagram of a rendering device for a web page provided by an exemplary embodiment of the present application.
  • Fig. 14 is a schematic structural diagram of a computer device provided by an exemplary embodiment of the present application.
  • Fig. 15 is a schematic structural diagram of a computer device provided by an exemplary embodiment of the present application.
  • FIG. 1 shows a schematic diagram of a system configuration of a web page rendering system according to various embodiments of the present application.
  • the system includes a server 120 , a database 140 and several clients 160 .
  • the server 120 is a server, or consists of several servers, or a virtualization platform, or a cloud computing service center.
  • Server 120 may consist of one or more functional units.
  • the server 120 may include: a rights management unit 120a, a page data management unit 120b and so on.
  • the authority management unit 120a is used to generate, update and maintain the authority corresponding to each user account, and provide each client 160 with information such as the authority of the client 160 in the current login state.
  • the page data management unit 120b is used to manage the page data in the pages developed by developers, accept the request from the client 160, and send the page data requested by the client 160 to the client 160, so that the client 160 can display it.
  • the foregoing database 140 may be a Redis database, or may also be other types of databases. Wherein, the database 140 is used to store various types of data, such as each user account, the authority of each user account, and the page data of each page, and so on.
  • the client 160 may be a terminal device with a network connection function and a page display function, for example, the client 160 may be a mobile phone, a tablet computer, an e-book reader, smart glasses, a smart watch, and a vehicle terminal.
  • a browser or other network (Web) applications may be installed in the client 160 .
  • Web network
  • the client 160 is connected to the server 120 through a communication network.
  • the communication network is a wired network or a wireless network.
  • the system may further include a management device (not shown in FIG. 1 ), which is connected to the server 120 through a communication network.
  • a management device (not shown in FIG. 1 ), which is connected to the server 120 through a communication network.
  • the communication network is a wired network or a wireless network.
  • the aforementioned wireless network or wired network uses standard communication technologies and/or protocols.
  • the network is usually the Internet, but can be any network, including but not limited to Local Area Network (LAN), Metropolitan Area Network (MAN), Wide Area Network (WAN), mobile, wired or wireless Any combination of network, private network, or virtual private network.
  • data exchanged over a network is represented using technologies and/or formats including Hyper Text Mark-up Language (HTML), Extensible Markup Language (XML), and the like.
  • HTML Hyper Text Mark-up Language
  • XML Extensible Markup Language
  • Fig. 2 is a flowchart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the client 160 in the system shown in FIG. 1 .
  • the method includes:
  • Step 202 Run the front-end plug-in in the front-end application, and decouple the front-end plug-in from the server-side plug-in running in the server.
  • the front end refers to the foreground part of the website, which runs on browsers such as PCs and mobiles and displays the webpages for users to browse.
  • a front-end plug-in refers to a plug-in with a custom command function, which is used to provide a webpage rendering function on the client side
  • a server-side plug-in refers to a plug-in with a custom command function, which is used to provide a web page rendering function on the server side.
  • Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • Page objects refer to objects of various granularities that can be individually controlled by front-end plug-ins in a web page.
  • the page itself can be used as a page object, and each page component contained in the page can also be individually As a page object, the page elements included in each page component can also be used as a page object independently.
  • the page object may be the current page itself, or the page object may be a certain page component in the current page, or the above page object may also be an element in a certain page component in the current page.
  • the above-mentioned page component is a container for encapsulating one or more elements.
  • the page component may be an input box or a drop-down box on the page.
  • the page component can also be a web page component or a web component.
  • Decoupling means that the type of front-end plug-in has nothing to do with the type of server-side plug-in. Any combination of front-end plug-ins and server-side plug-ins can be achieved.
  • the front-end plug-in is any one of the World Wide Web development framework React plug-in, the progressive front-end framework Vue2.0 plug-in, and the progressive front-end framework Vue3.0 plug-in; anyone.
  • the decoupling relationship between the front-end plug-in and the server-side plug-in makes the web page rendering method provided by this application sufficient to cover all development scenarios.
  • Step 204 In response to the opening operation of the webpage, request the server-side plug-in to render the webpage source code of the webpage through the front-end plug-in.
  • Web page source code refers to human-readable text written in a specific programming language, which can represent elements on a web page (pictures, videos, music, text, etc.) in a standard language.
  • the client in response to the opening operation of the web page, the client requests the page resource from the server, that is, requests the server plug-in to render the web page source code of the web page through the front-end plug-in.
  • Step 206 Receive the rendering result of the web page fed back by the server-side plug-in through the front-end plug-in.
  • the server plug-in in the server obtains the source code of the webpage and renders the source code of the webpage. After the rendering is completed, the server renders the webpage The rendering result of the page is fed back to the client, and the client receives the rendering result of the web page fed back by the server plug-in through the front-end plug-in.
  • the front-end plug-in is run in the front-end application, and in response to the opening operation of the web page, the front-end plug-in requests the server plug-in to render the web page source code of the web page, and receives the service through the front-end plug-in The rendering result of the web page fed back by the terminal plug-in.
  • the embodiment of the present application implements the server-side rendering process of the web page by inserting plug-ins in the front-end framework and the back-end frame.
  • the front-end framework can be applied to various front-end framework scenarios according to different front-end plug-ins.
  • Fig. 3 is a flowchart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the client 160 in the system shown in FIG. 1 .
  • the method includes:
  • Step 302 Run the front-end plug-in corresponding to the first front-end framework in the front-end application, and the first front-end framework is a front-end framework used by the front-end application.
  • the front end refers to the foreground part of the website, which runs on browsers such as PCs and mobiles and displays the webpages for users to browse.
  • a front-end plug-in refers to a plug-in with a custom command function, which is used to provide a webpage rendering function on the client side
  • a server-side plug-in refers to a plug-in with a custom command function, which is used to provide a web page rendering function on the server side.
  • Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • Front-end frameworks refer to front-end frameworks with custom command functions, such as the World Wide Web development framework React, progressive front-end framework Vue2.0, progressive front-end framework Vue3.0, etc. These frameworks encapsulate some basic functions, such as super HTML Document manipulation and various controls (buttons, forms, etc.).
  • a front-end plug-in corresponding to a front-end framework used by the front-end application is run in the front-end application.
  • the front-end plug-ins corresponding to different front-end frameworks have the same operating logic and different adaptation designs. That is, by replacing different plug-ins, the rendering process of the web page can be applied to various front-end framework scenarios.
  • the different front-end frameworks include at least two of the World Wide Web development framework React, the progressive front-end framework Vue2.0, and the progressive front-end framework Vue3.0.
  • the adaptation design of the front-end plug-in 401 includes its own construction logic 402, startup logic 405, plug-in dependency logic 408, configurable capability 410, and operation logic 412. But it is not limited thereto, and this embodiment of the present application does not make a limitation thereto.
  • the construction logic 402 of the front-end plug-in 401 refers to packaging and classifying the source code or acquired data based on the static module packaging module Webpack 403.
  • the hot update logic 404 based on the static module packaging module Webpack 403 can realize partial Perform rendering while retaining the current page state, such as the selected state of the check box, the input of the input box, etc.
  • the startup logic 405 of the front-end plug-in 401 refers to performing routing initialization 406 and data management model initialization 407 on the front-end plug-in 401 when the front-end plug-in 401 is started and running.
  • the routing initialization 406 refers to initializing the page objects and web page source codes in the web page The corresponding relationship among them; data management model initialization 407 is also called store initialization, which refers to initializing the data model in the front-end plug-in 401 when the front-end plug-in 401 starts.
  • the data management model is used to manage all the data in the front-end components, and to operate and modify all the data in the front-end components.
  • the plug-in dependency 408 of the front-end plug-in 401 refers to the dependency conditions that the current front-end plug-in 401 needs to use in the current framework scene without additional configuration 409, that is, the front-end plug-in 401 includes the required Dependencies, no additional configuration is required.
  • the configurable capability 410 of the front-end plug-in 401 means that the front-end plug-in 401 can process and merge user configurations 411. By merging personalized configurations of different users, the front-end plug-in can be adapted to different application scenarios.
  • the operation logic 412 of the front-end plug-in 401 means that data prefetching 413 can be realized, that is, by pre-acquiring data required for rendering, the web page is rendered and then the page is returned to the client.
  • FIG. 5 a schematic diagram of an overall structural framework including a front-end plug-in and a server-side plug-in is shown in FIG. 5 .
  • All functional interfaces of the plug-in are displayed on the command execution interface 501, and the server plug-in and/or front-end plug-in can be edited through the start 502 operation.
  • click Build 503 After editing the server-side plug-in and/or front-end plug-in, click Build 503 to complete the operation and publish it.
  • the front-end framework refers to the front-end framework with custom instruction functions.
  • the front-end plug-ins corresponding to the pluggable front-end framework include the React plug-in 507 of the World Wide Web development framework, the Vue2.0 plug-in 508 of the progressive front-end framework, and the Vue3.0 plug-in of the progressive front-end framework Any one in 509, but not limited thereto, which is not limited in this embodiment of the present application.
  • the entry logic 510 of the front-end framework includes the running logic and startup logic of the front-end plug-in.
  • the running logic and startup logic refer to the description in FIG. The description will not be repeated here.
  • the front-end framework supports the packaging module tool Webpack 512 and the front-end construction tool vite 513, but is not limited thereto, and this embodiment of the present application does not limit it.
  • the back-end framework refers to the back-end framework with custom command functions.
  • the server-side plug-ins corresponding to the pluggable back-end framework include NestJS development framework plug-in 504, Midway development framework plug-in 505, etc., but are not limited to this.
  • the built-in proxy server 506 in the plug-in on the server side does not need to set up an additional proxy server, so that all functions required in the plug-in on the server side can be directly performed.
  • Step 304 In response to the opening operation of the webpage, request the server-side plug-in to render the webpage source code of the webpage through the front-end plug-in.
  • Web page source code refers to human-readable text written in a specific programming language, which can represent elements on a web page (pictures, videos, music, text, etc.) in a standard language.
  • the client in response to the opening operation of the web page, the client sends a client request to the server plug-in through the front-end plug-in, and the client request carries application layer protocol information parameters.
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the rendering mode includes a server-side rendering mode and a client-side rendering mode.
  • the server-side rendering mode means that the process of rendering the web page source code of the web page mainly occurs on the server side;
  • the client-side rendering mode means that the process of rendering the web page The process of rendering the source code of the webpage mainly occurs on the client side.
  • the application layer protocol information parameter refers to the parameter carried in the client request and can determine the rendering mode.
  • the application layer protocol information parameter includes at least one of the request query parameter query, the request header and the request header information cookie, But it is not limited thereto, and this embodiment of the present application does not make a limitation thereto.
  • the process of determining the rendering mode of the web page is not specifically limited.
  • Step 306 Receive the rendering result of the web page fed back by the server-side plug-in through the front-end plug-in.
  • the server plug-in in the server obtains the webpage source code of the webpage according to the URL and renders the webpage source code of the webpage.
  • the server feeds back the rendering result of the web page to the client, and the client receives the rendering result of the web page fed back by the server plug-in through the front-end plug-in.
  • the front-end plug-in is run in the front-end application, and in response to the opening operation of the web page, the web page is determined through the application layer protocol information parameters in the client request sent by the front-end plug-in to the server plug-in.
  • Rendering mode through the front-end plug-in to receive the rendering result of the web page fed back by the server-side plug-in.
  • the rendering process of the web page is realized by inserting a plug-in in the front-end frame and the back-end frame. It can be applied to a variety of front-end framework scenarios according to different front-end plug-ins.
  • Fig. 6 is a flowchart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the client 160 in the system shown in FIG. 1 .
  • the method includes:
  • Step 602 Run the front-end plug-in in the front-end application, and decouple the front-end plug-in from the server plug-in running in the server.
  • the front end refers to the foreground part of the website, which runs on browsers such as PCs and mobiles and displays the webpages for users to browse.
  • a front-end plug-in refers to a plug-in with a custom command function, which is used to provide a webpage rendering function on the client side;
  • a server-side plug-in refers to a plug-in with a custom command function, which is used to provide a web page rendering function on the server side.
  • Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • Front-end frameworks refer to front-end frameworks with custom command functions, such as the World Wide Web development framework React, progressive front-end framework Vue2.0, progressive front-end framework Vue3.0, etc. These frameworks encapsulate some basic functions, such as HTML documents Actions and various controls (buttons, forms, etc.).
  • a front-end plug-in corresponding to a front-end framework used by the front-end application is run in the front-end application.
  • the front-end plug-ins corresponding to different front-end frameworks have the same operating logic and different adaptation designs. That is, by replacing different plug-ins, the rendering process of the web page can be applied to various front-end framework scenarios.
  • the different front-end frameworks include at least two of the World Wide Web development framework React, the progressive front-end framework Vue2.0, and the progressive front-end framework Vue3.0.
  • Decoupling means that the type of front-end plug-in has nothing to do with the type of server-side plug-in. Any combination of front-end plug-ins and server-side plug-ins can be achieved.
  • the front-end plug-in is any one of the World Wide Web development framework React plug-in, the progressive front-end framework Vue2.0 plug-in, and the progressive front-end framework Vue3.0 plug-in; anyone.
  • the decoupling relationship between the front-end plug-in and the server-side plug-in makes the web page rendering method provided by this application sufficient to cover all development scenarios.
  • Step 604 In response to the opening operation of the web page, the front-end plug-in requests the server-side plug-in to render the web page source code of the web page.
  • the client in response to the opening operation of the web page, the client sends a client request to the server plug-in through the front-end plug-in, and the client request carries application layer protocol information parameters.
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the rendering mode includes a server-side rendering mode and a client-side rendering mode.
  • the server-side rendering mode means that the process of rendering the web page source code of the web page mainly occurs on the server side;
  • the client-side rendering mode means that the process of rendering the web page The process of rendering the source code of the webpage mainly occurs on the client side.
  • Step 606 Receive the degraded rendering result fed back by the server-side plug-in through the front-end plug-in.
  • the web page source code of a web page includes the page layout layer code (ie, the Layout layer code) and the page actual content display layer code (ie, the Children layer code).
  • the display layer code is the code related to the application logic in the source code of the web page.
  • the degraded rendering result refers to the rendering result obtained by rendering the page layout layer code by the server-side plug-in when the rendering of the server-side plug-in fails.
  • the page layout layer code includes at least one of the page title information code, the page description code of the page title, and the static resource file address generation logic code of the page, but is not limited thereto, which is not limited in this embodiment of the present application.
  • the server plug-in in the server obtains the webpage source code of the webpage according to the URL and renders the webpage source code of the webpage.
  • the server will The degraded rendering result of the web page is fed back to the client, and the client receives the degraded rendering result of the web page fed back by the server plug-in through the front-end plug-in, that is, the client receives the server-side plug-in feedback from the server plug-in through the front-end plug-in to the page layout layer The rendering result obtained by rendering the code.
  • the client sends a client request 701 to the server plug-in through the front-end plug-in, and the client request 701 carries application layer protocol information parameters, and the web page is determined according to the application layer protocol information parameters
  • the rendering mode of the webpage when the rendering mode of the webpage is the server-side rendering mode 702, the server-side plug-in obtains the page layout layer code, and renders the page layout layer code 703, after that, the server-side plug-in obtains the actual content display layer of the page code, and render 704 the actual content display layer code of the page, that is, render the page content related to the application logic, and finally obtain the rendering result of the web page.
  • the rendering mode of the web page is downgraded from the server-side rendering mode 702 to the client End rendering mode 705, the server uses the rendering result of the page layout layer code rendered by the server plug-in as the downgraded rendering result, and the front-end plug-in performs further rendering work on the downgraded rendering result, that is, the client renders the page layout layer code on the server side 706 Based on the further rendering.
  • Step 608 Perform client-side rendering through the front-end plug-in based on the degraded rendering result, and obtain the rendering result of the web page.
  • the client obtains the actual content display layer code of the page from the server through the front-end plug-in.
  • the client uses the degraded rendering result as the rendering skeleton through the front-end plug-in, and renders the page content related to the application logic in the rendering skeleton based on the actual content display layer code of the page, and obtains the rendering result of the webpage.
  • Figure 8 shows a schematic diagram of the rendering mode downgrade process framework.
  • the client sends a client request 801 to the server plug-in through the front-end plug-in by responding to the opening operation of the web page on the browser, and the client
  • the request 801 carries the application layer protocol information parameters, and the rendering mode of the web page is determined according to the application layer protocol information parameters.
  • the page layout layer code and the page actual content display layer code and render the page components in the web page 804, that is, render the page layout layer code and the page actual content display layer code to obtain the rendering result of the web page, and render the web page
  • the rendering result of the browser is sent to the browser in the client, and the browser activates the document object model DOM 805, so that the browser responds to the opening operation of the webpage on the browser, and performs routing switching, that is, jumps to the webpage, so that the client obtains
  • the data 806, that is, the rendering result obtained by the client and displayed on the web page of the browser.
  • the Document Object Model refers to a tree-structured model composed of page objects in a web page and the relationships between page objects.
  • the server-side plug-in When an error occurs when the server-side plug-in renders the actual content display layer code of the page, that is, an error occurs when the server-side plug-in is running or loading data, and the server-side plug-in fails to render the web page source code of the web page
  • the rendering mode of the web page is downgraded from the server-side rendering mode 802 to the client-side rendering mode 807
  • the server uses the rendering result of the page layout layer code rendered by the server-side plug-in as the downgraded rendering result
  • the front-end plug-in performs further processing on the downgraded rendering result Rendering 808.
  • the client uses the degraded rendering result as the rendering skeleton through the front-end plug-in, and the client obtains data 809, that is, the client obtains the actual content display layer code of the page from the server through the front-end plug-in, and renders and applies logic in the rendering skeleton based on the actual content display layer code of the page Relevant page content, that is, the client renders 810 the page components in the web page, and performs route switching, that is, jumps to the web page, so that the client obtains data 811, so that the client displays the rendering result on the web page of the browser .
  • the front-end plug-in is run in the front-end application, and in response to the opening operation of the web page, the web page is determined through the application layer protocol information parameters in the client request sent by the front-end plug-in to the server plug-in.
  • rendering mode when the server-side plug-in fails to render the web page source code of the web page, the rendering mode is downgraded from the server-side rendering mode to the client-side rendering mode, and the front-end plug-in performs client-side rendering based on the degraded rendering result, and finally gets the rendering result.
  • the embodiment of the present application implements the server-side rendering process of the webpage by inserting plug-ins in the front-end framework and the back-end framework, and at the same time realizes that the rendering mode can be switched quickly when the server-side rendering fails, ensuring the rendering work of the webpage of normal progress.
  • Fig. 9 is a flow chart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the server 120 in the system shown in FIG. 1 .
  • the method includes:
  • Step 902 Run the server plug-in on the server, and decouple the server plug-in from the front-end plug-in running in the front-end application.
  • the front end refers to the foreground part of the website, which runs on browsers such as PCs and mobiles and displays the webpages for users to browse.
  • a front-end plug-in refers to a plug-in with a custom command function, which is used to provide a webpage rendering function on the client side
  • a server-side plug-in refers to a plug-in with a custom command function, which is used to provide a web page rendering function on the server side.
  • Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • Page objects refer to objects of various granularities that can be individually controlled by front-end plug-ins in a web page.
  • the page itself can be used as a page object, and each page component contained in the page can also be individually As a page object, the page elements included in each page component can also be used as a page object independently.
  • the page object may be the current page itself, or the page object may be a certain page component in the current page, or the above page object may also be an element in a certain page component in the current page.
  • the above-mentioned page component is a container for encapsulating one or more elements.
  • the page component may be an input box or a drop-down box on the page.
  • the page component can also be a web page component or a web component.
  • Decoupling means that the type of front-end plug-in has nothing to do with the type of server-side plug-in. Any combination of front-end plug-ins and server-side plug-ins can be achieved.
  • the front-end plug-in is any one of the World Wide Web development framework React plug-in, the progressive front-end framework Vue2.0 plug-in, and the progressive front-end framework Vue3.0 plug-in; anyone.
  • the decoupling relationship between the front-end plug-in and the server-side plug-in makes the web page rendering method provided by this application sufficient to cover all development scenarios.
  • Step 904 Render the source code of the web page requested by the front-end plug-in through the server plug-in to obtain a rendering result of the web page.
  • Web page source code refers to human-readable text written in a specific programming language, which can represent elements on a web page (pictures, videos, music, text, etc.) in a standard language.
  • the client requests a page resource from the server
  • the server plug-in obtains the web page source code of the web page requested by the front-end plug-in
  • the server plug-in renders the web page source code of the web page, and obtains a rendering result of the web page.
  • Step 906 Feedback the rendering result of the web page to the front-end plug-in.
  • the server plug-in in the server obtains the web page source code of the web page and renders the web page source code of the web page. After the rendering is completed, the server feeds back the rendering result of the web page to the client, and the client passes the front-end plug-in The rendering result of the web page that receives the feedback from the server-side plug-in.
  • the method provided by this embodiment runs the server plug-in on the server side, and renders the web page source code of the web page requested by the front-end plug-in through the server plug-in to obtain the rendering result of the web page; and feeds back the web page to the front-end plug-in The rendering result of the page.
  • the embodiment of the present application implements the server-side rendering process of the web page by inserting plug-ins in the front-end frame and the back-end frame.
  • the framework enables server-side rendering to be applied to various rendering scenarios according to different plugins.
  • Fig. 10 is a flowchart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the server 120 in the system shown in FIG. 1 .
  • the method includes:
  • Step 1002 Run the server plug-in corresponding to the first backend framework on the server side, where the first backend framework is the backend framework used by the server side.
  • the first backend framework is a backend framework used by the server.
  • the service plug-ins corresponding to different backend frameworks have the same operating logic and different adaptation designs.
  • the server-side plug-in refers to a plug-in with a custom instruction function, which is used to provide a webpage rendering function on the server side.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • the back-end framework refers to the back-end framework with custom command functions, such as NestJS development framework, Midway development framework, etc. These frameworks encapsulate some basic functions.
  • Step 1004 Render the source code of the web page requested by the front-end plug-in through the server-side plug-in to obtain a rendering result of the web page.
  • Web page source code refers to human-readable text written in a specific programming language, which can represent elements on a web page (pictures, videos, music, text, etc.) in a standard language.
  • the server receives the client request sent by the front-end plug-in through the server plug-in, and the client request carries application layer protocol information parameters.
  • the server plug-in determines the rendering mode of the web page according to the application layer protocol information parameters.
  • the server plug-in renders the webpage source code of the webpage based on the rendering mode, and obtains a rendering result of the webpage.
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the rendering mode includes a server-side rendering mode and a client-side rendering mode.
  • the server-side rendering mode means that the process of rendering the web page source code of the web page mainly occurs on the server side;
  • the client-side rendering mode means that the process of rendering the web page The process of rendering the source code of the webpage mainly occurs on the client side.
  • the application layer protocol information parameter refers to the parameter carried in the client request and can determine the rendering mode.
  • the application layer protocol information parameter includes at least one of the request query parameter query, the request header and the request header information cookie, But it is not limited thereto, and this embodiment of the present application does not make a limitation thereto.
  • Step 1006 Feedback the rendering result of the web page to the front-end plug-in.
  • the server plug-in in the server obtains the web page source code of the web page and renders the web page source code of the web page. After the rendering is completed, the server feeds back the rendering result of the web page to the client. Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • the method provided by this embodiment runs the server plug-in on the server side, receives the client request sent by the front-end plug-in through the server plug-in, and determines the web page according to the application layer protocol information parameters in the received client request.
  • the rendering mode of the webpage is based on the rendering mode to render the webpage source code of the webpage, obtain the rendering result of the webpage, and feed back the rendering result of the webpage to the client.
  • the embodiment of the present application implements the server-side rendering process of the web page by inserting plug-ins in the front-end frame and the back-end frame.
  • the framework enables server-side rendering to be applied to various rendering scenarios according to different plugins.
  • Fig. 11 is a flowchart of a method for rendering a webpage provided by an exemplary embodiment of the present application.
  • the method can be applied to computer equipment to realize the rendering of web pages.
  • the above-mentioned computer device may be the server 120 in the system shown in FIG. 1 .
  • the method includes:
  • Step 1102 Run the server plug-in on the server, and decouple the server plug-in from the front-end plug-in running in the front-end application.
  • the front end refers to the foreground part of the website, which runs on browsers such as PCs and mobiles and displays the webpages for users to browse.
  • a front-end plug-in refers to a plug-in with a custom command function, which is used to provide a webpage rendering function on the client side;
  • a server-side plug-in refers to a plug-in with a custom command function, which is used to provide a web page rendering function on the server side.
  • Front-end plug-ins and server-side plug-ins together complete the complete process of rendering web pages.
  • Web page rendering refers to the process of converting the source code corresponding to the page object in the web page into a visible image.
  • Front-end frameworks refer to front-end frameworks with custom command functions, such as the World Wide Web development framework React, progressive front-end framework Vue2.0, progressive front-end framework Vue3.0, etc. These frameworks encapsulate some basic functions, such as super HTML Document manipulation and various controls (buttons, forms, etc.).
  • the back-end framework refers to the back-end framework with custom command functions, such as NestJS development framework, Midway development framework, etc. These frameworks encapsulate some basic functions.
  • a front-end plug-in corresponding to a front-end framework used by the front-end application is run in the front-end application.
  • the front-end plug-ins corresponding to different front-end frameworks have the same operating logic and different adaptation designs. That is, by replacing different plug-ins, the rendering process of the web page can be applied to various front-end framework scenarios.
  • the different front-end frameworks include at least two of the World Wide Web development framework React, the progressive front-end framework Vue2.0, and the progressive front-end framework Vue3.0.
  • Decoupling means that the type of front-end plug-in has nothing to do with the type of server-side plug-in. Any combination of front-end plug-ins and server-side plug-ins can be achieved.
  • the front-end plug-in is any one of the World Wide Web development framework React plug-in, the progressive front-end framework Vue2.0 plug-in, and the progressive front-end framework Vue3.0 plug-in; anyone.
  • the decoupling relationship between the front-end plug-in and the server-side plug-in makes the web page rendering method provided by this application sufficient to cover all development scenarios.
  • Step 1104 Render the source code of the web page requested by the front-end plug-in through the server plug-in to obtain a rendering result of the web page.
  • Web page source code refers to human-readable text written in a specific programming language, which can represent elements on a web page (pictures, videos, music, text, etc.) in a standard language.
  • the server receives the client request sent by the front-end plug-in through the server plug-in, and the client request carries application layer protocol information parameters.
  • the server plug-in determines the rendering mode of the web page according to the application layer protocol information parameters.
  • the server plug-in renders the webpage source code of the webpage based on the rendering mode, and obtains a rendering result of the webpage.
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the rendering mode includes a server-side rendering mode and a client-side rendering mode.
  • the server-side rendering mode means that the process of rendering the web page source code of the web page mainly occurs on the server side;
  • the client-side rendering mode means that the process of rendering the web page The process of rendering the source code of the webpage mainly occurs on the client side.
  • Step 1106 In the case of an error when the server-side plug-in is running or loading data, the server-side plug-in fails to render the web page source code of the web page to obtain a degraded rendering result.
  • the web page source code of a web page includes the page layout layer code (ie, the Layout layer code) and the page actual content display layer code (ie, the Children layer code).
  • the display layer code is the code related to the application logic in the source code of the web page.
  • the degraded rendering result refers to the rendering result obtained by rendering the page layout layer code by the server-side plug-in when the rendering of the server-side plug-in fails.
  • the page layout layer code includes at least one of the page title information code, the page description code of the page title, and the static resource file address generation logic code of the page, but is not limited thereto, which is not limited in this embodiment of the present application.
  • the server plug-in in the server obtains the client request sent by the client to the server
  • the server plug-in in the server obtains the web page source code of the web page and renders the web page source code of the web page.
  • the server takes the rendering result obtained by currently rendering the page layout layer code as the downgraded rendering result.
  • Step 1108 Feedback the degraded rendering result to the front-end plug-in.
  • the server plug-in in the server acquires the webpage source code of the webpage and renders the webpage source code of the webpage, and after the rendering fails, the server feeds back the degraded rendering result of the webpage to the client.
  • the server plug-in is run on the server, and the rendering mode of the web page is determined according to the application layer protocol information parameters in the received client request.
  • the rendering mode is downgraded from the server-side rendering mode to the client-side rendering mode, and the degraded rendering result of the web page is fed back to the client for further rendering.
  • the embodiment of the present application implements the rendering process of the webpage by inserting plug-ins in the front-end framework and the back-end framework, and at the same time realizes that the rendering mode can be switched quickly when the server-side rendering fails, ensuring the normal rendering of the webpage conduct.
  • Fig. 12 shows a block diagram of an apparatus for rendering a webpage provided by an exemplary embodiment of the present application.
  • the unit includes:
  • the running module 1202 is used to run the front-end plug-in in the front-end application, the front-end plug-in is decoupled from the server-side plug-in running in the server, and the server-side plug-in is used to provide a webpage rendering function on the server side.
  • the rendering module 1204 is configured to request the server plug-in to render the web page source code of the web page through the front-end plug-in in response to the opening operation of the web page.
  • the receiving module 1206 is configured to receive, through the front-end plug-in, the rendering result of the web page fed back by the server-side plug-in.
  • the running module 1202 is further configured to run a front-end plug-in corresponding to a first front-end framework in the front-end application, and the first front-end framework is a front-end framework used by the front-end application; wherein The front-end plug-ins corresponding to different front-end frameworks have the same operating logic and different adaptation designs.
  • the rendering module 1204 is further configured to send a client request to the server plug-in through the front-end plug-in in response to the opening operation of the web page, and the client request carries an application Layer protocol information parameters.
  • the client request is used to request the server plug-in to render the web page source code of the web page
  • the application layer protocol information parameter is used to instruct the server plug-in to determine the rendering mode of the web page
  • the receiving module 1206 is further configured to receive, through the front-end plug-in, the degraded rendering result fed back by the server-side plug-in, where the degraded rendering result is the The rendering result obtained when the rendering of the web page source code fails.
  • the rendering module 1204 is further configured to use the front-end plug-in to perform client-side rendering based on the degraded rendering result to obtain the rendering result of the web page.
  • the web page source code of the web page includes a page layout layer code and a page actual content display layer code
  • the page layout layer code is a code that has nothing to do with application logic in the web page source code
  • the page actual content display layer code is Code related to the application logic in the web page source code.
  • the degraded rendering result is a rendering result obtained by rendering the page layout layer code by the server plug-in.
  • the rendering module 1204 is further configured to obtain the actual content display layer code of the page from the server through the front-end plug-in; use the degraded rendering result as the rendering skeleton through the front-end plug-in, Based on the actual content of the page, the display layer code renders the page content related to the application logic in the rendering skeleton to obtain the rendering result of the web page.
  • Fig. 13 shows a block diagram of an apparatus for rendering a webpage provided by an exemplary embodiment of the present application.
  • the unit includes:
  • the running module 1302 is configured to run a server plug-in on the server side, the server plug-in is decoupled from the front-end plug-in running in the front-end application, and the server plug-in is used to provide a web page rendering function on the server side.
  • the rendering module 1304 is configured to render the web page source code of the web page requested by the front-end plug-in through the server plug-in to obtain a rendering result of the web page.
  • the feedback module 1306 is configured to feed back the rendering result of the web page to the front-end plug-in.
  • the running module is further configured to run a server plug-in corresponding to the first back-end framework on the server, and the first back-end framework is a backend used by the server end frame;
  • the service plug-ins corresponding to different back-end frameworks have the same operating logic and different adaptation designs.
  • the rendering module 1304 is further configured to receive the client request sent by the front-end plug-in through the server plug-in, and the client request carries application layer protocol information parameters; according to the application The layer protocol information parameter determines the rendering mode of the web page; based on the rendering mode, the web page source code of the web page is rendered to obtain a rendering result of the web page.
  • the feedback module 1306 is further configured to, when an error occurs when the server-side plug-in is running or when loading data, the server-side plug-in If the rendering fails, a degraded rendering result is obtained; the degraded rendering result is fed back to the front-end plug-in.
  • the web page source code of the web page includes a page layout layer code and a page actual content display layer code
  • the page layout layer code is a code that has nothing to do with application logic in the web page source code
  • the page actual content display layer code The code is the code related to the application logic in the webpage source code; the degraded rendering result is obtained by rendering the page layout layer code by the server plug-in.
  • Fig. 14 shows a schematic structural diagram of a computer device 1400 provided by an exemplary embodiment of the present application.
  • the computer device 1400 can be a portable mobile terminal, such as: smart phone, tablet computer, MP3 player (Moving Picture Experts Group Audio Layer III, moving picture expert compression standard audio layer 3), MP4 (Moving Picture Experts Group Audio Layer IV, Motion Picture Expert Compression Standard Audio Level 4) Player.
  • the computer device 1400 may also be called user equipment, portable terminal, and other names.
  • a computer device 1400 includes: a processor 1401 and a memory 1402 .
  • the processor 1401 may include one or more processing cores, such as a 4-core processor, an 8-core processor, and the like.
  • Processor 1401 can be realized by at least one hardware form in DSP (Digital Signal Processing, digital signal processing), FPGA (Field Programmable Gate Array, field programmable gate array), PLA (Programmable Logic Array, programmable logic array) .
  • the processor 1401 can also include a main processor and a coprocessor, the main processor is a processor for processing data in the wake-up state, also called CPU (Central Processing Unit, central processing unit); the coprocessor is Low-power processor for processing data in standby state.
  • the processor 1401 may be integrated with a GPU (Graphics Processing Unit, image processor), and the GPU is used for rendering and drawing the content that needs to be displayed on the display screen.
  • the processor 1401 may also include an AI (Artificial Intelligence, artificial intelligence) processor, where the AI processor is used to process computing operations related to machine learning.
  • AI Artificial Intelligence, artificial intelligence
  • Memory 1402 may include one or more computer-readable storage media, which may be tangible and non-transitory.
  • the memory 1402 may also include high-speed random access memory, and non-volatile memory, such as one or more magnetic disk storage devices and flash memory storage devices.
  • non-transitory computer-readable storage medium in the memory 1402 is used to store at least one instruction, and the at least one instruction is used to be executed by the processor 1401 to implement the web page provided in the embodiment of the present application. rendering method.
  • the computer device 1400 may optionally further include: a peripheral device interface 1403 and at least one peripheral device.
  • a peripheral device interface 1403 and at least one peripheral device.
  • Fig. 15 shows a schematic structural diagram of a computer device provided by an exemplary embodiment of the present application.
  • the computer device may be the server 120 in the embodiment of FIG. 1 .
  • the computer device 1500 includes a central processing unit (Central Processing Unit, CPU) 1501, a system memory including a random access memory (Random Access Memory, RAM) 1502 and a read only memory (Read Only Memory, ROM) 1503 1504, and a system bus 1505 connecting the system memory 1504 and the central processing unit 1501.
  • CPU Central Processing Unit
  • RAM random access memory
  • ROM Read Only Memory
  • the computer device 1500 also includes a basic input/output system (Iuput/Output System, I/O system) 1506 that helps to transmit information between various devices in the computer, and is used to store an operating system 1513, an application program 1514 and other programs
  • I/O system input/output System
  • the basic input/output system 1506 includes a display 1508 for displaying information and input devices 1509 such as a mouse and a keyboard for users to input information. Both the display 1508 and the input device 1509 are connected to the central processing unit 1501 through the input and output controller 1510 connected to the system bus 1505 .
  • the basic input/output system 1506 may also include an input-output controller 1510 for receiving and processing input from keyboards, mice, or electronic stylus and other devices. Similarly, input output controller 1510 also provides output to a display screen, printer, or other type of output device.
  • the mass storage device 1507 is connected to the central processing unit 1501 through a mass storage controller (not shown) connected to the system bus 1505 .
  • the mass storage device 1507 and its associated computer-readable storage media provide non-volatile storage for the computer device 1500 . That is, the mass storage device 1507 may include a computer-readable storage medium (not shown) such as a hard disk or a CD-ROM drive.
  • the computer-readable storage media may include computer storage media and communication media.
  • Computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data.
  • Computer storage media include RAM, ROM, programmable erasable read-only memory (Erasable Programmable Read Only Memory, EPROM), electrically erasable programmable read-only memory (Electrically Erasable Programmable Read-Only Memory, EEPROM), flash memory or other Solid state storage is its technology, CD-ROM, DVD or other optical storage, tape cartridge, magnetic tape, magnetic disk storage or other magnetic storage devices.
  • the computer storage medium is not limited to the above-mentioned ones.
  • the above-mentioned system memory 1504 and mass storage device 1507 may be collectively referred to as memory.
  • One or more programs are stored in the memory, and the one or more programs are configured to be executed by one or more central processing units 1501, and the one or more programs include instructions for implementing the virtual object scheduling method in the above virtual environment,
  • the central processing unit 1501 executes the one or more programs to implement the web page rendering methods provided by the above method embodiments.
  • the computer device 1500 can also run on a remote computer connected to the network through a network such as the Internet. That is, the computer device 1500 can be connected to the network 1512 through the network interface unit 1511 connected to the system bus 1505, or in other words, the network interface unit 1511 can also be used to connect to other types of networks or remote computer systems (not shown ).
  • the memory also includes one or more programs, the one or more programs are stored in the memory, and the one or more programs are included in the method for rendering the web page provided in the embodiment of the application by the server steps performed.
  • the embodiment of the present application also provides a computer device, the computer device includes: a processor and a memory, at least one computer program is stored in the memory, and at least one computer program is loaded and executed by the processor to realize the web pages provided by the above method embodiments The rendering method of the page.
  • the embodiment of the present application also provides a computer storage medium, at least one computer program is stored in the computer-readable storage medium, and at least one computer program is loaded and executed by a processor to implement the web page rendering method provided by the above method embodiments .
  • the embodiment of the present application also provides a computer program product, the computer program product includes computer instructions, the computer instructions are stored in a computer-readable storage medium; the computer instructions are readable by a processor of a computer device from the computer The storage medium reads and executes, so that the computer device executes the method for rendering a webpage provided by each method embodiment above.

Landscapes

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

Abstract

一种网页页面的渲染方法、装置、设备及存储介质，属于网页开发技术领域。所述方法包括：在前端应用中运行前端插件，前端插件与服务器中运行的服务端插件解耦合(202)；响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染(204)；通过前端插件接收服务端插件反馈的网页页面的渲染结果(206)。该方法通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，从而使得插入前端插件的前端框架可根据前端插件的不同适用于多种前端框架场景。

Description

网页页面的渲染方法、装置、设备及存储介质
本申请要求于2022年01月25日提交的申请号为202210090105.5、发明名称为“网页页面的渲染方法、装置、设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及网页开发技术领域，特别涉及一种网页页面的渲染方法、装置、设备及存储介质。
背景技术
常用的网页页面渲染方法主要包括服务端渲染(Server Side Render，SSR)和客户端渲染(Client Side Render，CSR)。SSR的原理是将超文本标记语言(Hyper Text Markup Language，HTML)页面及其相应的动态数据在服务端进行组装，然后直接将完整的页面(渲染结果)呈现在客户端。CSR的原理是HTML页面及动态数据的组装发生在客户端。
相关技术中，通过兼容服务端渲染及客户端渲染，基于前端框架的服务端渲染框架方式实现了节省服务端资源、服务端渲染首屏加载快，搜索引擎优化(Search Engine Optimization，SEO)等效果。
但在上述方案中，服务端渲染框架仅能够支持单一的前端框架，即，服务端渲染框架与前端框架一一对应，该服务端渲染框架仅适用于单一的前端框架场景。
发明内容
本申请提供了一种网页页面的渲染方法、装置、设备及存储介质。所述技术方案如下：
根据本申请的一方面，提供了一种网页页面的渲染方法，所述方法由终端执行，所述方法包括：
在前端应用中运行前端插件，所述前端插件与服务器中运行的服务端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染；
通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果。
根据本申请的一方面，提供了一种网页页面的渲染方法，所述方法由服务器执行，所述方法包括：
在服务端运行服务端插件，所述服务端插件与前端应用中运行的前端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染得到所述网页页面的渲染结果；
向所述前端插件反馈所述网页页面的渲染结果。
根据本申请的一方面，提供了一种网页页面的渲染装置，所述装置包括：
运行模块，用于在前端应用中运行前端插件，所述前端插件与服务器中运行的服务端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
渲染模块，用于响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染；
接收模块，用于通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果。
根据本申请的一方面，所述运行模块，还用于在所述前端应用中运行与第一前端框架对应的前端插件，所述第一前端框架是所述前端应用使用的前端框架；
其中，不同的所述前端框架对应的所述前端插件具有相同的运行逻辑和不同的适配设计。
根据本申请的一方面，所述渲染模块，包括：
发送单元，用于响应于所述网页页面的打开操作，通过所述前端插件向所述服务端插件发送客户端请求，所述客户端请求携带有应用层协议信息参数；
其中，所述客户端请求用于请求所述服务端插件对所述网页页面的网页源代码进行渲染，所述应用层协议信息参数用于指示所述服务端插件确定所述网页页面的渲染模式。
根据本申请的一方面，所述接收模块，还用于通过所述前端插件接收所述服务端插件反馈的降级渲染结果，所述降级渲染结果是所述服务端插件对所述网页页面的网页源代码渲染失败时得到的渲染结果。
根据本申请的一方面，所述渲染模块，包括：
渲染单元，用于通过所述前端插件基于所述降级渲染结果进行客户端渲染，得到所述网页页面的渲染结果。
其中，所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码；
所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染得到的渲染结果。
根据本申请的一方面，所述渲染模块，还包括：
获取单元，用于通过所述前端插件向所述服务器获取所述页面实际内容展示层代码。
所述渲染单元，还用于通过所述前端插件以所述降级渲染结果为渲染骨架，基于所述页面实际内容展示层代码在所述渲染骨架中渲染与所述应用逻辑有关的页面内容，得到所述网页页面的渲染结果。
根据本申请的一方面，提供了一种网页页面的渲染装置，所述装置包括：
运行模块，用于在服务端运行服务端插件，所述服务端插件与前端应用中运行的前端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
渲染模块，用于通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染得到所述网页页面的渲染结果；
反馈模块，用于向所述前端插件反馈所述网页页面的渲染结果。
根据本申请的一方面，所述运行模块，还用于在所述服务端运行与所述第一后端框架对应的服务端插件，所述第一后端框架是所述服务端使用的后端框架；
其中，不同的所述后端框架对应的所述服务插件具有相同的运行逻辑和不同的适配设计。
根据本申请的一方面，所述渲染模块，包括：
接收单元，用于通过所述服务端插件接收所述前端插件发送的客户端请求，所述客户端请求携带有应用层协议信息参数；
确定单元，用于根据所述应用层协议信息参数确定所述网页页面的渲染模式；
渲染单元，用于基于所述渲染模式对所述网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果。
根据本申请的一方面，在所述服务端插件运行时或加载数据时出现错误的情况下，所述服务端插件对所述网页页面的所述网页源代码渲染失败得到降级渲染结果；
所述反馈模块，用于向所述前端插件反馈所述降级渲染结果。
根据本申请的一方面，所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码；
所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染的得到的。
根据本申请的另一方面，提供了一种计算机设备，该计算机设备包括：处理器和存储器，存储器中存储有至少一条计算机程序，至少一条计算机程序由处理器加载并执行以实现如上方面所述的网页页面的渲染方法。
根据本申请的另一方面，提供了一种计算机存储介质，计算机可读存储介质中存储有至少一条计算机程序，至少一条计算机程序由处理器加载并执行以实现如上方面所述的网页页面的渲染方法。
根据本申请的另一方面，提供了一种计算机程序产品，上述计算机程序产品包括计算机指令，所述计算机指令存储在计算机可读存储介质中；所述计算机指令由计算机设备的处理器从所述计算机可读存储介质读取并执行，使得所述计算机设备执行如上方面所述的网页页面的渲染方法。
本申请提供的技术方案带来的有益效果至少包括：
在前端应用中运行前端插件；响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染；通过前端插件接收服务端插件反馈的网页页面的渲染结果。本申请实施例提供的技术方案，通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，从而使得插入前端插件的前端框架可以根据前端插件的不同适用于多种前端框架场景。
也即，解决了相关技术中前端框架与服务端框架一一对应的问题，本申请提供的前端插件与服务端插件是相互解耦的。假设前端框架1发生了更换，更换后终端将使用前端框架2以及与前端框架2对应的前端插件2，而服务端无需更改原先使用的服务端插件。也即，实现了一个服务端插件与多个前端插件相对应，一个服务端框架同时对应多个前端框架。
附图说明
图1是本申请一个示例性实施例提供的网页页面的渲染系统的系统构成示意图；
图2是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图3是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图4是本申请一个示例性实施例提供的前端插件的适配设计示意图；
图5是本申请一个示例性实施例提供的包含前端插件和服务端插件的整体结构框架示意图；
图6是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图7是本申请一个示例性实施例提供的渲染模式降级流程框架示意图；
图8是本申请一个示例性实施例提供的渲染模式降级流程框架示意图；
图9是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图10是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图11是本申请一个示例性实施例提供的网页页面的渲染方法的流程图；
图12是本申请一个示例性实施例提供的网页页面的渲染装置的框图；
图13是本申请一个示例性实施例提供的网页页面的渲染装置的框图；
图14是本申请一个示例性实施例提供的计算机设备的结构示意图；
图15是本申请一个示例性实施例提供的计算机设备的结构示意图。
具体实施方式
请参考图1，其示出了本申请各个实施例涉及的一种网页页面的渲染系统的系统构成示意图。如图1所示，该系统包括服务器120、数据库140以及若干个客户端160。
服务器120是一台服务器，或者由若干台服务器，或者是一个虚拟化平台，或者是一个云计算服务中心。
服务器120可以由一个或多个功能单元组成。可选的，如图1所示，服务器120可以包括：权限管理单元120a、页面数据管理单元120b等等。
其中，权限管理单元120a用于生成、更新和维护各个用户账号对应的权限，并向各个 客户端160提供该客户端160在当前登录状态下所具有的权限等信息。
页面数据管理单元120b用于管理开发人员开发的页面中的页面数据，接受客户端160的请求，并将客户端160请求的页面数据发送给客户端160，以便客户端160进行展示。
上述数据库140可以是Redis数据库，或者，也可以是其它类型数据库。其中，数据库140用于存储各类数据，比如，各个用户账号、各个用户账号所具有的权限、以及各个页面的页面数据等等。
客户端160可以是具有网络连接功能以及页面展示功能的终端设备，比如，客户端160可以是手机、平板电脑、电子书阅读器、智能眼镜、智能手表、以及车载终端等等。
比如，客户端160中可以安装有浏览器或者其它网络(Web)应用(比如Web客户端等)。
客户端160与服务器120之间通过通信网络相连。可选的，该通信网络是有线网络或无线网络。
可选的，该系统还可以包括管理设备(图1未示出)，该管理设备与服务器120之间通过通信网络相连。可选的，通信网络是有线网络或无线网络。
可选的，上述的无线网络或有线网络使用标准通信技术和/或协议。网络通常为因特网、但也可以是任何网络，包括但不限于局域网(Local Area Network，LAN)、城域网(Metropolitan Area Network，MAN)、广域网(Wide Area Network，WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合。在一些实施例中，使用包括超文本标记语言(Hyper Text Mark-up Language，HTML)、可扩展标记语言(Extensible Markup Language，XML)等的技术和/或格式来代表通过网络交换的数据。此外还可以使用诸如安全套接字层(Secure Socket Layer，SSL)、传输层安全(Transport Layer Security，TLS)、虚拟专用网络(Virtual Private Network，VPN)、网际协议安全(Internet Protocol Security，IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中，还可以使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。
图2是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的客户端160。该方法包括：
步骤202：在前端应用中运行前端插件，前端插件与服务器中运行的服务端插件解耦合。
前端是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。
前端插件是指具有自定义指令功能的插件，用于提供位于客户端的网页渲染功能，服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
页面对象是指网页页面中可以由前端插件单独进行控制的，各种粒度的对象，比如，在一个页面中，该页面本身可以作为一个页面对象，该页面中包含的每个页面组件也可以单独作为一个页面对象，每个页面组件中包含的页面元素也可以单独作为一个页面对象。
在本申请实施例中，页面对象可以是当前页面本身，或者，页面对象可以是当前页面中的某个页面组件，或者，上述页面对象也可以是当前页面中某个页面组件中的元素。
其中，上述页面组件是对一个或者多个元素进行封装的容器。比如，该页面组件可以是页面中的一个输入框或者下拉框等。可选的，当上述页面是网页时，页面组件也可以成为网页组件或者Web组件。
解耦合，指前端插件的类型与服务端插件的类型无关。前端插件与服务端插件可以实现任意组合。示意性的，前端插件为万维网开发框架React插件、渐进式前端框架Vue2.0插 件、渐进式前端框架Vue3.0插件中的任意一个；服务端插件为NestJS开发框架插件、Midway开发框架插件中的任意一个。前端插件与服务端插件之间的解耦关系，使得本申请提供的网页页面的渲染方法足以覆盖所有的开发场景。
步骤204：响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染。
网页源代码是指用特定编程语言编写的人类可读文本，可以将网页页面上的元素(图片，视频，音乐，文字等)表示为一种标准语言。
示例性地，客户端响应于网页页面的打开操作，客户端向服务端请求页面资源，即，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染。
步骤206：通过前端插件接收服务端插件反馈的网页页面的渲染结果。
在客户端在向服务端发送网址请求页面资源后，服务端中的服务端插件获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染完成后，服务端将该网页页面的渲染结果反馈到客户端，客户端通过前端插件接收服务端插件反馈的网页页面的渲染结果。
综上所述，本实施例提供的方法，在前端应用中运行前端插件，响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染，通过前端插件接收服务端插件反馈的网页页面的渲染结果。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，前端插件通过接收服务端插件反馈的网页页面的渲染结果完成网页页面的渲染，插入前端插件的前端框架可以根据前端插件的不同适用于多种前端框架场景。
图3是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的客户端160。该方法包括：
步骤302：在前端应用中运行与第一前端框架对应的前端插件，第一前端框架是前端应用使用的前端框架。
前端是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。
前端插件是指具有自定义指令功能的插件，用于提供位于客户端的网页渲染功能，服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
前端框架是指具有自定义指令功能的前端框架，比如，万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0等等，这些框架封装了一些基本的功能，比如超HTML文档操作以及各种控件(按钮，表单等等)。
示例性地，在前端应用中运行与前端应用使用的前端框架对应的前端插件。不同的前端框架对应的前端插件具有相同的运行逻辑和不同的适配设计。即，通过更换不同的插件，可使得网页页面的渲染过程适用于多种前端框架场景。
可选地，不同的前端框架包括万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0中的至少两种。
示例性地，如图4所示的前端插件的适配设计示意图，前端插件401的适配设计包括自身的构建逻辑402、启动逻辑405、插件依赖逻辑408、配置化能力410及运行逻辑412，但不限于此，本申请实施例对此不作限定。
例如，前端插件401的构建逻辑402是指基于静态模块打包模块Webpack 403对源代码或获取的数据进行打包分类，同时，基于静态模块打包模块Webpack 403的热更新逻辑404可实现对网页页面的局部进行渲染，同时保留当前的页面状态，比如复选框的选中状态、输入框的输入等。
例如，前端插件401的启动逻辑405是指在启动运行前端插件401时，对前端插件401进行路由初始化406及数据管理模型初始化407，路由初始化406是指初始化网页页面中的页面对象与网页源代码之间的对应关系；数据管理模型初始化407又称为store初始化，是指在前端插件401启动时对前端插件401中的数据模型进行初始化。数据管理模型用于管理前端组件中的所有数据，并对前端组件中的所有数据进行操作、修改。
例如，前端插件401的插件依赖408是指当前前端插件401在当前框架场景中需要用到的依赖条件无需外加配置409，即前端插件401中包括了当前前端插件401在当前框架场景中运行所需的依赖条件，不需要额外配置。
例如，前端插件401的配置化能力410是指前端插件401能够处理、合并用户的配置411，通过合并不同用户的个性化配置，使得前端插件可以适配于不同的应用场景。
例如，前端插件401的运行逻辑412是指能够实现数据预取413，即，通过预先获取渲染所需的数据，在对网页页面进行渲染后，将页面返回至客户端。
示例性地，如图5所示的包含前端插件和服务端插件的整体结构框架示意图。在命令执行界面501上显示有插件所有的功能接口，通过开始502操作可对服务端插件和/或前端插件进行编辑操作，在对服务端插件和/或前端插件进行编辑操作后，通过点击构建503即可完成操作，并进行发布。
前端框架是指具有自定义指令功能的前端框架，比如，可插入的前端框架对应的前端插件包括万维网开发框架React插件507、渐进式前端框架Vue2.0插件508、渐进式前端框架Vue3.0插件509中的任意一个，但不限于此，本申请实施例对此不作限定。
可选地，前端框架的入口逻辑510包括前端插件的运行逻辑和启动逻辑，运行逻辑和启动逻辑的具体描述参见图4中的描述，前端插件的框架配置化能力511具体描述参见图4中的描述，本处不再赘述。
可选地，前端框架支持打包模块工具Webpack 512和前端构建工具vite 513，但不限于此，本申请实施例对此不作限定。
后端框架是指具有自定义指令功能的后端框架，比如，可插入的后端框架对应的服务端插件包括NestJS开发框架插件504、Midway开发框架插件505等等，但不限于此，在服务端插件中内置代理服务器506，无需额外设置代理服务器，从而可以直接执行服务端插件中所需要的全部功能。
步骤304：响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染。
网页源代码是指用特定编程语言编写的人类可读文本，可以将网页页面上的元素(图片，视频，音乐，文字等)表示为一种标准语言。
示例性地，客户端响应于网页页面的打开操作，客户端通过前端插件向服务端插件发送客户端请求，客户端请求携带有应用层协议信息参数。
其中，客户端请求用于请求服务端插件对网页页面的网页源代码进行渲染，应用层协议信息参数用于指示服务端插件确定网页页面的渲染模式。
可选地，渲染模式包括服务端渲染模式和客户端渲染模式，服务端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于服务端；客户端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于客户端。
可选地，应用层协议信息参数是指客户端请求中携带的且能够决定渲染模式的参数，应用层协议信息参数包括请求查询参数query，请求头header及请求头信息cookie中的至少一种，但不限于此，本申请实施例对此不作限定。
例如，以客户端中请求中的应用层协议信息参数为请求头header为例，请求头header的信息形式为request.headers['csr']，服务端插件通过读取到的请求头header的信息，确定网页页面的渲染模式，比如，在csr＝1的情况下，网页页面的渲染模式为服务端渲染，在csr≠1 的情况下，网页页面的渲染模式为客户端渲染，但不限于此，本申请实施例对网页页面的渲染模式的确定过程不作具体限定。
步骤306：通过前端插件接收服务端插件反馈的网页页面的渲染结果。
在客户端在向服务端发送网址(Uniform Resource Locator，URL)请求页面资源后，服务端中的服务端插件根据URL获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染完成后，服务端将该网页页面的渲染结果反馈到客户端，客户端通过前端插件接收服务端插件反馈的网页页面的渲染结果。
综上所述，本实施例提供的方法，在前端应用中运行前端插件，响应于网页页面的打开操作，通过前端插件向服务端插件发送的客户端请求中的应用层协议信息参数确定网页页面的渲染模式，通过前端插件接收服务端插件反馈的网页页面的渲染结果。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的渲染过程，前端插件通过接收服务端插件反馈的网页页面的渲染结果完成网页页面的渲染，插入前端插件的前端框架可以根据前端插件的不同适用于多种前端框架场景。
图6是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的客户端160。该方法包括：
步骤602：在前端应用中运行前端插件，前端插件与服务器中运行的服务端插件解耦合。
前端是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。
前端插件是指具有自定义指令功能的插件，用于提供位于客户端的网页渲染功能；服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
前端框架是指具有自定义指令功能的前端框架，比如，万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0等等，这些框架封装了一些基本的功能，比如HTML文档操作以及各种控件(按钮，表单等等)。
示例性地，在前端应用中运行与前端应用使用的前端框架对应的前端插件。不同的前端框架对应的前端插件具有相同的运行逻辑和不同的适配设计。即，通过更换不同的插件，可使得网页页面的渲染过程适用于多种前端框架场景。
可选地，不同的所述前端框架包括万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0中的至少两种。
解耦合，指前端插件的类型与服务端插件的类型无关。前端插件与服务端插件可以实现任意组合。示意性的，前端插件为万维网开发框架React插件、渐进式前端框架Vue2.0插件、渐进式前端框架Vue3.0插件中的任意一个；服务端插件为NestJS开发框架插件、Midway开发框架插件中的任意一个。前端插件与服务端插件之间的解耦关系，使得本申请提供的网页页面的渲染方法足以覆盖所有的开发场景。
步骤604：响应于网页页面的打开操作，通过前端插件请求服务端插件对网页页面的网页源代码进行渲染。
示例性地，客户端响应于网页页面的打开操作，通过前端插件向服务端插件发送客户端请求，客户端请求携带有应用层协议信息参数。
其中，客户端请求用于请求服务端插件对网页页面的网页源代码进行渲染，应用层协议信息参数用于指示服务端插件确定网页页面的渲染模式。
可选地，渲染模式包括服务端渲染模式和客户端渲染模式，服务端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于服务端；客户端渲染模式是指对网页页面的网 页源代码进行渲染的过程主要发生于客户端。
步骤606：通过前端插件接收服务端插件反馈的降级渲染结果。
网页页面的网页源代码包括页面布局层代码(即Layout层代码)和页面实际内容展示层代码(即Children层代码)，页面布局层代码是网页源代码中与应用逻辑无关的代码，页面实际内容展示层代码是网页源代码中与应用逻辑有关的代码。
降级渲染结果是指在服务端插件渲染失败的情况下，服务端插件对页面布局层代码进行渲染得到的渲染结果。
例如，页面布局层代码包括页面的标题信息代码、页面标题的页面描述代码、页面的静态资源文件地址生成逻辑代码之中的至少一种，但不限于此，本申请实施例对此不作限定。
在客户端在向服务端发送网址请求页面资源后，服务端中的服务端插件根据URL获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染失败后，服务端将该网页页面的降级渲染结果反馈到客户端，客户端通过前端插件接收服务端插件反馈的网页页面的降级渲染结果，即，客户端通过前端插件接收服务端插件反馈的服务端插件对页面布局层代码进行渲染得到的渲染结果。
如图7所示出的渲染模式降级流程框架示意图，客户端通过前端插件向服务端插件发送客户端请求701，客户端请求701携带有应用层协议信息参数，根据应用层协议信息参数确定网页页面的渲染模式，在网页页面的渲染模式为服务端渲染模式702的情况下，服务端插件获取页面布局层代码，并对页面布局层代码进行渲染703，之后，服务端插件获取页面实际内容展示层代码，并对页面实际内容展示层代码进行渲染704，即渲染与应用逻辑有关的页面内容，最终得到网页页面的渲染结果。
在服务端插件对页面实际内容展示层代码渲染失败的情况下，即在所述服务端插件运行时或加载数据时出现错误的情况下，网页页面的渲染模式由服务端渲染模式702降级为客户端渲染模式705，服务端将服务端插件对页面布局层代码进行渲染的渲染结果作为降级渲染结果，前端插件对降级渲染结果做进一步的渲染工作，即客户端在服务端渲染页面布局层代码706的基础上作进一步渲染。
步骤608：通过前端插件基于降级渲染结果进行客户端渲染，得到网页页面的渲染结果。
示例性地，客户端通过前端插件向服务器获取页面实际内容展示层代码。客户端通过前端插件以降级渲染结果为渲染骨架，基于页面实际内容展示层代码在渲染骨架中渲染与应用逻辑有关的页面内容，得到网页页面的渲染结果。
如图8所示出的渲染模式降级流程框架示意图，以浏览器为例，客户端通过响应浏览器上网页页面的打开操作，客户端通过前端插件向服务端插件发送客户端请求801，客户端请求801携带有应用层协议信息参数，根据应用层协议信息参数确定网页页面的渲染模式，在网页页面的渲染模式为服务端渲染模式802的情况下，服务端获取数据803，即服务端插件获取页面布局层代码及页面实际内容展示层代码，并对网页页面中的页面组件进行渲染804，即对页面布局层代码及页面实际内容展示层代码进行渲染得到网页页面的渲染结果，并将网页页面的渲染结果发送至客户端中的浏览器，浏览器激活文档对象模型DOM 805，使得浏览器响应于浏览器上网页页面的打开操作，并进行路由切换，即跳转网页页面，从而客户端获取数据806，即客户端将获取的渲染结果展现于浏览器的网页页面。文档对象模型DOM是指将网页页面中的页面对象及页面对象之间的关系构成的树状结构模型。
在服务端插件对页面实际内容展示层代码进行渲染时出现错误的情况下，即在所述服务端插件运行时或加载数据时出现错误，服务端插件对网页页面的网页源代码渲染失败的情况下，网页页面的渲染模式由服务端渲染模式802降级为客户端渲染模式807，服务端将服务端插件对页面布局层代码进行渲染的渲染结果作为降级渲染结果，前端插件对降级渲染结果做进一步的渲染808。客户端通过前端插件以降级渲染结果为渲染骨架，客户端获取数据 809，即客户端通过前端插件向服务器获取页面实际内容展示层代码，基于页面实际内容展示层代码在渲染骨架中渲染与应用逻辑有关的页面内容，即客户端对网页页面中的页面组件进行渲染810，并进行路由切换，即跳转网页页面，从而客户端获取数据811，使得客户端将渲染结果展现于浏览器的网页页面。
综上所述，本实施例提供的方法，在前端应用中运行前端插件，响应于网页页面的打开操作，通过前端插件向服务端插件发送的客户端请求中的应用层协议信息参数确定网页页面的渲染模式，在服务端插件对网页页面的网页源代码渲染失败时，渲染模式由服务端渲染模式降级为客户端渲染模式，前端插件基于降级渲染结果进行客户端渲染，最终得到网页页面的渲染结果。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，同时实现了在服务端渲染失败的情况下，能够迅速切换渲染模式，保证了网页页面渲染工作的正常进行。
图9是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的服务器120。该方法包括：
步骤902：在服务端运行服务端插件，服务端插件与前端应用中运行的前端插件解耦合。
前端是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。
前端插件是指具有自定义指令功能的插件，用于提供位于客户端的网页渲染功能，服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
页面对象是指网页页面中可以由前端插件单独进行控制的，各种粒度的对象，比如，在一个页面中，该页面本身可以作为一个页面对象，该页面中包含的每个页面组件也可以单独作为一个页面对象，每个页面组件中包含的页面元素也可以单独作为一个页面对象。
在本申请实施例中，页面对象可以是当前页面本身，或者，页面对象可以是当前页面中的某个页面组件，或者，上述页面对象也可以是当前页面中某个页面组件中的元素。
其中，上述页面组件是对一个或者多个元素进行封装的容器。比如，该页面组件可以是页面中的一个输入框或者下拉框等。可选的，当上述页面是网页时，页面组件也可以成为网页组件或者Web组件。
解耦合，指前端插件的类型与服务端插件的类型无关。前端插件与服务端插件可以实现任意组合。示意性的，前端插件为万维网开发框架React插件、渐进式前端框架Vue2.0插件、渐进式前端框架Vue3.0插件中的任意一个；服务端插件为NestJS开发框架插件、Midway开发框架插件中的任意一个。前端插件与服务端插件之间的解耦关系，使得本申请提供的网页页面的渲染方法足以覆盖所有的开发场景。
步骤904：通过服务端插件对前端插件请求的网页页面的网页源代码进行渲染得到网页页面的渲染结果。
网页源代码是指用特定编程语言编写的人类可读文本，可以将网页页面上的元素(图片，视频，音乐，文字等)表示为一种标准语言。
示例性地，客户端向服务端请求页面资源，服务端插件获取前端插件请求的网页页面的网页源代码，服务端插件对网页页面的网页源代码进行渲染，并得到该网页页面的渲染结果。
步骤906：向前端插件反馈网页页面的渲染结果。
服务端中的服务端插件获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染完成后，服务端将该网页页面的渲染结果反馈到客户端，客户端通过前端插件接 收服务端插件反馈的网页页面的渲染结果。
综上所述，本实施例提供的方法，在服务端运行服务端插件，通过服务端插件对前端插件请求的网页页面的网页源代码进行渲染得到网页页面的渲染结果；并向前端插件反馈网页页面的渲染结果。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，服务端插件对前端插件请求的网页页面的网页源代码进行渲染，插入服务端插件的后端框架使得服务端渲染可以根据插件的不同应用于多种渲染场景。
图10是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的服务器120。该方法包括：
步骤1002：在服务端运行与第一后端框架对应的服务端插件，第一后端框架是服务端使用的后端框架。
第一后端框架是服务端使用的后端框架。不同的后端框架对应的服务插件具有相同的运行逻辑和不同的适配设计。
服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
后端框架是指具有自定义指令功能的后端框架，比如，NestJS开发框架、Midway开发框架等等，这些框架封装了一些基本的功能。
步骤1004：通过服务端插件对前端插件请求的网页页面的网页源代码进行渲染得到网页页面的渲染结果。
网页源代码是指用特定编程语言编写的人类可读文本，可以将网页页面上的元素(图片，视频，音乐，文字等)表示为一种标准语言。
示例性地，服务端通过服务端插件接收前端插件发送的客户端请求，客户端请求携带有应用层协议信息参数。
服务端插件根据应用层协议信息参数确定网页页面的渲染模式。
服务端插件基于渲染模式对网页页面的网页源代码进行渲染，得到网页页面的渲染结果。
其中，客户端请求用于请求服务端插件对网页页面的网页源代码进行渲染，应用层协议信息参数用于指示服务端插件确定网页页面的渲染模式。
可选地，渲染模式包括服务端渲染模式和客户端渲染模式，服务端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于服务端；客户端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于客户端。
可选地，应用层协议信息参数是指客户端请求中携带的且能够决定渲染模式的参数，应用层协议信息参数包括请求查询参数query，请求头header及请求头信息cookie中的至少一种，但不限于此，本申请实施例对此不作限定。
步骤1006：向前端插件反馈网页页面的渲染结果。
服务端中的服务端插件获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染完成后，服务端将该网页页面的渲染结果反馈到客户端。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
综上所述，本实施例提供的方法，在服务端运行服务端插件，通过服务端插件接收前端插件发送的客户端请求，根据接收到的客户端请求中的应用层协议信息参数确定网页页面的渲染模式，基于渲染模式度对网页页面的网页源代码进行渲染，得到网页页面的渲染结果，并将网页页面的渲染结果反馈到客户端。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的服务端渲染过程，服务端插件对前端插件请求的网页页面的网页源代码进行渲染，插入服务端插件的后端框架使得服务端渲染可以根据插件的不同应用于多种 渲染场景。
图11是本申请一个示例性实施例提供的网页页面的渲染方法的流程图。该方法可以应用于计算机设备中，以实现网页页面的渲染。其中，上述计算机设备可以是图1所示系统中的服务器120。该方法包括：
步骤1102：在服务端运行服务端插件，服务端插件与前端应用中运行的前端插件解耦合。
前端是指网站的前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页。
前端插件是指具有自定义指令功能的插件，用于提供位于客户端的网页渲染功能；服务端插件是指具有自定义指令功能的插件，用于提供位于服务端的网页渲染功能。前端插件和服务端插件共同完成了渲染网页页面的完整过程。
网页渲染是指将网页页面中的页面对象对应的源代码转化为可视的图像的过程。
前端框架是指具有自定义指令功能的前端框架，比如，万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0等等，这些框架封装了一些基本的功能，比如超HTML文档操作以及各种控件(按钮，表单等等)。
后端框架是指具有自定义指令功能的后端框架，比如，NestJS开发框架、Midway开发框架等等，这些框架封装了一些基本的功能。
示例性地，在前端应用中运行与前端应用使用的前端框架对应的前端插件。不同的前端框架对应的前端插件具有相同的运行逻辑和不同的适配设计。即，通过更换不同的插件，可使得网页页面的渲染过程适用于多种前端框架场景。
可选地，不同的所述前端框架包括万维网开发框架React、渐进式前端框架Vue2.0、渐进式前端框架Vue3.0中的至少两种。
解耦合，指前端插件的类型与服务端插件的类型无关。前端插件与服务端插件可以实现任意组合。示意性的，前端插件为万维网开发框架React插件、渐进式前端框架Vue2.0插件、渐进式前端框架Vue3.0插件中的任意一个；服务端插件为NestJS开发框架插件、Midway开发框架插件中的任意一个。前端插件与服务端插件之间的解耦关系，使得本申请提供的网页页面的渲染方法足以覆盖所有的开发场景。
步骤1104：通过服务端插件对前端插件请求的网页页面的网页源代码进行渲染得到网页页面的渲染结果。
网页源代码是指用特定编程语言编写的人类可读文本，可以将网页页面上的元素(图片，视频，音乐，文字等)表示为一种标准语言。
示例性地，服务端通过服务端插件接收前端插件发送的客户端请求，客户端请求携带有应用层协议信息参数。
服务端插件根据应用层协议信息参数确定网页页面的渲染模式。
服务端插件基于渲染模式对网页页面的网页源代码进行渲染，得到网页页面的渲染结果。
其中，客户端请求用于请求服务端插件对网页页面的网页源代码进行渲染，应用层协议信息参数用于指示服务端插件确定网页页面的渲染模式。
可选地，渲染模式包括服务端渲染模式和客户端渲染模式，服务端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于服务端；客户端渲染模式是指对网页页面的网页源代码进行渲染的过程主要发生于客户端。
步骤1106：在服务端插件运行时或加载数据时出现错误的情况下，服务端插件对网页页面的网页源代码渲染失败得到降级渲染结果。
网页页面的网页源代码包括页面布局层代码(即Layout层代码)和页面实际内容展示层代码(即Children层代码)，页面布局层代码是网页源代码中与应用逻辑无关的代码，页 面实际内容展示层代码是网页源代码中与应用逻辑有关的代码。
降级渲染结果是指在服务端插件渲染失败的情况下，服务端插件对页面布局层代码进行渲染得到的渲染结果。
例如，页面布局层代码包括页面的标题信息代码、页面标题的页面描述代码、页面的静态资源文件地址生成逻辑代码这中的至少一种，但不限于此，本申请实施例对此不作限定。
服务端中的服务端插件在获取客户端向服务端发送的客户端请求后，服务端中的服务端插件获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染失败后，服务端将当前对页面布局层代码进行渲染得到的渲染结果作为降级渲染结果。
步骤1108：向前端插件反馈降级渲染结果。
示例性地，服务端中的服务端插件获取网页页面的网页源代码并对该网页页面的网页源代码进行渲染，在渲染失败后，服务端将该网页页面的降级渲染结果反馈到客户端。
综上所述，本实施例提供的方法，在服务端运行服务端插件，根据接收到的客户端请求中的应用层协议信息参数确定网页页面的渲染模式，在服务端插件对网页页面的网页源代码渲染失败时，渲染模式由服务端渲染模式降级为客户端渲染模式，并将该网页页面的降级渲染结果反馈到客户端做进一步渲染。本申请实施例通过在前端框架和后端框架中插入插件的形式实现网页页面的渲染过程，同时实现了在服务端渲染失败的情况下，能够迅速切换渲染模式，保证了网页页面渲染工作的正常进行。
图12示出了本申请一个示例性实施例提供的网页页面的渲染装置的框图。该装置包括：
运行模块1202，用于在前端应用中运行前端插件，所述前端插件与服务器中运行的服务端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能。
渲染模块1204，用于响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染。
接收模块1206，用于通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果。
在一种可能的实现方式中，运行模块1202，还用于在所述前端应用中运行与第一前端框架对应的前端插件，所述第一前端框架是所述前端应用使用的前端框架；其中，不同的所述前端框架对应的所述前端插件具有相同的运行逻辑和不同的适配设计。
在一种可能的实现方式中，渲染模块1204，还用于响应于所述网页页面的打开操作，通过所述前端插件向所述服务端插件发送客户端请求，所述客户端请求携带有应用层协议信息参数。
其中，所述客户端请求用于请求所述服务端插件对所述网页页面的网页源代码进行渲染，所述应用层协议信息参数用于指示所述服务端插件确定所述网页页面的渲染模式。
在一种可能的实现方式中，接收模块1206，还用于通过所述前端插件接收所述服务端插件反馈的降级渲染结果，所述降级渲染结果是所述服务端插件对所述网页页面的网页源代码渲染失败时得到的渲染结果。
在一种可能的实现方式中，渲染模块1204，还用于通过所述前端插件基于所述降级渲染结果进行客户端渲染，得到所述网页页面的渲染结果。
所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码。
所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染得到的渲染结果。
在一种可能的实现方式中，渲染模块1204，还用于通过所述前端插件向所述服务器获取所述页面实际内容展示层代码；通过所述前端插件以所述降级渲染结果为渲染骨架，基于 所述页面实际内容展示层代码在所述渲染骨架中渲染与应用逻辑有关的页面内容，得到所述网页页面的渲染结果。
图13示出了本申请一个示例性实施例提供的网页页面的渲染装置的框图。该装置包括：
运行模块1302，用于在服务端运行服务端插件，所述服务端插件与前端应用中运行的前端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能。
渲染模块1304，用于通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染得到所述网页页面的渲染结果。
反馈模块1306，用于向所述前端插件反馈所述网页页面的渲染结果。
在一种可能的实现方式中，运行模块，还用于在所述服务端运行与所述第一后端框架对应的服务端插件，所述第一后端框架是所述服务端使用的后端框架；
其中，不同的所述后端框架对应的所述服务插件具有相同的运行逻辑和不同的适配设计。
在一种可能的实现方式中，渲染模块1304，还用于通过所述服务端插件接收所述前端插件发送的客户端请求，所述客户端请求携带有应用层协议信息参数；根据所述应用层协议信息参数确定所述网页页面的渲染模式；基于所述渲染模式对所述网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果。
在一种可能的实现方式中，反馈模块1306，还用于在所述服务端插件运行时或加载数据时出现错误的情况下，所述服务端插件对所述网页页面的所述网页源代码渲染失败得到降级渲染结果；向所述前端插件反馈所述降级渲染结果。
其中，所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码；所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染的得到的。
图14示出了本申请一个示例性实施例提供的计算机设备1400的结构示意图。该计算机设备1400可以是便携式移动终端，比如：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器。计算机设备1400还可能被称为用户设备、便携式终端等其他名称。
通常，计算机设备1400包括有：处理器1401和存储器1402。
处理器1401可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1401可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1401也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1401可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1401还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。
存储器1402可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是有形的和非暂态的。存储器1402还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1402中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1401所执行以 实现本申请实施例中提供的网页页面的渲染方法。
在一些实施例中，计算机设备1400还可选包括有：外围设备接口1403和至少一个外围设备。本领域技术人员可以理解，图14中示出的结构并不构成对计算机设备1400的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。
图15示出了本申请一个示例性实施例提供的计算机设备的结构示意图。该计算机设备可以是图1实施例中的服务器120。具体来讲：所述计算机设备1500包括中央处理单元(Central Processing Unit，CPU)1501、包括随机存取存储器(Random Access Memory，RAM)1502和只读存储器(Read Only Memory，ROM)1503的系统存储器1504，以及连接系统存储器1504和中央处理单元1501的系统总线1505。所述计算机设备1500还包括帮助计算机内的各个器件之间传输信息的基本输入/输出系统(Iuput/Output System，I/O系统)1506，和用于存储操作系统1513、应用程序1514和其他程序模块1515的大容量存储设备1507。
所述基本输入/输出系统1506包括有用于显示信息的显示器1508和用于用户输入信息的诸如鼠标、键盘之类的输入设备1509。其中所述显示器1508和输入设备1509都通过连接到系统总线1505的输入输出控制器1510连接到中央处理单元1501。所述基本输入/输出系统1506还可以包括输入输出控制器1510以用于接收和处理来自键盘、鼠标、或电子触控笔等多个其他设备的输入。类似地，输入输出控制器1510还提供输出到显示屏、打印机或其他类型的输出设备。
所述大容量存储设备1507通过连接到系统总线1505的大容量存储控制器(未示出)连接到中央处理单元1501。所述大容量存储设备1507及其相关联的计算机可读存储介质为计算机设备1500提供非易失性存储。也就是说，所述大容量存储设备1507可以包括诸如硬盘或者CD-ROM驱动器之类的计算机可读存储介质(未示出)。
不失一般性，所述计算机可读存储介质可以包括计算机存储介质和通信介质。计算机存储介质包括以用于存储诸如计算机可读指令、数据结构、程序模块或其他数据等信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动介质。计算机存储介质包括RAM、ROM、可编程可擦除只读存储器(Erasable Programmable Read Only Memory，EPROM)、电可擦可编程序只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、闪存或其他固态存储其技术，CD-ROM、DVD或其他光学存储、磁带盒、磁带、磁盘存储或其他磁性存储设备。当然，本领域技术人员可知所述计算机存储介质不局限于上述几种。上述的系统存储器1504和大容量存储设备1507可以统称为存储器。
存储器存储有一个或多个程序，一个或多个程序被配置成由一个或多个中央处理单元1501执行，一个或多个程序包含用于实现上述虚拟环境中的虚拟对象的调度方法的指令，中央处理单元1501执行该一个或多个程序实现上述各个方法实施例提供的网页页面的渲染方法。
根据本申请的各种实施例，所述计算机设备1500还可以通过诸如因特网等网络连接到网络上的远程计算机运行。也即计算机设备1500可以通过连接在所述系统总线1505上的网络接口单元1511连接到网络1512，或者说，也可以使用网络接口单元1511来连接到其他类型的网络或远程计算机系统(未示出)。
所述存储器还包括一个或者一个以上的程序，所述一个或者一个以上程序存储于存储器中，所述一个或者一个以上程序包含用于进行本申请实施例中提供的网页页面的渲染方法中由服务器所执行的步骤。
本申请实施例还提供一种计算机设备，该计算机设备包括：处理器和存储器，存储器中存储有至少一条计算机程序，至少一条计算机程序由处理器加载并执行以实现上述各方法实施例提供的网页页面的渲染方法。
本申请实施例还提供了一种计算机存储介质，计算机可读存储介质中存储有至少一条计算机程序，至少一条计算机程序由处理器加载并执行以实现上述各方法实施例提供的网页页面的渲染方法。
本申请实施例还提供了一种计算机程序产品，上述计算机程序产品包括计算机指令，所述计算机指令存储在计算机可读存储介质中；所述计算机指令由计算机设备的处理器从所述计算机可读存储介质读取并执行，使得所述计算机设备执行上述各方法实施例提供的网页页面的渲染方法。

Claims (20)

  1. 一种网页页面的渲染方法，其中，所述方法由终端执行，所述方法包括：
    在前端应用中运行前端插件，所述前端插件与服务器中运行的服务端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
    响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染；
    通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果。
  2. 根据权利要求1所述的方法，其中，所述在前端应用中运行所述前端插件，包括：
    在所述前端应用中运行与第一前端框架对应的前端插件，所述第一前端框架是所述前端应用使用的前端框架；
    其中，不同的所述前端框架对应的所述前端插件具有相同的运行逻辑和不同的适配设计。
  3. 根据权利要求2所述的方法，其中，所述响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染，包括：
    响应于所述网页页面的打开操作，通过所述前端插件向所述服务端插件发送客户端请求，所述客户端请求携带有应用层协议信息参数；
    其中，所述客户端请求用于请求所述服务端插件对所述网页页面的网页源代码进行渲染，所述应用层协议信息参数用于指示所述服务端插件确定所述网页页面的渲染模式。
  4. 根据权利要求1至3任一所述的方法，其中，所述通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果，包括：
    通过所述前端插件接收所述服务端插件反馈的降级渲染结果，所述降级渲染结果是所述服务端插件对所述网页页面的网页源代码渲染失败时得到的渲染结果；
    所述方法还包括：通过所述前端插件基于所述降级渲染结果进行客户端渲染，得到所述网页页面的渲染结果。
  5. 根据权利要求4所述的方法，其中，所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码；
    所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染得到的渲染结果。
  6. 根据权利要求5所述的方法，其中，所述通过所述前端插件基于所述降级渲染结果进行客户端渲染，得到所述网页页面的渲染结果，包括：
    通过所述前端插件向所述服务器获取所述页面实际内容展示层代码；
    通过所述前端插件以所述降级渲染结果为渲染骨架，基于所述页面实际内容展示层代码在所述渲染骨架中渲染与所述应用逻辑有关的页面内容，得到所述网页页面的渲染结果。
  7. 一种网页页面的渲染方法，其中，所述方法由服务器执行，所述方法包括：
    在服务端运行服务端插件，所述服务端插件与前端应用中运行的前端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
    通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果；
    向所述前端插件反馈所述网页页面的渲染结果。
  8. 根据权利要求7所述的方法，其中，所述在服务端运行服务端插件，包括：
    在所述服务端运行与第一后端框架对应的服务端插件，所述第一后端框架是所述服务端使用的后端框架；
    其中，不同的所述后端框架对应的所述服务插件具有相同的运行逻辑和不同的适配设计。
  9. 根据权利要求7所述的方法，其中，所述通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果，包括：
    通过所述服务端插件接收所述前端插件发送的客户端请求，所述客户端请求携带有应用层协议信息参数；
    根据所述应用层协议信息参数确定所述网页页面的渲染模式；
    基于所述渲染模式对所述网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果。
  10. 根据权利要求7至9任一所述的方法，其中，所述通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果；向所述前端插件反馈所述网页页面的渲染结果，包括：
    在所述服务端插件运行时或加载数据时出现错误的情况下，所述服务端插件对所述网页页面的所述网页源代码渲染失败得到降级渲染结果；
    向所述前端插件反馈所述降级渲染结果。
  11. 根据权利要求10所述的方法，其中，所述网页页面的网页源代码包括页面布局层代码和页面实际内容展示层代码，所述页面布局层代码是所述网页源代码中与应用逻辑无关的代码，所述页面实际内容展示层代码是所述网页源代码中与所述应用逻辑有关的代码；
    所述降级渲染结果是所述服务端插件对所述页面布局层代码进行渲染得到的。
  12. 一种网页页面的渲染装置，其中，所述装置包括：
    运行模块，用于在前端应用中运行前端插件，所述前端插件与服务器中运行的服务端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
    渲染模块，用于响应于所述网页页面的打开操作，通过所述前端插件请求所述服务端插件对所述网页页面的网页源代码进行渲染；
    接收模块，用于通过所述前端插件接收所述服务端插件反馈的所述网页页面的渲染结果。
  13. 根据权利要求12所述的装置，其中，
    所述运行模块，还用于在所述前端应用中运行与第一前端框架对应的前端插件，所述第一前端框架是所述前端应用使用的前端框架；
    其中，不同的所述前端框架对应的所述前端插件具有相同的运行逻辑和不同的适配设计。
  14. 根据权利要求13所述的装置，其中，
    所述渲染模块，响应于所述网页页面的打开操作，通过所述前端插件向所述服务端插件发送客户端请求，所述客户端请求携带有应用层协议信息参数；
    其中，所述客户端请求用于请求所述服务端插件对所述网页页面的网页源代码进行渲 染，所述应用层协议信息参数用于指示所述服务端插件确定所述网页页面的渲染模式。
  15. 一种网页页面的渲染装置，其中，所述装置包括：
    运行模块，用于在服务端运行服务端插件，所述服务端插件与前端应用中运行的前端插件解耦合，所述服务端插件用于提供位于服务端的网页渲染功能；
    渲染模块，用于通过所述服务端插件对所述前端插件请求的网页页面的网页源代码进行渲染得到所述网页页面的渲染结果；
    反馈模块，用于向所述前端插件反馈所述网页页面的渲染结果。
  16. 根据权利要求15所述的装置，其中，
    所述运行模块，还用于在所述服务端运行与第一后端框架对应的服务端插件，所述第一后端框架是所述服务端使用的后端框架；
    其中，不同的所述后端框架对应的所述服务插件具有相同的运行逻辑和不同的适配设计。
  17. 根据权利要求15所述的装置，其中，
    所述渲染模块，还用于通过所述服务端插件接收所述前端插件发送的客户端请求，所述客户端请求携带有应用层协议信息参数；
    所述渲染模块，还用于根据所述应用层协议信息参数确定所述网页页面的渲染模式；
    所述渲染模块，还用于基于所述渲染模式对所述网页页面的网页源代码进行渲染，得到所述网页页面的渲染结果。
  18. 一种计算机设备，其中，所述计算机设备包括：处理器和存储器，所述存储器中存储有至少一条计算机程序，至少一条所述计算机程序由所述处理器加载并执行以实现如权利要求1至11中任一项所述的网页页面的渲染方法。
  19. 一种计算机存储介质，其中，所述计算机可读存储介质中存储有至少一条计算机程序，至少一条计算机程序由处理器加载并执行以实现如权利要求1至11中任一项所述的网页页面的渲染方法。
  20. 一种计算机程序产品，其中，所述计算机程序产品包括计算机指令，所述计算机指令存储在计算机可读存储介质中；所述计算机指令由计算机设备的处理器从所述计算机可读存储介质读取并执行，使得所述计算机设备执行如权利要求1至11中任一项所述的网页页面的渲染方法。
PCT/CN2022/129536 2022-01-25 2022-11-03 网页页面的渲染方法、装置、设备及存储介质 WO2023142578A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
EP22923375.4A EP4398129A1 (en) 2022-01-25 2022-11-03 Webpage page rendering method and apparatus, device, and storage medium
US18/349,950 US20230359688A1 (en) 2022-01-25 2023-07-10 Webpage rendering method and apparatus, device, and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210090105.5A CN116541622A (zh) 2022-01-25 2022-01-25 网页页面的渲染方法、装置、设备及存储介质
CN202210090105.5 2022-01-25

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US18/349,950 Continuation US20230359688A1 (en) 2022-01-25 2023-07-10 Webpage rendering method and apparatus, device, and storage medium

Publications (1)

Publication Number Publication Date
WO2023142578A1 true WO2023142578A1 (zh) 2023-08-03

Family

ID=87445781

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/129536 WO2023142578A1 (zh) 2022-01-25 2022-11-03 网页页面的渲染方法、装置、设备及存储介质

Country Status (4)

Country Link
US (1) US20230359688A1 (zh)
EP (1) EP4398129A1 (zh)
CN (1) CN116541622A (zh)
WO (1) WO2023142578A1 (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677307A (zh) * 2014-11-19 2016-06-15 上海烟草集团有限责任公司 一种移动终端大数据处理方法及系统
CN107291458A (zh) * 2017-06-06 2017-10-24 北京知道创宇信息技术有限公司 一种Web应用的插件化构建方法、系统及服务器
WO2018217771A1 (en) * 2017-05-22 2018-11-29 Symantec Corporation Remotely validating a webpage video stream
CN109274724A (zh) * 2018-08-30 2019-01-25 上海艾融软件股份有限公司 一种前后端分离架构的实现系统及方法
CN111104587A (zh) * 2018-10-26 2020-05-05 北京金山云网络技术有限公司 网页显示方法、装置和服务器
CN112749358A (zh) * 2021-01-13 2021-05-04 中国工商银行股份有限公司 页面渲染方法和装置、电子设备以及存储介质
CN113761428A (zh) * 2020-06-05 2021-12-07 北京沃东天骏信息技术有限公司 页面渲染方法、装置、系统、存储介质及电子设备

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105677307A (zh) * 2014-11-19 2016-06-15 上海烟草集团有限责任公司 一种移动终端大数据处理方法及系统
WO2018217771A1 (en) * 2017-05-22 2018-11-29 Symantec Corporation Remotely validating a webpage video stream
CN107291458A (zh) * 2017-06-06 2017-10-24 北京知道创宇信息技术有限公司 一种Web应用的插件化构建方法、系统及服务器
CN109274724A (zh) * 2018-08-30 2019-01-25 上海艾融软件股份有限公司 一种前后端分离架构的实现系统及方法
CN111104587A (zh) * 2018-10-26 2020-05-05 北京金山云网络技术有限公司 网页显示方法、装置和服务器
CN113761428A (zh) * 2020-06-05 2021-12-07 北京沃东天骏信息技术有限公司 页面渲染方法、装置、系统、存储介质及电子设备
CN112749358A (zh) * 2021-01-13 2021-05-04 中国工商银行股份有限公司 页面渲染方法和装置、电子设备以及存储介质

Also Published As

Publication number Publication date
CN116541622A (zh) 2023-08-04
US20230359688A1 (en) 2023-11-09
EP4398129A1 (en) 2024-07-10

Similar Documents

Publication Publication Date Title
Subramanian et al. Hands-On RESTful API Design Patterns and Best Practices: Design, develop, and deploy highly adaptable, scalable, and secure RESTful web APIs
CN109918607B (zh) 页面搭建方法及装置、介质和计算设备
US10628132B2 (en) Inversion of control framework for multiple behaviors of a process
US9582600B1 (en) Cloud browser DOM-based client
US9934007B2 (en) Method for operating tool in working environment and machine using such method
US10284671B2 (en) Dynamic bundling of web components for asynchronous delivery
CA2760347C (en) Utilizing server pre-processing to deploy renditions of electronic documents in a computer network
JP5936103B2 (ja) クライアントでＪａｖａメソッドを呼び出すシステム、コンピュータ、方法及びプログラム
WO2017107851A1 (zh) 一种桌面应用组件发布、更新方法及装置
US11789963B2 (en) Systems and methods for presenting web application content
Aguilar SignalR Programming in Microsoft ASP. NET
CN113010170A (zh) 一种基于Vue3组件的页面渲染方法、装置、介质及电子设备
US20130036197A1 (en) Method and system for a mobile local server
US20230351097A1 (en) Systems and methods for integrating application components in a web application
CN115202729A (zh) 基于容器服务的镜像生成方法、装置、设备及介质
US10742764B2 (en) Web page generation system
KR20090000199A (ko) 웹 서버 어플리케이션 프레임워크와 상기 프레임워크를이용한 웹 어플리케이션 처리 방법 및 이를 구현할 수 있는컴퓨터로 읽을 수 있는 기록 매체
CN113535175A (zh) 应用程序前端代码的生成方法、装置、电子设备及介质
WO2023142578A1 (zh) 网页页面的渲染方法、装置、设备及存储介质
US11758016B2 (en) Hosted application as web widget toolkit
US11294644B2 (en) Inversion of control framework for multiple behaviors on top of a process
US9792100B1 (en) Application deployment system and method for a computing infrastructure
US20200034119A1 (en) Translating User Inputs Into Discretely Functional Styled Standalone Web and Mobile Software Features
Sathyakumar Techniques and practices for optimizing resources in large scale horizontal web applications that deliver cross functional ux components
US11886532B1 (en) Technology agnostic page builder architecture

Legal Events

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

Ref document number: 22923375

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2022923375

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2022923375

Country of ref document: EP

Effective date: 20240405

NENP Non-entry into the national phase

Ref country code: DE