WO2021174928A1 - 页面预渲染方法、装置、电子设备及存储介质 - Google Patents

页面预渲染方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
WO2021174928A1
WO2021174928A1 PCT/CN2020/132782 CN2020132782W WO2021174928A1 WO 2021174928 A1 WO2021174928 A1 WO 2021174928A1 CN 2020132782 W CN2020132782 W CN 2020132782W WO 2021174928 A1 WO2021174928 A1 WO 2021174928A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
static
markup language
hypertext markup
html
Prior art date
Application number
PCT/CN2020/132782
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 EP20904237.3A priority Critical patent/EP3896567B1/en
Priority to JP2021536286A priority patent/JP2022525831A/ja
Priority to US17/419,245 priority patent/US11829436B2/en
Publication of WO2021174928A1 publication Critical patent/WO2021174928A1/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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • 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
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • 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
    • 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
    • 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/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • 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

  • This application relates to computer application technology, and particularly relates to page pre-rendering methods, devices, electronic equipment, and storage media in the Internet field.
  • AJAX is the abbreviation of Asynchronous JavaScript and Extensible Markup Language (Asynchronous JavaScript And XML).
  • HTML HyperText Markup Language
  • URL Uniform Resource Locator
  • Pre-rendering technology is proposed to solve these problems.
  • Pre-rendering refers to generating static HTML files matching pre-rendered routes during the page compilation and construction phase.
  • Commonly used pre-rendering methods include pre-rendering methods based on headless browsers. However, this method requires a complete browser process for each page routing, consumes the resources of the page builder, and often needs to install some additional system libraries to support the work of the headless browser. Secondly, it needs to add pipeline processes and output. The process is slow and so on.
  • this application provides a page pre-rendering method, device, electronic device, and storage medium.
  • a page pre-rendering method including:
  • a static hypertext markup language file of the page is generated.
  • the obtaining the static resources of the page includes: obtaining the static resources by monitoring the first predetermined hook of the hypertext markup language web pack plug-in html-webpack-plugin; the obtaining after compilation
  • the hypertext markup language structure information of the page includes: acquiring the hypertext markup language structure information by monitoring a second predetermined hook of the hypertext markup language web pack plug-in html-webpack-plugin.
  • the first predetermined hook includes: the resource tag generation hook beforeAssetTagGeneration hook; the second predetermined hook includes: the template execution hook afterTemplateExecution hook.
  • the static resources include: cascading style sheets and JavaScript scripts.
  • the generating of the static hypertext markup language file of the page in combination with the native server rendering capability of the webpage framework includes:
  • the JavaScript script is executed in the eval environment, the required browser host environment is simulated by the JavaScript document object model JSDOM, combined with the native server-side rendering capability of the webpage frame, and the static hypertext markup language file of the page is generated.
  • a page pre-rendering device including: an acquiring unit and a generating unit;
  • the acquiring unit is configured to acquire the static resources of the page to be processed, and acquire the hypertext markup language structure information of the page after compilation;
  • the generating unit is configured to generate a static hypertext markup language file of the page according to the static resource and the hypertext markup language structure information, combined with the native server rendering capability of the webpage frame.
  • the obtaining unit obtains the static resource by monitoring the first predetermined hook of the hypertext markup language web pack plug-in html-webpack-plugin; the obtaining unit obtains the static resource by monitoring the hypertext markup language web pack The second predetermined hook of the plug-in html-webpack-plugin obtains the hypertext markup language structure information.
  • the first predetermined hook includes: the resource tag generation hook beforeAssetTagGeneration hook; the second predetermined hook includes: the template execution hook afterTemplateExecution hook.
  • the static resources include: cascading style sheets and JavaScript scripts.
  • the generating unit executes the JavaScript script in the eval environment, simulates the required browser host environment through the JavaScript document object model JSDOM, and combines the native server-side rendering capabilities of the webpage framework to generate the The static hypertext markup language file of the page.
  • An electronic device including:
  • At least one processor At least one processor
  • a memory communicatively connected with the at least one processor; wherein,
  • the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor, so that the at least one processor can execute the method as described above.
  • a non-transitory computer-readable storage medium storing computer instructions for causing the computer to execute the method as described above.
  • An embodiment in the above application has the following advantages or beneficial effects: for the page to be processed, the static resources of the page and the hypertext markup language structure information of the compiled page can be obtained separately, and then it can be combined with the native server-side rendering of the webpage frame Ability to generate static hypertext markup language files of the page, that is, complete pre-rendering. Compared with the existing method, there is no need to use a headless browser, thus avoiding the consumption of page builder resources and the use of headless browsers.
  • FIG. 1 is a flowchart of an embodiment of the page pre-rendering method described in this application
  • FIG. 2 is a schematic diagram of the overall implementation process of the page pre-rendering method described in this application;
  • FIG. 3 is a schematic diagram of the composition structure of an embodiment of a page pre-rendering apparatus 300 according to this application;
  • Fig. 4 is a block diagram of an electronic device according to the method described in an embodiment of the present application.
  • FIG. 1 is a flowchart of an embodiment of the page pre-rendering method described in this application. As shown in Figure 1, it includes the following specific implementations.
  • the HTML structure information of the compiled page is obtained.
  • a static HTML file of the page is generated according to the obtained static resource and HTML structure information, combined with the native server rendering capability of the webpage frame.
  • the developer will push the developed page to the compilation and build environment, and after compilation and construction, it can be deployed online, such as on a server in the computer room.
  • a user accesses a page through a browser, the access request is submitted to the corresponding server.
  • the server can return the corresponding HTML file according to the requested page.
  • the browser parses the HTML file and displays the page to the user.
  • An HTML file usually contains four parts of content, namely: page general content, Cascading Style Sheets (CSS), JavaScript scripts, and dynamic data (or called personalized data, etc.).
  • CSS Cascading Style Sheets
  • JavaScript scripts JavaScript scripts
  • dynamic data or called personalized data, etc.
  • the process of users seeing the page is a gradual enhancement process instead of seeing the final page directly.
  • the initial state is a blank page, that is, a blank page is initially rendered. From the user's perspective, nothing can be seen.
  • the JavaScript script is executed, the general content of the page can be manipulated, so that The page changes from the initial state to the state with content, and makes it have the corresponding style according to CSS.
  • the state at this time can be called the intermediate state.
  • JavaScript scripts can also send requests to the server, request dynamic data, and then can according to the request The received dynamic data updates the content of the page to get the final state.
  • Pre-rendering can be carried out during the compilation and construction phase of the page.
  • the process from the initial state to the intermediate state is executed first in the pre-rendering environment.
  • the output is the intermediate state of the page, that is, the page is pre-transitioned from the initial state to the intermediate state, so that subsequent users will see
  • the result will be a page that goes directly from the intermediate state to the final state, and you will no longer see the initial blank page.
  • the static resources of the page can be obtained first.
  • the static resources may include CSS, JavaScript scripts, and the like.
  • the static resource can be obtained by monitoring the first predetermined hook of the html-webpack-plugin, such as the before Asset Tag Generation hook.
  • HTML structure information of the page can also be obtained, and the HTML structure information can include general content of the page and the like.
  • the HTML structure information can be obtained by monitoring a second predetermined hook of the html-webpack-plugin, such as an afterTemplateExecution hook.
  • Both beforeAssetTagGeneration hook and afterTemplateExecution hook are hooks of the existing html-webpack-plugin.
  • html-webpack-plugin also provides hooks for calling.
  • the execution subject of the method described in this embodiment may be a webpack pre-render plugin.
  • the pre-render plugin can call/monitor the hook of html-webpack-plugin.
  • the pre-render plugin can obtain the static resources of the page by monitoring the beforeAssetTagGeneration hook of the html-webpack-plugin, and the beforeAssetTagGeneration hook can obtain the static resources of the page from the compilation context generated in the existing way.
  • the pre-render plugin can obtain the HTML structure information generated by the compilation by monitoring the afterTemplateExecution hook of the html-webpack-plugin.
  • JavaScript scripts can be executed in the eval environment, that is, eval can be used to execute the JavaScript module exported by the page, and the required browser host environment is simulated through the JavaScript Document Object Model (JSDOM, JavaScript Document Object Model), combined with the native web framework Server-side rendering capability generates static HTML files of the page, which can be written to disk.
  • JSDOM JavaScript Document Object Model
  • eval is a library that can execute JavaScript code in a non-interface graphic environment, simulates the execution process of the browser, drives the page to transition from the initial state to the intermediate state, and can simulate the required browser host environment through JSDOM, and then combine with the web page frame Native server-side rendering capabilities to generate static HTML files of the page.
  • FIG. 2 is a schematic diagram of the overall implementation process of the page pre-rendering method described in this application. As shown in Figure 2, it includes the following specific implementations.
  • the webpack plugin system triggers (apply) pre-render plugin and html-webpack-plugin respectively.
  • the pre-render plugin obtains the static resources of the page by monitoring the beforeAssetTagGeneration hook of the html-webpack-plugin.
  • the static resources may include CSS and JavaScript scripts, etc.
  • the pre-render plugin caches the acquired static resources.
  • the pre-render plugin returns response (callback) information to the html-webpack-plugin.
  • the pre-render plugin obtains the HTML structure information of the compiled page by monitoring the afterTemplateExecution hook of the html-webpack-plugin.
  • the HTML structure information may include general content of the page, etc.
  • the pre-renderplugin caches the acquired HTML structure information.
  • the pre-render plugin returns response information to the html-webpack-plugin.
  • the pre-render plugin monitors the html-webpack-plugin's beforeEmit hook, and executes JavaScript scripts in the eval environment based on the static resources and HTML structure information of the page, and simulates the needs through JSDOM
  • the browser host environment combined with the native server-side rendering capabilities of the web page frame, generates static HTML files for the page.
  • the pre-render plugin can finally generate the static HTML file of the page when it listens to the beforeEmit hook of the html-webpack-plugin.
  • the pre-render plugin returns the obtained static HTML file to html-webpack-plugin.
  • html-webpack-plugin returns the obtained static HTML file to the webpack plug-in system.
  • the webpack plug-in system can display static HTML files through the console in an existing way, and the console can display the output files in real time.
  • the static resources of the page and the HTML structure information of the compiled page can be obtained separately for the page to be processed, and then combined with the native server-side rendering capabilities of the webpage framework, the page Static HTML files are pre-rendered, thereby avoiding the problems caused by the pre-rendering method based on headless browsers in the prior art, thereby improving the pre-rendering efficiency, saving resource consumption, etc.; among them, you can use Different hooks of html-webpack-plugin to obtain static resources and HTML structure information are convenient, simple and easy to implement; in addition, JavaScript scripts can be executed in the eval environment, and the required browser host environment can be simulated through JSDOM, combined with web frameworks Native server-side rendering capabilities generate static HTML files for pages, thereby improving pre-rendering performance and stability.
  • FIG. 3 is a schematic diagram of the composition structure of an embodiment of the page pre-rendering apparatus 300 described in this application. As shown in FIG. 3, it includes: an acquiring unit 301 and a generating unit 302.
  • the obtaining unit 301 is configured to obtain static resources of the page to be processed, and obtain HTML structure information of the compiled page.
  • the generating unit 302 is configured to generate a static HTML file of the page according to the static resource and HTML structure information, combined with the native server rendering capability of the webpage frame.
  • the obtaining unit 301 may first obtain the static resources of the page.
  • the static resources may include CSS, JavaScript scripts, and the like.
  • the static resource can be obtained by monitoring the first predetermined hook of the html-webpack-plugin, such as beforeAssetTagGeneration hook.
  • the obtaining unit 301 may also obtain HTML structure information of the compiled page, and the HTML structure information may include general content of the page and the like.
  • the HTML structure information can be obtained by monitoring the second predetermined hook of the html-webpack-plugin, such as afterTemplateExecution hook.
  • the generating unit 302 may further combine the native server-side rendering capabilities of the webpage frame to generate the static HTML file of the page.
  • the generation unit 302 can execute JavaScript scripts in the eval environment, that is, use eval to execute the JavaScript modules exported by the page, simulate the required browser host environment through JSDOM, and combine the native server-side rendering capabilities of the webpage framework to generate the page
  • the static HTML file can be written to disk.
  • eval is a library that can execute JavaScript code in a non-interface graphic environment, simulates the execution process of the browser, drives the page to transition from the initial state to the intermediate state, and can simulate the required browser host environment through JSDOM, and then combine with the web page frame Native server-side rendering capabilities to generate static HTML files of the page.
  • the static resources of the page and the HTML structure information of the compiled page can be obtained separately for the page to be processed, and the original server-side rendering capabilities of the webpage frame can be combined to generate the page Static HTML files are pre-rendered, thereby avoiding the problems caused by the pre-rendering method based on headless browsers in the prior art, thereby improving the pre-rendering efficiency, saving resource consumption, etc.; among them, you can use Different hooks of html-webpack-plugin to obtain static resources and HTML structure information are convenient, simple and easy to implement; in addition, JavaScript scripts can be executed in the eval environment, and the required browser host environment can be simulated through JSDOM, combined with web frameworks Native server-side rendering capabilities generate static HTML files for pages, thereby improving pre-rendering performance and stability.
  • the present application also provides an electronic device and a readable storage medium.
  • FIG. 4 it is a block diagram of an electronic device according to the method described in the embodiment of the present application.
  • Electronic devices are intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers.
  • Electronic devices can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices.
  • the components shown herein, their connections and relationships, and their functions are merely examples, and are not intended to limit the implementation of the application described and/or required herein.
  • the electronic device includes: one or more processors Y01, memory Y02, and interfaces for connecting various components, including a high-speed interface and a low-speed interface.
  • the various components are connected to each other using different buses, and can be installed on a common motherboard or installed in other ways as needed.
  • the processor may process instructions executed in the electronic device, including instructions stored in or on the memory to display graphical information of the graphical user interface on an external input/output device (such as a display device coupled to the interface).
  • an external input/output device such as a display device coupled to the interface.
  • multiple processors and/or multiple buses can be used with multiple memories and multiple memories.
  • multiple electronic devices can be connected, and each device provides part of the necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Take a processor Y01 as an example in Figure 4.
  • the memory Y02 is the non-transitory computer-readable storage medium provided by this application.
  • the memory stores instructions executable by at least one processor, so that the at least one processor executes the method provided in this application.
  • the non-transitory computer-readable storage medium of the present application stores computer instructions, and the computer instructions are used to make a computer execute the method provided in the present application.
  • the memory Y02 can be used to store non-transitory software programs, non-transitory computer executable programs, and modules, such as program instructions/modules corresponding to the method in the embodiments of the present application.
  • the processor Y01 executes various functional applications and data processing of the server by running the non-transitory software programs, instructions, and modules stored in the memory Y02, that is, implements the methods in the foregoing method embodiments.
  • the memory Y02 may include a program storage area and a data storage area.
  • the program storage area may store an operating system and an application program required by at least one function; the data storage area may store data created according to the use of the electronic device.
  • the memory Y02 may include a high-speed random access memory, and may also include a non-transitory memory, such as at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state storage devices.
  • the memory Y02 may optionally include a memory remotely provided with respect to the processor Y01, and these remote memories may be connected to the electronic device through a network. Examples of the aforementioned networks include, but are not limited to, the Internet, corporate intranets, blockchain networks, local area networks, mobile communication networks, and combinations thereof.
  • the electronic device may also include: an input device Y03 and an output device Y04.
  • the processor Y01, the memory Y02, the input device Y03, and the output device Y04 may be connected by a bus or other methods. In FIG. 4, the connection by a bus is taken as an example.
  • the input device Y03 can receive input digital or character information, and generate key signal input related to user settings and function control of electronic equipment, such as touch screen, keypad, mouse, track pad, touch pad, indicator stick, one or more Input devices such as mouse buttons, trackballs, joysticks, etc.
  • the output device Y04 may include a display device, an auxiliary lighting device, a tactile feedback device (for example, a vibration motor), and the like.
  • the display device may include, but is not limited to, a liquid crystal display, a light emitting diode display, and a plasma display. In some embodiments, the display device may be a touch screen.
  • Various implementations of the systems and techniques described herein can be implemented in digital electronic circuit systems, integrated circuit systems, application specific integrated circuits, computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: being implemented in one or more computer programs, the one or more computer programs may be executed and/or interpreted on a programmable system including at least one programmable processor, the programmable processor It can be a dedicated or general-purpose programmable processor that can receive data and instructions from the storage system, at least one input device, and at least one output device, and transmit the data and instructions to the storage system, the at least one input device, and the at least one output device. An output device.
  • These computing programs include machine instructions for programmable processors, and can be implemented using high-level procedures and/or object-oriented programming languages, and/or assembly/machine language Calculation program.
  • machine-readable medium and “computer-readable medium” refer to any computer program product, device, and/or device used to provide machine instructions and/or data to a programmable processor ( For example, magnetic disks, optical disks, memory, programmable logic devices) include machine-readable media that receive machine instructions as machine-readable signals.
  • machine-readable signal refers to any signal used to provide machine instructions and/or data to a programmable processor.
  • the systems and techniques described herein can be implemented on a computer that has: a display device for displaying information to the user (for example, a cathode ray tube or a liquid crystal display monitor); and a keyboard and pointing A device (for example, a mouse or a trackball) through which the user can provide input to the computer through the keyboard and the pointing device.
  • a display device for displaying information to the user
  • a keyboard and pointing A device for example, a mouse or a trackball
  • Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (for example, visual feedback, auditory feedback, or tactile feedback); and can be in any form (including Acoustic input, voice input, or tactile input) to receive input from the user.
  • the systems and technologies described herein can be implemented in a computing system that includes back-end components (for example, as a data server), or a computing system that includes middleware components (for example, an application server), or a computing system that includes front-end components (for example, A user computer with a graphical user interface or a web browser, through which the user can interact with the implementation of the system and technology described herein), or includes such back-end components, middleware components, Or any combination of front-end components in a computing system.
  • the components of the system can be connected to each other through any form or medium of digital data communication (for example, a communication network). Examples of communication networks include: local area networks, wide area networks, blockchain networks, and the Internet.
  • the computer system can include clients and servers.
  • the client and server are generally far away from each other and usually interact through a communication network.
  • the relationship between the client and the server is generated by computer programs that run on the corresponding computers and have a client-server relationship with each other.

Landscapes

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

Abstract

一种页面预渲染方法、装置、电子设备及存储介质，涉及互联网领域，其中的方法可包括：针对待处理的页面，获取页面的静态资源（101）；获取编译后的页面的HTML结构信息（102）；根据获取到的静态资源及HTML结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件（103）。应用所述方法可提升预渲染效率等。

Description

页面预渲染方法、装置、电子设备及存储介质
本申请要求了申请日为2020年03月02日，申请号为2020101361816发明名称为“页面预渲染方法、装置、电子设备及存储介质”的中国专利申请的优先权。
技术领域
本申请涉及计算机应用技术，特别涉及互联网领域的页面预渲染方法、装置、电子设备及存储介质。
背景技术
AJAX技术的出现，使得web应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用(SPA，Single Page Application)。AJAX为异步JavaScript和可扩展标记语言(Asynchronous JavaScript And XML)的简称。
在一个单页应用中，往往只有一个超文本标记语言(HTML，HyperText Markup Language)文件，根据访问的统一资源定位符(URL，Uniform Resource Locator)来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也带来了诸多问题，如搜索引擎优化(SEO，Search Engine Optimization)不友好、首屏可见时间过长等。预渲染技术正是为解决这些问题而提出的。
预渲染是指在页面编译构建阶段生成匹配预渲染的路由的静态HTML文件。常用的预渲染方式包括基于无头浏览器的预渲染方式等。但这种方式针对每个页面路由都要经过一个完整的浏览器过程，消耗页面构建机资源，往往也需要安装一些额外的系统库支持无头浏览器工作，其次需要新增管道流程，产出过程缓慢等。
发明内容
有鉴于此，本申请提供了页面预渲染方法、装置、电子设备及存储介质。
一种页面预渲染方法，包括：
针对待处理的页面，获取所述页面的静态资源；
获取编译后的所述页面的超文本标记语言结构信息；
根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
根据本申请一优选实施例，所述获取所述页面的静态资源包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；所述获取编译后的所述页面的超文本标记语言结构信息包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
根据本申请一优选实施例，所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
根据本申请一优选实施例，所述静态资源中包括：层叠样式表及JavaScript脚本。
根据本申请一优选实施例，所述结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件包括：
在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
一种页面预渲染装置，包括：获取单元以及生成单元；
所述获取单元，用于针对待处理的页面，获取所述页面的静态资源，并获取编译后的所述页面的超文本标记语言结构信息；
所述生成单元，用于根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
根据本申请一优选实施例，所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
根据本申请一优选实施例，所述第一预定钩子包括：资源标签生成 前钩子beforeAssetTagGeneration hook；所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
根据本申请一优选实施例，所述静态资源中包括：层叠样式表及JavaScript脚本。
根据本申请一优选实施例，所述生成单元在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如以上所述的方法。
一种存储有计算机指令的非瞬时计算机可读存储介质，所述计算机指令用于使所述计算机执行如以上所述的方法。
上述申请中的一个实施例具有如下优点或有益效果：可针对待处理的页面，分别获取页面的静态资源及编译后的页面的超文本标记语言结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件，即完成预渲染，相比于现有方式，无需使用无头浏览器，从而避免了由于使用无头浏览器所带来的消耗页面构建机资源以及需要安装额外的系统库来支持无头浏览器工作的问题，进而节省了资源消耗，并可避免由于使用无头浏览器所带来的新增管道流程等问题，加速了产出过程，从而提升了预渲染效率等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及超文本标记语言结构信息，方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件，从而提升了预渲染性能及稳定性等。
附图说明
附图用于更好地理解本方案，不构成对本申请的限定。其中：
图1为本申请所述页面预渲染方法实施例的流程图；
图2为本申请所述页面预渲染方法的整体实现过程示意图；
图3为本申请所述页面预渲染装置300实施例的组成结构示意图；
图4为根据本申请实施例所述方法的电子设备的框图。
具体实施方式
以下结合附图对本申请的示范性实施例做出说明，其中包括本申请实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本申请的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
另外，应理解，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。
图1为本申请所述页面预渲染方法实施例的流程图。如图1所示，包括以下具体实现方式。
在101中，针对待处理的页面，获取页面的静态资源。
在102中，获取编译后的页面的HTML结构信息。
在103中，根据获取到的静态资源及HTML结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
开发者会将开发的页面推到编译构建环境，编译构建之后即可部署到线上，如部署到机房的服务器上。用户通过浏览器访问页面时，会将访问请求提交到相应服务器，服务器可根据请求的页面返回对应的HTML文件，浏览器对HTML文件进行解析，将页面展示给用户等。
HTML文件中通常包含四部分内容，分别为：页面通用内容、层叠样式表(CSS，Cascading Style Sheets)、JavaScript脚本及动态数据(或称为个性化数据等)。
在实际应用中，用户看到页面的过程是一个渐进增强的过程，并非直接看到最终页面。比如，针对返回的HTML文件，初始状态为一个空 白页，即初始渲染得到一个空白页，从用户的角度来说什么也看不到，当JavaScript脚本执行后，可操作页面通用内容等，从而使得页面从初始状态变为有内容的状态，并按照CSS使其具备对应的样式，此时的状态可称为中间状态，此外，JavaScript脚本还可向服务器发送请求，请求动态数据，进而可根据请求到的动态数据更新页面内容，从而得到最终状态。
预渲染可在页面的编译构建阶段进行。从初始状态到中间状态的过程在预渲染环境下先执行，执行完之后，产出的为页面的中间状态，即预先将页面从初始状态过渡到了中间状态，这样，后续用户访问页面时，看到的将是直接从中间状态变为最终状态的页面，不再会看到初始的空白页。
本实施例中，针对待处理的页面，可首先获取页面的静态资源。所述静态资源可包括CSS以及JavaScript脚本等。优选地，可通过监听超文本标记语言网页包插件(html-webpack-plugin)的第一预定钩子，如资源标签生成前钩子(beforeAssetTagGeneration hook)，获取所述静态资源。
此外，针对待处理的页面，还可获取页面的HTML结构信息，所述HTML结构信息中可包括页面通用内容等。优选地，可通过监听html-webpack-plugin的第二预定钩子，如模板执行后钩子(afterTemplateExecution hook)，获取所述HTML结构信息。
beforeAssetTagGeneration hook和afterTemplateExecution hook均为现有html-webpack-plugin的hook。html-webpack-plugin除了可受寄生的webpack的插件系统调度外，还提供了hook供调用。
在实际应用中，本实施例所述方法的执行主体可为一个webpack预渲染插件(pre-render plugin)。pre-render plugin可调用/监听html-webpack-plugin的hook。如pre-render plugin可通过监听html-webpack-plugin的beforeAssetTagGeneration hook获取页面的静态资源，beforeAssetTagGeneration hook可从按照现有方式产生的编译(compilation)上下文中获取页面的静态资源。另外，pre-render plugin可通过监听html-webpack-plugin的afterTemplateExecution hook获取编译产生的HTML结构信息。
获取到了页面的静态资源及HTML结构信息后，可进一步结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。优选地，可在eval环境下执行JavaScript脚本，即可使用eval执行页面导出的JavaScript模块，通过JavaScript文档对象模型(JSDOM，JavaScrip Document Object Model)模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，并可写入到磁盘中。
eval是一个可以在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态，并可通过JSDOM模拟所需的浏览器宿主环境，进而结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
因为使用网页框架原生的服务端渲染能力，支持框架本身的全家桶，如：React的Redux、React Router等，Vue.js的Vuex、Vue Router等。
基于上述介绍，图2为本申请所述页面预渲染方法的整体实现过程示意图。如图2所示，包括以下具体实现方式。
在201～202中，webpack插件系统分别触发(apply)pre-render plugin和html-webpack-plugin。
在203中，pre-render plugin通过监听html-webpack-plugin的beforeAssetTagGeneration hook获取页面的静态资源。
静态资源中可包括CSS及JavaScript脚本等。
在204中，pre-render plugin对获取到的静态资源进行缓存。
在205中，pre-render plugin向html-webpack-plugin返回响应(callback)信息。
在206中，pre-render plugin通过监听html-webpack-plugin的afterTemplateExecution hook获取编译后的页面的HTML结构信息。
HTML结构信息中可包括页面通用内容等。
在207中，pre-renderplugin对获取到的HTML结构信息进行缓存。
在208中，pre-render plugin向html-webpack-plugin返回响应信息。
在209～210中，pre-render plugin监听到html-webpack-plugin的产出前钩子(beforeEmit hook)，根据页面的静态资源及HTML结构信息，在eval环境下执行JavaScript脚本，通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML 文件。
作为一种可能的实现方式，pre-render plugin可在当监听到html-webpack-plugin的beforeEmit hook时，最终生成页面的静态HTML文件。
在211中，pre-render plugin将获取到的静态HTML文件返回给html-webpack-plugin。
在212中，html-webpack-plugin将获取到的静态HTML文件返回给webpack插件系统。
webpack插件系统可将静态HTML文件按照现有方式通过控制台进行显示，控制台可实时显示产出的文件。
需要说明的是，对于前述的各方法实施例，为了简单描述，将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
总之，采用本申请方法实施例所述方案，可针对待处理的页面，分别获取页面的静态资源及编译后的页面的HTML结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，即完成预渲染，从而避免了现有技术中基于无头浏览器的预渲染方式所带来的问题，进而提升了预渲染效率，节省了资源消耗等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及HTML结构信息，方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，从而提升了预渲染性能及稳定性等。
以上是关于方法实施例的介绍，以下通过装置实施例，对本申请所述方案进行进一步说明。
图3为本申请所述页面预渲染装置300实施例的组成结构示意图。 如图3所示，包括：获取单元301以及生成单元302。
获取单元301，用于针对待处理的页面，获取页面的静态资源，并获取编译后的页面的HTML结构信息。
生成单元302，用于根据静态资源及HTML结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
针对待处理的页面，获取单元301可首先获取页面的静态资源。所述静态资源可包括CSS以及JavaScript脚本等。优选地，可通过监听html-webpack-plugin的第一预定钩子，如beforeAssetTagGeneration hook，获取所述静态资源。
此外，针对待处理的页面，获取单元301还可获取编译后的页面的HTML结构信息，所述HTML结构信息中可包括页面通用内容等。优选地，可通过监听html-webpack-plugin的第二预定钩子，如afterTemplateExecution hook，获取所述HTML结构信息。
获取到了页面的静态资源及HTML结构信息后，生成单元302可进一步结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。优选地，生成单元302可在eval环境下执行JavaScript脚本，即可使用eval执行页面导出的JavaScript模块，通过JSDOM模拟所需的浏览器宿主环境，并结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，进而可写入到磁盘中。
eval是一个可以在无界面图形环境下执行JavaScript代码的库，模拟浏览器的执行过程，驱动页面从初始状态过渡到中间状态，并可通过JSDOM模拟所需的浏览器宿主环境，进而结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。
图3所示装置实施例的具体工作流程请参照前述方法实施例中的相关说明，不再赘述。
总之，采用本申请装置实施例所述方案，可针对待处理的页面，分别获取页面的静态资源及编译后的页面的HTML结构信息，进而可结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，即完成预渲染，从而避免了现有技术中基于无头浏览器的预渲染方式所带来的问题，进而提升了预渲染效率，节省了资源消耗等；其中，可分别借助于html-webpack-plugin的不同hook来获取静态资源及HTML结构信息， 方便简单，易于实现；另外，可在eval环境下执行JavaScript脚本，并可通过JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件，从而提升了预渲染性能及稳定性等。
根据本申请的实施例，本申请还提供了一种电子设备和一种可读存储介质。
如图4所示，是根据本申请实施例所述方法的电子设备的框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本申请的实现。
如图4所示，该电子设备包括：一个或多个处理器Y01、存储器Y02，以及用于连接各部件的接口，包括高速接口和低速接口。各个部件利用不同的总线互相连接，并且可以被安装在公共主板上或者根据需要以其它方式安装。处理器可以对在电子设备内执行的指令进行处理，包括存储在存储器中或者存储器上以在外部输入/输出装置(诸如，耦合至接口的显示设备)上显示图形用户界面的图形信息的指令。在其它实施方式中，若需要，可以将多个处理器和/或多条总线与多个存储器和多个存储器一起使用。同样，可以连接多个电子设备，各个设备提供部分必要的操作(例如，作为服务器阵列、一组刀片式服务器、或者多处理器系统)。图4中以一个处理器Y01为例。
存储器Y02即为本申请所提供的非瞬时计算机可读存储介质。其中，所述存储器存储有可由至少一个处理器执行的指令，以使所述至少一个处理器执行本申请所提供的方法。本申请的非瞬时计算机可读存储介质存储计算机指令，该计算机指令用于使计算机执行本申请所提供的方法。
存储器Y02作为一种非瞬时计算机可读存储介质，可用于存储非瞬时软件程序、非瞬时计算机可执行程序以及模块，如本申请实施例中的方法对应的程序指令/模块。处理器Y01通过运行存储在存储器Y02中的非瞬时软件程序、指令以及模块，从而执行服务器的各种功能应用以 及数据处理，即实现上述方法实施例中的方法。
存储器Y02可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据电子设备的使用所创建的数据等。此外，存储器Y02可以包括高速随机存取存储器，还可以包括非瞬时存储器，例如至少一个磁盘存储器件、闪存器件、或其他非瞬时固态存储器件。在一些实施例中，存储器Y02可选包括相对于处理器Y01远程设置的存储器，这些远程存储器可以通过网络连接至电子设备。上述网络的实例包括但不限于互联网、企业内部网、区块链网络、局域网、移动通信网及其组合。
电子设备还可以包括：输入装置Y03和输出装置Y04。处理器Y01、存储器Y02、输入装置Y03和输出装置Y04可以通过总线或者其他方式连接，图4中以通过总线连接为例。
输入装置Y03可接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入，例如触摸屏、小键盘、鼠标、轨迹板、触摸板、指示杆、一个或者多个鼠标按钮、轨迹球、操纵杆等输入装置。输出装置Y04可以包括显示设备、辅助照明装置和触觉反馈装置(例如，振动电机)等。该显示设备可以包括但不限于，液晶显示器、发光二极管显示器和等离子体显示器。在一些实施方式中，显示设备可以是触摸屏。
此处描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、专用集成电路、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
这些计算程序(也称作程序、软件、软件应用、或者代码)包括可编程处理器的机器指令，并且可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。如本文使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供 给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置)，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。
为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，阴极射线管或者液晶显示器监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网、广域网、区块链网络和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本申请中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本申请公开的技术方案所期望的结果，本文在此不进行限制。
上述具体实施方式，并不构成对本申请保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其它因素，可以进行各种修改、组合、子组合和替代。任何在本申请的精神和原则之内所作的修改、等 同替换和改进等，均应包含在本申请保护范围之内。

