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

技术领域

本公开涉及计算机技术领域，尤其涉及网页应用领域。

背景技术

一个网页从无到有，再交付给用户访问使用的过程，可分为本地开发过程和线上交付过程。

在本地开发阶段，开发者可以遵循HTML、CSS、JavaScript和模版语法编写产出模版结构、样式、客户端脚本、图片等静态资源。在线上交付后，当用户通过浏览器访问统一资源定位符(即URL，Uniform Resource Locator)以请求网页时，服务器端可以动态渲染页面，并将渲染完成的页面返回给浏览器。

发明内容

本公开提供了一种页面渲染方法、装置、电子设备、存储介质和计算机程序产品。

根据本公开的一方面，提供了一种页面渲染方法，包括：获取来自服务端的调用请求，其中，调用请求是在服务端获取到来自客户端的访问请求的情况下发送的；响应于调用请求，调用同构渲染器，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作，其中，在页面的开发阶段预先利用同构渲染器进行了模拟渲染；以及向服务端返回渲染完成的超文本标记语言文件。

根据本公开的另一方面，提供了一种页面渲染装置，包括：获取模块、响应模块和发送模块。

获取模块，用于获取来自服务端的调用请求，其中，上述调用请求是在上述服务端获取到来自客户端的访问请求的情况下发送的。

响应模块，用于响应于上述调用请求，调用同构渲染器，根据页面的静态资源、超文本标记语言结构信息和上述页面的内容数据执行渲染操作，其中，在上述页面的开发阶段预先利用上述同构渲染器进行了模拟渲染。

发送模块，用于向上述服务端返回渲染完成的超文本标记语言文件。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上所述的方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行如上所述的方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现如上所述的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1示意性示出了根据本公开实施例的可以应用页面渲染方法及装置的示例性系统架构；

图2示意性示出了根据本公开实施例的页面渲染方法的流程图；

图3示意性示出了根据本公开实施例的同构渲染器在生产环境下进行页面渲染的流程图；

图4示意性示出了根据本公开实施例的同构渲染器在开发环境下进行页面渲染的流程图；

图5示意性示出了根据本公开实施例的调用同构渲染器API的示意图；

图6示意性示出了根据本公开实施例的页面渲染装置的框图；以及

图7示意性示出了根据本公开实施例的适于实现页面渲染方法的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

当用户通过浏览器访问URL请求网页时，在相关技术中，服务器端动态页面渲染技术的实现方案主要分为三类。

第一类，基于模板引擎的渲染技术。原理是网页开发者在模板引擎框架下使用模板语法编写模版结构、样式、客户端脚本，然后将编写好的模板放到服务器的特定目录下，当有客户端请求时，由模板引擎实时动态编译替换，返回完全渲染的页面内容展示给用户。

但在实现本公开的过程中发现，基于模板语法编写的模板，组件很难复用，没有构建编译阶段就不能预先进行组件优化，前后端代码管理不当会混在一起，较难实现前后端分离开发，在企业级应用多人协同开发时，甚至会出现前后端分工不明确，导致沟通成本高，影响开发效率，页面渲染性能优化流程不顺畅等问题。

第二类，基于特定技术栈独立的服务器端渲染模块。原理是页面开发者在构建编译阶段打包出用于服务端渲染(即SSR，Server-Side Rendering)执行的页面应用bundle.js，最终上线部署到特定的服务端环境下执行。

但在实现本公开的过程中发现，基于特定技术栈独立的服务器端渲染模块，要保证本地开发阶段渲染的组件和页面，能平滑的运行在云端的渲染环境下，是一个有挑战的事，尤其当组件依赖了本地开发使用的浏览器特有的对象时，挑战更大。虽然有测试环境供调试，但需要另外单独启动一个服务器端渲染模块，调试结果无法及时做到验证，需要等待编译落盘产出bundle.js文件，调试流程长，线上风险较大。

第三类，基于特定技术栈集成的前后通用框架。原理是基于前端框架的同构渲染封装，然后暴露出接口，页面开发者使用其暴露的接口进行组件和页面的代码编写。即将一份代码同时运行在服务端和客户端，开发人员只关注业务实现即可，由框架自身控制在开发机上开发构建和云端生产环境的切换。对应的框架如：基于React技术栈的Next.js，基于Vue技术栈的Nuxt.js。

