页面渲染方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及研发管理领域，公开了一种页面渲染方法、装置、设备及存储介质，用于解决现有技术中对页面渲染时渲染速度较慢，有效内容展示不够及时的技术问题。该方法包括：响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求；调用服务器端根据首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并生成首屏页面；响应于接收到的基于首屏页面生成的后续页面操作，根据后续页面操作向服务器端中的数据接口服务器发送后续页面数据获取请求；调用数据接口服务器响应于后续页面数据获取请求，向客户端发送目标后续页面数据；调用客户端根据目标后续页面数据进行页面渲染，得到渲染完毕的首屏后续页面。后续页面。后续页面。

【技术实现步骤摘要】
页面渲染方法、装置、设备及存储介质


[0001]本专利技术涉及研发管理领域，尤其涉及一种页面渲染方法、装置、设备及存储介质。

技术介绍

[0002]随着互联网技术高速发展，采用网页或APP展示页面逐渐变为常用的手段，近年来，越来越多的开发者通过采用描述语言添加音频、视频及动态图片以向用户展示丰富的动态网页，以提高用户浏览时的体验。由于所述的网页包含有各种组成部分，故在向用户展示前需要根据要展示的内容的对应数据进行网页的页面渲染。
[0003]在现有的技术中，目前对于行内项目，前后端完全分离的项目占了主流，也即是说，由于前端的计算能力有限，故为了提高页面渲染的速度，采用后端服务器对页面进行渲染得到HTML页面后再传输到前端进行显示。但是当要渲染的页面为首页时，由于首页需要渲染的内容较多，采用后端渲染反而会导致页面渲染速度变慢，出现长时间白屏、有效内容展示速度慢的情况，进一步导致用户体验降低。

技术实现思路

[0004]本专利技术的主要目的在于解决现有技术中对页面渲染时渲染速度较慢，有效内容展示不够及时的技术问题。
[0005]本专利技术第一方面提供了一种页面渲染方法，包括：响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求；调用服务器端根据所述首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并基于所述首屏HTML文件生成首屏页面；响应于接收到的基于所述首屏页面生成的后续页面操作，根据所述后续页面操作向服务器端中的数据接口服务器发送后续页面数据获取请求；调用所述数据接口服务器响应于所述后续页面数据获取请求，向客户端发送目标后续页面数据；调用所述客户端根据所述目标后续页面数据进行页面渲染，得到渲染完毕的首屏后续页面。
[0006]可选的，在本专利技术第一方面的第一种实现方式中，所述调用服务器端根据所述首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并基于所述首屏HTML文件生成首屏页面包括：服务器端中的NODEJS服务器响应于所述首屏加载请求，向数据接口服务器中发送页面数据获取请求；所述数据接口服务器响应于所述页面数据获取请求，提取所述页面数据获取请求对应的页面资源，并将所述页面资源返回给所述NODEJS服务器；所述NODEJS服务器根据所述页面资源进行首屏页面渲染，得到首屏HTML文件，并基于所述首屏HTML文件生成首屏页面。
[0007]可选的，在本专利技术第一方面的第二种实现方式中，所述调用所述数据接口服务器响应于所述后续页面数据获取请求，向客户端发送目标后续页面数据包括：所述数据接口服务器响应于所述后续页面数据获取请求，解析所述后续页面获取请求对应的后续页面数据项目；读取CDN缓存中包含的数据文件；根据所述后续页面数据项目在所述数据文件中查找出所述后续页面数据项目对应的静态资源，得到目标后续页面数据。
[0008]可选的，在本专利技术第一方面的第三种实现方式中，在所述响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求之前，还包括：获取页面加载所需的页面数据，其中，所述页面数据包括如js文件、css文件、img文件；将所述页面数据通过webpack进行编译，得到静态资源；通过script方式将所述静态资源文件索引中，并将所述插入完毕的文件索引保存至CDN缓存中，其中，所述文件索引包括index.spa.html和index.ssr.html。
[0009]可选的，在本专利技术第一方面的第四种实现方式中，在所述得到渲染完毕的首屏后续页面之后，还包括：根据所述客户端的前端的操作内容生成操作日志，并将所述操作日志保存至客户端数据库中，其中，所述日志内容上标记有当前用户的操作水印；调用CAT agnet根据所述操作水印读取所述数据库中包含的操作日志，得到日志内容；在所述日志内容中查询预先配置的风险关键字，若查询到有预先配置的风险关键字，则生成安全风险提示信息。
[0010]可选的，在本专利技术第一方面的第五种实现方式中，所述响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求包括：对接收到的来自于客户端的前端的首屏页面获取请求进行解析，得到所述页面请求中的请求来源字段；根据所述请求来源字段在预先配置的规则数据库中查找所述页面获取请求的来源客户端的接口种类；根据所述接口种类确定所述页面获取请求对应的接口获取请求规则；根据预先配置的Fetch方法，根据所述接口获取请求规则调用服务器接口，并根据所述服务器接口向服务器端发送首屏加载请求。
[0011]本专利技术第二方面提供了一种页面渲染装置，包括：第一请求模块，用于响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求；第一渲染模块，用于调用服务器端根据所述首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并基于所述首屏HTML文件生成首屏页面；第二请求模块，用于响应于接收到的基于所述首屏页面生成的后续页面操作，根据所述后续页面操作向服务器端中的数据接口服务器发送后续页面数据获取请求；数据获取模块，用于调用所述数据接口服务器响应于所述后续页面数据获取请求，向客户端发送目标后续页面数据；第二渲染模块，用于调用所述客户端根据所述目标后续页面数据进行页面渲染，得到渲染完毕的首屏后续页面。
[0012]可选的，在本专利技术第二方面的第一种实现方式中，所述第一渲染模块包括：第一数据获取单元，用于服务器端中的NODEJS服务器响应于所述首屏加载请求，向数据接口服务器中发送页面数据获取请求；资源提取单元，用于所述数据接口服务器响应于所述页面数据获取请求，提取所述页面数据获取请求对应的页面资源，并将所述页面资源返回给所述NODEJS服务器；首屏渲染单元，用于所述NODEJS服务器根据所述页面资源进行首屏页面渲染，得到首屏HTML文件，并基于所述首屏HTML文件生成首屏页面。
[0013]可选的，在本专利技术第二方面的第二种实现方式中，所述数据获取模块包括：数据项目获取单元，用于所述数据接口服务器响应于所述后续页面数据获取请求，解析所述后续页面获取请求对应的后续页面数据项目；文件读取单元，用于读取CDN缓存中包含的数据文件；资源查找单元，用于根据所述后续页面数据项目在所述数据文件中查找出所述后续页面数据项目对应的静态资源，得到目标后续页面数据。
[0014]可选的，在本专利技术第二方面的第三种实现方式中，所述页面渲染装置还包括页面
数据预置模块，所述页面数据预置模块具体用于：获取页面加载所需的页面数据，其中，所述页面数据包括如js文件、css文件、img文件；将所述页面数据通过webpack进行编译，得到静态资源；通过script方式将所述静态资源文件索引中，并将所述插入完毕的文件索引保存至CDN缓存中，其中，所述文件索引包括index.spa.html和index.ssr.html。
[0015]可选的，在本专利技术第二方面的第四种实现方式中，所述页面渲染装置还包括日志生成模块，所述日志生成模块具体用于：根本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面渲染方法，其特征在于，所述页面渲染方法包括：响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求；调用服务器端根据所述首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并基于所述首屏HTML文件生成首屏页面；响应于接收到的基于所述首屏页面生成的后续页面操作，根据所述后续页面操作向服务器端中的数据接口服务器发送后续页面数据获取请求；调用所述数据接口服务器响应于所述后续页面数据获取请求，向客户端发送目标后续页面数据；调用所述客户端根据所述目标后续页面数据进行页面渲染，得到渲染完毕的首屏后续页面。2.根据权利要求1所述的页面渲染方法，其特征在于，所述调用服务器端根据所述首屏加载请求进行页面渲染，得到渲染完毕的首屏HTML文件，并基于所述首屏HTML文件生成首屏页面包括：服务器端中的NODEJS服务器响应于所述首屏加载请求，向数据接口服务器中发送页面数据获取请求；所述数据接口服务器响应于所述页面数据获取请求，提取所述页面数据获取请求对应的页面资源，并将所述页面资源返回给所述NODEJS服务器；所述NODEJS服务器根据所述页面资源进行首屏页面渲染，得到首屏HTML文件，并基于所述首屏HTML文件生成首屏页面。3.根据权利要求2所述的页面渲染方法，其特征在于，所述调用所述数据接口服务器响应于所述后续页面数据获取请求，向客户端发送目标后续页面数据包括：所述数据接口服务器响应于所述后续页面数据获取请求，解析所述后续页面获取请求对应的后续页面数据项目；读取CDN缓存中包含的数据文件；根据所述后续页面数据项目在所述数据文件中查找出所述后续页面数据项目对应的静态资源，得到目标后续页面数据。4.根据权利要求3所述的页面渲染方法，其特征在于，在所述响应于来自于客户端的前端的首屏页面获取请求，通过服务器接口向服务器端发送首屏加载请求之前，还包括：获取页面加载所需的页面数据，其中，所述页面数据包括如js文件、css文件、img文件；将所述页面数据通过webpack进行编译，得到静态资源；通过script方式将所述静态资源文件索引中，并将所述插入完毕的文件索引保存至CDN缓存中，其中，所述文件索引包括index.spa.html和index.ssr.html。5.根据权利要求1
‑
4中任一项所述的页面渲染方法，其特征在于，在所述得到渲染完毕的首屏后续页面之后，还包括：根据所述客户端的前端的操作内容生成操作日志，并将所述操作日志保存至客户端数据库中，其中，所述日志内容上标记有当前用户的操作水印；调用CAT agnet根据所述操作水印...

【专利技术属性】
技术研发人员：万齐帅，沈庆玲，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：