CN112464125A - 页面展示方法及装置、电子设备、存储介质 - Google Patents
页面展示方法及装置、电子设备、存储介质 Download PDFInfo
- Publication number
- CN112464125A CN112464125A CN202011440227.XA CN202011440227A CN112464125A CN 112464125 A CN112464125 A CN 112464125A CN 202011440227 A CN202011440227 A CN 202011440227A CN 112464125 A CN112464125 A CN 112464125A
- Authority
- CN
- China
- Prior art keywords
- display
- object layer
- amount
- display object
- construction component
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 39
- 238000005096 rolling process Methods 0.000 claims abstract description 71
- 230000004044 response Effects 0.000 claims abstract description 19
- 238000010276 construction Methods 0.000 claims description 92
- 238000012545 processing Methods 0.000 claims description 29
- 230000008859 change Effects 0.000 claims description 18
- 238000009877 rendering Methods 0.000 claims description 11
- 230000000694 effects Effects 0.000 abstract description 39
- 230000003993 interaction Effects 0.000 abstract description 6
- 230000000903 blocking effect Effects 0.000 abstract description 3
- 238000004891 communication Methods 0.000 description 11
- 238000005516 engineering process Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000009499 grossing Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 238000013506 data mapping Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
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/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开是关于一种页面展示方法及装置、电子设备、存储介质，所述方法包括：接收针对页面的展示指令；响应于所述展示指令，调整所述页面的第一展示对象层的展示量；根据所述展示量确定所述页面的第二展示对象层的展示调整量；响应于所述展示调整量调整所述第二展示对象层的展示状态。本公开兼容各种浏览器的页面展示，如电脑端浏览器和手机端浏览器等，基于滚动行为能实现复杂的动画效果，提升了网页交互的流畅性，避免了卡顿及丢帧，提升了用户体验效果。
Description
技术领域
本公开涉及页面展示技术，尤其涉及一种页面展示方法及装置、电子设备、存储介质。
背景技术
目前，用户在浏览网页时，由于网页一般展示内容较多，用户常有拖动网页的使用习惯，目前，针对用户的拖拽方式，一般都是基于网页对应的文档对象模型(DocumentObject Model，DOM)进行分析，并生成响应于用户拖拽动作的网页拖动方式，以将相关网页展示给用户。然而，由于网页应用是针对用户的实际网页内容进行的处理，当用户拖动界面内容较多时，针对用户拖动的响应时间不仅相当长，动态展示网页时断断续续性，影响用户的使用体验，导致当前网页页面的动画效果优化性较差，导致视觉卡顿，影响浏览者的视觉感受及体验效果。
发明内容
本公开提供一种页面展示方法及装置、电子设备、存储介质。
根据本公开实施例的第一方面，提供一种页面展示方法，包括：
接收针对页面的展示指令；
响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
根据所述展示量确定所述页面的第二展示对象层的展示调整量；
响应于所述展示调整量调整所述第二展示对象层的展示状态。
可选的，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型(Document Object Model，DOM)，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
可选的，所述根据所述展示量确定所述页面的第二展示对象层的展示调整量，包括：
通过所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述响应于所述展示调整量调整所述第二展示对象层的展示状态，包括：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
可选的，在通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，所述方法还包括：
通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
可选的，通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量包括：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述方法还包括：
基于所述显示参数中的显示更新频率，以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
根据本公开实施例的第二方面，提供一种页面展示装置，包括：
接收单元，用于接收针对页面的展示指令；
第一调整单元，用于响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
确定单元，用于根据所述展示量确定所述页面的第二展示对象层的展示调整量；
第二调整单元，用于响应于所述展示调整量调整所述第二展示对象层的展示状态。
可选的，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型DOM，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
可选的，所述确定单元，还用于：
通过所述第二界面构建组件接收所述第一界面构建组件获取的所述第一展示对象层的滚动量，计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量；其中，所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量。
可选的，所述第二调整单元，还用于：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
可选的，所述装置还包括：
存储单元，用于在所述确定单元通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
可选的，所述确定单元，还用于：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述第二调整单元，还用于：
以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
根据本公开实施例的第三方面，提供一种电子设备，包括：处理器和用于存储处理器可执行指令的存储器，其中，所述处理器被配置为在调用存储器中的可执行指令时，能够执行上述的页面展示方法的步骤。
根据本公开实施例的第四方面，提供一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述的页面展示方法的步骤。
本公开的实施例提供的技术方案可以包括以下有益效果：
在本公开的实施例中，通过对页面分层为第一展示对象层和第二展示对象层，并为第一展示对象层和第二展示对象层分别设置第一界面构建组件和第二界面构建组件；通过第一界面构建组件和第二界面构建组件分别对真实DOM对应的虚拟DOM进行控制，以对真实DOM即第一展示对象层和第二展示对象层进行控制，以实现网页中文字内容层的滚动操作，以及动画效果层对应于文字内容层进行动画展示。本公开实施例由于在网页应用后台针对用户的展示指令，仅对虚拟DOM进行调用和处理，并在动画展示处理完毕后，再对待展示的虚拟DOM动画帧进行渲染而形成实际的展示页面，保证了迅捷地输出响应于展示指令的动态展示网页。
本公开实施例的技术方案兼容各种浏览器的页面展示，如电脑端浏览器和手机端浏览器等，基于滚动行为能实现复杂的动画效果，提升了网页交互的流畅性，避免了卡顿及丢帧，提升了用户体验效果。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
图1为本公开实施例示出的一种页面展示方法流程示意图；
图2为本公开实施例示出的一种页面展示方法的实现结构示意图；
图3为本公开实施例示出的一种页面展示装置的组成结构示意图；
图4为本公开实施例示出的电子设备的框图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和装置的例子。
图1为本公开实施例示出的一种页面展示方法流程示意图，如图1所示，本公开实施例的页面展示方法包括以下步骤：
S11，接收针对页面的展示指令。
本公开实施例中，展示指令可以是网页页面的任何浏览指令如滚动、拖动、滑动等操作指令。展示指令由用户发起，也可以是由电子设备如手机或电脑等基于内部指令发起的针对网页调整指令等。
S12、响应于所述展示指令，调整所述页面的第一展示对象层的展示量。
本公开实施例中，可以将网页划分为两层，也可以划分为多层，以两层分别为所述第一展示对象层和所述第二展示对象层为例进行说明。作为一种示例，所述第一展示对象层可以为文字内容层，属于正常文档流，用户可以通过滚动来对内容进行查看；所述第二展示对象层动画效果层，依赖于文字内容层的内容的滚动实现动态变化，展示网页的动画效果。这里，第一展示对象层的展示量为，用户针对网页进行拖动等浏览指令时，确定出网页当前展示的文字内容，并基于浏览指令，确定用户即将浏览的网页内容，以及，如何从当前的展示页面将用户即将浏览的内容向用户进行展示。本公开实施例即确定出当前展示页面以及用户即将浏览的网页内容，以便从当前页面以动画方式将页面调整为用户即将显示给用户的网页界面。这些由当前界面至用户即将浏览的展示页面之间的网页内容，即为第一展示对象层的展示量。
本公开实施例中，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟DOM，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。这里，第一虚拟DOM是对应于所述第一展示对象层的文字内容层，所述第一展示对象层基于对第一虚拟DOM的渲染而实现。
作为一种实现方式，第一界面构建组件和第二界面构建组件均可以为React组件，这里，第一界面构建组件和第二界面构建组件可以合设，即通过一个React组件实现第一界面构建组件和第二界面构建组件的相应功能。
S13、根据所述展示量确定所述页面的第二展示对象层的展示调整量。
本公开实施例中，根据所述展示量确定所述页面的第二展示对象层的展示调整量，具体包括：
所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量；所述第二界面构建组件接收所述第一界面构建组件获取的所述第一展示对象层的滚动量，计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
也就是说，当所述页面的第一展示对象层响应于展示指令而产生滚动量时，第一展示对象层也产生了相应的滚动量，因而，所述第二界面构建组件可以基于与所述第一界面构建组件之间的数据交互实现对第一展示对象层滚动量的获取。
S14、响应于所述展示调整量调整所述第二展示对象层的展示状态。
本公开实施例中，通过所述第二界面构建组件对所述调整动画帧进行平滑处理，基于显示参数调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。这里，显示参数主要是指电子设备的显示屏的显示更新频率，本公开实施例的动画展示效果尽量保证与显示更新频率相一致，以提升动画展示效果。
本公开实施例中，基于所述显示参数中的显示更新频率，以循环或递归方式调用所述动画执行线程，持续为所述第二虚拟DOM调用平滑处理后的所述调整动画帧，以不断改变所述第二虚拟DOM的显示状态，通过对所述第二虚拟DOM的渲染，使所述调整动画帧以相应的文本显示内容生成网页界面，从而可以使所述第二展示对象层以动画方式展示，用户体验到网页页面的动态显示。
本公开实施例中，动画执行线程可以为requestAnimationFrame。
作为一种实现方式，本公开实施例的调整所述第二展示对象层的展示状态还可以通过在显示更新周期内调整所述第二展示对象层的像素上下左右的移动而实现动画效果，但是与通过调用requestAnimationFrame等动画执行线程的方式，动画展示效果相对较差。
以下通过具体示例，进一步阐明本公开实施例的技术方案的本质。
图2为本公开实施例示出的一种页面展示方法的实现结构示意图，如图2所示，本公开示例中，需要对页面进行分层。上层为文字内容层，相当于前述的第一展示对象层，文字内容层即为页面中应当展示的内容，属于正常文档流，用户可以通过滚动来对网页内容进行查看；下层是动画效果层，对应于前述的第二展示对象层，依赖于上层内容的滚动实现动态变化。这里的网页上层对应于本公开实施例的第一展示对象层，下层对应于第二展示对象层。本公开实施例中并不限于文字内容层和动画效果层的分层方式，也可以划分为其他至少一个显示层和动画效果层，本公开实施例中主要是解决如何更佳地动画展示页面。
本公开实施例中，页面的上下层均通过React组件实现，React组件均设置有虚拟DOM，本公开实施例即是对虚拟DOM进行操控，而页面的上下层通过对虚拟DOM进行相应的渲染即可实现。相比于操控真实DOM元素，控制虚拟DOM的处理性能更佳，且可以分别进行不同的处理。文字内容层的React组件中包括虚拟DOM和滚动量队列，文字内容层React组件获取到文字内容层的滚动量后，将滚动量存储于滚动量队列中。
文字内容层React组件监听用户针对文字内容层的滚动操作，并不断获取当前的滚动量，将获取的滚动量存储在滚动量队列中，通过滚动量队列能准确的反应页面的文字内容层的滚动过程。
动画效果层React组件通过文字内容层React组件和动画效果层React组件之间通信，将滚动量队列中的滚动量传递到动画效果层React组件中，并进行数据映射，计算当前滚动量对应的动画效果层React组件的动画帧。
动画效果层React组件还对动画帧进行平滑处理，以适用于不同显示屏的显示更新频率，使动画效果层的动画展示效果更佳。
动画效果层React组件通过调用requestAnimationFrame线程来改变动画效果层组件中的虚拟DOM的状态，即requestAnimationFrame线程不断抓取所述调整动画帧，作为待显示的动画效果层React组件中的虚拟DOM，从而使得动画效果层虚拟DOM的状态改变，进而相关图像处理器对动画效果层React组件中虚拟DOM的状态进行渲染，即生成真实DOM即生成能展示于网元中的待显示界面，这些显示界面通过不断的更新而形成动画效果，实现相应的网元动画输出。
本公开实施例中，在通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
动画效果层React组件从所述滚动量队列中，获取预定滚动量；通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。通过循环或递归的方式持续调用requestAnimationFrame，不断改变动画效果层React组件中的虚拟DOM的状态，同时不断渲染虚拟DOM而持续生成真实DOM，即实现了网页的动画显示效果，从而实现页面的动画展示效果。这里，循环或递归的周期与电子设备的显示屏的显示更新周期相适配。
本公开实施例中，电子设备可以是支持网页浏览器的手机、个人笔记本电脑、游戏机、PAD等。
作为一种实现方式，本公开实施例的调整所述第二展示对象层的展示状态还可以通过在显示更新周期内调整所述第二展示对象层的像素上下左右的移动而实现动画效果，即利用CSS3实现网页的动画效果层的动画更新，但这样可操控性差，且无法精确控制动画的每一帧，与前述通过调用requestAnimationFrame等动画执行线程的方式，动画展示效果相对较差。
本公开实施例中，上下层React组件可以合设，只要能够实现图2所示的相应功能即可。
本公开的实施例中，通过对页面分层为第一展示对象层和第二展示对象层，并为第一展示对象层和第二展示对象层分别设置第一界面构建组件和第二界面构建组件；通过第一界面构建组件和第二界面构建组件分别对真实DOM对应的虚拟DOM进行控制，以对真实DOM即第一展示对象层和第二展示对象层进行控制，以实现网页中文字内容层的滚动操作，以及动画效果层对应于文字内容层进行动画展示。本公开实施例兼容各种浏览器的页面展示，如电脑端浏览器和手机端浏览器等，基于滚动行为能实现复杂的动画效果，提升了网页交互的流畅性，避免了卡顿及丢帧，提升了用户体验效果。
图3为本公开实施例示出的一种页面展示装置的组成结构示意图，如图3所示，本公开实施例的页面展示装置包括：
接收单元30，用于接收针对页面的展示指令；
第一调整单元31，用于响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
确定单元32，用于根据所述展示量确定所述页面的第二展示对象层的展示调整量；
第二调整单元33，用于响应于所述展示调整量调整所述第二展示对象层的展示状态。
作为一种实现方式，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型DOM，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
作为一种实现方式，所述确定单元32，还用于：
通过所述第二界面构建组件接收所述第一界面构建组件获取的所述第一展示对象层的滚动量，计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量；其中，所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量
可选的，所述第二调整单元33，还用于：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
在图3所示的页面展示装置的基础上，本公开实施例的页面展示装置还包括：
存储单元(图3中未示出)，用于在所述确定单元通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
可选的，所述确定单元32，还用于：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述第二调整单元33，还用于：
基于所述显示参数中的显示更新频率，以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
在示例性实施例中，接收单元30、第一调整单元31、确定单元32、第二调整单元33等可以被一个或多个中央处理器(CPU，Central Processing Unit)、图形处理器(GPU，Graphics Processing Unit)、基带处理器(BP，Base Processor)、应用专用集成电路(ASIC，Application Specific Integrated Circuit)、数字信号处理器(DSP，DigitalSignal Processor)、可编程逻辑器件(PLD，Programmable Logic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)、通用处理器、控制器、微控制器(MCU，Micro ControllerUnit)、微处理器(Microprocessor)、或其他电子元件实现。
关于上述实施例中的页面展示装置，其中各个模块及单元执行操作的具体方式已经在有关该装置的实施例中进行了详细描述，此处将不做详细阐述说明。
图4为根据一示例性实施例示出的一种电子设备800的框图，如图4所示，电子设备800支持多屏输出，电子设备800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。
处理组件802通常控制电子设备800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。
存储器804被配置为存储各种类型的数据以支持在设备800的操作。这些数据的示例包括用于在电子设备800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图像，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
电源组件806为电子设备800的各种组件提供电力。电力组件806可以包括电源管理***，一个或多个电源，及其他与为电子设备800生成、管理和分配电力相关联的组件。
多媒体组件808包括在所述电子设备800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当设备800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。
音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当电子设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。
I/O接口812为处理组件802和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件814包括一个或多个传感器，用于为电子设备800提供各个方面的状态评估。例如，传感器组件814可以检测到设备800的打开/关闭状态，组件的相对定位，例如所述组件为电子设备800的显示器和小键盘，传感器组件814还可以检测电子设备800或电子设备800一个组件的位置改变，用户与电子设备800接触的存在或不存在，电子设备800方位或加速/减速和电子设备800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件816被配置为便于电子设备800和其他设备之间有线或无线方式的通信。电子设备800可以接入基于通信标准的无线网络，如Wi-Fi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，电子设备800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述实施例的图像处理的步骤。
在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由电子设备800的处理器820执行以完成上述实施例的页面展示方法的步骤。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
本公开实施例还记载了一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行前述实施例的页面展示方法，所述方法包括：
接收针对页面的展示指令；
响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
根据所述展示量确定所述页面的第二展示对象层的展示调整量；
响应于所述展示调整量调整所述第二展示对象层的展示状态。
可选的，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型(Document Object Model，DOM)，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
可选的，所述根据所述展示量确定所述页面的第二展示对象层的展示调整量，包括：
通过所述第一界面构建组件中的所述第一虚拟DOM获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述响应于所述展示调整量调整所述第二展示对象层的展示状态，包括：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
可选的，在通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，所述方法还包括：
通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
可选的，通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量包括：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
可选的，所述方法还包括：
基于所述显示参数中的显示更新频率，以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
本公开实施例还记载了一种电子设备，包括：处理器和用于存储处理器可执行指令的存储器，其中，所述处理器被配置为在调用存储器中的可执行指令时，能够执行上述实施例的页面展示方法的步骤。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (16)
1.一种页面展示方法，其特征在于，所述方法包括：
接收针对页面的展示指令；
响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
根据所述展示量确定所述页面的第二展示对象层的展示调整量；
响应于所述展示调整量调整所述第二展示对象层的展示状态。
2.根据权利要求1所述的方法，其特征在于，
所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型DOM，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
3.根据权利要求2所述的方法，其特征在于，所述根据所述展示量确定所述页面的第二展示对象层的展示调整量，包括：
通过所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
4.根据权利要求3所述的方法，其特征在于，所述响应于所述展示调整量调整所述第二展示对象层的展示状态，包括：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
5.根据权利要求4所述的方法，其特征在于，在通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，所述方法还包括：
通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
6.根据权利要求5所述的方法，其特征在于，
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量包括：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
7.根据权利要求4所述的方法，其特征在于，
以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
8.一种页面展示装置，其特征在于，所述装置包括：
接收单元，用于接收针对页面的展示指令；
第一调整单元，用于响应于所述展示指令，调整所述页面的第一展示对象层的展示量；
确定单元，用于根据所述展示量确定所述页面的第二展示对象层的展示调整量；
第二调整单元，用于响应于所述展示调整量调整所述第二展示对象层的展示状态。
9.根据权利要求8所述的装置，其特征在于，所述第一展示对象层和所述第二展示对象层分别设置有第一界面构建组件和第二界面构建组件；所述第一界面构建组件中包括对应于所述第一展示对象层的第一虚拟文档对象模型DOM，所述第二界面构建组件中包括对应于所述第二展示对象层的第二虚拟DOM。
10.根据权利要求9所述的装置，其特征在于，所述确定单元，还用于：
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量；其中，所述第一界面构建组件获取所述页面的第一展示对象层的滚动量，所述滚动量作为第一展示对象层的展示量。
11.根据权利要求10所述的装置，其特征在于，所述第二调整单元，还用于：
通过所述第二界面构建组件对所述调整动画帧进行平滑处理，调用动画执行线程获取平滑处理后的所述调整动画帧，将所获取的所述调整动画帧作为所述第二虚拟DOM的显示动画帧，使所述第二虚拟DOM的显示状态改变；
响应于所述第二虚拟DOM的显示状态改变，对所述第二虚拟DOM的显示动画帧进行渲染，以调整所述第二展示对象层的展示状态。
12.根据权利要求11所述的装置，其特征在于，所述装置还包括：
存储单元，用于在所述确定单元通过所述第二界面构建组件计算所述第二展示对象层的对应于所述滚动量的调整动画帧之前，通过所述第一界面构建组件将获取的所述滚动量存储在滚动量队列中。
13.根据权利要求12所述的装置，其特征在于，所述确定单元，还用于：
从所述滚动量队列中，获取预定滚动量；
通过所述第二界面构建组件计算所述第二展示对象层的对应于所述预定滚动量的调整动画帧，将所述调整动画帧作为所述展示调整量。
14.根据权利要求11所述的装置，其特征在于，所述第二调整单元，还用于：
以循环或递归方式调用所述动画执行线程，持续改变所述第二虚拟DOM的显示状态，使所述第二展示对象层以动画方式展示。
15.一种电子设备，其特征在于，所述电子设备包括：处理器和用于存储处理器可执行指令的存储器，其中，所述处理器被配置为在调用存储器中的可执行指令时，能够执行如权利要求1至7中任一项所述的页面展示方法的步骤。
16.一种非临时性计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至7中任一项所述的页面展示方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011440227.XA CN112464125A (zh) | 2020-12-07 | 2020-12-07 | 页面展示方法及装置、电子设备、存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011440227.XA CN112464125A (zh) | 2020-12-07 | 2020-12-07 | 页面展示方法及装置、电子设备、存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112464125A true CN112464125A (zh) | 2021-03-09 |
Family
ID=74801873
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011440227.XA Pending CN112464125A (zh) | 2020-12-07 | 2020-12-07 | 页面展示方法及装置、电子设备、存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112464125A (zh) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104598522A (zh) * | 2014-12-15 | 2015-05-06 | 北京国双科技有限公司 | 网页页面显示的方法及装置 |
| CN105404458A (zh) * | 2014-09-10 | 2016-03-16 | 腾讯科技（深圳）有限公司 | 网页内容更新方法及装置 |
| CN108804584A (zh) * | 2018-05-25 | 2018-11-13 | 北京五八信息技术有限公司 | 数据展示方法、装置、设备及存储介质 |
| CN109710353A (zh) * | 2018-12-12 | 2019-05-03 | 浙江口碑网络技术有限公司 | 页面中的动画元素的展现方法及装置 |
| CN110909274A (zh) * | 2018-09-18 | 2020-03-24 | 优视科技有限公司 | 页面浏览方法、装置及电子设备 |
| CN111428166A (zh) * | 2020-02-28 | 2020-07-17 | 深圳壹账通智能科技有限公司 | 页面配置方法、页面元素替换方法、装置、设备及介质 |
| WO2020233056A1 (zh) * | 2019-05-21 | 2020-11-26 | 深圳壹账通智能科技有限公司 | 基于h5页面的动画显示方法、装置、设备及存储介质 |
-
2020
- 2020-12-07 CN CN202011440227.XA patent/CN112464125A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105404458A (zh) * | 2014-09-10 | 2016-03-16 | 腾讯科技（深圳）有限公司 | 网页内容更新方法及装置 |
| CN104598522A (zh) * | 2014-12-15 | 2015-05-06 | 北京国双科技有限公司 | 网页页面显示的方法及装置 |
| CN108804584A (zh) * | 2018-05-25 | 2018-11-13 | 北京五八信息技术有限公司 | 数据展示方法、装置、设备及存储介质 |
| CN110909274A (zh) * | 2018-09-18 | 2020-03-24 | 优视科技有限公司 | 页面浏览方法、装置及电子设备 |
| CN109710353A (zh) * | 2018-12-12 | 2019-05-03 | 浙江口碑网络技术有限公司 | 页面中的动画元素的展现方法及装置 |
| WO2020233056A1 (zh) * | 2019-05-21 | 2020-11-26 | 深圳壹账通智能科技有限公司 | 基于h5页面的动画显示方法、装置、设备及存储介质 |
| CN111428166A (zh) * | 2020-02-28 | 2020-07-17 | 深圳壹账通智能科技有限公司 | 页面配置方法、页面元素替换方法、装置、设备及介质 |
Non-Patent Citations (1)
| Title |
|---|
| 戴志诚;程劲草;: "基于虚拟DOM的Web前端性能优化研究", 计算机应用与软件, no. 12, pages 21 - 31 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107526494B (zh) | 键盘显示方法、装置、终端及存储介质 | |
| CN106294609B (zh) | 页面加载方法及装置 | |
| CN107977083B (zh) | 基于vr***的操作执行方法及装置 | |
| CN106126725B (zh) | 页面显示方法及装置 | |
| CN112256169A (zh) | 内容展示方法、装置、电子设备及存储介质 | |
| CN113760080A (zh) | 显示方法、装置及存储介质 | |
| CN112463084A (zh) | 分屏显示方法、装置、终端设备及计算机可读存储介质 | |
| CN115719586A (zh) | 屏幕刷新率调整方法、装置、电子设备和存储介质 | |
| CN112256219A (zh) | 显示方法及装置、终端及存储介质 | |
| CN112905134A (zh) | 一种刷新显示的方法、装置和电子设备 | |
| CN114363448A (zh) | 屏幕小窗口的亮度控制方法、装置、终端及存储介质 | |
| CN113311984A (zh) | 触摸屏轨迹的数据处理方法和装置、移动终端及电子设备 | |
| CN115963929A (zh) | Vr显示方法、装置及存储介质 | |
| CN112464125A (zh) | 页面展示方法及装置、电子设备、存储介质 | |
| US20220308752A1 (en) | Interface display method and apparatus of an application | |
| CN110609655B (zh) | 更改设备固件参数的方法及装置 | |
| CN110069310B (zh) | 切换桌面壁纸的方法、装置及存储介质 | |
| CN108874482B (zh) | 图像处理方法及装置 | |
| CN115248711A (zh) | 显示屏刷新率的调整方法、装置、终端和存储介质 | |
| CN109413232B (zh) | 屏幕显示方法及装置 | |
| CN113487707A (zh) | 网页动画处理方法、装置、电子设备及存储介质 | |
| CN115134516A (zh) | 拍摄方法及装置 | |
| CN111538447A (zh) | 信息展示方法、装置、设备及存储介质 | |
| US11733863B2 (en) | Display data obtaining method, electronic device and storage medium | |
| US11948525B2 (en) | Refresh rate adjusting method, electronic device and storage medium |
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 |