[发明专利]页面预渲染方法、装置、电子设备及存储介质

说明书

本申请公开了页面预渲染方法、装置、电子设备及存储介质，涉及互联网领域，其中的方法可包括：针对待处理的页面，获取页面的静态资源；获取编译后的页面的超文本标记语言结构信息；根据所述静态资源及超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成页面的静态超文本标记语言文件。应用本申请所述方案，可提升预渲染效率等。

技术领域

本申请涉及计算机应用技术，特别涉及互联网领域的页面预渲染方法、装置、电子设备及存储介质。

背景技术

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

在一个单页应用中，往往只有一个超文本标记语言(HTML，HyperText MarkupLanguage)文件，根据访问的统一资源定位符(URL，Uniform Resource Locator)来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也带来了诸多问题，如搜索引擎优化(SEO，Search Engine Optimization)不友好、首屏可见时间过长等。预渲染技术正是为解决这些问题而提出的。

预渲染是指在页面编译构建阶段生成匹配预渲染的路由的静态HTML文件。常用的预渲染方式包括基于无头浏览器的预渲染方式等。但这种方式针对每个页面路由都要经过一个完整的浏览器过程，消耗页面构建机资源，往往也需要安装一些额外的系统库支持无头浏览器工作，其次需要新增管道流程，产出过程缓慢等。

发明内容

有鉴于此，本申请提供了页面预渲染方法、装置、电子设备及存储介质。

一种页面预渲染方法，包括：

针对待处理的页面，获取所述页面的静态资源；

获取编译后的所述页面的超文本标记语言结构信息；

根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。

根据本申请一优选实施例，所述获取所述页面的静态资源包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第一预定钩子，获取所述静态资源；所述获取编译后的所述页面的超文本标记语言结构信息包括：通过监听超文本标记语言网页包插件html-webpack-plugin的第二预定钩子，获取所述超文本标记语言结构信息。

根据本申请一优选实施例，所述第一预定钩子包括：资源标签生成前钩子beforeAssetTagGeneration hook；所述第二预定钩子包括：模板执行后钩子afterTemplateExecution hook。

根据本申请一优选实施例，所述静态资源中包括：层叠样式表及JavaScript脚本。

根据本申请一优选实施例，所述结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件包括：

在eval环境下执行所述JavaScript脚本，通过JavaScript文档对象模型JSDOM模拟所需的浏览器宿主环境，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。

一种页面预渲染装置，包括：获取单元以及生成单元；

所述获取单元，用于针对待处理的页面，获取所述页面的静态资源，并获取编译后的所述页面的超文本标记语言结构信息；

所述生成单元，用于根据所述静态资源及所述超文本标记语言结构信息，结合网页框架原生的服务端渲染能力，生成所述页面的静态超文本标记语言文件。