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

说明书

本发明提供一种页面渲染方法和装置、电子设备以及存储介质，适用于金融领域，该方法包括：获取客户端发送的页面加载请求；根据客户端性能实时监测结果以及服务端性能实时监测结果选择服务端渲染方式或客户端渲染方式；若选择了服务端渲染方式，将该页面加载请求以及渲染方式标识或服务端渲染指令发送至该服务端；若选择了客户端渲染方式，将该页面加载请求以及渲染方式标识发送至该服务端，并且，将渲染方式标识或客户端渲染指令发送至该客户端。其中，通过实时监测客户端性能和服务端性能，根据客户端性能和服务端性能动态选择渲染端，能够兼顾服务器访问压力、页面切换速度以及渲染效率等。

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面渲染方法和装置、电子设备以及存储介质。

背景技术

随着互联网的高速发展，传输速度大大加快，用户体验愈加重要，前端页面逻辑也越来越复杂，相应的对前端开发的专业性要求也越来越高。前后端分离模式可以有效实现前后端解耦，让前端开发从后端工程中独立出来，前端人员可以专注于页面的实现。随着前端工程化的快速发展，前端三大框架Vue/React/Angular已得到了广泛应用，这些框架均采用客户端渲染模式，即页面在浏览器端进行渲染。

客户端渲染模式中，访问页面时需要等待浏览器先下载框架文件、业务代码及静态资源并完成加载后，才能开始页面渲染工作，存在整页加载速度慢、白屏等待时间长的问题，同时，客户端渲染效率严重依赖于客户端及浏览器性能，在一些性能较差的设备或者浏览器中，渲染效率会大幅降低。

为了解决页面访问性能瓶颈，提升用户体验，业界普遍采用服务端渲染来解决这些问题，每次页面请求时在服务器端对页面进行渲染，将渲染好的页面传回给浏览器端进行展示，该方案确实可以解决等待资源传输带来的性能开销问题，并且实现了客户端及浏览器性能解耦，但是，增大了服务器访问压力，并且，路由切换时无法有效使用浏览器渲染能力，导致页面切换较慢的问题。

发明内容

针对现有技术中的问题，本发明提供一种页面渲染方法和装置、电子设备以及存储介质，能够至少部分地解决现有技术中存在的问题。

为了实现上述目的，本发明采用如下技术方案：

第一方面，提供一种页面渲染方法，包括：

获取客户端发送的页面加载请求；

根据客户端性能实时监测结果以及服务端性能实时监测结果选择服务端渲染方式或客户端渲染方式；

若选择了服务端渲染方式，将该页面加载请求以及渲染方式标识或服务端渲染指令发送至该服务端；

若选择了客户端渲染方式，将该页面加载请求以及渲染方式标识发送至该服务端，并且，将渲染方式标识或客户端渲染指令发送至该客户端。

进一步地，该客户端性能实时监测结果为预设时段内的历史页面渲染时长；该服务端性能实时监测结果包括：预设时段内的历史接口时延以及历史服务器压力。

进一步地，该历史服务器压力根据预设时段内的CPU指标、内存指标以及IO指标得到。

进一步地，该历史服务器压力根据预设时段内的CPU占用率、内存占用率以及IO读写速度加权求均得到。

进一步地，该根据客户端性能实时监测结果以及服务端性能实时监测结果选择服务端渲染方式或客户端渲染方式，包括：

根据预设时段内的历史页面渲染时长得到平均渲染时长；

根据预设时段内的历史接口时延得到平均接口时延；

判断历史服务器压力乘以预设系数加上该平均接口时延的和值是否小于该平均渲染时长；

当历史服务器压力乘以预设系数加上该平均接口时延的和值小于该平均渲染时长时，选择服务端渲染方式；