基于特定技术栈集成的前后通用框架，如基于React/Vue等前端框架的同构渲染，可以写同一份代码，同时运行在服务端和客户端，开发人员只关注业务实现即可，在开发机环境下使用和线上环境一样的渲染流程。但在实现本公开的过程中发现，正因为集成封装的太严实，导致开发者必须需要使用其框架暴露出来的API接口才能享用到框架的能力，对代码侵入太多，这就使得框架绑定问题比较突出，并且接入该框架或迁移框架时代码改造量随工程页面成正比增加。

随着AJAX(即Asynchronous JavaScript And XML，表示异步JavaScript和可扩展标记语言XML的简称)技术的出现，使得web应用能够在不刷新的状态下显示不同页面的内容，这种web应用可以称之为单页应用(SPA，Single Page Application)。

在一个单页应用中，一般只有一个超文本标记语言(即Hyper Text MarkupLanguage，简称HTML，表示超文本标记语言，是一种用于创建网页的标准标记语言)文件，根据访问的URL来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也带来了诸多问题，如搜索引擎优化(SEO，Search Engine Optimization)不友好、首屏可见时间过长等。需要说明的是，超文本标记语言文件并不限于单页应用中，也可以适用于其他类型的应用。

为了解决上述部分或全部问题，网页静态化技术应运而生。在相关技术中，网页静态化技术主要包括以下几种。

客户端渲染(即CSR，Client-Side Rendering)：用户通过客户端访问URL，请求HTML文件，前端根据路由动态渲染页面内容，执行API获取数据，但展示最终态页面内容的过程较长，有一定的白屏时间。

预渲染(即Prerendering)：在构建阶段生成匹配预渲染路径的HTML文件(其中，每个需要预渲染的路由都有一个对应的HTML文件)。构建出来的HTML文件不包括用户的个性化内容，需要请求数据进行二次渲染补充。

服务端渲染：用户通过客户端访问URL，服务端根据访问路径请求所需数据后，与HTML模板合并渲染，生成最终HTML文件，返回给客户端浏览器。客户端浏览器接收到的HTML包括用户的个性化信息在内的全部内容。

服务器渲染可以对每一个渲染请求实时动态编译直出HTML文件。这种方式使搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，无需等待JavaScript下载并执行后才能看到完全渲染的页面。

但在服务器端渲染仍然有些影响开发效率的关键问题需要解决。例如，其一，组件环境需要兼容，在浏览器环境(即客户端环境)下运行畅通无阻的页面组件，需要考虑兼容服务器端渲染环境。其二，构建设置和部署规范化，构建并部署供服务器端渲染环境的Node.js服务器读取的页面应用bundle.js，需要一套规范化的交付流程。其三，页面开发者需要编写服务器端代码并考虑到服务器端的负载，具备负载均衡、缓存等并合理的使用这些资源。

本公开通过构建一个同构的页面渲染器，即同构渲染器，然后在本地开发环境和线上云端生产环境统一引入，并统一升级维护，以解决在使用同构技术开发网页时遇到的上述问题，提升了网页编写者的开发效率。

本公开的实施例提供了一种页面渲染方法，包括：获取来自服务端的调用请求，其中，调用请求是在服务端获取到来自客户端的访问请求的情况下发送的；响应于调用请求，调用同构渲染器，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作，其中，在页面的开发阶段预先利用同构渲染器进行了模拟渲染；以及向服务端返回渲染完成的超文本标记语言文件。

图1示意性示出了根据本公开实施例的可以应用页面渲染方法及装置的示例性系统架构。

需要注意的是，图1所示仅为可以应用本公开实施例的系统架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图1所示，根据该实施例的系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线和/或无线通信链路等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如知识阅读类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端和/或社交平台软件等(仅为示例)。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所浏览的内容提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

本公开实施例所提供的页面渲染方法一般可以由服务器105执行。相应地，本公开实施例所提供的页面渲染装置一般可以设置于服务器105中。本公开实施例所提供的页面渲染方法也可以由不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的页面渲染装置也可以设置于不同于服务器105且能够与终端设备101、102、103和/或服务器105通信的服务器或服务器集群中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

