CN108874922B - 客户端设备、基于单页应用的网页渲染方法和存储介质 - Google Patents
客户端设备、基于单页应用的网页渲染方法和存储介质 Download PDFInfo
- Publication number
- CN108874922B CN108874922B CN201810546969.7A CN201810546969A CN108874922B CN 108874922 B CN108874922 B CN 108874922B CN 201810546969 A CN201810546969 A CN 201810546969A CN 108874922 B CN108874922 B CN 108874922B
- Authority
- CN
- China
- Prior art keywords
- screen
- identification information
- web page
- rendering
- data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 70
- 238000000034 method Methods 0.000 title claims abstract description 33
- 238000012545 processing Methods 0.000 claims description 12
- 238000013507 mapping Methods 0.000 claims description 6
- 230000003993 interaction Effects 0.000 claims description 3
- 238000010586 diagram Methods 0.000 description 6
- 238000013461 design Methods 0.000 description 2
- 230000000977 initiatory effect Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000003672 processing method Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000004590 computer program Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
本发明公开一种客户端设备、基于单页应用的网页渲染方法和存储介质。本发明客户端获取首屏资源数据，根据首屏资源数据生成首屏内容源码，再根据首屏内容源码进行页面渲染，生成网页首屏。相较于现有技术，本发明提高了网页首屏的展示速度，同时降低了客户端流量消耗。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种客户端设备、基于单页应用的网页渲染方法和存储介质。
背景技术
单页应用(SPA，Single-Page Application)，是在客户端设备上运行并与单一网页相适应的Web(World Wide Web，万维网)应用。单页应用在加载页面的过程中，会加载必须的内容源码(HTML，Hyper Text Markup Language，超级文本标记语言)、样式源码(Cascading Style Sheets，CSS)及交互逻辑源码(JavaScript)，所有的操作都在页面上完成。
首屏是指打开网站后，在显示屏中出现的第一屏的内容，其向下连接有二屏、三屏等。网页首屏的打开速度是评价网页业务质量的关键指标，其打开时间每增加1秒，用户的流失率就会大大增加。
但由于单页应用中常用的前端框架往往非常庞大(例如，React框架)，造成脚本的加载和执行速度非常缓慢，使得用户从输入网址到看到网页首屏的时间远远超过3秒。
目前，为了提高单页应用中网页首屏的打开速度，通常采用服务端渲染的方案，该方案为：服务端生成请求网页(即网页的所有显示区域，包括首屏、二屏、三屏等)的内容源码，客户端在获取到服务端生成的内容源码后再对网页进行渲染。该方案虽然在一定程度上提高了网页首屏的打开速度，但仍存在如下缺陷：服务端生成的网页内容源码是包括首屏、二屏、三屏等网页所有区域对应的内容源码，其数据量往往较大，客户端下载所需的时间较长，造成网页首屏展示速度仍然较慢，且客户端网络流量消耗大。
发明内容
本发明的主要目的是提供一种客户端设备、基于单页应用的网页渲染方法和存储介质，旨在解决单页应用的网页首屏展示速度慢及客户端网络流量消耗大的问题。
为实现上述目的，本发明提出的一种客户端设备，所述客户端设备包括存储器和处理器，所述存储器上存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序被所述处理器执行时实现如下步骤：
接收步骤：接收携带网页首屏标识信息的首屏获取请求；
获取步骤：从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据；
第一渲染步骤：基于所述首屏资源数据生成首屏内容源码；
第二渲染步骤：根据所述首屏内容源码进行页面渲染，以生成网页首屏。
优选地，在所述获取步骤之前，所述处理器执行所述基于单页应用的网页渲染程序，还实现如下步骤：
在接收到特征数据获取请求时，获取所述特征数据，所述特征数据包括当前地理位置信息。
优选地，所述获取步骤包括：
根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息；
在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
优选地，在所述第二渲染步骤之后，所述处理器执行所述基于单页应用的网页渲染程序，还实现以下步骤：
采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
优选地，所述处理器执行所述基于单页应用的网页渲染程序，还实现以下步骤：
在首次请求所述首屏资源数据时，从服务器中获取所述首屏资源数据，并将获取的首屏资源数据存储至所述缓存空间中。
此外，为实现上述目的，本发明提出一种基于单页应用的网页渲染方法，适用于客户端设备，该方法包括步骤：
接收步骤：接收携带网页首屏标识信息的首屏获取请求；
获取步骤：从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据；
第一渲染步骤：基于所述首屏资源数据生成首屏内容源码；
第二渲染步骤：根据所述首屏内容源码进行页面渲染，以生成网页首屏。
优选地，在所述获取步骤之前，该方法还包括：
在接收到特征数据获取请求时，获取所述特征数据，所述特征数据包括当前地理位置信息。
优选地，所述获取步骤包括：
根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息；
在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
优选地，所述第二渲染步骤之后，该方法还包括步骤：
采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
此外，为实现上述目的，本发明提出一种计算机可读存储介质，所述计算机可读存储介质存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序可被至少一个处理器执行，以使所述至少一个处理器执行如上述任一项所述的基于单页应用的网页渲染方法。
本发明客户端获取首屏资源数据，根据首屏资源数据生成首屏内容源码，再根据首屏内容源码进行页面渲染，生成网页首屏。相较于现有技术，本发明对单页应用的网页实施分段加载，即首先加载网页首屏，再加载网页的剩余区域。由于首屏资源数据的数据量小，从服务端下载该首屏资源数据所需的时间短、流量消耗少，基于该首屏资源数据生成首屏内容源码的速度快，因此，本发明提高了网页首屏的展示速度，同时降低了客户端流量消耗。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图。
图1为本发明基于单页应用的网页渲染程序第一、第二、第三实施例的运行环境示意图；
图2为本发明基于单页应用的网页渲染程序第一实施例的程序模块图；
图3为本发明基于单页应用的网页渲染程序第二实施例的程序模块图；
图4为本发明基于单页应用的网页渲染程序第三实施例的程序模块图；
图5为本发明基于单页应用的网页渲染方法第一实施例的流程示意图；
图6为本发明基于单页应用的网页渲染方法第二实施例的流程示意图；
图7为本发明基于单页应用的网页渲染方法第三实施例的流程示意图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
本发明提出一种基于单页应用的网页渲染程序。
请参阅图1，是本发明基于单页应用的网页渲染程序10第一、第二、第三实施例的运行环境示意图。
在本实施例中，基于单页应用的网页渲染程序10安装并运行于客户端设备1中。客户端设备1可以是桌上型计算机、笔记本、掌上电脑、手机、游戏机等设备。该客户端设备1可包括，但不仅限于，存储器11、处理器12及显示器13。图1仅示出了具有组件11-13的客户端设备1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
存储器11在一些实施例中可以是客户端设备1的内部存储单元，例如该客户端设备1的硬盘或内存。存储器11在另一些实施例中也可以是客户端设备1的外部存储设备，例如客户端设备1上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，存储器11还可以既包括客户端设备1的内部存储单元也包括外部存储设备。存储器11用于存储安装于客户端设备1的应用软件及各类数据，例如基于单页应用的网页渲染程序10的程序代码等。存储器11还可以用于暂时地存储已经输出或者将要输出的数据。
处理器12在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行基于单页应用的网页渲染程序10等。
显示器13在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。显示器13用于显示在客户端设备1中处理的信息以及用于显示可视化的用户界面。客户端设备1的部件11-13通过程序总线相互通信。
请参阅图2，是本发明基于单页应用的网页渲染程序10第一实施例的程序模块图。在本实施例中，基于单页应用的网页渲染程序10可以被分割成一个或多个模块，一个或者多个模块被存储于存储器11中，并由一个或多个处理器(本实施例为处理器12)所执行，以完成本发明。例如，在图2中，基于单页应用的网页渲染程序10可以被分割成接收模块101、第一获取模块102、第一渲染模块103及第二渲染模块104。本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段，比程序更适合于描述基于单页应用的网页渲染程序10在客户端设备1中的执行过程，其中：
接收模块101，用于接收携带网页首屏标识信息的首屏获取请求。
上述首屏获取请求通常由用户触发，例如，用户在客户端设备1中启动浏览器并点击首页链接时，即触发首屏获取请求。该首屏获取请求可以是HTTP(Hyper Text TransferProtocol，超文本传输协议)请求且携带有网页首屏的URL(Uniform Resource Locator，统一资源定位符)。由于URL能够用于标识某一互联网资源名称的字符串，因此，可以作为网页首屏的标识信息。当然，根据应用场景的不同及需求的不同，可对网页首屏标识信息进行设置，并不限于使用URL作为网页首屏标识信息。
本实施例中，接收模块101在接收携带网页首屏标识信息的首屏获取请求后，加载和解析预先压缩存储的首屏脚本，通过首屏脚本调用相应模块来执行网页首屏的渲染。所述首屏脚本包括第一模板引擎脚本。由于首屏脚本仅用于网页首屏的渲染，因此，该首屏脚本所需的代码量较少，解析速度和执行速度也相对较快。
第一获取模块102，用于从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据。
其中，所述首屏资源数据包括首屏模板数据及首屏业务数据。
所述模板是指网页模板，即预先设置的网页框架。
所述业务数据是指与业务相关的数据，例如，在商品列表页中，商品名、商品价格、商品图片等就是该网页的业务数据。
所述第一获取模块102具体用于：首先，在预先确定的缓存空间中查询所述首屏标识信息对应的首屏资源数据。其中，所述缓存空间用于存储缓存数据，该缓存空间的位置可以是在内存中，也可以在内存以外的其他本地存储空间中，本发明对此不作限定。
然后，当在所述缓存空间中查询到所述首屏标识信息对应的首屏资源数据时，获取所述首屏标识信息对应的首屏资源数据。
接着，当在所述缓存空间中未查询到所述首屏标识信息对应的首屏资源数据时，从服务器获取所述首屏标识信息对应的首屏资源数据。
优选地，本实施例中，该第一获取模块102还用于：
在首次请求所述首屏资源数据时，从服务器中获取所述首屏资源数据，并将获取的首屏资源数据存储至所述缓存空间中。当再次(非首次)请求该首屏资源数据时，直接从所述缓存空间中获取该首屏资源数据，无需再从服务器下载该首屏资源数据，从而缩减了首屏资源数据的获取时间及网络流量消耗。
第一渲染模块103，用于基于所述首屏资源数据生成首屏内容源码。
第一渲染模块103加载首屏脚本中的第一模板引擎脚本以调用第一模板引擎，第一模板引擎根据所述首屏资源数据生成首屏内容源码。
上述第一模板引擎仅用于网页首屏的渲染，因此，其脚本文件较小，对其脚本的加载及解析速度快，相应的第一模板引擎执行速度也随之加快，从而可进一步提高网页首屏的渲染速度。
第二渲染模块104，用于根据所述首屏内容源码进行页面渲染，以生成网页首屏。
第二渲染模块104调用第一模板引擎，根据首屏内容源码、首屏样式源码(Cascading Style Sheets，CSS)及首屏交互逻辑源码(JavaScript)进行页面渲染，生成网页首屏。
本实施例客户端设备1获取首屏资源数据，根据首屏资源数据生成首屏内容源码，再根据首屏内容源码进行页面渲染，生成网页首屏。相较于现有技术，本实施例对单页应用的网页实施分段加载，即首先加载网页首屏，再加载网页的剩余区域。由于首屏资源数据的数据量小，从服务端下载该首屏资源数据所需的时间短、流量消耗少，基于该首屏资源数据生成首屏内容源码的速度快，因此，本实施例提高了网页首屏的展示速度，同时降低了客户端设备1流量消耗。
参照图3，图3为本发明基于单页应用的网页渲染程序10第二实施例的程序模块图。
本实施例在第一实施例的基础上，该程序还包括第二获取模块105。
第二获取模块105，用于在接收到特征数据获取请求时，获取所述特征数据。
上述特征数据包括：当前地理位置信息、用户偏好数据等。
本实施例中，上述特征数据优选为当前地理位置信息。所述当前地理位置信息包括下列一种或多种：经纬度信息、基站信息、网络接入点信息。
本实施例中，为了适应用户多样化的需求，部分网站平台可预先根据特征数据，设计不同的网页首屏样式，造成同一个网页首屏存在多个不同的首屏资源数据的情况。
优选地，本实施例中，该程序还包括判断模块(图中未示出)，所述判断模块用于：
判断所述网页首屏标识信息中是否携带获取特征数据的标识信息。
当判定携带获取特征数据的标识信息时，发送特征数据获取请求。
当判定不携带获取特征数据的标识信息时，判定不获取特征数据。
第二获取模块105在接收到特征数据获取请求时，获取特征数据。
上述获取特征数据的步骤包括：
通过GPS(Global Positioning System，全球定位系统)、北斗卫星导航系统、伽利略卫星导航系统(Galileo satellite navigation system)等定位系统获取客户端设备1当前所在经纬度信息。或者，若客户端设备1为移动终端，则获取与客户端设备1通信的基站信息。或者，若客户端设备1接入一无线网络，则获取该无线网络接入点的信息。
优选地，本实施例中，所述第一获取模块102具体用于：
首先，根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息。
然后，在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据。
接着，当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据。
接着，当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
参照图4，图4为本发明基于单页应用的网页渲染程序10第三实施例的程序模块图。
本实施例在第一、第二实施例的基础上，该程序还包括异步加载模块106。
异步加载模块106，用于采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
本实施例中，所述异步加载模块106设置于客户端设备中，所述异步加载模块106具体用于：
首先，加载主脚本，向服务器发起非首屏资源数据获取请求，接收服务器响应所述非首屏数据获取请求发送的所述非首屏资源数据，所述非首屏资源数据包括非首屏模板数据及非首屏业务数据。
上述主脚本包括第二模板引擎脚本及单页框架脚本。该主脚本用于对网页中除首屏以外的其他网页区域的渲染。
然后，根据所述非首屏资源数据生成非首屏内容源码，且根据所述非首屏内容源码进行页面渲染以完成网页中除首屏区域以外的剩余区域的渲染。
异步加载模块106调用第二模板引擎，第二模板引擎根据所述非首屏资源数据生成非首屏内容源码，且根据所述非首屏内容源码进行页面渲染以完成网页中除首屏区域以外的剩余区域的渲染。
第二模板引擎被启用后，第一模板引擎则停止执行。
本实施例中，异步加载模块106采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域(例如，二屏、三屏等)，因此，不对用户的浏览和操作造成影响。
此外，本实施例中，所述采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域的步骤在客户端设备中执行，在除本实施例以外的其他实施例中，所述采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域的步骤还可以由服务器执行。
此外，本发明还提出一种基于单页应用的网页渲染方法，该方法适用于客户端设备。
如图5所示，图5为本发明基于单页应用的网页渲染方法第一实施例的流程示意图。
本实施例中，该方法包括：
步骤S10，接收携带网页首屏标识信息的首屏获取请求。
上述首屏获取请求通常由用户触发，例如，用户在客户端设备中启动浏览器并点击首页链接时，即触发首屏获取请求。该首屏获取请求可以是HTTP(Hyper Text TransferProtocol，超文本传输协议)请求且携带有网页首屏的URL(Uniform Resource Locator，统一资源定位符)。由于URL能够用于标识某一互联网资源名称的字符串，因此，可以作为网页首屏的标识信息。当然，根据应用场景的不同及需求的不同，可对网页首屏标识信息进行设置，并不限于使用URL作为网页首屏标识信息。
本实施例中，客户端设备在接收携带网页首屏标识信息的首屏获取请求后，通过加载和解析预先压缩存储的首屏脚本来执行网页首屏的渲染。所述首屏脚本包括第一模板引擎脚本。由于首屏脚本仅用于网页首屏的渲染，因此，该首屏脚本所需的代码量较少，解析速度和执行速度也相对较快。
步骤S20，从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据。
其中，所述首屏资源数据包括首屏模板数据及首屏业务数据。
所述模板是指网页模板，即预先设置的网页框架。
所述业务数据是指与业务相关的数据，例如，在商品列表页中，商品名、商品价格、商品图片等就是该网页的业务数据。
所述步骤S20具体包括：
首先，在预先确定的缓存空间中查询所述首屏标识信息对应的首屏资源数据。其中，所述缓存空间用于存储缓存数据，该缓存空间的位置可以是在内存中，也可以在内存以外的其他本地存储空间中，本发明对此不作限定。
然后，当在所述缓存空间中查询到所述首屏标识信息对应的首屏资源数据时，获取所述首屏标识信息对应的首屏资源数据。
接着，当在所述缓存空间中未查询到所述首屏标识信息对应的首屏资源数据时，从服务器获取所述首屏标识信息对应的首屏资源数据。
优选地，本实施例中，该方法还包括：
在首次请求所述首屏资源数据时，从服务器中获取所述首屏资源数据，并将获取的首屏资源数据存储至所述缓存空间中。当再次(非首次)请求该首屏资源数据时，直接从所述缓存空间中获取该首屏资源数据，无需再从服务器下载该首屏资源数据，从而缩减了首屏资源数据的获取时间及网络流量消耗。
步骤S30，基于所述首屏资源数据生成首屏内容源码。
客户端设备加载首屏脚本中的第一模板引擎脚本以调用第一模板引擎，第一模板引擎根据所述首屏资源数据生成首屏内容源码。
上述第一模板引擎仅用于网页首屏的渲染，因此，其脚本文件较小，对其脚本的加载及解析速度快，相应的第一模板引擎执行速度也随之加快，从而可进一步提高网页首屏的渲染速度。
步骤S40，根据所述首屏内容源码进行页面渲染，以生成网页首屏。
第一模板引擎根据首屏内容源码、首屏样式源码(Cascading Style Sheets，CSS)及首屏交互逻辑源码(JavaScript)进行页面渲染，生成网页首屏。
本实施例客户端设备获取首屏资源数据，根据首屏资源数据生成首屏内容源码，再根据首屏内容源码进行页面渲染，生成网页首屏。相较于现有技术，本实施例对单页应用的网页实施分段加载，即首先加载网页首屏，再加载网页的剩余区域。由于首屏资源数据的数据量小，从服务端下载该首屏资源数据所需的时间短、流量消耗少，基于该首屏资源数据生成首屏内容源码的速度快，因此，本实施例提高了网页首屏的展示速度，同时降低了客户端设备流量消耗。
参照图6，图6为本发明基于单页应用的网页渲染方法第二实施例的流程示意图。
本实施例在第一实施例的基础上，该方法还包括：
步骤S50，在接收到特征数据获取请求时，获取所述特征数据。
上述特征数据包括：当前地理位置信息、用户偏好数据等。
本实施例中，上述特征数据优选为当前地理位置信息。所述当前地理位置信息包括下列一种或多种：经纬度信息、基站信息、网络接入点信息。
本实施例中，为了适应用户多样化的需求，部分网站平台可预先根据特征数据，设计不同的网页首屏样式，造成同一个网页首屏存在多个不同的首屏资源数据的情况。
优选地，本实施例中，在步骤S50之前，该方法还包括如下步骤：
首先，判断所述网页首屏标识信息中是否携带获取特征数据的标识信息。
然后，当判定携带获取特征数据的标识信息时，发送特征数据获取请求。
接着，当判定不携带获取特征数据的标识信息时，判定不获取特征数据。
上述获取特征数据的步骤包括：
通过GPS(Global Positioning System，全球定位系统)、北斗卫星导航系统、伽利略卫星导航系统(Galileo satellite navigation system)等定位系统获取客户端设备1当前所在经纬度信息。或者，若客户端设备1为移动终端，则获取与客户端设备1通信的基站信息。或者，若客户端设备1接入一无线网络，则获取该无线网络接入点的信息。
优选地，本实施例中，所述步骤S20具体包括：
首先，根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息。
然后，在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据。
接着，当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据。
接着，当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
参照图7，图7为本发明基于单页应用的网页渲染方法第三实施例的流程示意图。
本实施例在第一、第二实施例的基础上，该方法还包括：
步骤S60，采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
本实施例中，所述步骤S60由客户端设备执行，所述步骤S60具体包括：
首先，加载主脚本，向服务器发起非首屏资源数据获取请求，接收服务器响应所述非首屏数据获取请求发送的所述非首屏资源数据，所述非首屏资源数据包括非首屏模板数据及非首屏业务数据。
上述主脚本包括第二模板引擎脚本及单页框架脚本。该主脚本用于对网页中除首屏以外的其他网页区域的渲染。
然后，根据所述非首屏资源数据生成非首屏内容源码，且根据所述非首屏内容源码进行页面渲染以完成网页中除首屏区域以外的剩余区域的渲染。
客户端设备调用第二模板引擎，第二模板引擎根据所述非首屏资源数据生成非首屏内容源码，且根据所述非首屏内容源码进行页面渲染以完成网页中除首屏区域以外的剩余区域的渲染。
第二模板引擎被启用后，第一模板引擎则停止执行。
本实施例中，步骤S60采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域(例如，二屏、三屏等)，因此，不对用户的浏览和操作造成影响。
此外，本实施例中，步骤S60在客户端设备中实现，在除本实施例以外的其他实施例中，步骤S60还可以由服务器执行。
进一步地，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序可被至少一个处理器执行，以使所述至少一个处理器执行上述任一实施例中的基于单页应用的网页渲染方法。
以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。
Claims (10)
1.一种客户端设备，所述客户端设备包括存储器和处理器，其特征在于，所述存储器上存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序被所述处理器执行时实现如下步骤：
接收步骤：接收携带网页首屏标识信息的首屏获取请求；
获取步骤：从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据，所述首屏资源数据包括首屏模板数据及首屏业务数据，所述模板为预先设置的网页框架，所述业务数据包括与业务相关的数据；
第一渲染步骤：加载首屏脚本中的第一模板引擎脚本，基于所述第一模板引擎脚本对所述首屏资源数据生成首屏内容源码，所述首屏脚本用于网页首屏的渲染；
第二渲染步骤：根据所述首屏内容源码、首屏样式源码及首屏交互逻辑源码进行页面渲染，以生成网页首屏。
2.如权利要求1所述的客户端设备，其特征在于，在所述获取步骤之前，所述处理器执行所述基于单页应用的网页渲染程序，还实现如下步骤：
在接收到特征数据获取请求时，获取所述特征数据，所述特征数据包括当前地理位置信息。
3.如权利要求2所述的客户端设备，其特征在于，所述获取步骤包括：
根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息；
在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
4.如权利要求1至3中任一项所述的客户端设备，其特征在于，在所述第二渲染步骤之后，所述处理器执行所述基于单页应用的网页渲染程序，还实现以下步骤：
采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
5.如权利要求1至3中任意一项所述的客户端设备，其特征在于，所述处理器执行所述基于单页应用的网页渲染程序，还实现以下步骤：
在首次请求所述首屏资源数据时，从服务器中获取所述首屏资源数据，并将获取的首屏资源数据存储至所述缓存空间中。
6.一种基于单页应用的网页渲染方法，适用于客户端设备，其特征在于，该方法包括步骤：
接收步骤：接收携带网页首屏标识信息的首屏获取请求；
获取步骤：从服务器或者预先确定的缓存空间中获取所述网页首屏标识信息对应的首屏资源数据，所述首屏资源数据包括首屏模板数据及首屏业务数据，所述模板为预先设置的网页框架，所述业务数据包括与业务相关的数据；
第一渲染步骤：加载首屏脚本中的第一模板引擎脚本，基于所述第一模板引擎脚本对所述首屏资源数据生成首屏内容源码，所述首屏脚本用于网页首屏的渲染；
第二渲染步骤：根据所述首屏内容源码、首屏样式源码及首屏交互逻辑源码进行页面渲染，以生成网页首屏。
7.如权利要求6所述的基于单页应用的网页渲染方法，其特征在于，在所述获取步骤之前，该方法还包括：
在接收到特征数据获取请求时，获取所述特征数据，所述特征数据包括当前地理位置信息。
8.如权利要求7所述的基于单页应用的网页渲染方法，其特征在于，所述获取步骤包括：
根据获取的所述特征数据及预先确定的特征数据与首屏资源标识信息之间的映射关系，确定所述特征数据对应的首屏资源标识信息；
在预先确定的缓存空间中查询所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中查询到所述首屏资源标识信息对应的首屏资源数据时，获取所述首屏资源标识信息对应的首屏资源数据；
当在所述缓存空间中未查询到所述首屏资源标识信息对应的首屏资源数据时，从服务器获取所述首屏资源标识信息对应的首屏资源数据。
9.如权利要求6至8中任一项所述的基于单页应用的网页渲染方法，其特征在于，所述第二渲染步骤之后，该方法还包括步骤：
采用异步处理的方式加载网页中除首屏区域以外的剩余网页区域。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有基于单页应用的网页渲染程序，所述基于单页应用的网页渲染程序可被至少一个处理器执行，以使所述至少一个处理器执行如权利要求6-9中的任一项所述的基于单页应用的网页渲染方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810546969.7A CN108874922B (zh) | 2018-05-31 | 2018-05-31 | 客户端设备、基于单页应用的网页渲染方法和存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810546969.7A CN108874922B (zh) | 2018-05-31 | 2018-05-31 | 客户端设备、基于单页应用的网页渲染方法和存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108874922A CN108874922A (zh) | 2018-11-23 |
| CN108874922B true CN108874922B (zh) | 2024-04-05 |
Family
ID=64336198
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810546969.7A Active CN108874922B (zh) | 2018-05-31 | 2018-05-31 | 客户端设备、基于单页应用的网页渲染方法和存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108874922B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109739604B (zh) * | 2018-12-28 | 2022-04-15 | 北京城市网邻信息技术有限公司 | 页面渲染方法、装置、服务器及存储介质 |
| CN110442811A (zh) * | 2019-08-14 | 2019-11-12 | 广州虎牙科技有限公司 | 一种页面的处理方法、装置、计算机设备和存储介质 |
| CN110717122B (zh) * | 2019-09-26 | 2021-12-07 | 北京华宇信息技术有限公司 | 页面性能采集方法、装置及电子设备 |
| CN112256363A (zh) * | 2020-09-21 | 2021-01-22 | 北京三快在线科技有限公司 | 应用页面渲染方法、装置、电子设备 |
| CN112559922B (zh) * | 2020-12-08 | 2022-11-22 | 歌尔科技有限公司 | 页面渲染方法、终端设备及存储介质 |
| CN112800359A (zh) * | 2020-12-18 | 2021-05-14 | 成都泛微网络科技有限公司 | 一种数据处理方法及相关设备 |
| CN112765507B (zh) * | 2021-01-27 | 2023-12-26 | 上海淇玥信息技术有限公司 | 一种页面首屏渲染与资源加载方法、装置和电子设备 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102760133A (zh) * | 2011-04-28 | 2012-10-31 | 腾讯科技（深圳）有限公司 | 网页加载方法、系统、浏览器、终端及服务器 |
| CN107391664A (zh) * | 2017-07-19 | 2017-11-24 | 广州华多网络科技有限公司 | 基于web的页面数据处理方法和系统 |
| CN107526751A (zh) * | 2016-06-22 | 2017-12-29 | 广州市动景计算机科技有限公司 | 网页的加载方法、客户端、网页服务器及可编程设备 |
| CN107885799A (zh) * | 2017-10-30 | 2018-04-06 | 维沃移动通信有限公司 | 网页信息显示方法及装置 |
-
2018
- 2018-05-31 CN CN201810546969.7A patent/CN108874922B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102760133A (zh) * | 2011-04-28 | 2012-10-31 | 腾讯科技（深圳）有限公司 | 网页加载方法、系统、浏览器、终端及服务器 |
| CN107526751A (zh) * | 2016-06-22 | 2017-12-29 | 广州市动景计算机科技有限公司 | 网页的加载方法、客户端、网页服务器及可编程设备 |
| CN107391664A (zh) * | 2017-07-19 | 2017-11-24 | 广州华多网络科技有限公司 | 基于web的页面数据处理方法和系统 |
| CN107885799A (zh) * | 2017-10-30 | 2018-04-06 | 维沃移动通信有限公司 | 网页信息显示方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108874922A (zh) | 2018-11-23 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108874922B (zh) | 客户端设备、基于单页应用的网页渲染方法和存储介质 | |
| CN106294658B (zh) | 网页快速展示方法和装置 | |
| CN105302811B (zh) | 浏览器页面跳转方法及装置 | |
| CN107040584B (zh) | 客户端下载图片的方法及装置 | |
| KR20130066603A (ko) | 폰트 서브세트의 개시 | |
| US9275018B2 (en) | Techniques for analyzing web pages to determine font subsets | |
| CN111414562B (zh) | 应用程序页面api接口前置方法、装置及存储介质 | |
| WO2018001124A1 (zh) | 网页文件发送方法、网页渲染方法及装置、网页渲染系统 | |
| US9436776B2 (en) | Web browsing system and method for rendering dynamic resource URIs using script | |
| US8090702B2 (en) | Analyzing web site traffic | |
| CN110808868B (zh) | 测试数据获取方法、装置、计算机设备及存储介质 | |
| CN110221871B (zh) | 网页获取方法、装置、计算机设备及存储介质 | |
| CN110309463B (zh) | 落地页优化方法、装置、计算机存储介质及网络设备 | |
| CN113761412A (zh) | 应用页面的显示方法、装置、电子设备、介质及应用系统 | |
| CN111431767A (zh) | 多浏览器资源同步方法、装置、计算机设备和存储介质 | |
| WO2020119544A1 (zh) | 网络传输模拟方法、装置、计算机设备及存储介质 | |
| CN112672187B (zh) | 页面生成方法、装置、计算机设备及可读存储介质 | |
| CN113094612A (zh) | 客户端加载网页的方法、装置、电子设备及介质 | |
| JP2009031960A (ja) | クライアント装置およびサーバ装置の間の通信を中継する技術 | |
| CN112905920B (zh) | 一种页面显示的方法和装置 | |
| CN106126517B (zh) | 将pc端应用页面转换为移动端应用页面的方法及装置 | |
| US9239831B2 (en) | Data localization service made available by a web browser | |
| CN101772196A (zh) | 处理移动终端发送的信息的方法和系统以及代理服务器 | |
| CN113934954A (zh) | 应用程序中的网页首屏渲染方法及装置 | |
| CN113626741A (zh) | 一种移动客户端网页加载的方法及设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |