CN109977333A - 网页显示方法、装置、计算机设备及存储介质 - Google Patents

网页显示方法、装置、计算机设备及存储介质 Download PDF

Info

Publication number
CN109977333A
CN109977333A CN201910223519.9A CN201910223519A CN109977333A CN 109977333 A CN109977333 A CN 109977333A CN 201910223519 A CN201910223519 A CN 201910223519A CN 109977333 A CN109977333 A CN 109977333A
Authority
CN
China
Prior art keywords
view
skeleton screen
webpage
data
screen 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.)
Granted
Application number
CN201910223519.9A
Other languages
English (en)
Other versions
CN109977333B (zh
Inventor
陈禹霖
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Sankuai Online Technology Co Ltd
Original Assignee
Beijing Sankuai Online Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Sankuai Online Technology Co Ltd filed Critical Beijing Sankuai Online Technology Co Ltd
Priority to CN201910223519.9A priority Critical patent/CN109977333B/zh
Publication of CN109977333A publication Critical patent/CN109977333A/zh
Application granted granted Critical
Publication of CN109977333B publication Critical patent/CN109977333B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

本发明公开了一种网页显示方法、装置、计算机设备及存储介质,属于移动应用领域。所述方法包括:获取待显示的网页的第一骨架屏数据,基于网页视图对网页进行加载;在网页视图的上层,创建原生视图;基于第一骨架屏数据,渲染原生视图,得到骨架屏视图,骨架屏视图用于显示网页的框架;当网页的加载进度满足预设条件时,移除骨架屏视图,以显示基于网页视图的网页。本发明通过在网页视图上层创建一个原生视图,使得获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。

Description

网页显示方法、装置、计算机设备及存储介质
技术领域
本发明涉及移动应用领域,特别涉及一种网页显示方法、装置、计算机设备及存储介质。
背景技术
混合模式移动应用是指介于网页应用和本地应用这两者之间的应用,兼具本地应用的良好用户交互体验的优势和网页应用的跨平台开发的优势。对于用户而言,访问混合模式移动应用的感觉像是在访问本地应用,但实际上是通过混合模式移动应用中封装的浏览器内核访问网络应用。
目前,在混合模式移动应用中进行网页显示时,会首先启动网页视图,进行网页视图初始化,在网页视图初始化之后会得到一个网页视图的基本框架,例如,该基本框架包括网页标题。基于该基本框架,获取相应的网页数据,其中,网页数据中包括该网页的骨架屏数据,在获取到该网页的骨架屏数据后,会基于该骨架屏数据对网页视图进行渲染,得到网页的骨架屏视图,此时,用户可以看到该网页的视图框架,例如,可以看到包含网页标题的位置、大小和形状的一个图片。在获取到全部的网页数据之后,根据该全部的网页数据,对网页的骨架屏视图进行继续渲染,得到该网页的完整界面,此时,用户可以看到该网页的全部内容。
在上述网页显示过程中,在骨架屏视图渲染完成之前,需要完成网页视图的初始化,还要基于网页视图获取到网页数据之后,才能对网页视图进行渲染,然而,无论是网页视图的初始化还是网页数据的加载都是非常耗时的,导致整个网页的显示较慢,用户会长时间看到白屏,视觉效果较差。
发明内容
本发明实施例提供了一种网页显示方法、装置、计算机设备及存储介质,能够解决骨架屏视图出现时机较晚,视觉效果差的问题。该技术方案如下:
一方面,提供了一种网页显示方法,该方法包括:获取待显示的网页的第一骨架屏数据,基于网页视图对所述网页进行加载;
在所述网页视图的上层,创建原生视图;
基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;
当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。
在一种可能实现方式中,所述获取待显示的网页的第一骨架屏数据包括:
当计算机设备存储有所述第一骨架屏数据时,从所述计算机设备的存储空间中获取所述第一骨架屏数据;
当所述计算机设备未存储所述第一骨架屏数据时,从服务器中获取所述第一骨架屏数据。
在一种可能实现方式中,所述获取待显示的网页的第一骨架屏数据包括:
获取计算机设备的登录状态,基于所述登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;
或者,获取所述网页的页面标识,基于所述页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。
在一种可能实现方式中,所述基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括:
如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图。
在一种可能实现方式中,所述如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括下述任一个步骤:
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染未完成,则根据所述原生视图基于所述第一骨架屏数据的渲染进度,确定所述第二骨架屏数据中的目标数据,基于所述目标数据,对所述原生视图继续进行渲染,得到所述骨架屏视图,所述目标数据为与所述骨架屏视图未被渲染的部分对应的数据;
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染已经完成,则基于所述第二骨架屏数据对所述原生视图重新进行渲染,得到所述骨架屏视图。
在一种可能实现方式中,所述当所述网页的加载进度满足预设条件时,移除所述骨架屏视图包括下述任一个步骤:
如果网页数据包括超文本标记语言HTML文件,当所述HTML文件加载完成后,移除所述骨架屏视图,所述HTML文件包括爪哇脚本JS文件;
如果所述网页数据包括所述HTML文件和所述JS文件,在所述HTML文件和所述JS文件加载完成后,移除所述骨架屏视图;
在所述网页数据加载完成之后,基于所述网页数据渲染所述网页视图,在所述网页视图渲染完成后,移除所述骨架屏视图。
在一种可能实现方式中,所述移除所述骨架屏视图包括:采取预设动画形式对所述骨架屏视图进行移除;或,
所述在所述网页视图的上层,创建原生视图包括:在所述网页视图所在的容器上层,渲染所述原生视图。
一方面,提供了一种网页显示装置,该装置包括:获取模块,用于获取待显示的网页的第一骨架屏数据;
加载模块,用于基于网页视图对所述网页进行加载;
创建模块,用于在所述网页视图的上层,创建原生视图;
渲染模块,用于基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;
移除模块,用于当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。
在一种可能实现方式中,所述获取模块包括:
第一获取单元,用于当计算机设备存储有所述第一骨架屏数据时,从所述计算机设备的存储空间中获取所述第一骨架屏数据;
第二获取单元,用于当所述计算机设备未存储所述第一骨架屏数据时,从服务器中获取所述第一骨架屏数据。
在一种可能实现方式中,所述获取模块包括下述至少一个单元:
第三获取单元,用于获取计算机设备的登录状态,基于所述登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;
第四获取单元,用于获取所述网页的页面标识,基于所述页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。
在一种可能实现方式中,所述渲染模块,用于如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图。
在一种可能实现方式中,所述渲染模块用于执行下述任一项:
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染未完成,则根据所述原生视图基于所述第一骨架屏数据的渲染进度,确定所述第二骨架屏数据中的目标数据,基于所述目标数据,对所述原生视图继续进行渲染,得到所述骨架屏视图,所述目标数据为与所述骨架屏视图未被渲染的部分对应的数据;
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染已经完成,则基于所述第二骨架屏数据对所述原生视图重新进行渲染,得到所述骨架屏视图。
在一种可能实现方式中,所述移除模块用于执行下述任一项:
如果网页数据包括超文本标记语言HTML文件,当所述HTML文件加载完成后,移除所述骨架屏视图,所述HTML文件包括爪哇脚本JS文件;
如果所述网页数据包括所述HTML文件和所述JS文件,在所述HTML文件和所述JS文件加载完成后,移除所述骨架屏视图;
在所述网页数据加载完成之后,基于所述网页数据渲染所述网页视图,在所述网页视图渲染完成后,移除所述骨架屏视图。
在一种可能实现方式中,所述移除模块,用于采取预设动画形式对所述骨架屏视图进行移除;或,
所述创建模块,用于在所述网页视图所在的容器上层,渲染所述原生视图。
一方面,提供了一种计算机设备,该计算机设备包括一个或多个处理器和一个或多个存储器,该一个或多个存储器中存储有至少一条指令,该至少一条指令由该一个或多个处理器加载并执行以实现如上述任一种可能实现方式的网页显示方法所执行的操作。
一方面,提供了一种计算机可读存储介质,该存储介质中存储有至少一条指令,该至少一条指令由一个或多个处理器加载并执行以实现如上述任一种可能实现方式的网页显示方法所执行的操作。
本发明实施例提供的技术方案带来的有益效果至少包括:
通过在网页视图上层创建一个原生视图,使得获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种网页显示方法流程图;
图2是本发明实施例提供的一种网页显示方法流程图;
图3是本发明实施例提供的一种骨架屏视图示意图;
图4是本发明实施例提供的一种网页显示方法流程图;
图5是本发明实施例提供的一种网页显示方法流程图;
图6是本发明实施例提供的一种网页显示方法流程图;
图7是本发明实施例提供的一种网页显示装置结构示意图;
图8是本发明实施例提供的一种计算机设备的结构示意图;
图9是本发明实施例提供的终端的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明实施方式作进一步地详细描述。
本发明实施例可以应用于进行网页加载的场景下,例如,通过任一混合模式移动应用进行网页加载的场景。本发明在进行网页显示时,会加载第一骨架屏数据,进而渲染出骨架屏视图。本发明涉及的第一骨架屏数据用于提供待显示的网页的视图框架,网页的视图框架由该网页的至少一个占位块组成。第一骨架屏数据包括占位块的描述信息,计算机设备根据占位块的描述信息可以在原生视图上渲染出该占位块,当所有占位块渲染完毕时,即可获得骨架屏视图。
其中,占位块的描述信息可以为下述任一种表述形式:
一种实现方式中,占位块的描述信息可以包括占位块的坐标、形状和边长,其中占位块的坐标为左上顶点坐标、左下顶点坐标、右上顶点坐标、右下顶点坐标或者中心坐标。例如,占位块为长方形,第一骨架屏数据包括占位块的左上顶点坐标、占位块的长和宽以及占位块的形状,根据这些信息,即可渲染出该占位块。
一种实现方式中,占位块的描述信息可以包括占位块的全部顶点坐标。例如,占位块为长方形,第一骨架屏数据包括占位块的4个顶点坐标,根据这4个顶点坐标即可确定占位块的形状和边长,进而渲染出该占位块。
进一步地,第一骨架屏数据还可以包括计算机设备显示界面的长度和宽度。由于计算机设备型号不同,导致待显示网页的显示界面的尺寸也可以不相同。为了使得网页的视图框架与显示界面相匹配,第一骨架屏数据还可以包括计算机设备显示界面的长度和宽度,使得计算机设备可以根据计算机设备显示界面的长度和宽度,来对应调整占位块的位置和大小比例。
图1是本发明实施例提供的一种网页显示方法流程图,该方法可以应用于任一种计算机设备上,该计算机设备为一种终端,例如:手机、平板电脑、电脑等。如图1所示,包括以下步骤:
101、获取待显示的网页的第一骨架屏数据,基于网页视图对网页进行加载。
102、在网页视图的上层,创建原生视图。
103、基于第一骨架屏数据,渲染原生视图,得到骨架屏视图,骨架屏视图用于显示网页的框架。
104、当网页的加载进度满足预设条件时,移除骨架屏视图,以显示基于网页视图的网页。
本发明实施例提供的网页显示方法,通过在网页视图上层创建一个原生视图,使得获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。
在一种可能实现方式中,获取待显示的网页的第一骨架屏数据包括:
当计算机设备存储有第一骨架屏数据时,从计算机设备的存储空间中获取第一骨架屏数据;
当计算机设备未存储第一骨架屏数据时,从服务器中获取第一骨架屏数据。
在一种可能实现方式中,获取待显示的网页的第一骨架屏数据包括:
获取计算机设备的登录状态,基于登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;
或者,获取网页的页面标识,基于页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。
在一种可能实现方式中,基于第一骨架屏数据,渲染原生视图,得到骨架屏视图,包括:
如果已下载的网页数据中包括第二骨架屏数据,则基于第一骨架屏数据和第二骨架屏数据,渲染原生视图,得到骨架屏视图。
在一种可能实现方式中,如果已下载的网页数据中包括第二骨架屏数据,则基于第一骨架屏数据和第二骨架屏数据,渲染原生视图,得到骨架屏视图,包括下述任一个步骤:
如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染未完成,则根据原生视图基于第一骨架屏数据的渲染进度,确定第二骨架屏数据中的目标数据,基于目标数据,对原生视图继续进行渲染,得到骨架屏视图,目标数据为与骨架屏视图未被渲染的部分对应的数据;
如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染已经完成,则基于第二骨架屏数据对原生视图重新进行渲染,得到骨架屏视图。
在一种可能实现方式中,当网页的加载进度满足预设条件时,移除骨架屏视图包括下述任一个步骤:
如果网页数据包括超文本标记语言HTML文件,当HTML文件加载完成后,移除骨架屏视图,HTML文件包括爪哇脚本JS文件;
如果网页数据包括HTML文件和JS文件,在HTML文件和JS文件加载完成后,移除骨架屏视图;
在网页数据加载完成之后,基于网页数据渲染网页视图,在网页视图渲染完成后,移除骨架屏视图。
在一种可能实现方式中,移除骨架屏视图包括:采取预设动画形式对骨架屏视图进行移除;或,
在网页视图的上层,创建原生视图包括:在网页视图所在的容器上层,渲染原生视图。
上述所有可选技术方案,可以采用任意结合形成本公开的可选实施例,在此不再一一赘述。
图2是本发明实施例提供的一种网页显示方法流程图。该方法可以应用于任一种计算机设备上,该计算机设备为一种终端,例如:手机、平板电脑、电脑等。参见图2,该实施例包括:
200、接收网页显示指令,该网页显示指令至少携带待显示网页的页面标识。
在任一计算机设备的应用中,当用户想要打开某一个新的网页时,可以通过点击操作,来触发网页显示指令。对于应用的任一页面来说,该页面可以具有唯一的页面标识,该页面标识可以为页面ID(Identity,身份标识号码)或页面URL(Uniform ResoureLocator,统一资源***)等,本发明实施例对此不做限定。
在一种可能实现方式中,为了更快地获取到第一骨架屏数据,计算机设备可以先检测计算机设备是否存储有第一骨架屏数据,当计算机设备存储有第一骨架屏数据时,从计算机设备中获取第一骨架屏数据。当计算机设备未存储有第一骨架屏数据时,从服务器中获取第一骨架屏数据。本实施例仅以计算机设备存储有该第一骨架屏数据为例进行说明。
201、基于网页标识,从计算机设备的存储空间中获取第一骨架屏数据。
在本发明实施例中,计算机设备的存储空间中可以存储有网页标识以及该网页标识对应的第一骨架屏数据。例如,该网页标识以及网页标识对应的第一骨架屏数据可以存储在该网页所属应用的目录下,相应地,计算机设备可以基于网页标识,从该网页所属应用的目录下,获取该网页标识对应的第一骨架屏数据。
需要说明的是,计算机设备的第一骨架屏数据可以有两种来源,具体描述如下:
来源1、应用安装包
该第一骨架屏数据可以是从计算机设备下载应用安装包中的配置文件中获取。也即是,该方法可以包括:计算机设备下载应用安装包后,从该应用安装包中获取网页标识对应的第一骨架屏数据,将网页标识和第一骨架屏数据对应存储在该应用的目录中。
例如,在计算机设备下载应用安装包时,下载的安装包中存储有第一骨架屏数据,计算机设备可以将安装包中的第一骨架屏数据存储在应用对应的目录中,在后续需要基于第一骨架屏数据进行渲染时,可以直接在该目录下获取该第一骨架屏数据。
来源2、应用更新包
该第一骨架屏数据可以是从计算机设备下载应用更新包中获取。也即是,该方法可以包括:计算机设备下载应用更新包后,从该应用更新包中获取网页标识对应的第一骨架屏数据,在该应用的目录,基于该网页标识和第一骨架屏数据对应已存储的第一骨架屏数据进行更新。当然,如果计算机设备并未存储有第一骨架屏数据,则可以基于应用更新包中的第一骨架屏数据进行存储。
需要说明的是,本发明实施例对第一骨架屏数据的来源不做限定,而是根据应用的实际设置确定。
需要说明的是,对于待显示的网页来说,计算机设备可以仅存储有一种网页的第一骨架屏数据,则此时,可以无需通过网页标识来对应存储第一骨架屏数据,在步骤201的获取时,可以直接基于网页显示指令,来获取该应用所对应的骨架屏数据。
在一些实施例中,应用在使用过程中,会涉及许多不同的网页,每个待显示网页的骨架屏视图并不相同,为了使得后续渲染出的骨架屏视图与真实的网页更加相近,因此,在计算机设备存储有多个骨架屏数据时,则需要基于页面标识在存储时进行区分,从而在步骤201的获取过程中可以通过不同的页面标识,获取到不同的第一骨架屏数据。
在一些实施例中,对于同一网页来说,对于已登录用户和未登录用户,可以显示不同的网页内容,例如页面布局不同,对于已登录用户可以展示评论区域,对于未登录用户可以不展示评论区域等,从而计算机设备还可以基于登录状态来确定显示哪种形式的骨架屏数据,也即是,该方法还可以包括:获取计算机设备的登录状态,基于所述登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据。其中,计算机设备的登录状态可以是指应用客户端是否处于登录状态。
在一种可能实现方式中,计算机设备可以检测目标存储空间中是否存储有登录令牌,当该目标存储空间中存储有登录令牌时,获取登录状态对应的第一骨架屏数据,当该目标存储空间中未存储有登录令牌时,获取未登录状态对应的第一骨架屏数据。为了实现上述基于登录状态的骨架屏数据的获取,应用安装包中可以包括网页的两套骨架屏数据,也即是,包括登录状态对应的第一骨架屏数据以及未登录状态对应的第一骨架屏数据。
上述基于登录状态来获取到的骨架屏数据,可以确保后续渲染出的骨架屏视图与真实的网页的相似度,使得视觉效果保持统一。
在一种可能实现方式中,还可以结合网页标识和登录状态,来获取网页标识以及登录状态所对应的第一骨架屏数据,也即是,该方法还可以包括:获取计算机设备的登录状态,基于所述登录状态,获取该网页标识对应的第一骨架屏数据。例如,在一种可能实现方式中,计算机设备可以检测目标存储空间中是否存储有登录令牌,当该目标存储空间中存储有登录令牌时,获取登录状态对应的该网页标识的第一骨架屏数据,当该目标存储空间中未存储有登录令牌时,获取未登录状态对应的该网页标识的第一骨架屏数据。
上述基于登录状态和网页标识来获取到的骨架屏数据,不仅可以确保后续渲染出的骨架屏视图与真实的网页的相似度,使得视觉效果保持统一,基于该网页标识的设置,还可以提供多个不同网页的骨架屏数据,以优化多个网页的视觉体验。
202、在网页视图的上层,创建原生视图。
其中,网页视图是一个用于显示网页的控件,可以看作是一个可以嵌套到显示界面上的一个浏览器控件,通过网页视图可以访问网页。网页视图使得网页轻松地内嵌到应用中,在该应用呈现一个完整的网页且该网页可以供用户操作。
在一些实施例中,可以在获取到第一骨架屏数据之后,创建原生视图,将原生视图设置在网页视图的上层。由于原生视图覆盖在网页视图上,用户只能看到原生视图显示的内容,看不到网页视图显示的内容。
在一种可能实现方式中,该步骤202包括:在网页视图所在的容器上层,渲染原生视图。网页视图位于网页视图容器中,在网页视图容器的的上层创建原生视图容器,基于该原生视图容器,生成原生视图。其中,若计算机设备***为iOS(iphone Operation System,苹果操作***),则原生视图容器位于视图控制器ViewController中,若计算机设备***为安卓***,则原生视图容器位于活动Activity组件中。
另外,在一些实施例中,若获取第一骨架屏数据失败,则可以不创建原生视图,而是直接显示网页视图,并基于网页视图显示完整的网页。
203、根据第一骨架屏数据,渲染该原生视图,得到骨架屏视图,该骨架屏视图用于显示该网页的框架。
在计算机设备创建原生视图之后,会根据获取到的第一骨架屏数据,渲染原生视图。例如,获取第一骨架屏数据中的占位块的描述信息和显示界面的长度和宽度,在原生视图上绘制占位块,在第一骨架屏数据中的所有占位块绘制完成后,得到待显示的网页的骨架屏视图,此时用户可以看到待显示的网页的视图框架,如图3所示。
204、对网页视图进行初始化。
在本发明实施例中,网页视图的初始化和骨架屏数据的获取可以同时开始,当然,还可以一前一后进行,其时间差可以小于时间阈值,以保证整个显示过程不会耗时过度,本发明实施例对具体采用哪种时序进行获取以及初始化不做限定。例如,该步骤204中的网页视图进行初始化的时机,可以如当前步骤顺序所示的时机执行,还可以在上述200至203任一步骤之后执行,还可以与上述任一步骤同步执行。
由于骨架屏数据的获取和渲染,与网页视图的初始化之间相隔时间小于时间阈值,且骨架屏视图的渲染无需依赖网页数据的加载,因此,相比于相关技术中那种需要网页数据加载完成才能渲染以显示骨架屏的情况来说,能够将骨架屏视图的显示时机大大提前,也就使得用户能够在触发网页显示指令后迅速看到一个网页框架,不至于要等待过久,大大提高了视觉体验。
205、网页视图初始化完成之后,基于网页视图加载网页数据。
在本发明实施例中,该网页数据可以包括:HTML(HyperText Markup Language,超文本标记语言)文件、JS(JavaScript,爪哇脚本)文件和CSS(Cascading Style Sheets,层叠样式表)。其中,HTML文件用于提供网页的具体内容,JS文件用于实现网页上的控件的初始化及各个功能方法接口,CSS文件用于定义控件对应的样式。
对于不同的网页来说,其网页数据的组成形式可能有所不同,例如有的网页的网页数据中包括HTML文件,该HTML文件中包括JS文件和CSS文件,而有的网页的网页数据中HTML文件和JS文件相互独立,基于不同的组成形式在后续也可以有不同的处理方式。
206、基于所加载的网页数据,渲染该网页视图。
其中,基于所加载的网页数据,渲染网页视图可以采用下述任一种实现方式:
一种可能实现方式、在网页数据的加载过程中,基于已加载的网页数据,渲染该网页视图。
网页数据的加载可以有先后顺序,例如,计算机设备可以优先加载HTML文件,加载完成之后,再加载CSS文件,最后加载JS文件。由于网页数据的加载较为耗时,为了加快网页视图的加载进度,计算机设备可以在HTML文件加载完成之后,同时进行加载CSS文件和基于HTML文件渲染网页视图。
一种可能实现方式、在网页数据加载完成之后,基于全部的网页数据,渲染网页视图。该种情况下,网页视图的加载可以有先后顺序,也可以没有先后顺序。
207、当网页的加载进度满足预设条件时,移除该骨架屏视图,以显示基于该网页视图的网页。
在加载网页数据的过程中,可以基于网页数据的不同形式,在不同时机移除骨架屏视图,从而使得下层的网页视图能够被用户所看见。例如,当所述网页的加载进度满足预设条件时,移除所述骨架屏视图可以采用下述任一种实现方式:
一种可能实现方式、如果网页数据包括HTML文件,且HTML文件包括JS文件和CSS文件,则当HTML文件加载完成后,移除骨架屏视图。
在加载完成HTML文件时,JS文件和CSS文件也加载完成。由于网页视图可以一边加载网页数据,一边对加载到的网页数据进行渲染,因此,在网页数据加载完成之后,网页视图的渲染成功耗时非常短,因此,可以在网页数据加载完成之后,移除骨架屏视图,显示下层的网页视图时,用户可以直接看到渲染完成的网页视图。
一种可能实现方式、如果网页数据包括相互独立的HTML文件和JS文件,在HTML文件和JS文件加载完成后,移除骨架屏视图。
其中,HTML文件不包括JS文件,则在加载完成HTML文件之后还要加载JS文件,在加载完JS文件之后,移除骨架屏视图,此时用户在计算机设备界面看到的是位于下层的网页视图。以图4为例,该图4所提供的是在计算机设备存储空间中获取骨架屏数据,并基于骨架屏数据进行渲染,而在HTML文件和JS文件均加载完成时移除骨架屏视图的时间轴。
一种可能实现方式、在网页数据加载完成之后,基于网页数据渲染网页视图,在网页视图渲染完成后,移除骨架屏视图。
在网页视图渲染完成后,再移除骨架屏视图,保证了移除骨架屏视图之后,计算机设备界面显示完整的网页,计算机设备用户可以直接进行观看和操作,无需等待。
需要说明的是,上述网页的加载进度可以通过原生视图来检测确定,而在又一可能实现方式中,还可以在网页渲染完成后,由网页视图来触发渲染完成指令,计算机设备接收到渲染完成指令之后,移除骨架屏视图,此时用户可以看到位于骨架屏视图下层的网页视图。
另外,在移除骨架屏视图时,可以直接将原生视图删除,也可以通过其他方式将原生视图移除。在一种可能实现方式中,采取预设动画形式对骨架屏视图进行移除。其中,预设的动画形式可以包括:平滑淡出、溶解骨架屏视图,将骨架屏视图从上至下擦除等。例如,预设动画形式为将骨架屏视图从上至下擦除,则在骨架屏视图进行移除时,骨架屏视图会从上至下逐渐消失,在骨架屏视图消失的位置会显示基于网页视图的网页。
本发明实施例提供的网页显示方法,通过在网页视图上层创建一个原生视图,使得在计算机设备上所获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,基于计算机设备的数据获取,可以大大缩短获取数据所需的耗时,也使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。进一步地,在渲染上层的原生视图时,同时对下层的网页视图进行网页加载,在网页视图的加载过程中,无需再渲染骨架屏视图,加快了网页的加载速度。
上述图3和图4所示实施例,是基于计算机设备本地存储有骨架屏数据为例进行说明的,而在一种可能实施例中,骨架屏数据可能存储于服务器上,下面基于图5的实施例进一步进行介绍。图5是本发明实施例提供的一种网页显示方法流程图。该方法可以应用于任一种计算机设备上,例如:计算机设备可以为一种终端,如手机、平板电脑、电脑等,参见图5,该实施例包括:
500、接收网页显示指令,该网页显示指令至少携带待显示网页的页面标识。
在一种可能实现方式中,为了更快地获取到第一骨架屏数据,计算机设备可以先检测计算机设备是否存储有第一骨架屏数据,当计算机设备存储有第一骨架屏数据时,从计算机设备中获取第一骨架屏数据。当计算机设备未存储有第一骨架屏数据时,从服务器中获取第一骨架屏数据。本实施例仅以从服务器存储有该第一骨架屏数据为例进行说明。当然,可以默认计算机设备并未存储有骨架屏数据,而是直接基于网页显示指令向服务器请求。
501、基于网页标识,从服务器中获取第一骨架屏数据。
该从服务器获取第一骨架屏数据的过程可以包括:向服务器发送骨架屏数据获取请求,该骨架屏数据获取请求携带该网页标识,当服务器接收到该骨架屏数据获取请求时,可以将该网页标识对应的第一骨架屏数据返回至计算机设备。进一步地,当结合登录状态来获取时,则可以在骨架屏数据获取请求中携带登录状态,例如,在计算机设备处于已登录状态,则可以在骨架屏数据获取请求携带登录令牌和网页标识,使得服务器在接收到骨架屏数据获取请求时,可以根据登录令牌和网页标识获取对应的第一骨架屏数据。
502、对网页视图进行初始化。
在本发明实施例中,网页视图的初始化和骨架屏数据的获取可以同时开始,当然,还可以一前一后进行,其时间差可以小于时间阈值,以保证整个显示过程不会耗时过度,本发明实施例对具体采用哪种时序进行获取以及初始化不做限定。例如,该步骤502中的网页视图进行初始化的时机,可以如当前步骤顺序所示的时机执行,还可以在上述500至501任一步骤之后执行,还可以与上述任一步骤同步执行。
503、在网页视图的上层,创建原生视图。
由于计算机设备从服务器中获取数据需要一定的时间,也即是,该获取到骨架屏数据的时间可能是初始化过程中的某一时刻,也可能是其他任一时刻,但是,可以确定的是,该第一骨架屏数据的数据量较小,可以在网页数据加载前完成获取步骤,本发明实施例仅给出了其中一种可能时序示例,并不作为对方案时序的限定。
504、根据第一骨架屏数据,渲染该原生视图,得到骨架屏视图,该骨架屏视图用于显示网页的框架。
505、网页视图初始化完成之后,基于网页视图加载网页数据。
以图6为例,该图6所提供的是在服务器中获取骨架屏数据,并基于骨架屏数据进行渲染,且骨架屏渲染完成的时机早于网页视图初始化完成的时机,以及在HTML文件和JS文件均加载完成时移除骨架屏视图的时间轴。
506、基于所加载的网页数据,渲染该网页视图。
507、当网页的加载进度满足预设条件时,移除该骨架屏视图,以显示基于该网页视图的网页。
本发明实施例提供的网页显示方法,通过在网页视图上层创建一个原生视图,使得通过服务器获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。而本实施例通过服务器来提供第一骨架屏数据,可以降低计算机设备的存储压力,且有利于骨架屏数据的及时更新,进一步地,在渲染上层的原生视图时,同时对下层的网页视图进行网页加载,在网页视图的加载过程中,无需再渲染骨架屏视图,加快了网页的加载速度。
在一些实施例中,对于计算机设备来说,在已经获取到第一骨架屏数据的基础上,还可以基于已下载的网页数据来进一步得到更加真实的网页显示效果。以图2所示的实施例来说,可以在步骤203的过程中,结合已下载的网页数据来渲染原生视图,也即是,该方法还包括:如果已下载的网页数据中包括第二骨架屏数据,基于第一骨架屏数据和第二骨架屏数据,渲染原生视图,得到骨架屏视图,骨架屏视图用于显示网页的框架。
具体地,上述基于第一骨架屏数据和第二骨架屏数据,渲染原生视图,得到骨架屏视图的过程可以采用下述任意实现方式来实现:
一种实现方式、如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染未完成,则根据原生视图基于第一骨架屏数据的渲染进度,确定第二骨架屏数据中的目标数据,基于目标数据,对原生视图继续进行渲染,得到骨架屏视图,目标数据为与骨架屏视图未被渲染的部分对应的数据。
例如,在该实现方式中,计算机设备可以获取原生视图基于第一骨架屏数据的渲染进度,确定第一骨架屏数据中未被渲染的占位块,在第二骨架屏数据中获取上述未被渲染的占位块的描述信息,基于获取的占位块的描述信息对原生视图继续渲染,得到骨架屏视图。其中,第二骨架屏数据中包括的未被渲染的占位块的描述信息即为目标数据。
一种实现方式、如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染未完成,则根据原生视图基于第一骨架屏数据的渲染进度以及第一骨架屏数据,确定第二骨架屏数据中的目标数据,基于目标数据,对原生视图继续进行渲染,得到骨架屏视图,目标数据为与骨架屏视图未被渲染的部分对应的数据和与骨架屏视图已经渲染的部分存在差异的数据。
其中,在该种实现方式中,由于第一骨架屏数据和第二骨架屏数据的来源不同,所以,第一骨架屏数据包括的内容与第二骨架屏数据包括的内容可能存在差异,而第二骨架屏数据与真实的网页之间不存在差异。因此,在确定目标数据时,目标数据除了包括与骨架屏视图未被渲染的部分对应的数据之外,还应该包括与骨架屏视图已经渲染的部分存在差异的数据。
根据原生视图的基于第一骨架屏数据的渲染进度,确定第一骨架屏数据中已经被渲染的占位块和未被渲染的占位块。对于已经渲染成功的占位块,对比第一骨架屏数据中的该占位块描述信息和第二骨架屏数据中该占位块的描述信息,若关于该占位块的描述信息不同,则将第二骨架屏数据中该占位块的描述信息确定为目标数据。对于未被渲染的占位块,在第二骨架屏数据中获取上述未被渲染的占位块的描述信息,将上述未被渲染的占位块的描述信息确定为目标数据;再根据基于目标数据,对原生视图进行进一步的渲染。这样不仅可以渲染原生视图未完成的部分,还可以对原生视图已经渲染完成的部分进行修正,使得渲染出的骨架屏视图与真实的网页之间没有差异。
一种实现方式、如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染已经完成,则基于第二骨架屏数据对原生视图重新进行渲染,得到骨架屏视图。
由于网页视图的加载过程较为耗时,即便网页视图获取到第二骨架屏数据,但是距离网页视图的渲染完成还有一段时间。因此,若在第一骨架屏数据的渲染完成之后获取到第二骨架屏数据,可以基于第二骨架屏数据对原生视图重新进行渲染,得到骨架屏视图。其中,基于第二骨架屏数据对原生视图重新渲染可以原生视图全部重新进行渲染,还可以是对原生视图进行修正。
其中,基于第二骨架屏数据渲染对原生视图全部重新进行渲染的过程可以包括:获取到第二骨架屏数据之后,对原生视图上渲染的占位块进行删除,使得原生视图成为一个空白页面,基于第二骨架屏数据对原生视图进行渲染,得到骨架屏视图。在一种可能实现方式中,基于第二骨架屏数据渲染对原生视图进行修正的过程可以包括:在渲染完成第二骨架屏数据之后,将第二骨架屏数据与第一骨架屏数据进行对比,基于第一骨架屏数据和第二骨架屏数据,确定目标数据,目标数据为第二骨架屏数据中与第一骨架屏数据不同的数据,根据目标数据修正原生视图,得到骨架屏视图。根据目标数据确定需要修正的占位块,并删除该占位块并对该占位块重新进行渲染。进一步地,还可以根据目标数据确定原生视图上是否缺少内容,对缺少的内容进行渲染。
需要说明的是,这种基于第一骨架屏数据和第二骨架屏数据的渲染方式,可以结合于上述图2和图5所示的实施例中,在渲染原生视图时,还可以基于第一骨架屏数据和第二骨架屏数据进行渲染,减小了骨架屏视图与真实网页之间的差异。
图7是本发明实施例提供的一种网页显示装置结构示意图。参见图7,该装置包括:
获取模块701,用于获取待显示的网页的第一骨架屏数据;
加载模块702,用于基于网页视图对网页进行加载;
创建模块703,用于在网页视图的上层,创建原生视图;
渲染模块704,用于基于第一骨架屏数据,渲染原生视图,得到骨架屏视图,骨架屏视图用于显示网页的框架;
移除模块705,用于当网页的加载进度满足预设条件时,移除骨架屏视图,以显示基于网页视图的网页。
本公开实施例提供的装置,通过在网页视图上层创建一个原生视图,使得获取的第一骨架屏数据能够直接在原生视图上进行渲染,得到骨架屏视图,使得骨架屏视图的渲染不再依赖于网页视图的初始化以及网页数据的加载,提前了骨架屏视图出现的时机,避免了用户长时间看到白屏,改善了视觉效果。
另外,在渲染上层的原生视图时,同时对下层的网页视图进行网页加载,在网页视图的加载过程中,无需再渲染骨架屏视图,加快了网页的加载速度。
在一种可能实现方式中,获取模块701包括:第一获取单元,用于当计算机设备存储有第一骨架屏数据时,从计算机设备的存储空间中获取第一骨架屏数据;
第二获取单元,用于当计算机设备未存储第一骨架屏数据时,从服务器中获取第一骨架屏数据。
在另一种可能实现方式中,获取模块701包括下述至少一个单元:
第三获取单元,用于获取计算机设备的登录状态,基于登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;
第四获取单元,用于获取网页的页面标识,基于页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。
在另一种可能实现方式中,渲染模块704,用于如果已下载的网页数据中包括第二骨架屏数据,则基于第一骨架屏数据和第二骨架屏数据,渲染原生视图,得到骨架屏视图。
在另一种可能实现方式中,渲染模块704用于执行下述任一项:
如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染未完成,则根据原生视图基于第一骨架屏数据的渲染进度,确定第二骨架屏数据中的目标数据,基于目标数据,对原生视图继续进行渲染,得到骨架屏视图,目标数据为与骨架屏视图未被渲染的部分对应的数据;
如果已下载的网页数据中包括第二骨架屏数据,且基于第一骨架屏数据的渲染已经完成,则基于第二骨架屏数据对原生视图重新进行渲染,得到骨架屏视图。
在另一种可能实现方式中,移除模块705用于执行下述任一项:
如果网页数据包括超文本标记语言HTML文件,当HTML文件加载完成后,移除骨架屏视图,HTML文件包括爪哇脚本JS文件;
如果网页数据包括HTML文件和JS文件,在HTML文件和JS文件加载完成后,移除骨架屏视图;
在网页数据加载完成之后,基于网页数据渲染网页视图,在网页视图渲染完成后,移除骨架屏视图。
在另一种可能实现方式中,移除模块705,用于采取预设动画形式对骨架屏视图进行移除;或,
创建模块703,用于在网页视图所在的容器上层,渲染原生视图。
需要说明的是:上述实施例提供的网页显示的装置在显示网页时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将计算机设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的网页显示的装置与网页显示的方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图8是本发明实施例提供的一种计算机设备的结构示意图,该计算机设备800可因配置或性能不同而产生比较大的差异,可以包括一个或多个处理器(central processingunits,CPU)801和一个或多个的存储器802,其中,该一个或多个存储器802中存储有至少一条指令,所述至少一条指令由该一个或多个处理器801加载并执行以实现上述各个方法实施例提供的网页显示方法。当然,该计算机设备还可以具有有线或无线网络接口、键盘以及输入输出接口等部件,以便进行输入输出,该计算机设备还可以包括其他用于实现设备功能的部件,在此不做赘述。
本发明实施例提供的计算机设备的一种具体表现形式可以是终端,图9是本发明实施例提供的终端900的结构示意图。该终端900可以是:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端900还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,终端900包括有:处理器901和存储器902。
处理器901可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器901可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器901也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器901可以在集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器901还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器902可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器902还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器902中的非暂态的计算机可读存储介质用于存储至少一个指令,该至少一个指令用于被处理器901所执行以实现本申请中方法实施例提供的网页显示方法。
在一些实施例中,终端900还可选包括有:***设备接口903和至少一个***设备。处理器901、存储器902和***设备接口903之间可以通过总线或信号线相连。各个***设备可以通过总线、信号线或电路板与***设备接口903相连。具体地,***设备包括:射频电路904、触摸显示屏905、摄像头906、音频电路907、定位组件908和电源909中的至少一种。
***设备接口903可被用于将I/O(Input/Output,输入/输出)相关的至少一个***设备连接到处理器901和存储器902。在一些实施例中,处理器901、存储器902和***设备接口903被集成在同一芯片或电路板上;在一些其他实施例中,处理器901、存储器902和***设备接口903中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路904用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路904通过电磁信号与通信网络以及其他通信设备进行通信。射频电路904将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路904包括:天线***、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路904可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路904还可以包括NFC(Near Field Communication,近距离无线通信)有关的电路,本申请对此不加以限定。
显示屏905用于显示UI(User Interface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏905是触摸显示屏时,显示屏905还具有采集在显示屏905的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器901进行处理。此时,显示屏905还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏905可以为一个,设置终端900的前面板;在另一些实施例中,显示屏905可以为至少两个,分别设置在终端900的不同表面或呈折叠设计;在再一些实施例中,显示屏905可以是柔性显示屏,设置在终端900的弯曲表面上或折叠面上。甚至,显示屏905还可以设置成非矩形的不规则图形,也即异形屏。显示屏905可以采用LCD(LiquidCrystal Display,液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件906用于采集图像或视频。可选地,摄像头组件906包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件906还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路907可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器901进行处理,或者输入至射频电路904以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在终端900的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器901或射频电路904的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路907还可以包括耳机插孔。
定位组件908用于定位终端900的当前地理位置,以实现导航或LBS(LocationBased Service,基于位置的服务)。定位组件908可以是基于美国的GPS(GlobalPositioning System,全球定位***)、中国的北斗***、俄罗斯的格雷纳斯***或欧盟的伽利略***的定位组件。
电源909用于为终端900中的各个组件进行供电。电源909可以是交流电、直流电、一次性电池或可充电电池。当电源909包括可充电电池时,该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中,终端900还包括有一个或多个传感器910。该一个或多个传感器910包括但不限于:加速度传感器911、陀螺仪传感器912、压力传感器913、指纹传感器914、光学传感器915以及接近传感器916。
加速度传感器911可以检测以终端900建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器911可以用于检测重力加速度在三个坐标轴上的分量。处理器901可以根据加速度传感器911采集的重力加速度信号,控制触摸显示屏905以横向视图或纵向视图进行用户界面的显示。加速度传感器911还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器912可以检测终端900的机体方向及转动角度,陀螺仪传感器912可以与加速度传感器911协同采集用户对终端900的3D动作。处理器901根据陀螺仪传感器912采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器913可以设置在终端900的侧边框和/或触摸显示屏905的下层。当压力传感器913设置在终端900的侧边框时,可以检测用户对终端900的握持信号,由处理器901根据压力传感器913采集的握持信号进行左右手识别或快捷操作。当压力传感器913设置在触摸显示屏905的下层时,由处理器901根据用户对触摸显示屏905的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器914用于采集用户的指纹,由处理器901根据指纹传感器914采集到的指纹识别用户的身份,或者,由指纹传感器914根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器901授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器914可以被设置终端900的正面、背面或侧面。当终端900上设置有物理按键或厂商Logo时,指纹传感器914可以与物理按键或厂商Logo集成在一起。
光学传感器915用于采集环境光强度。在一个实施例中,处理器901可以根据光学传感器915采集的环境光强度,控制触摸显示屏905的显示亮度。具体地,当环境光强度较高时,调高触摸显示屏905的显示亮度;当环境光强度较低时,调低触摸显示屏905的显示亮度。在另一个实施例中,处理器901还可以根据光学传感器915采集的环境光强度,动态调整摄像头组件906的拍摄参数。
接近传感器916,也称距离传感器,通常设置在终端900的前面板。接近传感器916用于采集用户与终端900的正面之间的距离。在一个实施例中,当接近传感器916检测到用户与终端900的正面之间的距离逐渐变小时,由处理器901控制触摸显示屏905从亮屏状态切换为息屏状态;当接近传感器916检测到用户与终端900的正面之间的距离逐渐变大时,由处理器901控制触摸显示屏905从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图9中示出的结构并不构成对终端900的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
在示例性实施例中,还提供了一种计算机可读存储介质,例如所述存储介质中存储有至少一条指令,所述至少一条指令由终端中的一个或多个处理器执行以完成上述实施例中网页显示方法。例如,该计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成,也可以通过程序来指令相关的硬件完成,该程序可以存储于一种计算机可读存储介质中,上述提到的存储介质可以是只读存储器,磁盘或光盘等。
以上所述仅为本发明的较佳实施例,并不用以限制本发明,凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (10)

1.一种网页显示方法,其特征在于,所述方法包括:
获取待显示的网页的第一骨架屏数据,基于网页视图对所述网页进行加载;
在所述网页视图的上层,创建原生视图;
基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;
当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。
2.根据权利要求1所述的方法,其特征在于,所述获取待显示的网页的第一骨架屏数据包括:
当计算机设备存储有所述第一骨架屏数据时,从所述计算机设备的存储空间中获取所述第一骨架屏数据;
当所述计算机设备未存储所述第一骨架屏数据时,从服务器中获取所述第一骨架屏数据。
3.根据权利要求1所述的方法,其特征在于,所述获取待显示的网页的第一骨架屏数据包括:
获取计算机设备的登录状态,基于所述登录状态,获取对应的第一骨架屏数据,不同的登录状态对应不同的第一骨架屏数据;
或者,获取所述网页的页面标识,基于所述页面标识,获取对应的第一骨架屏数据,不同的页面标识对应不同的第一骨架屏数据。
4.根据权利要求1所述的方法,其特征在于,所述基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括:
如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图。
5.根据权利要求4所述的方法,其特征在于,所述如果已下载的网页数据中包括第二骨架屏数据,则基于所述第一骨架屏数据和所述第二骨架屏数据,渲染所述原生视图,得到骨架屏视图,包括下述任一个步骤:
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染未完成,则根据所述原生视图基于所述第一骨架屏数据的渲染进度,确定所述第二骨架屏数据中的目标数据,基于所述目标数据,对所述原生视图继续进行渲染,得到所述骨架屏视图,所述目标数据为与所述骨架屏视图未被渲染的部分对应的数据;
如果所述已下载的网页数据中包括所述第二骨架屏数据,且基于所述第一骨架屏数据的渲染已经完成,则基于所述第二骨架屏数据对所述原生视图重新进行渲染,得到所述骨架屏视图。
6.根据权利要求1所述的方法,其特征在于,所述当所述网页的加载进度满足预设条件时,移除所述骨架屏视图包括下述任一个步骤:
如果网页数据包括超文本标记语言HTML文件,当所述HTML文件加载完成后,移除所述骨架屏视图,所述HTML文件包括爪哇脚本JS文件;
如果所述网页数据包括所述HTML文件和所述JS文件,在所述HTML文件和所述JS文件加载完成后,移除所述骨架屏视图;
在所述网页数据加载完成之后,基于所述网页数据渲染所述网页视图,在所述网页视图渲染完成后,移除所述骨架屏视图。
7.根据权利要求1所述的方法,其特征在于,所述移除所述骨架屏视图包括:采取预设动画形式对所述骨架屏视图进行移除;或,
所述在所述网页视图的上层,创建原生视图包括:在所述网页视图所在的容器上层,渲染所述原生视图。
8.一种网页显示装置,其特征在于,所述装置包括:
获取模块,用于获取待显示的网页的第一骨架屏数据;
加载模块,用于基于网页视图对所述网页进行加载;
创建模块,用于在所述网页视图的上层,创建原生视图;
渲染模块,用于基于所述第一骨架屏数据,渲染所述原生视图,得到骨架屏视图,所述骨架屏视图用于显示所述网页的框架;
移除模块,用于当所述网页的加载进度满足预设条件时,移除所述骨架屏视图,以显示基于所述网页视图的网页。
9.一种计算机设备,其特征在于,所述计算机设备包括一个或多个处理器和一个或多个存储器,所述一个或多个存储器中存储有至少一条指令,所述至少一个指令由所述一个或多个处理器加载并执行以实现如权利要求1至权利要求7任一项所述的网页显示方法所执行的操作。
10.一种计算机可读存储介质,其特征在于,所述存储介质中存储有至少一条指令,所述至少一个指令由一个或多个处理器加载并执行以实现如权利要求1至权利要求7任一项所述的网页显示方法所执行的操作。
CN201910223519.9A 2019-03-22 2019-03-22 网页显示方法、装置、计算机设备及存储介质 Active CN109977333B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910223519.9A CN109977333B (zh) 2019-03-22 2019-03-22 网页显示方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910223519.9A CN109977333B (zh) 2019-03-22 2019-03-22 网页显示方法、装置、计算机设备及存储介质

Publications (2)

Publication Number Publication Date
CN109977333A true CN109977333A (zh) 2019-07-05
CN109977333B CN109977333B (zh) 2020-06-09

Family

ID=67080192

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910223519.9A Active CN109977333B (zh) 2019-03-22 2019-03-22 网页显示方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN109977333B (zh)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技(深圳)有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110889060A (zh) * 2019-11-05 2020-03-17 北京三快在线科技有限公司 网页显示方法、装置、计算机设备及存储介质
CN111522599A (zh) * 2020-04-13 2020-08-11 百度在线网络技术(北京)有限公司 用于发送信息的方法和装置
CN111708962A (zh) * 2020-06-23 2020-09-25 中国平安财产保险股份有限公司 骨架屏的渲染方法、装置、设备及存储介质
CN111859219A (zh) * 2020-07-23 2020-10-30 广州酷狗计算机科技有限公司 网页骨架图的生成方法、装置、终端及存储介质
CN111898056A (zh) * 2020-08-28 2020-11-06 北京三快在线科技有限公司 一种网页显示方法、装置、存储介质及电子设备
CN113076504A (zh) * 2021-06-03 2021-07-06 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113553523A (zh) * 2021-06-10 2021-10-26 北京达佳互联信息技术有限公司 骨架屏页面的生成方法、装置、电子设备、介质及产品
CN113835699A (zh) * 2021-08-31 2021-12-24 五八有限公司 一种图片加载处理方法、装置、电子设备及存储介质
CN114035857A (zh) * 2021-10-19 2022-02-11 四川天邑康和通信股份有限公司 一种Android webview机顶盒页面加载优化***及处理方法
CN114139083A (zh) * 2022-01-06 2022-03-04 北京百度网讯科技有限公司 网页渲染方法、装置及电子设备
CN114661370A (zh) * 2022-02-17 2022-06-24 上海哔哩哔哩科技有限公司 资源加载方法、装置、电子设备及计算机存储介质

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970534A (zh) * 2014-04-15 2014-08-06 百度在线网络技术(北京)有限公司 一种提供移动应用中的渲染页面的方法与设备
CN104657499A (zh) * 2015-03-11 2015-05-27 网易(杭州)网络有限公司 一种客户端app的网页加载方法及装置
CN105847430A (zh) * 2016-05-20 2016-08-10 北京小米移动软件有限公司 混合应用页面数据访问方法和装置
CN105930467A (zh) * 2016-04-22 2016-09-07 联想(北京)有限公司 一种信息处理方法及电子设备
CN106354355A (zh) * 2015-07-13 2017-01-25 华为软件技术有限公司 用户界面布局方法、装置及***
CN107122192A (zh) * 2017-04-27 2017-09-01 北京三快在线科技有限公司 网页视图展示方法、装置、计算设备及存储介质
KR20180058561A (ko) * 2016-11-24 2018-06-01 주식회사 이알솔루션 하이브리드 앱 개발 플랫폼 및 이를 이용한 개발방법
CN109063202A (zh) * 2018-09-13 2018-12-21 北京三快在线科技有限公司 在混合界面应用中实现弹窗的方法、装置以及计算机设备
CN109271213A (zh) * 2018-08-20 2019-01-25 平安普惠企业管理有限公司 Html5页面的加载方法、装置、计算机设备及存储介质

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970534A (zh) * 2014-04-15 2014-08-06 百度在线网络技术(北京)有限公司 一种提供移动应用中的渲染页面的方法与设备
CN104657499A (zh) * 2015-03-11 2015-05-27 网易(杭州)网络有限公司 一种客户端app的网页加载方法及装置
CN106354355A (zh) * 2015-07-13 2017-01-25 华为软件技术有限公司 用户界面布局方法、装置及***
CN105930467A (zh) * 2016-04-22 2016-09-07 联想(北京)有限公司 一种信息处理方法及电子设备
CN105847430A (zh) * 2016-05-20 2016-08-10 北京小米移动软件有限公司 混合应用页面数据访问方法和装置
KR20180058561A (ko) * 2016-11-24 2018-06-01 주식회사 이알솔루션 하이브리드 앱 개발 플랫폼 및 이를 이용한 개발방법
CN107122192A (zh) * 2017-04-27 2017-09-01 北京三快在线科技有限公司 网页视图展示方法、装置、计算设备及存储介质
CN109271213A (zh) * 2018-08-20 2019-01-25 平安普惠企业管理有限公司 Html5页面的加载方法、装置、计算机设备及存储介质
CN109063202A (zh) * 2018-09-13 2018-12-21 北京三快在线科技有限公司 在混合界面应用中实现弹窗的方法、装置以及计算机设备

Cited By (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110377285B (zh) * 2019-07-23 2023-10-03 腾讯科技(深圳)有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110377285A (zh) * 2019-07-23 2019-10-25 腾讯科技(深圳)有限公司 一种生成页面骨架屏的方法、装置及计算机设备
CN110889060A (zh) * 2019-11-05 2020-03-17 北京三快在线科技有限公司 网页显示方法、装置、计算机设备及存储介质
CN111522599A (zh) * 2020-04-13 2020-08-11 百度在线网络技术(北京)有限公司 用于发送信息的方法和装置
CN111708962A (zh) * 2020-06-23 2020-09-25 中国平安财产保险股份有限公司 骨架屏的渲染方法、装置、设备及存储介质
CN111859219A (zh) * 2020-07-23 2020-10-30 广州酷狗计算机科技有限公司 网页骨架图的生成方法、装置、终端及存储介质
CN111898056A (zh) * 2020-08-28 2020-11-06 北京三快在线科技有限公司 一种网页显示方法、装置、存储介质及电子设备
CN113076504A (zh) * 2021-06-03 2021-07-06 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113076504B (zh) * 2021-06-03 2021-10-01 北京达佳互联信息技术有限公司 骨架屏生成方法、装置、设备、存储介质
CN113553523A (zh) * 2021-06-10 2021-10-26 北京达佳互联信息技术有限公司 骨架屏页面的生成方法、装置、电子设备、介质及产品
CN113835699A (zh) * 2021-08-31 2021-12-24 五八有限公司 一种图片加载处理方法、装置、电子设备及存储介质
CN114035857A (zh) * 2021-10-19 2022-02-11 四川天邑康和通信股份有限公司 一种Android webview机顶盒页面加载优化***及处理方法
CN114139083A (zh) * 2022-01-06 2022-03-04 北京百度网讯科技有限公司 网页渲染方法、装置及电子设备
CN114139083B (zh) * 2022-01-06 2023-03-14 北京百度网讯科技有限公司 网页渲染方法、装置及电子设备
CN114661370A (zh) * 2022-02-17 2022-06-24 上海哔哩哔哩科技有限公司 资源加载方法、装置、电子设备及计算机存储介质

Also Published As

Publication number Publication date
CN109977333B (zh) 2020-06-09

Similar Documents

Publication Publication Date Title
CN109977333A (zh) 网页显示方法、装置、计算机设备及存储介质
US11393154B2 (en) Hair rendering method, device, electronic apparatus, and storage medium
CN110841285B (zh) 界面元素的显示方法、装置、计算机设备及存储介质
CN108710496A (zh) 应用程序的配置更新方法、装置、设备及存储介质
CN110502308A (zh) 页面样式切换方法、装置、计算机设备及存储介质
CN108401124A (zh) 视频录制的方法和装置
CN110213638A (zh) 动画显示方法、装置、终端及存储介质
CN108762881A (zh) 界面绘制方法、装置、终端及存储介质
CN107888968A (zh) 直播视频的播放方法、装置及计算机存储介质
CN109359262A (zh) 动画播放方法、装置、终端及存储介质
CN110121094A (zh) 视频合拍模板的显示方法、装置、设备及存储介质
CN109862412A (zh) 合拍视频的方法、装置及存储介质
CN109144346A (zh) 歌曲分享方法、装置及存储介质
WO2022095465A1 (zh) 信息显示方法及装置
CN109346111A (zh) 数据处理方法、装置、终端及存储介质
CN109948087A (zh) 网页资源的获取方法、装置及终端
CN109275013A (zh) 虚拟物品展示的方法、装置、设备及存储介质
CN109948581A (zh) 图文渲染方法、装置、设备及可读存储介质
CN110139143A (zh) 虚拟物品显示方法、装置、计算机设备以及存储介质
CN109522146A (zh) 对客户端进行异常测试的方法、装置及存储介质
CN110276034A (zh) 内容项展示方法、装置、计算机设备及存储介质
CN110288689A (zh) 对电子地图进行渲染的方法和装置
CN108845777A (zh) 播放帧动画的方法和装置
CN110045958A (zh) 纹理数据生成方法、装置、存储介质及设备
CN109614563A (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