图2示意性示出了根据本公开实施例的页面渲染方法的流程图。

如图2所示，该方法包括操作S210～S230。

在操作S210，获取来自服务端的调用请求，其中，调用请求是在服务端获取到来自客户端的访问请求的情况下发送的。

在操作S220，响应于调用请求，调用同构渲染器，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作，其中，在页面的开发阶段预先利用同构渲染器进行了模拟渲染。

在操作S230，向服务端返回渲染完成的超文本标记语言文件。

根据本公开的实施例，用户可以通过客户端请求访问页面，客户端例如可以包括但不限于浏览器等。客户端可以将访问请求发送给服务端的服务器。

根据本公开的实施例，在服务端获取到访问请求之后，服务端可以向同构渲染器发送调用请求，调用请求中可以包括访问请求所携带的信息，例如，请求访问的页面地址信息。

根据本公开的实施例，同构渲染器可以响应于调用请求，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作。

根据本公开的实施例，客户端请求访问的页面在开发阶段预先利用了同构渲染器进行了模拟渲染。

根据本公开的实施例，超文本标记语言文件也可以称之为HTML文件。根据本公开的实施例，静态资源例如可以包括层叠样式表(CSS，Cascading Style Sheets)和JavaScript脚本等。页面的内容数据例如可以包括图片、文字信息等等。

根据本公开的实施例，在本地开发环境和线上云端生产环境统一引入同构渲染器，并统一升级维护，通过调用同构渲染器的方式，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作，得到超文本标记语言文件。由于在页面的开发阶段预先利用同构渲染器进行了模拟渲染，使得页面开发环境和线上环境组件表现一致，消除了运行环境的差异，提升了研发效率，降低了项目风险。

根据本公开的实施例，在生产环境(即客户端环境)下运行畅通无阻的页面组件，可以自动兼容服务端渲染环境。帮助开发者节省掉长期优化的时间，赋能网站构建能力。

根据本公开的实施例，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作包括：

解析调用请求中的页面路由参数，并获取依赖接口服务参数；

根据页面路由参数获得页面的静态资源和超文本标记语言结构信息；

根据依赖接口服务参数获得页面的内容数据；

生成用于渲染页面的渲染环境；以及

在渲染环境下，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作。

下面参考图3，结合具体实施例对图2所示的方法做进一步说明。

图3示意性示出了根据本公开实施例的同构渲染器在生产环境下进行页面渲染的流程图。

如图3所示，该方法包括操作S301～S306。需要说明的是，本公开实施例中所描述的操作在不违背本领域合乎逻辑的执行顺序的情况下，可以同时进行，也可以按照先后顺序进行。

在操作S301，服务端发送调用请求，以请求上下文。

在操作S302，同构渲染器在接收到调用请求之后，响应于该调用请求，解析页面路由参数。根据页面路由参数可以获得页面的静态资源和超文本标记语言结构信息。

在操作S303，同构渲染器还可以获取依赖接口服务参数。根据依赖接口服务参数获得页面的内容数据。

在操作S304，生成用于渲染页面的上下文渲染环境。

在操作S305，利用上述信息和数据，在生成的渲染环境下，执行渲染，得到完全渲染的HTML文件。

在操作S306，向服务端返回完全渲染的HTML文件。

根据本公开的实施例，在向服务端返回完全渲染的HTML文件之后，服务端可以向客户端返回完全渲染的HTML文件。根据本公开的实施例，由于通过同构渲染器执行了渲染操作，得到超文本标记语言文件，无需在客户端再进行渲染。使得网络爬虫可以直接解析到文件中携带的内容。缩短了网页白屏时间，能给用户提供较为极致的使用体验，降低了获客成本，同时提升用户粘性。

根据本公开的实施例，在页面的开发阶段预先利用同构渲染器进行了模拟渲染包括：通过打包工具调用超文本标记语言网页包插件和预渲染插件，其中，超文本标记语言网页包插件用于创建超文本标记语言文本；通过监听超文本标记语言网页包插件的第一目标钩子，获取页面的静态资源；通过监听超文本标记语言网页包插件的第二目标钩子，获取页面的结构信息；以及调用同构渲染器，根据页面的静态资源和页面的结构信息进行模拟渲染。

