[发明专利]一种页面跳转方法、装置、电子设备及存储介质

说明书

本发明提供了一种页面跳转方法、装置、电子设备及存储介质。该方法包括：在检测到从第一页面跳转至第二页面后，响应于所述第二页面的页面框架的模板加载完成，获取所述第一页面的截图并将所述第一页面的截图渲染到所述第二页面的页面框架的模板中，所述第一页面的页面框架不同于所述第二页面的页面框架；响应于所述第二页面的资源加载完成，利用所述第二页面的资源替换所述第二页面的页面框架的模板中的所述第一页面的截图。如此，避免了跳转白屏的问题，实现了第一页面到第二页面的平滑过渡的效果。

技术领域

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

背景技术

随着互联网技术的发展，网页的实现方式也越来越多，例如，传统的前后端不分离项目，再例如，前后端分离的单页应用项目，等等。其中，前后端不分离是指前端页面看到的效果都是由后端服务器渲染的。而单页应用是指通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面，这种方法避免了页面之间切换打断用户体验。

在由传统的前后端不分离项目跳转到前后端分离的单页应用项目时，会对单页应用项目中的资源文件进行首次加载，只有这些资源文件加载完成后，才会开始渲染页面相关内容，因此视觉上会出现页面短暂白屏的现象，白屏时间受用户网络情况等因素所影响。其中，前后端不分离项目例如可以为JQuery和超文本预处理器(PHP，HypertextPreprocessor)等项目。JQuery是一个javaScript库。其中，单页应用项目例如可以为Vue和React等项目。其中，React是一个用于构建用户界面的JAVASCRIPT库。Vue是一套用于构建用户界面的渐进式框架。

为了解决这种跨项目页面跳转白屏问题，相关技术中，从解决单页应用项目首页白屏问题的角度出发，一般采取以下几种方案：

一、预渲染方案。在项目的构建过程中，通过一些渲染机制将页面的静态内容渲染好，然后插入到页面中，这样在页面启动之前首先看到的就是预渲染的页面。但是，该方案中，无法展示动态数据，不同用户看到的均是提前设置的相同静态内容对应的页面，此外，在路由很多时，例如页面内容较多或者访问的页面数量较多，代码构建时间长，响应速度慢，为此，需要加大维护成本，不便于维护。

二、骨架屏方案。骨架屏的实现原理和预渲染类似，在页面解析和数据加载之前，首先给用户展示页面的大概样式。图片、文字、图标都将通过灰色矩形块或圆形块来展示，在真实页面展示之前，用户能够感知到即将加载页面的基本层叠样式表(CSS，CascadingStyle Sheets)样式和页面布局。但是，该方案与页面加载图标无异，无法根本解决页面加载性能问题，且会增加程序运行负担，不便维护。

三、服务器端渲染方案。服务器端渲染的模式下，用户第一次请求页面时，由服务器把需要的组件或页面渲染成超文本标记语言(HTML，Hyper Text Markup Language)字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的HTML内容，不需要再执行JS(Javascript的简称)代码生成页面内容。但是，该方案背离单页应用项目前后端分离的初衷，本质上将前后端进行了结合，增加服务器压力，并要处理并发、运行速度问题等等，维护成本较高，不便于维护。

因此，以上几种方案均能一定程度上解决页面跳转时的白屏问题，但是这几种方案维护成本都较高，不便于维护。

发明内容

本发明实施例提供一种页面跳转方法、装置、电子设备及存储介质，以解决相关技术中页面跳转时白屏的问题。

本发明的目的是通过以下技术方案实现的：

第一方面，本发明实施例提供一种页面跳转方法，应用于终端，包括：