CN114065080A - 页面渲染方法、装置、设备及计算机可读存储介质 - Google Patents
页面渲染方法、装置、设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN114065080A CN114065080A CN202111419379.6A CN202111419379A CN114065080A CN 114065080 A CN114065080 A CN 114065080A CN 202111419379 A CN202111419379 A CN 202111419379A CN 114065080 A CN114065080 A CN 114065080A
- Authority
- CN
- China
- Prior art keywords
- page
- data
- rendering
- frame template
- operable button
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提供一种页面渲染方法、装置、设备及计算机可读存储介质,其中,方法包括:获取针对于当前页面中任一可操作按钮的选择操作;响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;显示所述二级页面。通过本申请,能够用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待,从而提高用户的使用体验。
Description
技术领域
本申请实施例涉及互联网技术领域,涉及但不限于一种页面渲染方法、装置、设备及计算机可读存储介质。
背景技术
页面预加载是移动端应用中页面加载时常用的技术手段,页面预加载能够优化加载速度、加快响应时间、加强用户体验。
目前,在实现页面预加载时的方案通常是:在移动端应用启动时,预先创建多个网页视图容器,在加载第一个页面的时候,如果有确定的下一页面,例如列表分页加载的场景,或者有确定的二级页面,例如页面只有一个点击跳转的场景,则用创建好的网页视图容器在后台立即加载下一个页面或者二级页面,当用户点击跳转或者点击下一页面的时候,可以将预先加载好的二级页面移到前台展示给用户。如果一级页面有多个可能对应的二级页面,则需要通过用户行为习惯分析,来预测用户可能点击的二级页面是哪个,取概率较高的一个或者多个页面进行预加载。
但是,通过用户行为习惯分析预测用户可能点击的二级页面是哪个再去做预加载的话,首先是预测准确度不可能达到百分百,没有很好的达到加快页面打开速度的效果;其次是预测的准确度取决于用户行为的积累和算法的不断调优,算法实现的成本比较大,对于新进用户没有数据积累的时候准确度也会很低,如果为了提高预测的准确度,多预加载几个概率比较大的页面,会使得移动端应用整体的性能消耗、资源占用比较多,容易造成卡顿、内存不足等问题。
发明内容
本申请实施例提供一种页面渲染方法、装置、设备及计算机可读存储介质,能够根据预加载的页面框架模板,得到当前页面对应于用户所选择的可操作按钮的二级页面,以预先加载好页面框架模板的方式,用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待。
本申请实施例的技术方案是这样实现的:
本申请实施例提供一种页面渲染方法,所述方法包括:
获取针对于当前页面中任一可操作按钮的选择操作;
响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;
将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;
显示所述二级页面。
本申请实施例提供一种页面渲染装置,所述装置包括:
获取模块,用于获取针对于当前页面中任一可操作按钮的选择操作;
响应模块,用于响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;
渲染模块,用于将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;
显示模块,用于显示所述二级页面。
本申请实施例提供一种页面渲染设备,包括:
存储器,用于存储可执行指令;处理器,用于执行所述存储器中存储的可执行指令时,实现上述页面渲染方法。
本申请实施例提供一种计算机可读存储介质,存储有可执行指令,用于引起处理器执行所述可执行指令时,实现上述页面渲染方法。
本申请实施例具有以下有益效果:在获取到用户针对当前页面中的任一可操作按钮的选择操作时,响应于选择操作,获取针对于可操作按钮预加载的页面框架模板和当前页面的摘要数据;并将摘要数据渲染至页面框架模板中,得到当前页面对应于可操作按钮的二级页面。如此,以预先加载好页面框架模板的方式,在接收到用户的选择操作之后,只需将当前页面的摘要数据渲染至该页面框架模板中即可,从而用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待。
附图说明
图1是相关技术中基于预加载技术实现页面渲染方法的流程示意图;
图2是本申请实施例提供的页面渲染系统的一个可选的架构示意图;
图3是本申请实施例提供的页面渲染设备的结构示意图;
图4是本申请实施例提供的页面渲染方法的一个可选的流程示意图;
图5是本申请实施例提供的页面渲染方法的另一个可选的流程示意图;
图6是本申请实施例提供的预加载得到页面框架模板方法的一个可选的流程示意图;
图7是本申请实施例提供的页面渲染方法中一级列表页跳转至二级详情页的界面图;
图8是本申请实施例提供的一种页面渲染方法的流程示意图;
图9是本申请实施例提供的另一种页面渲染方法的流程示意图;
图10是本申请实施例提供的页面渲染方法的效果示意图。
具体实施方式
为了使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请作进一步地详细描述,所描述的实施例不应视为对本申请的限制,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本申请保护的范围。
在以下的描述中,涉及到“一些实施例”,其描述了所有可能实施例的子集,但是可以理解,“一些实施例”可以是所有可能实施例的相同子集或不同子集,并且可以在不冲突的情况下相互结合。除非另有定义,本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的技术领域的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的,不是旨在限制本申请。
在说明本申请实施例的方案之前,首先对本申请实施例涉及的名词进行解释:
(1)Web页面:指通过浏览器或者使用浏览器内核的移动端页面容器(例如网页视图容器webview)渲染出来的网页,在移动端通常指超文本5.0(H5,HyperText MarkupLanguage 5)页面,在移动端应用中使用广泛。
(2)预加载:指在实际打开某个页面之前,预先加载页面的一部分内容或者全部内容,从而加快页面打开速度的一种手段。
(3)页面框架模板:指在前端开发中,通过单页应用的技术手段生成的一个页面框架,实现框架与数据分离的页面模板。
接下来,在说明本申请实施例的页面渲染方法之前,对相关技术中的页面渲染方法进行说明:
页面预加载是移动端应用中Web页面常用的技术手段,用于优化加载速度、加快响应时间,加强用户体验。一般的实现方案是:在移动端应用启动时,预先创建多个网页视图容器,在加载第一个页面的时候,如果有确定的下一页面,例如列表分页加载的场景,或者,有确定的二级页面,例如页面只有一个点击跳转的场景,则用创建好的网页视图容器在后台立即加载下一个页面或者二级页面,当用户点击跳转或者点击下一页的时候可以将预先加载好的二级页面移到前台展示给用户。如果一级页面有多个可能对应的二级页面,则需要通过用户行为习惯分析预测用户可能点击的二级页面是哪个,取概率较高的一个或者多个页面进行预加载,页面预加载数量会影响到手机的性能,一般只会取概率较高的两到三个页面进行预加载。
通常,部分开发者会在一级页面加载时,去请求两到三个二级页面的文本数据。在跳转时,在下级页面展示预先请求好的文本数据,这样,一定程度减少了二级页面重新请求数据的时间。图1是相关技术中基于预加载技术实现页面渲染方法的流程示意图,如图1所示,对于H5页面,在步骤S101中,进行网页视图容器初始化;在步骤S102中,加载统一资源定位器(URL,Uniform Resource Locator);在步骤S103中,进行HTML渲染;在步骤S104中,进行静态资源与JS(JavaScript)加载;在步骤S105中,请求计算机图形接口标准(CGI,Computer Graphics Interface)数据;在步骤S106中,网页视图容器基于所请求的CGI数据渲染页面。但是图1的加载流程中,只是对S102步进行了少量优化,加载速度提升一般不会太明显。
另外,也有很多开发者没有采用预加载的方式,所有页面都是正常点击跳转之后才开始加载,这样,会有各个模块的很多个步骤的加载渲染过程,加载时间会比较长,往往超过3s。
对于上述相关技术中的方案,主要存在以下问题:
对于存在多个二级页面的场景,通过用户行为习惯分析预测用户可能点击的二级页面是哪个再去做预加载的话,首先是预测准确度不可能达到百分之百,所以肯定会有一些二级页面没有实现到预加载,没有很好的达到加快页面打开速度的效果。另一方面,预测的准确度取决于用户行为的积累和算法的不断调优,算法实现的成本比较大,并且,对于新进用户在没有数据积累的时候,准确度也会很低。如果为了提高预测的准确度,多预加载几个概率比较大的页面,又会使得移动端应用整体的性能消耗、资源占用比较多,容易造成卡顿、内存不足等问题,得不偿失。
对于相关技术中在一级页面预请求文本数据传到二级页面的方案,减少的是二级页面CGI数据请求的时间,但是二级页面仍需要进行完整的H5加载流程(如图1所示的流程),并且还需要等页面HTML渲染完且静态资源与JS加载完之后才会用到从一级页面带过来的文本数据和其他数据,页面加载的时间仍然较大。
基于相关技术中所存在的上述问题,本申请实施例提供一种页面渲染方法,该方法是一种基于页面框架模板和摘要数据的移动端页面预渲染方案,针对移动端web页面中存在关联跳转的场景,例如从一级列表页点击某一项进入二级详情页,对二级详情页使用提前渲染模块和提前获取摘要数据的方式进行预加载。包括:在一级页面下发二级页面第一屏内容的摘要数据;二级页面根据一定规则抽象整理出与数据无关的页面框架模板;在打开一级页面时新创建一个网页视图容器,通过网页视图容器预先加载二级页面的页面框架模板;在一级页面点击跳转二级页面时,直接将摘要数据传递给已经加载好二级页面的页面框架模板的网页视图容器,并立即把摘要数据渲染出来,让用户在页面跳转完成后立即看到可交互的第一屏页面和数据;随后再进行正常的网络请求拉取剩余的完整页面数据,拼接在摘要数据之后。该方案可以以较小的成本和页面改动,极大的提高关联页面跳转的页面打开速度,并且不额外占用更多的终端系统资源。
本申请实施例提供的页面渲染方法,首先,获取针对于当前页面中任一可操作按钮的选择操作;然后,响应于选择操作,获取针对于可操作按钮预加载的页面框架模板和当前页面的摘要数据;将摘要数据渲染至页面框架模板中,得到当前页面对应于所述可操作按钮的二级页面;最后,显示二级页面。如此,以预先加载好页面框架模板的方式,在接收到用户的选择操作之后,只需将当前页面的摘要数据渲染至该页面框架模板中即可,从而用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待。
下面说明本申请实施例的页面渲染设备的示例性应用,在一种实现方式中,本申请实施例提供的页面渲染设备可以实施为笔记本电脑,平板电脑,台式计算机,移动设备(例如,移动电话,便携式音乐播放器,个人数字助理,专用消息设备,便携式游戏设备)、智能机器人、智能语音交互设备、智能家电和车载终端等任意的具备数据处理功能和页面显示功能的终端;在另一种实现方式中,本申请实施例提供的页面渲染设备还可以实施为服务器。下面,将说明页面渲染设备实施为终端时的示例性应用。
参见图2,图2是本申请实施例提供的页面渲染系统10的一个可选的架构示意图,为实现对用户在当前页面上的选择操作进行快速响应,实现页面跳转即显示而无需用户等待页面加载的效果,本申请实施例提供的页面渲染系统10中至少包括终端100、网络200和服务器300。其中,终端100上均运行有信息显示应用,该信息显示应用可以是任意一种具有多级页面的应用,每一级页面可以显示任意内容,在前一级页面上可以具有至少一个可操作按钮,用户点击可操作按钮即可进入对应的下一级页面。
本申请实施例中,服务器300可以是信息显示应用的服务器,服务器具有数据处理和缓存功能,当用户在终端100上打开该信息显示应用时,在终端100的当前界面100-1上显示该信息显示应用的当前页面,同时,服务器300或者终端100可以对于每一可操作按钮预加载得到页面框架模板,并在服务器300的缓存单元中缓存该页面框架模板。当用户点击当前页面上的任一可操作按钮时,终端100获取用户点击该可操作按钮时的对应的选择操作,并响应于该选择操作,通过网络200从服务器300获取针对于该可操作按钮预加载的页面框架模板和当前页面的摘要数据;然后将摘要数据渲染至页面框架模板中,得到当前页面对应于可操作按钮的二级页面。在得到二级页面之后,终端100在当前界面100-1上显示该二级页面。
本申请实施例所提供的信息推荐方法还可以基于云平台并通过云技术来实现,例如,上述服务器300可以是云端服务器,通过云端服务器在显示当前页面时预加载得到页面框架模板。或者,还可以具有云端存储器或者云端缓存器,可以将页面框架模板存储于云端存储器中或者缓存至云端缓存器中,以便于终端在渲染二级页面时,可以请求从云端存储器或者云端缓存器中直接获取该页面框架模板;或者,还可以将当前页面的摘要数据存储于云端存储器中或者缓存至云端缓存器中。
这里需要说明的是,云技术(Cloud technology)是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来,实现数据的计算、储存、处理和共享的一种托管技术。云技术基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称,可以组成资源池,按需所用,灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源,如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用,将来每个物品都有可能存在自己的识别标志,都需要传输到后台系统进行逻辑处理,不同程度级别的数据将会分开处理,各类行业数据皆需要强大的系统后盾支撑,只能通过云计算来实现。
图3是本申请实施例提供的页面渲染设备的结构示意图,图3所示的页面渲染设备包括:至少一个处理器310、存储器350、至少一个网络接口320和用户接口330。页面渲染设备中的各个组件通过总线系统340耦合在一起。可理解,总线系统340用于实现这些组件之间的连接通信。总线系统340除包括数据总线之外,还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见,在图3中将各种总线都标为总线系统340。
处理器310可以是一种集成电路芯片,具有信号的处理能力,例如通用处理器、数字信号处理器(DSP,Digital Signal Processor),或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等,其中,通用处理器可以是微处理器或者任何常规的处理器等。
用户接口330包括使得能够呈现媒体内容的一个或多个输出装置331,包括一个或多个扬声器和/或一个或多个视觉显示屏。用户接口330还包括一个或多个输入装置332,包括有助于用户输入的用户接口部件,比如键盘、鼠标、麦克风、触屏显示屏、摄像头、其他输入按钮和控件。
存储器350可以是可移除的,不可移除的或其组合。示例性的硬件设备包括固态存储器,硬盘驱动器,光盘驱动器等。存储器350可选地包括在物理位置上远离处理器310的一个或多个存储设备。存储器350包括易失性存储器或非易失性存储器,也可包括易失性和非易失性存储器两者。非易失性存储器可以是只读存储器(ROM,Read Only Memory),易失性存储器可以是随机存取存储器(RAM,Random Access Memory)。本申请实施例描述的存储器350旨在包括任意适合类型的存储器。在一些实施例中,存储器350能够存储数据以支持各种操作,这些数据的示例包括程序、模块和数据结构或者其子集或超集,下面示例性说明。
操作系统351,包括用于处理各种基本系统服务和执行硬件相关任务的系统程序,例如框架层、核心库层、驱动层等,用于实现各种基础业务以及处理基于硬件的任务;
网络通信模块352,用于经由一个或多个(有线或无线)网络接口320到达其他计算设备,示例性的网络接口320包括:蓝牙、无线相容性认证(WiFi)、和通用串行总线(USB,Universal Serial Bus)等;
输入处理模块353,用于对一个或多个来自一个或多个输入装置332之一的一个或多个用户输入或互动进行检测以及翻译所检测的输入或互动。
在一些实施例中,本申请实施例提供的装置可采用软件方式实现,图3示出了存储在存储器350中的一种页面渲染装置354,该页面渲染装置354可以是页面渲染设备中的页面渲染装置,其可以是程序和插件等形式的软件,包括以下软件模块:获取模块3541、响应模块3542、渲染模块3543和显示模块3544,这些模块是逻辑上的,因此根据所实现的功能可以进行任意的组合或进一步拆分。将在下文中说明各个模块的功能。
在另一些实施例中,本申请实施例提供的装置可以采用硬件方式实现,作为示例,本申请实施例提供的装置可以是采用硬件译码处理器形式的处理器,其被编程以执行本申请实施例提供的页面渲染方法,例如,硬件译码处理器形式的处理器可以采用一个或多个应用专用集成电路(ASIC,Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD,Programmable Logic Device)、复杂可编程逻辑器件(CPLD,ComplexProgrammable Logic Device)、现场可编程门阵列(FPGA,Field-Programmable GateArray)或其他电子元件。
下面将结合本申请实施例提供的页面渲染设备的示例性应用和实施,说明本申请实施例提供的页面渲染方法,其中,该页面渲染设备可以是任意一种具备数据处理功能和页面显示功能的终端,或者也可以是服务器,即本申请实施例的页面渲染方法可以通过终端来执行,也可以通过服务器来执行,或者还可以通过终端与服务器进行交互来执行。
参见图4,图4是本申请实施例提供的页面渲染方法的一个可选的流程示意图,下面将结合图4示出的步骤进行说明,需要说明的是,图4中的页面渲染方法是通过终端作为执行主体来实现的页面渲染方法。
步骤S401,获取针对于当前页面中任一可操作按钮的选择操作。
这里,终端上运行有任意一种信息显示应用,该信息显示应用具有多个显示页面,在显示页面上可以具有至少一个可操作按钮,当用户点击任一可操作按钮,则可以进入该可操作按钮对应的二级页面。
本申请实施例中,可操作按钮可以是针对于视频、图像和文字等任意一种显示信息的选择按钮,或者,可操作按钮还可以是系统在当前页面上预设好的用于对应不同选项的固定按钮,例如,确定按钮、返回按钮和选项按钮等。选择操作可以是用户的点击操作、双击操作、长按操作和滑动操作等,选择操作用于选中可操作按钮对应的内容,进而进入该可操作按钮对应的二级页面。
步骤S402,响应于选择操作,获取针对于可操作按钮预加载的页面框架模板和当前页面的摘要数据。
这里,页面框架模板是用于生成二级页面的模板,在当前页面中,每一可操作按钮均对应于一页面框架模板,或者部分可操作按钮对应同一页面框架模板,或者全部可操作按钮对应一统一的页面框架模板。也就是说,页面框架模板是用于生成当前页面下的所有二级页面的模板页面。页面框架模板是预先加载好的模板,在终端运行信息显示应用并进入当前页面时,即可加载当前页面对应的全部页面框架模板,这样,一旦接收到用户的选择操作后,即可获取到页面框架模板进行二级页面的加载和渲染。
本申请实施例中,当当前页面中的可操作按钮对应的二级页面的显示布局相同或相似时,当前页面中的全部可操作按钮共用同一页面框架模板。
在一些实施例中,在预加载好页面框架模板之后,可以将预加载好的页面框架模板缓存至服务器的缓存单元中,或者将预加载好的页面框架模板存储至预设的存储单元中。这样,在接收到用户的选择操作时,可以直接从缓存单元或者存储单元中获取待页面框架模板,无需再进行加载,从而极大的提高了二级页面的加载效率。
摘要数据是指当前页面中每一选项的描述信息。在本申请一种可选的场景下,当前页面可以是一级列表页,在一级列表页中具有多个选项,即一级列表页对应一项目列表,项目列表中包含了多个选项中的每一个选项。每一选项均对应一个可操作按钮,当用户点击该一级详情页中的任一选项时,或者该选项的摘要数据,此时所获取的摘要数据可以是在一级列表页中所显示的内容对应的数据,也就是说,摘要数据可以是在当前页面中针对于可操作按钮所显示内容对应的数据。
举例来说,在任一信息推荐应用的主界面中,可以具有多个推荐项,但是并不能将每一推荐项的详细信息均全部显示出来,该主界面只是多个推荐项的列表页。因此,可以显示每个推荐项的部分重点内容,即显示每个推荐项的摘要数据,该部分摘要数据的数据量远小于推荐项的详情内容对应的数据量。
本申请实施例中,在获取摘要数据时,可以基于图像识别或者文本识别技术,对当前页面中选择操作对应的可操作按钮的摘要数据进行识别,以获取到摘要数据;或者,还可以从服务器请求获取摘要数据,由于在显示当前页面之前已经获取了每一可操作按钮的摘要数据,因此可以直接从服务器获取到该部分数据,而无需进行复杂的数据请求和响应,即无需消耗过多的带宽即可获取到摘要数据。如此,由于获取摘要数据可以基于当前页面直接获取,因此能够极大的提高数据获取的效率。
步骤S403,将摘要数据渲染至页面框架模板中,得到当前页面对应于可操作按钮的二级页面。
本申请实施例中,在得到摘要数据和页面框架模板之后,将摘要数据渲染至页面框架模板中的指定位置,从而得到二级页面,其中,该二级页面是响应于可操作按钮后的第一屏页面。
在一些实施例中,二级页面还包括扩展页面,扩展页面是对二级页面进行进一步渲染后得到的显示页面。
步骤S404,显示二级页面。
本申请实施例中,在获取到用户针对当前页面中的任一可操作按钮的选择操作时,响应于选择操作,获取针对于可操作按钮预加载的页面框架模板和当前页面的摘要数据;并将摘要数据渲染至页面框架模板中,得到当前页面对应于可操作按钮的二级页面。如此,以预先加载好页面框架模板的方式,在接收到用户的选择操作之后,只需将当前页面的摘要数据渲染至该页面框架模板中即可,从而用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待。
在一些实施例中,页面渲染系统中至少包括用于显示当前页面和渲染后的二级页面的终端、和信息显示应用的服务器。这里,终端上运行信息显示应用,信息显示应用可以是任意一种具有页面跳转和切换功能的多页面应用。在页面跳转之前所显示的页面可以是一级列表页,一级列表页包括由多条信息构成的信息列;在页面跳转之后所显示的页面可以是二级详情页,二级详情页可以是一级列表页中的任意信息项的信息详情页。当终端的当前界面上所显示的当前页面为一级列表页时,渲染后得到的二级页面即为二级详情页。
本申请实施例中,当用户在终端上启动信息显示应用之后,终端在终端界面上显示信息显示应用的当前页面,在显示当前页面的过程中,可以预加载好当前页面中每一可操作按钮的页面框架模板,其中,对于多个具有相似的二级页面的可操作按钮,可以共用同一页面框架模板,或者,当前页面中的全部可操作按钮共用同一页面框架模板。
图5是本申请实施例提供的页面渲染方法的另一个可选的流程示意图,如图5所示,方法包括以下步骤:
步骤S501,在终端界面上显示信息显示应用的当前页面。
步骤S502,在显示当前页面时,终端从服务器获取当前页面中的每一可操作按钮对应的二级页面的二级公共资源和二级页面所需的二级页面资源。
这里,二级公共资源是指每一可操作按钮对应的二级页面中均具有的公共资源或者通用的资源,二级页面资源包括二级页面所需的jsBunddle,其中,jsBunddle包括但不限于:页面代码、资源文件打包后的产物等文件。举例来说,二级公共资源可以是:可操作按钮对应的二级页面的页面框架、页面结构或页面布局。当任意两个可操作按钮对应的二级页面的页面结构相同时,则可以认为这两个可操作按钮对应的二级页面为相似二级页面。
步骤S503,终端根据二级公共资源和二级页面资源进行二级页面预加载,得到页面框架模板。
本申请实施例中,可以基于二级页面的二级公共资源和二级页面所需的jsBunddle进行预加载,得到页面框架模板,页面框架模板是得到二级页面的首屏页面的通用模板。在每一次基于相同的当前页面跳转相同的二级页面时,均可以预加载相同的页面框架模板,也就是说,每次在显示当前页面时预加载得到页面框架模板。当跳转到二级页面之后,可以删除在当前页面下预加载的全部页面框架模板,并将跳转显示的二级页面作为新的当前页面,进行新的二级页面的页面框架模板的预加载。如此,在每一屏所显示页面的场景下,均进行下一级页面的页面框架模板的预加载,从而能够保证每一次用户交互过程对应快速的页面跳转。
在一些实施例中,在信息显示应用启动时,在终端上就可以预先创建网页视图容器(即webview容器),通过该网页视图容器进行二级页面预加载。对应地,步骤S503可以通过以下步骤实现:
步骤S5031,通过网页视图容器,基于二级公共资源加载二级页面的页面模板。
步骤S5032,通过二级页面资源和页面模板,渲染得到页面框架模板。
本申请实施例中,可以先根据二级公共资源加载出二级页面中通用的页面模板,然后,将二级页面资源对应的内容渲染至页面模板中,形成最终的页面框架模板。
步骤S504,终端将页面框架模板发送给服务器。
步骤S505,服务器对页面框架模板进行缓存。
本申请实施例中,在渲染得到页面框架模板之后,将页面框架模板缓存至缓存单元中,这样当后续接收到用户的选择操作时,可以直接从缓存单元中获取页面框架模板进行二级页面渲染,提高了页面渲染效率。
在一些实施例中,步骤S502至步骤S505也可以统一由服务器来实现,也就是说,在显示当前页面时,服务器获取当前页面中的每一可操作按钮对应的二级页面的二级公共资源和二级页面所需的二级页面资源;然后,服务器根据二级公共资源和二级页面资源进行二级页面预加载,得到页面框架模板,并将页面框架模板缓存至服务器的缓存单元中。
步骤S506,终端获取针对于当前页面中任一可操作按钮的选择操作。
步骤S507,终端响应于选择操作,从服务器获取针对于可操作按钮预加载的页面框架模板。这里,可以从服务器的缓存单元中获取页面框架模板。
步骤S508,终端获取当前页面的摘要数据。
在一些实施例中,步骤S507和步骤S508可以同时执行,也就是说,同时从服务器获取页面框架模板和摘要数据。
步骤S509,终端将摘要数据渲染至页面框架模板中,得到当前页面对应于所述可操作按钮的二级页面。
步骤S510,在终端界面上显示二级页面。
在一些实施例中,当前页面上可以具有多个可操作按钮,其中,一部分可操作按钮对应的二级页面的结构相同,也就是说,一部分可操作按钮对应的二级页面可以采用同一页面框架模板渲染得到,在这一部分可操作按钮对应的二级页面中,有区别的仅是所显示的详情内容,因此,可以将这一部分可操作按钮抽象出一个统一的页面框架模板。
图6是本申请实施例提供的预加载得到页面框架模板方法的一个可选的流程示意图,如图6所示,方法包括以下步骤:
步骤S601,对当前页面中的全部可操作按钮进行汇总,得到可操作按钮集合。
步骤S602,将可操作按钮集合中具有相同的二级公共资源和相同的二级页面资源的可操作按钮,划分至同一可操作按钮组中。
这里,同一可操作按钮组中的可操作按钮互为相似可操作按钮。在其他实施例中,还可以将具有相同的二级公共资源的可操作按钮划分至同一可操作按钮组中。由于二级公共资源包括可操作按钮对应的二级页面的页面框架、页面结构或页面布局,二级页面资源包括页面代码、资源文件打包后的产物等文件。因此,当任意两个可操作按钮对应的二级页面具有相同的页面框架或者页面结构或者页面布局时,可以认为这两个可操作按钮为相似可操作按钮;或者,当任意两个可操作按钮对应的二级页面具有相同的页面框架或者页面结构或者页面布局,且具有相同的页面代码和资源文件打包后的产物等文件时,可以认为这两个可操作按钮为相似可操作按钮。
在一些实施例中,还可以对当前页面中的全部可操作按钮进行分类,将相同类型的可操作按钮划分至同一可操作按钮组中。这里的分类可以基于任意一种分类原则来执行,例如,可以按照所开启的二级页面的类型来确定可操作按钮的类型,进而根据可操作按钮的类型对可操作按钮进行分类。举例来说,将启动详情页的可操作按钮划分至同一可操作按钮组中,将启动列表页的可操作按钮划分至另一可操作按钮组中。
步骤S603,根据相同的二级公共资源和相同的二级页面资源,为每一可操作按钮组中的可操作按钮进行二级页面预加载,得到对应于可操作按钮组的页面框架模板,其中,可操作按钮组中的可操作按钮共用同一页面框架模板。
本申请实施例中,同一当前页面所显示的多个可操作按钮,可以对应有至少一个可操作按钮组,其中,每一可操作按钮组中的可操作按钮共用同一页面框架模板。
在一些实施例中,还可以针对于当前页面中的全部可操作按钮,预加载一个共用的页面框架模板,也就是说,可以获取全部可操作按钮对应的二级页面的二级公共资源,基于二级公共资源加载得到页面框架模板。这样,能够极大的降低页面框架模板加载的带宽消耗,降低页面渲染时长。
在一些实施例中,由于渲染得到二级页面时是将摘要数据渲染至页面框架模板中,显然这并不能满足页面的多样性需求。例如,当所采集的摘要数据不足以对二级页面进行充分的渲染时,也就是说在正常显示的二级页面中,除了摘要数据之外,还有其他必要的数据时,那么还可以同时采集这一部分数据并进行渲染,因此上述页面渲染方法,还可以包括以下步骤:
步骤S11,在响应选择操作的同时,获取二级页面中除摘要数据之外的页面数据。
步骤S12,将页面数据渲染至二级页面的对应位置。
本申请实施例中,在跳转显示二级页面的同时,获取除摘要数据之外的页面数据并进行渲染,从而及时对二级页面中的内容进行补充,也就是说,在渲染二级页面的同时,还可以渲染除了摘要数据之外的其他的页面数据。
本申请实施例可以在基于页面框架模板和摘要数据进行渲染的同时,还可以获取其他的页面数据进行渲染,保证页面信息的完整性。由于二级页面的整体框架和作为大部分数据的摘要数据已经渲染完成,因此页面数据的渲染速度会很快,在视觉上并不会出现显示跳动,从而能够对二级页面进行整体内容的渲染,渲染的速度较高,同时不会出现页面抖动。
在一些实施例中,步骤S402中获取所述当前页面的摘要数据,可以通过以下步骤实现:
步骤S4021,获取当前页面的显示数据。
这里,可以通过图像识别技术,对当前页面的内容进行识别,例如,可以进行文本识别,得到显示数据。或者,由于在渲染当前页面时已经获取了当前页面的显示数据,因此可以直接从历史数据中获取渲染当前页面时的显示数据。
步骤S4022,在显示数据中,确定出与选择操作所选中的可操作按钮对应的目标显示数据。
由于当前页面对应至少一个可操作按钮,每一可操作按钮在当前页面对应的内容不同,因此,可以从显示数据中确定出选择操作所选中的可操作按钮对应的目标显示数据。目标显示数据可以是显示数据的全部,还可以是显示数据的一部分。
步骤S4023,将目标显示数据确定为摘要数据。
这里,与选择操作所选中的可操作按钮对应的目标显示数据可以是渲染至二级页面中的数据,这样在得到二级页面时,可以将当前页面中的摘要数据直接渲染至二级页面中,从而在保证渲染效率的同时,还能够保证渲染信息的准确性。
在一些实施例中,上述二级页面为可交互页面的首屏,对应地,摘要数据为可交互页面的首屏数据;页面渲染方法还可以包括以下步骤:
步骤S21,在显示二级页面时,异步获取可交互页面中除首屏数据之外的其他数据。
这里,异步获取其他数据是指在获取摘要数据并进行二级页面渲染之后,再获取其他数据,这样,能够保证先对二级页面进行高效的渲染,再进一步在显示二级页面的过程中,针对于用户的交互操作,进行实时的数据获取和进一步的页面渲染。也就是说,保证首屏数据能够优先获取和渲染,首屏之外的数据在首屏之后获取和渲染,进而实现对可交互页面的异步渲染,在快速渲染显示二级页面的同时,能够实现可交互页面的准确有序加载,提高了用户的使用和交互体验。
步骤S22,接收针对于可交互页面的交互操作。
步骤S23,响应于交互操作,将其他数据渲染至可交互页面中,并显示渲染后的可交互页面。
本申请实施例中,二级页面为可交互页面,且二级页面是可交互页面的首屏,在显示首屏之后,还可以继续获取可交互页面中的其他数据,采用其他数据对可交互页面进行进一步的渲染,从而实现用户在可交互页面进行浏览和交互时,能够进一步显示更多的内容。
下面,将说明本申请实施例在一个实际的应用场景中的示例性应用。
本申请实施例提供了一种基于页面框架模板和摘要数据的移动端页面预渲染方案,本申请实施例的方案可以是针对列表页跳转二级详情页这一场景,可以实现每一个二级页面都有预渲染快速加载的效果,但是只需要初始化一份网页视图容器(webview容器),并且无需预测,不管点击的是列表页中的哪一项,都可以有预加载的效果。并且,会在进入到二级页面之前,以预先加载好页面框架模板的方式,用最小的内存占用和资源消耗,实现二级页面跳转即展示,无需等待。
本申请实施例提到的基于页面框架模板和摘要数据的预加载方案,可以应用到任意一种信息显示应用中。例如,信息显示应用内的主场景与信息流,可以是采用一级列表页(即上述当前页面)+二级详情页(即上述二级页面)模式,其中,二级详情页可以是二级H5详情页。由于无法预知用户会点击一级列表页中的哪一个,但一级列表页的页面框架模板是固定的,又可以通过一级列表页提前获取部分摘要数据,所以可以采用基于页面框架模板和摘要数据的预加载方案,保证了成本最小、性能消耗很小但是加载速度很快。
图7是本申请实施例提供的页面渲染方法中一级列表页跳转至二级详情页的界面图,如图7所示,一级列表页71中显示有多个显示项目711,每一显示项目711均对应一个可操作按钮,且在一级列表页71中显示有每一显示项目的部分信息,该部分信息可以构成该显示项目的摘要数据。当用户点击任一显示项目时,终端即可获取到对应的选择操作,并采用本申请实施例提供的基于页面框架模板和摘要数据的预加载方案进行二级页面的加载,跳转至二级详情页72,显示显示项目711的详细显示内容721。
本申请实施例中,技术侧的实现方式可以是:在前端页面开发时,用技术和设计手段,将所有二级详情页抽象出一个统一的页面框架模板,页面框架模板和数据进行分离。打开一级列表页面时,一级列表页会下发列表里面每一项的摘要数据进行展示,这个摘要数据和二级详情页面需要展示的详情数据的结构相同,核心要素一致,只是数据量大小不一致。同时,在一级列表页打开的同时,webview容器会先加载好二级详情页面的页面框架模板,页面框架模板可以独立渲染出页面框架,再监听页面数据。当用户在一级列表页面点击列表的某一项时,会将数据传递到webview容器,可以立即用页面框架模板和这份摘要数据渲染出来二级详情页的第一屏页面,页面框架模板和摘要数据能够保证第一屏页面是完整的、用户可交互的页面,后续再在后台无感知的进行耗时的网络请求加载二级详情页的更多数据。
这里,一方面,前端可以通过单页应用的方式生成页面框架模板,保证页面切换和数据渲染的速度,另一方面,摘要数据可以尽可能接近首屏展示范围所需的数据,从而能够避免页面抖动,其中,摘要数据的长度可以根据不同项目自行确定。
本申请实施例的整体流程,可以是终端在进入一级列表页的时候,提前加载好一个隐藏的预载页面(preload),这个预载页面就是页面框架模板,是前端Vue同构框架下(Vue是一种web页面开发的编程语言框架)的一个框架页(可以想象成单页应用),因为单页应用跳转不同路由只需要加载对应页面的jsBundle(页面代码、资源文件打包后的产物)。通常,对于一级列表页的不同二级web页面之间,唯一有差别的就是页面的逻辑JS不同,其他部分都是一样的。而前端的Vue框架支持类单页应用的路由跳转,而单页应用的跳转是不需要加载完整页面的,只需要加载子页面的jsBundle即可。所以如果加载好了预载页面,并且预先加载好二级详情页Page1.js、Page2.js、Page3.js。那么这时候如果需要跳转到这三个页面的任意一个,只需要切换对应子页面的组件即可,而不需要发起任何其他的网络请求了。因此也就实现了通过一个预载页面,然后预先加载好需要加载的子页面的jsBundle,就能通过这预加载的一个页面,完成全部子页面的预加载任务。
而在这个隐藏的预载页面,在提前加载好所需的不同页面的jsBundle之后,当需要跳转到指定页面时,终端只需要将跳转的页面信息和数据通过事件方式告知预载页面,并将隐藏的预载页面推到前台。预载页面在收到事件的同时,不需要做任何的资源的网络请求,直接渲染页面即可。从而使得加载速度和渲染速度都非常快,体验也无比顺滑。
图8是本申请实施例提供的一种页面渲染方法的流程示意图,如图8所示,当终端主页(即当前页面)加载完成后,如果用户点击打开新页面(即针对任一可操作按钮的选择操作),此时的页面渲染方法包括以下步骤:
步骤S81,当终端主页加载完成后,通知终端加载预载页面及对应的子页面的jsBundle。
本申请实施例中,在加载预载页面时,可以通过以下步骤实现:
步骤S811,加载preload.html。
步骤S812,页面加载完成之后加载jsBundle。
步骤S813,加载jsBundle完成后通知终端,向终端发送通知消息,以通知终端页面加载完成。
步骤S814,跳转到指定的页面并使用推送视图组件(pushView)传来的摘要数据(preData)渲染首屏。
步骤S82,推送视图组件携带上摘要数据打开新页(即二级页面)。
步骤S83,收到推送视图组件的调用信息后,判断预载页面是否加载完成。
如果判断结果为是,则执行步骤S84;如果判断结果为否,则直接走原始方式打开新页面。
步骤S84,发送pushView事件,并带上摘要数据和相关参数,执行步骤S814。
在步骤S814完成渲染之后,方法还包括:
步骤S85,推出网页视图容器,打开新的H5页面(即二级页面)。
图9是本申请实施例提供的另一种页面渲染方法的流程示意图,如图9所示,方法包括以下步骤:
步骤S91,终端运行应用后的登录页面(即当前页面)加载完成后,加载隐藏的网页视图容器和预载页面。
步骤S92,用户点击跳转按钮(即可操作按钮)。
这时还可以通知隐藏的网页视图容器,并带上首屏数据(即摘要数据)打开目标子页面a.html。
步骤S93,预加载预载页面。
本申请实施例中,在步骤S93预加载预载页面时,可以包括以下三步:
步骤S931,加载预载页面。步骤S932,加载框架公共的manifest、app、vendojs文件。步骤S933,加载各个子页面的jsBundle文件,如a.html的jsBundle文件。
步骤S94,在预加载预载页面完成之后,将隐藏的网页视图容器直接从预载页面路由到目标子页面a.html。
此时已推出隐藏的网页视图容器,且所需的公共资源JS和页面的JS资源都已加载,首屏所需数据也已经提供。
步骤S95,基于所需的公共资源JS和页面的JS资源进行直接渲染,此时整个页面已经可交互。
步骤S96,渲染非首屏部分,此时整个页面加载完成。
可以看到,相比通常的页面加载方式,本申请实施例通过提前预加载webview,以及提前预加载好生成的页面框架模板,包括了页面框架所需的公共js资源,和子页面所需的jsBundle,在跳转后即可渲染首屏数据。在一级列表页跳转到真正的目标页面时,只需要进行页面框架模板收到数据后的渲染这一步,即完成了首屏可交互的整个过程。而对于页面体验来说,首屏可交互是最重要的体验,因为非首屏的数据用户无法直接感知,完全可以异步进行加载渲染。
本申请实施例提供了一种简便易行、并且效果显著的web页面预加载方案,通过生成页面框架模板的方式,利用一级列表页下发的摘要数据,快速渲染出来web页面,无需引入额外复杂的算法和其他策略。在任一信息显示应用中,所有基于一级列表页到二级详情页的web页面加载均可以实现秒开,相比传统的页面加载方式减少了等待时间。
图10是本申请实施例提供的页面渲染方法的效果示意图,如图10所示,在当前页面1001中,当用户点击任一可操作按钮1002时,均可以快速跳转至二级页面1003中,二级页面1003是当前页面1001中可操作按钮1002对应的详情页面。从统计数据上来看,页面平均加载完成时间,从当前的1.5s到3s不等下降到100ms以内,实现了页面的秒开,提高用户的使用体验。
需要说明的是,摘要数据与页面框架模板分离是一种预加载的思路,当然,在其他实施例中,还可以不局限于摘要数据,如果一级列表页可点击跳转到二级详情页的项目不多,那么,还可以把二级详情页的完整数据在一级列表页下发下来,跳转时直接传递到二级详情页的页面框架模板上进行加载即可。另外,页面框架模板在上述实施例中示例性的说明了是基于前端vue的开发框架的单页应用实现的,但是在其他实施例中,前端的开发框架还可以采用其他的框架,例如可以采用支持类似的单页应用和跳转的框架,所以页面框架模板的生成不限于vue框架。该预加载方案也不局限于使用在一级列表页与二级详情页的场景,只要二级页面能够用技术手段抽象出统一模板,或者,能够将部分二级页面抽象出一个统一模板,另一部分二级页面能够抽象出另一个统一模板,即可以抽象出至少一个统一模板,每一模板用于对至少一个二级页面进行页面渲染即可。
再需要说明的是,预加载方案可以不止应用在web页面,其他加载耗时比较长、需要异步拉取资源和数据的页面都可以使用。比如,使用类似react native(一种用H5描述语言渲染终端原生页面的开发技术)开发的页面也可以采用本申请实施例的预加载方案预加载页面框架模板,然后基于页面框架模板和摘要数据渲染得到二级页面。
可以理解的是,在本申请实施例中,涉及到用户信息的内容,例如,用户的操作习惯、针对于可操作按钮的选择操作等数据,当本申请实施例运用到具体产品或技术中时,需要获得用户许可或者同意,且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
下面继续说明本申请实施例提供的页面渲染装置354实施为软件模块的示例性结构,在一些实施例中,如图3所示,页面渲染装置354包括:
获取模块3541,用于获取针对于当前页面中任一可操作按钮的选择操作;
响应模块3542,用于响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;
渲染模块3543,用于将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;
显示模块3544,用于显示所述二级页面。
在一些实施例中,所述装置还包括:资源获取模块,用于在显示所述当前页面时,获取所述当前页面中的每一可操作按钮对应的二级页面的二级公共资源和所述二级页面所需的二级页面资源;预加载模块,用于根据所述二级公共资源和所述二级页面资源进行二级页面预加载,得到所述页面框架模板。
在一些实施例中,所述资源获取模块还用于:通过网页视图容器,基于所述二级公共资源加载所述二级页面的页面模板;通过所述二级页面资源和所述页面模板,渲染得到所述页面框架模板。
在一些实施例中,所述资源获取模块还用于:对所述当前页面中的全部可操作按钮进行汇总,得到可操作按钮集合;将所述可操作按钮集合中具有相同的二级公共资源和相同的二级页面资源的可操作按钮,划分至同一可操作按钮组中;根据所述相同的二级公共资源和所述相同的二级页面资源,为每一可操作按钮组中的可操作按钮进行所述二级页面预加载,得到对应于所述可操作按钮组的页面框架模板,其中,所述可操作按钮组中的可操作按钮共用同一页面框架模板。
在一些实施例中,所述装置还包括:数据获取模块,用于在响应所述选择操作的同时,获取所述二级页面中除所述摘要数据之外的页面数据;数据渲染模块,用于将所述页面数据渲染至所述二级页面的对应位置。
在一些实施例中,所述获取模块还用于:获取所述当前页面的显示数据;在所述显示数据中,确定出与所述选择操作所选中的可操作按钮对应的目标显示数据;将所述目标显示数据确定为所述摘要数据。
在一些实施例中,所述二级页面为可交互页面的首屏,所述摘要数据为所述可交互页面的首屏数据;所述装置还包括:异步获取模块,用于在显示所述二级页面时,异步获取所述可交互页面中除所述首屏数据之外的其他数据;接收模块,用于接收针对于所述可交互页面的交互操作;处理模块,用于响应于所述交互操作,将所述其他数据渲染至所述可交互页面中,并显示渲染后的可交互页面。
需要说明的是,本申请实施例装置的描述,与上述方法实施例的描述是类似的,具有同方法实施例相似的有益效果,因此不做赘述。对于本装置实施例中未披露的技术细节,请参照本申请方法实施例的描述而理解。
本申请实施例提供了一种计算机程序产品或计算机程序,该计算机程序产品或计算机程序包括计算机指令,该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令,处理器执行该计算机指令,使得该计算机设备执行本申请实施例上述的方法。
本申请实施例提供一种存储有可执行指令的存储介质,其中存储有可执行指令,当可执行指令被处理器执行时,将引起处理器执行本申请实施例提供的方法,例如,如图4示出的方法。
在一些实施例中,存储介质可以是计算机可读存储介质,例如,铁电存储器(FRAM,Ferromagnetic Random Access Memory)、只读存储器(ROM,Read Only Memory)、可编程只读存储器(PROM,Programmable Read Only Memory)、可擦除可编程只读存储器(EPROM,Erasable Programmable Read Only Memory)、带电可擦可编程只读存储器(EEPROM,Electrically Erasable Programmable Read Only Memory)、闪存、磁表面存储器、光盘、或光盘只读存储器(CD-ROM,Compact Disk-Read Only Memory)等存储器;也可以是包括上述存储器之一或任意组合的各种设备。
在一些实施例中,可执行指令可以采用程序、软件、软件模块、脚本或代码的形式,按任意形式的编程语言(包括编译或解释语言,或者声明性或过程性语言)来编写,并且其可按任意形式部署,包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。
作为示例,可执行指令可以但不一定对应于文件系统中的文件,可以可被存储在保存其它程序或数据的文件的一部分,例如,存储在超文本标记语言(HTML,Hyper TextMarkup Language)文档中的一个或多个脚本中,存储在专用于所讨论的程序的单个文件中,或者,存储在多个协同文件(例如,存储一个或多个模块、子程序或代码部分的文件)中。作为示例,可执行指令可被部署为在一个计算设备上执行,或者在位于一个地点的多个计算设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算设备上执行。
以上所述,仅为本申请的实施例而已,并非用于限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等,均包含在本申请的保护范围之内。
Claims (10)
1.一种页面渲染方法,其特征在于,所述方法包括:
获取针对于当前页面中任一可操作按钮的选择操作;
响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;
将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;
显示所述二级页面。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在显示所述当前页面时,获取所述当前页面中的每一可操作按钮对应的二级页面的二级公共资源和所述二级页面所需的二级页面资源;
根据所述二级公共资源和所述二级页面资源进行二级页面预加载,得到所述页面框架模板。
3.根据权利要求2所述的方法,其特征在于,所述根据所述二级公共资源和所述二级页面资源进行二级页面预加载,得到所述页面框架模板,包括:
通过网页视图容器,基于所述二级公共资源加载所述二级页面的页面模板;
通过所述二级页面资源和所述页面模板,渲染得到所述页面框架模板。
4.根据权利要求2所述的方法,其特征在于,所述根据所述二级公共资源和所述二级页面资源进行二级页面预加载,得到所述页面框架模板,包括:
对所述当前页面中的全部可操作按钮进行汇总,得到可操作按钮集合;
将所述可操作按钮集合中具有相同的二级公共资源和相同的二级页面资源的可操作按钮,划分至同一可操作按钮组中;
根据所述相同的二级公共资源和所述相同的二级页面资源,为每一可操作按钮组中的可操作按钮进行所述二级页面预加载,得到对应于所述可操作按钮组的页面框架模板,其中,所述可操作按钮组中的可操作按钮共用同一页面框架模板。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
在响应所述选择操作的同时,获取所述二级页面中除所述摘要数据之外的页面数据;
将所述页面数据渲染至所述二级页面的对应位置。
6.根据权利要求1所述的方法,其特征在于,获取所述当前页面的摘要数据,包括:
获取所述当前页面的显示数据;
在所述显示数据中,确定出与所述选择操作所选中的可操作按钮对应的目标显示数据;
将所述目标显示数据确定为所述摘要数据。
7.根据权利要求1至6任一项所述的方法,其特征在于,所述二级页面为可交互页面的首屏,所述摘要数据为所述可交互页面的首屏数据;所述方法还包括:
在显示所述二级页面时,异步获取所述可交互页面中除所述首屏数据之外的其他数据;
接收针对于所述可交互页面的交互操作;
响应于所述交互操作,将所述其他数据渲染至所述可交互页面中,并显示渲染后的可交互页面。
8.一种页面渲染装置,其特征在于,所述装置包括:
获取模块,用于获取针对于当前页面中任一可操作按钮的选择操作;
响应模块,用于响应于所述选择操作,获取针对于所述可操作按钮预加载的页面框架模板和所述当前页面的摘要数据;
渲染模块,用于将所述摘要数据渲染至所述页面框架模板中,得到所述当前页面对应于所述可操作按钮的二级页面;
显示模块,用于显示所述二级页面。
9.一种页面渲染设备,其特征在于,包括:
存储器,用于存储可执行指令;处理器,用于执行所述存储器中存储的可执行指令时,实现权利要求1至7任一项所述的页面渲染方法。
10.一种计算机可读存储介质,其特征在于,存储有可执行指令,用于引起处理器执行所述可执行指令时,实现权利要求1至7任一项所述的页面渲染方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111419379.6A CN114065080B (zh) | 2021-11-26 | 2021-11-26 | 页面渲染方法、装置、设备及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111419379.6A CN114065080B (zh) | 2021-11-26 | 2021-11-26 | 页面渲染方法、装置、设备及计算机可读存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114065080A true CN114065080A (zh) | 2022-02-18 |
CN114065080B CN114065080B (zh) | 2023-06-13 |
Family
ID=80276535
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111419379.6A Active CN114065080B (zh) | 2021-11-26 | 2021-11-26 | 页面渲染方法、装置、设备及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114065080B (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114816639A (zh) * | 2022-04-24 | 2022-07-29 | 招银云创信息技术有限公司 | 页面显示方法、装置、设备、存储介质和程序产品 |
WO2023169483A1 (zh) * | 2022-03-11 | 2023-09-14 | 北京字跳网络技术有限公司 | 信息流的显示方法、装置、设备、存储介质及程序 |
CN117520691A (zh) * | 2024-01-08 | 2024-02-06 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170048319A1 (en) * | 2015-08-11 | 2017-02-16 | Oracle International Corporation | Asynchronous pre-caching of synchronously loaded resources |
US20190220304A1 (en) * | 2016-11-25 | 2019-07-18 | Tencent Technology (Shenzhen) Company Limited | Method and device for processing application program page, and storage medium |
CN111143725A (zh) * | 2019-11-15 | 2020-05-12 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置和电子设备 |
CN111158799A (zh) * | 2019-12-31 | 2020-05-15 | 北京百度网讯科技有限公司 | 一种页面渲染方法、装置、电子设备及存储介质 |
CN112115396A (zh) * | 2020-09-21 | 2020-12-22 | 北京达佳互联信息技术有限公司 | 网页页面渲染方法、装置、设备及存储介质 |
CN112115388A (zh) * | 2020-09-09 | 2020-12-22 | 深圳市欢太科技有限公司 | 网页的显示方法、移动终端及计算机可读存储介质 |
CN112559086A (zh) * | 2020-12-25 | 2021-03-26 | 北京百度网讯科技有限公司 | 小程序页面渲染方法、装置、电子设备及可读存储介质 |
US20210118409A1 (en) * | 2019-10-21 | 2021-04-22 | Baidu Online Network Technology (Beijing) Co., Ltd. | Rendering method and apparatus, electronic device and storage medium |
CN113158100A (zh) * | 2020-01-22 | 2021-07-23 | 阿里巴巴集团控股有限公司 | 页面显示方法和页面显示装置 |
-
2021
- 2021-11-26 CN CN202111419379.6A patent/CN114065080B/zh active Active
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170048319A1 (en) * | 2015-08-11 | 2017-02-16 | Oracle International Corporation | Asynchronous pre-caching of synchronously loaded resources |
US20190220304A1 (en) * | 2016-11-25 | 2019-07-18 | Tencent Technology (Shenzhen) Company Limited | Method and device for processing application program page, and storage medium |
US20210118409A1 (en) * | 2019-10-21 | 2021-04-22 | Baidu Online Network Technology (Beijing) Co., Ltd. | Rendering method and apparatus, electronic device and storage medium |
CN111143725A (zh) * | 2019-11-15 | 2020-05-12 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置和电子设备 |
CN111158799A (zh) * | 2019-12-31 | 2020-05-15 | 北京百度网讯科技有限公司 | 一种页面渲染方法、装置、电子设备及存储介质 |
CN113158100A (zh) * | 2020-01-22 | 2021-07-23 | 阿里巴巴集团控股有限公司 | 页面显示方法和页面显示装置 |
CN112115388A (zh) * | 2020-09-09 | 2020-12-22 | 深圳市欢太科技有限公司 | 网页的显示方法、移动终端及计算机可读存储介质 |
CN112115396A (zh) * | 2020-09-21 | 2020-12-22 | 北京达佳互联信息技术有限公司 | 网页页面渲染方法、装置、设备及存储介质 |
CN112559086A (zh) * | 2020-12-25 | 2021-03-26 | 北京百度网讯科技有限公司 | 小程序页面渲染方法、装置、电子设备及可读存储介质 |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2023169483A1 (zh) * | 2022-03-11 | 2023-09-14 | 北京字跳网络技术有限公司 | 信息流的显示方法、装置、设备、存储介质及程序 |
CN114816639A (zh) * | 2022-04-24 | 2022-07-29 | 招银云创信息技术有限公司 | 页面显示方法、装置、设备、存储介质和程序产品 |
CN117520691A (zh) * | 2024-01-08 | 2024-02-06 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
CN117520691B (zh) * | 2024-01-08 | 2024-04-02 | 成都安世赛斯特软件技术有限公司 | 一种条目化数据显示方法、装置、存储介质及电子设备 |
Also Published As
Publication number | Publication date |
---|---|
CN114065080B (zh) | 2023-06-13 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN114065080B (zh) | 页面渲染方法、装置、设备及计算机可读存储介质 | |
KR102436987B1 (ko) | 웹페이지 콘텐츠를 추출하기 위한 방법 및 단말 장치 | |
CN107368487B (zh) | 一种页面组件动态布局方法、装置及客户端 | |
CN111198730B (zh) | 子应用程序启动的方法、装置、终端及计算机存储介质 | |
JP5335083B2 (ja) | ブラウザにおける新しいタブページおよびブックマークツールバー | |
US20130019159A1 (en) | Mobile web browser for pre-loading web pages | |
CN104077387A (zh) | 一种网页内容显示方法和浏览器装置 | |
CN103034517A (zh) | 浏览器控制工具加载方法和装置 | |
CN107832052B (zh) | 展示预览页面的方法、装置和存储介质以及电子设备 | |
CN104077348A (zh) | 用于控制网页的动态改变的内容的方法及其电子装置 | |
US20150113525A1 (en) | Method for a Reader to Provide Service, Reader and Computer-Readable Storage Medium | |
WO2022247594A1 (zh) | 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 | |
CN107045546B (zh) | 一种网页处理方法、装置及智能终端 | |
CN114036439A (zh) | 网站搭建方法、装置、介质及电子设备 | |
CN113792208B (zh) | 基于网页的图片交互方法、装置、设备、介质及程序产品 | |
US8560943B2 (en) | Displaying documents on mobile devices | |
KR20070040845A (ko) | 사용자 인터페이스 뷰를 위한 디스플레이 모듈, 장치,컴퓨터 소프트웨어 프로덕트 및 방법 | |
US20240095298A1 (en) | Systems and methods for rendering interactive web pages | |
CN113360385A (zh) | 一种测试方法、装置、设备及介质 | |
CN109446451B (zh) | 网页展示的方法、装置、介质和计算设备 | |
CN115081423A (zh) | 文档编辑方法、装置、电子设备及存储介质 | |
CN109460525B (zh) | 简讯类文章的展示方法、装置、介质和计算设备 | |
CN110045895B (zh) | 信息处理方法、系统、介质和计算设备 | |
CN113688345A (zh) | 一种页面切换方法、装置及计算设备 | |
CN113392353A (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 |