Claims (12)

  1. 一种页面预渲染方法，其特征在于，包括：
    针对待处理的页面，获取所述页面的静态资源；
    获取编译后的所述页面的超文本标记语言结构信息；
    根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
  2. 根据权利要求1所述的方法，其特征在于，
    所述获取所述页面的静态资源包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；
    所述获取编译后的所述页面的超文本标记语言结构信息包括：通过监听所述html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
  3. 根据权利要求2所述的方法，其特征在于，
    所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；
    所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
  4. 根据权利要求1所述的方法，其特征在于，
    所述静态资源中包括：层叠样式表及JavaScript脚本。
  5. 根据权利要求4所述的方法，其特征在于，
    所述结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件包括：
    在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
  6. 一种页面预渲染装置，其特征在于，包括：获取单元以及生成单元；
    所述获取单元，用于针对待处理的页面，获取所述页面的静态资源，并获取编译后的所述页面的超文本标记语言结构信息；
    所述生成单元，用于根据所述静态资源及所述超文本标记语言结构 信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
  7. 根据权利要求6所述的装置，其特征在于，
    所述获取单元通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；
    所述获取单元通过监听所述html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。
  8. 根据权利要求7所述的装置，其特征在于，
    所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；
    所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。
  9. 根据权利要求6所述的装置，其特征在于，
    所述静态资源中包括：层叠样式表及JavaScript脚本。
  10. 根据权利要求9所述的装置，其特征在于，
    所述生成单元在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。
  11. 一种电子设备，其特征在于，包括：
    至少一个处理器；以及
    与所述至少一个处理器通信连接的存储器；其中，
    所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-5中任一项所述的方法。
  12. 一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使所述计算机执行权利要求1-5中任一项所述的方法。
