[发明专利]客户端设备、基于单页应用的网页渲染方法和存储介质

说明书

本发明公开一种客户端设备、基于单页应用的网页渲染方法和存储介质。本发明客户端获取首屏资源数据，根据首屏资源数据生成首屏内容源码，再根据首屏内容源码进行页面渲染，生成网页首屏。相较于现有技术，本发明提高了网页首屏的展示速度，同时降低了客户端流量消耗。

技术领域

本发明涉及计算机技术领域，特别涉及一种客户端设备、基于单页应用的网页渲染方法和存储介质。

背景技术

单页应用(SPA，Single-Page Application)，是在客户端设备上运行并与单一网页相适应的Web(World Wide Web，万维网)应用。单页应用在加载页面的过程中，会加载必须的内容源码(HTML，Hyper Text Markup Language，超级文本标记语言)、样式源码(Cascading Style Sheets，CSS)及交互逻辑源码(JavaScript)，所有的操作都在页面上完成。

首屏是指打开网站后，在显示屏中出现的第一屏的内容，其向下连接有二屏、三屏等。网页首屏的打开速度是评价网页业务质量的关键指标，其打开时间每增加1秒，用户的流失率就会大大增加。

但由于单页应用中常用的前端框架往往非常庞大(例如，React框架)，造成脚本的加载和执行速度非常缓慢，使得用户从输入网址到看到网页首屏的时间远远超过3秒。

目前，为了提高单页应用中网页首屏的打开速度，通常采用服务端渲染的方案，该方案为：服务端生成请求网页(即网页的所有显示区域，包括首屏、二屏、三屏等)的内容源码，客户端在获取到服务端生成的内容源码后再对网页进行渲染。该方案虽然在一定程度上提高了网页首屏的打开速度，但仍存在如下缺陷：服务端生成的网页内容源码是包括首屏、二屏、三屏等网页所有区域对应的内容源码，其数据量往往较大，客户端下载所需的时间较长，造成网页首屏展示速度仍然较慢，且客户端网络流量消耗大。

发明内容

本发明的主要目的是提供一种客户端设备、基于单页应用的网页渲染方法和存储介质，旨在解决单页应用的网页首屏展示速度慢及客户端网络流量消耗大的问题。

为实现上述目的，本发明提出的一种客户端设备，所述客户端设备包括存储器和处理器，所述存储器上存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序被所述处理器执行时实现如下步骤：

接收步骤：接收携带网页首屏标识信息的首屏获取请求；

获取步骤：从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据；

第一渲染步骤：基于所述首屏资源数据生成首屏内容源码；

第二渲染步骤：根据所述首屏内容源码进行页面渲染，以生成网页首屏。

优选地，在所述获取步骤之前，所述处理器执行所述基于单页应用的网页渲染程序，还实现如下步骤：

在接收到特征数据获取请求时，获取所述特征数据，所述特征数据包括当前地理位置信息。

优选地，所述获取步骤包括：

根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息；

在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据；

当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据；

当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。

优选地，在所述第二渲染步骤之后，所述处理器执行所述基于单页应用的网页渲染程序，还实现以下步骤：