根据本公开的实施例，打包工具例如可以是webpack插件系统。webpack插件系统是一个用于JavaScript应用程序的静态模块打包工具。当webpack插件系统处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个包。

webpack插件系统可以获取每次构建的编译上下文以及热更新功能。对象包含了当前的模块资源、编译生成资源、变化的文件等。当webpack插件系统以开发模式运行时，每当检测到一个文件变化，一次新的编译将被创建。编译对象也提供了很多事件回调供插件做扩展。

根据本公开的实施例，超文本标记语言网页包插件是用于创建HTML文件的插件，用于创建HTML文件的插件例如可以包括html-webpack-plugin。其作用是当使用webpack插件系统打包时，创建一个HTML文件，并把webpack插件系统打包后的静态文件自动插入到这个HTML文件当中。

根据本公开的实施例，预渲染插件可以用于预先将页面从空白页过渡到了有内容的中间状态，使得后续用户访问页面时，看到的将是直接从中间状态变为完全渲染的页面，而不会看到初始的空白页。预渲染可在页面的编译构建阶段进行。

根据本公开的实施例，第一目标钩子包括资源标签生成前钩子；第二目标钩子包括模板执行后钩子。

根据本公开的实施例，可以调用同构渲染器，根据页面的静态资源和页面的结构信息进行模拟渲染。根据本公开的实施例，同构渲染器也可以采用上述操作S301～S305进行模拟渲染。

根据本公开的实施例，基于同构渲染器实现了静态网页的高效开发。

根据本公开的实施例，在同构渲染器通过模拟渲染得到的超文本标记语言文件之后，还可以向打包工具发送通过模拟渲染得到的超文本标记语言文件；将超文本标记语言文件的标识添加至资源清单中。

根据本公开的实施例，资源清单中可以包括多个页面分别对应的超文本标记语言文件的标识。根据超文本标记语言文件的标识可以查找到对应的超文本标记语言文件。

根据本公开的实施例，调用同构渲染器，根据页面的静态资源和页面的结构信息进行模拟渲染包括：调用同构渲染器，根据页面的静态资源和页面的结构信息，结合页面开发框架原生服务端渲染能力，渲染得到超文本标记语言文件。

根据本公开的实施例，可以在eval环境下执行JavaScript脚本。即可以使用eval执行页面导出的JavaScript模块，通过JavaScript文档对象模型(JSDOM，JavaScripDocument Object Model)模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成页面的静态HTML文件。其中，eval是一个可以在无界面图形环境下执行JavaScript代码的库。

根据本公开的实施例，静态资源可以包括JavaScript脚本。

根据本公开的实施例，调用同构渲染器，根据页面的静态资源和页面的结构信息，结合页面开发框架原生服务端渲染能力，渲染得到超文本标记语言文件包括：在eval环境下执行JavaScript脚本，结合页面开发框架原生服务端渲染能力，展示超文本标记语言文件的渲染效果。

根据本公开的实施例，可以使用eval执行当前页面导出的JavaScript模块，配合同构渲染器渲染能力可实时显示调试信息。

根据本公开的实施例，通过上述开发调试过程，可以保证代码能直接运行在线上Node.js服务端渲染环境。然后在webpack构建编译阶段，将业务代码以目标运行在Node.js环境，打包一份bundle.js部署在服务端。在Node.js和HTTP服务器中使用同个服务端渲染器的渲染能力产出HTML文件。

根据本公开的实施例，因为在开发阶段使用打包工具和插件从切面解决了服务端渲染的问题，几乎无侵入代码进入原页面，又实现了在开发阶段不用跨模块就能实时调试。在生产环境调用与开发环境同构的渲染器API的方式，保证了开发环境和线上环境组件表现一致，消除了运行环境差异，提升了研发效率，降低了项目风险。

根据本公开的实施例，即使在网络信号较差的环境下，服务端渲染不用等到JavaScript脚本执行完就能较快地呈现页面内容，减少了页面不可见时间，只要连接上互联网，即使浏览器不支持渲染也不会看到空白页。