PCT/CN2020/132782 2020-03-02 2020-11-30 页面预渲染方法、装置、电子设备及存储介质 WO2021174928A1 (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
EP20904237.3A EP3896567B1 (en) 2020-03-02 2020-11-30 Page pre-rendering method and apparatus, electronic device, and storage medium
JP2021536286A JP2022525831A (ja) 2020-03-02 2020-11-30 ページプリレンダリング方法、装置、電子機器、コンピュータプログラム及び記憶媒体
US17/419,245 US11829436B2 (en) 2020-03-02 2020-11-30 Method and apparatus of pre-rendering page, electronic device, and storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010136181.6 2020-03-02
CN202010136181.6A CN111506387B (zh) 2020-03-02 2020-03-02 页面预渲染方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
WO2021174928A1 true WO2021174928A1 (zh) 2021-09-10

Family

ID=71863854

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/132782 WO2021174928A1 (zh) 2020-03-02 2020-11-30 页面预渲染方法、装置、电子设备及存储介质

Country Status (5)

Country Link
US (1) US11829436B2 (zh)
EP (1) EP3896567B1 (zh)
JP (1) JP2022525831A (zh)
CN (1) CN111506387B (zh)
WO (1) WO2021174928A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113918263A (zh) * 2021-11-11 2022-01-11 盐城金堤科技有限公司 视图组件的虚拟路由方法、装置、设备及计算机存储介质

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111506387B (zh) 2020-03-02 2023-09-22 百度在线网络技术（北京）有限公司 页面预渲染方法、装置、电子设备及存储介质
CN112100476A (zh) * 2020-09-01 2020-12-18 武汉华盛美业科技有限公司 针对单页面对多状态对象的动态数据获取方法及其系统
CN112084395A (zh) * 2020-09-25 2020-12-15 百度国际科技（深圳）有限公司 搜索方法、搜索装置、电子设备和存储介质
CN112182334B (zh) * 2020-09-27 2024-07-05 东风汽车有限公司 车载超文本标记语言文件处理方法、电子设备、服务器处理方法及服务器
CN112527374A (zh) * 2020-12-11 2021-03-19 北京百度网讯科技有限公司 标注工具生成方法、标注方法、装置、设备以及存储介质
CN112800370B (zh) * 2021-01-28 2024-04-30 金蝶蝶金云计算有限公司 业务单据的处理方法、装置、计算机设备和存储介质
CN113010827B (zh) * 2021-03-16 2024-03-22 北京百度网讯科技有限公司 页面渲染方法、装置、电子设备以及存储介质
CN113326043B (zh) * 2021-05-26 2022-05-03 上海哔哩哔哩科技有限公司 网页渲染方法、网页制作方法及网页渲染系统
CN113326456B (zh) * 2021-07-08 2022-01-21 北京达佳互联信息技术有限公司 网页资源获取方法、装置、设备、系统及存储介质
CN113703893B (zh) * 2021-08-24 2024-06-07 上海浦东发展银行股份有限公司 一种页面渲染方法、装置、终端及存储介质
CN114756319A (zh) * 2022-04-25 2022-07-15 中国建设银行股份有限公司 小程序页面显示方法、装置、设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170346876A1 (en) * 2016-05-27 2017-11-30 Microsoft Technology Licensing, Llc Web page accelerations for web application hosted in native mobile application
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技（上海）有限公司 一种web预加载页面的生成方法及装置
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术（北京）有限公司 一种网页渲染方法、装置、电子设备及存储介质
CN110851683A (zh) * 2019-10-25 2020-02-28 陈奕博 一种用于预渲染的网页显示方法
CN111506387A (zh) * 2020-03-02 2020-08-07 百度在线网络技术（北京）有限公司 页面预渲染方法、装置、电子设备及存储介质

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7171443B2 (en) * 2001-04-04 2007-01-30 Prodigy Communications, Lp Method, system, and software for transmission of information
US7386786B2 (en) * 2003-01-24 2008-06-10 The Cobalt Group, Inc. Method and apparatus for processing a dynamic webpage
EP1662405A1 (en) 2004-11-30 2006-05-31 Alcatel Method of displaying data on a client computer
US8554938B2 (en) * 2010-08-31 2013-10-08 Millind Mittal Web browser proxy-client video system and method
US10095663B2 (en) 2012-11-14 2018-10-09 Amazon Technologies, Inc. Delivery and display of page previews during page retrieval events
US9720888B1 (en) * 2014-05-22 2017-08-01 Amazon Technologies, Inc. Distributed browsing architecture for the delivery of graphics commands to user devices for assembling a plurality of layers of a content page
US9753904B2 (en) 2014-07-25 2017-09-05 Qualcomm Incorporated Fast rendering of websites containing dynamic content and stale content
US10115141B1 (en) 2014-09-24 2018-10-30 Amazon Technologies, Inc. Secure proxy service
US20180032491A1 (en) 2016-07-26 2018-02-01 Google Inc. Web page display systems and methods
CN107066631A (zh) * 2017-05-26 2017-08-18 北京三快在线科技有限公司 页面的显示方法、装置及电子设备
CN110020278B (zh) * 2017-09-08 2023-05-02 阿里巴巴集团控股有限公司 页面数据的展示、提供方法、客户端及服务器
US11206273B2 (en) * 2018-01-31 2021-12-21 Salesforce.Com, Inc. Content management system connect
US10747828B2 (en) * 2018-03-27 2020-08-18 Capital One Services, Llc Systems and methods for single page application server side renderer
CN110096659B (zh) * 2019-03-27 2021-08-20 北京三快在线科技有限公司 一种页面显示方法、装置、设备及可读存储介质
CN110187913B (zh) * 2019-05-17 2023-06-09 北京百度网讯科技有限公司 小程序的发布、运行方法和装置
US11562037B2 (en) * 2019-09-18 2023-01-24 International Business Machines Corporation Crawlability of single page applications

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170346876A1 (en) * 2016-05-27 2017-11-30 Microsoft Technology Licensing, Llc Web page accelerations for web application hosted in native mobile application
CN110309451A (zh) * 2018-03-02 2019-10-08 拉扎斯网络科技（上海）有限公司 一种web预加载页面的生成方法及装置
CN110851683A (zh) * 2019-10-25 2020-02-28 陈奕博 一种用于预渲染的网页显示方法
CN110795195A (zh) * 2019-10-31 2020-02-14 百度在线网络技术（北京）有限公司 一种网页渲染方法、装置、电子设备及存储介质
CN111506387A (zh) * 2020-03-02 2020-08-07 百度在线网络技术（北京）有限公司 页面预渲染方法、装置、电子设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113918263A (zh) * 2021-11-11 2022-01-11 盐城金堤科技有限公司 视图组件的虚拟路由方法、装置、设备及计算机存储介质
CN113918263B (zh) * 2021-11-11 2023-09-05 盐城天眼察微科技有限公司 视图组件的虚拟路由方法、装置、设备及计算机存储介质

Also Published As

Publication number Publication date
US11829436B2 (en) 2023-11-28
EP3896567A4 (en) 2022-04-06
JP2022525831A (ja) 2022-05-20
EP3896567A1 (en) 2021-10-20
CN111506387A (zh) 2020-08-07
CN111506387B (zh) 2023-09-22
US20220308900A1 (en) 2022-09-29
EP3896567B1 (en) 2023-06-21

Similar Documents

Publication Publication Date Title
WO2021174928A1 (zh) 页面预渲染方法、装置、电子设备及存储介质
CN106991154B (zh) 网页渲染方法、装置、终端及服务器
US11677857B2 (en) Configurable and dynamic transformation of web content
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
US9921892B2 (en) Techniques to modify a document using a latent transfer surface
WO2020119485A1 (zh) 一种页面显示方法、装置、设备及存储介质
KR20210091686A (ko) 미니프로그램 실행 방법, 미니프로그램 실행 장치, 전자 기기 및 저장 매체
JP2010176336A (ja) クライアントプログラム、端末、方法、サーバシステムおよびサーバプログラム
TW201911020A (zh) 頁面更新方法和裝置
EP2718839A2 (en) Automated user interface object transformation and code generation
CN111159592A (zh) 搜索结果页生成方法、装置、电子设备及存储介质
TW201804340A (zh) 腳本生成方法與裝置
CN113238754A (zh) 服务端渲染方法、装置、服务端及存储介质
EP2718838A2 (en) Techniques for adapting an interpretive run time application to multiple clients
US20240179224A1 (en) Systems and methods for rendering interactive web pages
KR102040359B1 (ko) 상태 정보를 위한 동기화 지점
CN112506854A (zh) 页面模板文件的存储和页面生成方法、装置、设备及介质
US20170093652A1 (en) Visualization hypertext
Patel Analyzing the Impact of Next. JS on Site Performance and SEO
US20240095298A1 (en) Systems and methods for rendering interactive web pages
US20120216132A1 (en) Embedding User Selected Content In A Web Browser Display
EP3008697B1 (en) Coalescing graphics operations
CN114969591A (zh) 页面渲染方法、装置、电子设备及可读存储介质
CN112130811A (zh) 数据处理方法与装置、存储介质、电子设备
US11874890B2 (en) Multi-entry point navigation for user interfaces

Legal Events

Date Code Title Description
ENP Entry into the national phase

Ref document number: 2021536286

Country of ref document: JP

Kind code of ref document: A

ENP Entry into the national phase

Ref document number: 2020904237

Country of ref document: EP

Effective date: 20210628

NENP Non-entry into the national phase

Ref country code: DE