图4示意性示出了根据本公开实施例的同构渲染器在开发环境下进行页面渲染的流程图。

如图4所示，该方法包括操作S401～S417。需要说明的是，本公开实施例中所描述的操作在不违背本领域合乎逻辑的执行顺序的情况下，可以同时进行，也可以按照先后顺序进行。

在操作S401，webpack插件系统调用用于创建HTML文件的插件(html-webpack-plugin)。

在操作S402，webpack插件系统调用预渲染插件。

在操作S403，预渲染插件通过监听html-webpack-plugin的生成资源标签之前的钩子(before Asset Tag Generation hook)，来获取页面的静态资源。

根据本公开的实施例，静态资源中可以包括但不限于CSS、JavaScript脚本和图片等。

在操作S404，预渲染插件可以对获取到的静态资源进行缓存。

在操作S405，预渲染插件向html-webpack-plugin返回响应(callback)信息。

在操作S406，预渲染插件通过监听html-webpack-plugin的在HTML模板编译完成之后的钩子(after Template Execution hook)，来获取编译后的页面的HTML结构信息。

根据本公开的实施例，HTML结构信息中可以包括页面通用内容等。

在操作S407，预渲染插件对获取到的HTML结构信息进行缓存。

在操作S408，预渲染插件向html-webpack-plugin返回响应信息。

在操作S409，预渲染插件监听到html-webpack-plugin的HTML产出前的钩子(before Emit hook)，触发预渲染。

在操作S410，预渲染插件向同构渲染器发送页面的静态资源及HTML模板。

在操作S411，同构渲染器解析页面路由参数。

在操作S412，同构渲染器获取依赖接口服务参数。

在操作S413，同构渲染器生成用于渲染的本地上下文环境。

在操作S414，同构渲染器执行渲染，得到完全渲染的HTML文件。

在操作S415，同构渲染器向预渲染插件返回完全渲染的HTML文件。

在操作S416，预渲染插件向html-webpack-plugin返回完全渲染的HTML文件。

在操作S417，html-webpack-plugin向webpack插件系统返回完全渲染的HTML文件，以便webpack插件系统将完全渲染的HTML文件添加至资源清单中。

根据本公开的实施例，webpack插件系统可以将完全渲染的HTML文件通过控制台进行显示，控制台可以实时显示产出的文件。

图5示意性示出了根据本公开实施例的调用同构渲染器API的示意图。

如图5所示，可以在开发环境中建立在webpack插件系统、html-webpack-plugin插件(用于创建HTML文件的插件)、预渲染插件、网页框架原生服务端渲染。在生产环境中建立Node.js、HTTP Server和服务端渲染。

根据本公开的实施例，在开发环境和生产环境中，可以通过调用同构渲染器的API接口的方式，实现解析路由参数、获取数据参数、生成渲染环境和执行渲染操作。

根据本公开的实施例，融合了基于特定技术栈独立的服务器端渲染模块独立部署和基于特定技术栈集成的前后通用框架开发阶段实时渲染的优点。根据本公开的实施例，可以基于标准配置统一的原则，设计和实现同构渲染器，一方面可以将同构渲染器集成进webpack render plugin插件，供开发阶段实时渲染调试，另一方面可以将同构渲染器集成进生产环境的Node.js服务端，供线上页面访问实时渲染生产。

通过本公开的实施例，使得页面开发环境和线上环境组件表现一致，消除了运行环境的差异，提升了研发效率，降低了项目风险。

图6示意性示出了根据本公开实施例的页面渲染装置的框图。

如图6所示，页面渲染装置600包括：获取模块610、响应模块620和发送模块630。

获取模块610用于获取来自服务端的调用请求，其中，上述调用请求是在上述服务端获取到来自客户端的访问请求的情况下发送的。

响应模块620用于响应于上述调用请求，调用同构渲染器，根据页面的静态资源、超文本标记语言结构信息和上述页面的内容数据执行渲染操作，其中，在上述页面的开发阶段预先利用上述同构渲染器进行了模拟渲染。

发送模块630用于向上述服务端返回渲染完成的超文本标记语言文件。

根据本公开的实施例，在本地开发环境和线上云端生产环境统一引入同构渲染器，并统一升级维护，通过调用同构渲染器的方式，根据页面的静态资源、超文本标记语言结构信息和页面的内容数据执行渲染操作，得到超文本标记语言文件。由于在页面的开发阶段预先利用同构渲染器进行了模拟渲染，使得页面开发环境和线上环境组件表现一致，消除了运行环境的差异，提升了研发效率，降低了项目风险。

根据本公开的实施例，上述响应模块包括：解析单元、第一获得单元、第二获得单元、生成单元和执行单元。

解析单元，用于解析上述调用请求中的页面路由参数，并获取依赖接口服务参数。

第一获得单元，用于根据上述页面路由参数获得上述页面的静态资源和上述超文本标记语言结构信息。

第二获得单元，用于根据上述依赖接口服务参数获得上述页面的内容数据。

生成单元，用于生成用于渲染页面的渲染环境。

执行单元，用于在上述渲染环境下，根据上述页面的静态资源、上述超文本标记语言结构信息和上述页面的内容数据执行渲染操作。

根据本公开的实施例，页面渲染装置600可以包括打包工具、超文本标记语言网页包插件、预渲染插件。

根据本公开的实施例，在上述页面的开发阶段预先利用上述同构渲染器进行了模拟渲染包括：通过打包工具调用超文本标记语言网页包插件和预渲染插件，其中，上述超文本标记语言网页包插件用于创建超文本标记语言文本；通过预渲染插件可以监听上述超文本标记语言网页包插件的第一目标钩子，获取上述页面的静态资源；通过预渲染插件监听上述超文本标记语言网页包插件的第二目标钩子，获取上述页面的结构信息；以及预渲染插件调用上述同构渲染器，根据上述页面的静态资源和上述页面的结构信息进行模拟渲染。

根据本公开的实施例，同构渲染器可以向上述打包工具发送通过模拟渲染得到的超文本标记语言文件；以及将上述超文本标记语言文件的标识添加至资源清单中。

根据本公开的实施例，上述第一目标钩子包括资源标签生成前钩子；上述第二目标钩子包括模板执行后钩子。

根据本公开的实施例，上述调用上述同构渲染器，根据上述页面的静态资源和上述页面的结构信息进行模拟渲染包括：调用上述同构渲染器，根据上述页面的静态资源和上述页面的结构信息，结合页面开发框架原生服务端渲染能力，渲染得到上述超文本标记语言文件。

根据本公开的实施例，上述静态资源包括JavaScript脚本。

根据本公开的实施例，上述预渲染插件调用上述同构渲染器，根据上述页面的静态资源和上述页面的结构信息，结合页面开发框架原生服务端渲染能力，渲染得到上述超文本标记语言文件包括：在eval环境下执行上述JavaScript脚本，结合页面开发框架原生服务端渲染能力，展示上述超文本标记语言文件的渲染效果。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

根据本公开的实施例，一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行如上所述的方法。

根据本公开的实施例，一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行如上所述的方法。

根据本公开的实施例，一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现如上所述的方法。

图7示出了可以用来实施本公开的实施例的示例电子设备700的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图7所示，设备700包括计算单元701，其可以根据存储在只读存储器(ROM)702中的计算机程序或者从存储单元708加载到随机访问存储器(RAM)703中的计算机程序，来执行各种适当的动作和处理。在RAM 703中，还可存储设备700操作所需的各种程序和数据。计算单元701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

设备700中的多个部件连接至I/O接口705，包括：输入单元706，例如键盘、鼠标等；输出单元707，例如各种类型的显示器、扬声器等；存储单元708，例如磁盘、光盘等；以及通信单元709，例如网卡、调制解调器、无线通信收发机等。通信单元709允许设备700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理，例如页面渲染方法。例如，在一些实施例中，页面渲染方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由ROM 702和/或通信单元709而被载入和/或安装到设备700上。当计算机程序加载到RAM 703并由计算单元701执行时，可以执行上文描述的页面渲染方法的一个或多个步骤。备选地，在其他实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面渲染方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。