CN113204401B - 浏览器渲染方法，终端及存储介质 - Google Patents
浏览器渲染方法，终端及存储介质 Download PDFInfo
- Publication number
- CN113204401B CN113204401B CN202110492227.2A CN202110492227A CN113204401B CN 113204401 B CN113204401 B CN 113204401B CN 202110492227 A CN202110492227 A CN 202110492227A CN 113204401 B CN113204401 B CN 113204401B
- Authority
- CN
- China
- Prior art keywords
- offset
- video
- current node
- target
- webpage
- 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
- 238000000034 method Methods 0.000 title claims abstract description 108
- 238000009877 rendering Methods 0.000 title claims abstract description 68
- 238000003860 storage Methods 0.000 title claims abstract description 18
- 238000012545 processing Methods 0.000 claims description 33
- 230000015654 memory Effects 0.000 claims description 24
- 238000010586 diagram Methods 0.000 description 38
- 230000006854 communication Effects 0.000 description 10
- 238000004891 communication Methods 0.000 description 9
- 238000004590 computer program Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 3
- 230000015572 biosynthetic process Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000003672 processing method Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000003786 synthesis reaction Methods 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- KLDZYURQCUYZBL-UHFFFAOYSA-N 2-[3-[(2-hydroxyphenyl)methylideneamino]propyliminomethyl]phenol Chemical compound OC1=CC=CC=C1C=NCCCN=CC1=CC=CC=C1O KLDZYURQCUYZBL-UHFFFAOYSA-N 0.000 description 1
- 208000006930 Pseudomyxoma Peritonei Diseases 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 1
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 229920001690 polydopamine Polymers 0.000 description 1
- 229920000306 polymethylpentene Polymers 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- 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/0485—Scrolling or panning
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例公开了一种浏览器渲染方法，终端及存储介质，终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。
Description
技术领域
本发明涉及终端设备技术领域，尤其涉及一种浏览器渲染方法，终端及存储介质。
背景技术
目前，浏览器通常采用多进程模式实现通信过程，其中，浏览器的主进程和浏览器的渲染进程之间利用Mojo机制进行通信。在相关技术中，终端通过接管浏览器实现同层播放和非同层播放，在非同层视频播放页面滚动显示的过程中，通常是在浏览器的渲染进程中获取视频的位置信息，进而将位置信息通过Mojo机制告知浏览器的主进程实现视频区域的绘制；而当用户滑动网页时，会在浏览器的渲染进程中遍历网页所有视频节点的位置信息，来获取更新后的视频区域位置信息，进而通过Mojo机制告知浏览器的主进程绘制更新后的视频区域。
因此，在相关的相关技术中，当网页进行滚动显示时，视频的位置可能会产生变化，需要遍历网页的所有节点才能实现更新的视频区域的绘制，页面显示效率低，对终端的性能消耗较大。
发明内容
本申请实施例提供了一种浏览器渲染方法，终端及存储介质，能够提高浏览器渲染的效率，降低对终端的性能消耗。
本申请实施例的技术方案是这样实现的：
第一方面，本申请实施例提供了一种浏览器渲染方法，所述方法包括：
创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；
当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；
若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；
根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；
按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
第二方面，本申请实施例提供了一种终端，所述终端包括创建单元、获取单元、确定单元以及显示单元，
所述创建单元，用于创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；
所述获取单元，用于当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；
所述确定单元，用于根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；
所述显示单元，用于按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
第三方面，本申请实施例提供了一种终端，所述终端还包括处理器、存储有所述处理器可执行指令的存储器，当所述指令被所述处理器执行时，实现如上所述的浏览器渲染方法。
第四方面，本申请实施例提供了一种一种计算机可读存储介质，其上存储有程序，应用于终端中，所述程序被处理器执行时，实现如上所述的浏览器渲染方法。
本申请实施例提供了一种浏览器渲染方法，终端及存储介质，终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频标识对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。由此可见，在本申请的实施例中，通过在网页对应的分层树中，针对其中的视频元素创建视频标识，从而可以利用视频标识确定分层树中的视频层，进而在对网页执行滑动操作时，获取分层树中当前节点对应的第一偏移量，如果当前节点包括视频标识，且当前节点存在父节点，则说明网页中的视频元素的位置在滑动操作中产生偏移，且当前节点为分层树中的子节点，从而确定根据当前节点对应的第一偏移量和父节点对应的第二偏移量得到视频元素的目标偏移量，并依据目标偏移量对视频元素进行显示处理，显示偏移后的视频元素；也就是说，本申请实施例提出的的浏览器渲染方法，当网页中的视频元素的位置发生变化时，并不是通过遍历网页上的所有节点来获取偏移量，而是仅针对发生变化的视频元素对应的节点确定目标偏移量，从而可以提高显示效率，降低终端的性能消耗。
附图说明
图1为相关技术网页视频播放界面示意图一；
图2为相关技术网页视频播放界面示意图二；
图3为相关技术网页视频播放界面示意图三；
图4为相关技术网页视频播放界面示意图四；
图5为iframe页面示意图；
图6为相关技术网页播放视频元素的测试示意图；
图7为本申请实施例提出的浏览器渲染方法的实现流程示意图一；
图8为浏览器渲染进程示意图；
图9为本申请实施例提出的浏览器渲染方法的实现流程示意图二；
图10为本申请实施例提出的浏览器渲染方法的实现流程示意图三；
图11为本申请实施例提出的浏览器渲染方法的实现流程示意图四；
图12为本申请实施例提出的浏览器渲染方法示意图一；
图13为本申请实施例提出的浏览器渲染方法的实现流程示意图五；
图14为本申请实施例提出的浏览器渲染方法示意图二；
图15为本申请实施例提出的浏览器渲染方法的实现流程示意图六；
图16为本申请实施例提出的浏览器渲染方法的实现流程示意图七；
图17为本申请实施例提出的终端的组成结构示意图一；
图18为本申请实施例提出的终端的组成结构示意图二。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。可以理解的是，此处所描述的具体实施例仅用于解释相关申请，而非对该申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关申请相关的部分。
目前，随着浏览器的普遍使用，为了解决浏览器的不稳定性、不流畅性以及不安全性等问题，浏览器的通信过程通常采用多进程模式。浏览器的主进程和浏览器的渲染进程之间利用Mojo机制进行通信。
同时，随着网页视频的普遍使用，目前手机终端为了统一浏览器播放视频界面的风格和视频播控功能的扩展，例如投屏、窗口播放、分享、快进/快退以及倍速播放等，均采用统一接管网页视频播放的方式，来统一的界面设计(User Interface Design，UI)风格。图1为相关技术网页视频播放界面示意图一，图1所示为搜狐短视频的视频播控UI；图2为相关技术网页视频播放界面示意图二，图2所示为YouTube的视频播控UI；图3为相关技术网页视频播放界面示意图三，图3所示为网站采用浏览器默认的UI进行视频播控；图4为相关技术网页视频播放界面示意图四，图4为手机终端通过接管网页的视频播放UI。
在相关技术中，网页视频播放需要解析网页中的视频元素，获取视频区域和视频位置，然后通知浏览器客户端显示，而当用户上下，左右滑动网页时，视频的起始位置可能会实时变化，因此，需要在浏览器的渲染进程中的主线程操作至合成线程时，通过遍历当前页面的所有节点，来获取视频区域的位置信息，进而利用Mojo机制通知浏览器客户端更新显示视频的位置。
图5为iframe页面示意图，示例性的，如图5所示，iframe页面中可以包括A、B以及C三个区域，其中，A为父页面，B和C为嵌套在A中的子页面；C包括视频元素，滑动C和A，视频位置会随之移动，而滑动B时，A和C均不动；在相关技术中，浏览器渲染进程同步至浏览器进程的只有根节点上的偏移，而内嵌在iframe页面中的网页偏移却未同步至浏览器进程；并且，当用户滑动B页面时，视频位置并未改变，但仍然需要遍历所有节点才能进行浏览器渲染，以显示更新后的页面信息。
因此，在相关技术中，当对网页执行滑动操作时，由于视频位置区域的实时变化，视频位置的更新显示需要遍历网页的所有节点才能获取正确的视频位置信息，页面显示效率低，对终端的性能消耗较大；进一步地，当网页频繁进行滚动显示时，会造成浏览器的渲染进程和主进程之间的通讯频繁，进而产生视频位置和页面短暂脱离，视频跟随或拖影甚至页面滑动卡顿的现象。图6为相关技术网页播放视频元素的测试示意图，如图6所示，上下滑动视频时会出现视频跟随，即拖影问题。
综上所述，在目前的相关技术中，当对包含视频元素的网页执行滑动操作时，需要遍历当前页面的所有节点才可以获取视频区域的位置信息，然后利用Mojo机制通知浏览器更新偏移后的视频元素的位置，使得进程间的通讯频繁，影响页面显示效率；进而在频繁滑动页面时，可能会因为频繁更新页面区域而造成视频跟随或拖影的问题。
为了解决相关技术中存在的问题，本申请通过利用终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频标识对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。从而当网页中的视频元素的位置发生变化时，并不是通过遍历网页上的所有节点来获取偏移量，而是仅针对发生变化的视频元素对应的节点确定目标偏移量，从而可以提高显示效率，降低终端的性能消耗。
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
本申请一实施例提供了一种浏览器渲染方法，该方法可以应用于终端，其中，终端可以为任何配置有显示屏的移动终端设备，例如：平板电脑、手机、电子阅读器、个人计算机(Personal Computer，PC)、笔记本电脑、车载设备、网络电视、可穿戴设备、个人数字助理(Personal Digital Assistant，PDA)、便捷式媒体播放器(Portable Media Player，PMP)、导航装置等。
图7为浏览器渲染方法的实现流程示意图一，如图7所示，在本申请的实施例中，终端进行浏览器渲染的方法可以包括以下步骤：
步骤101、创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识。
在本申请的实施例中，终端在进行浏览器渲染时，可以先创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识。
可以理解的是，在本申请的实施例中，浏览器的渲染是指利用浏览器的渲染引擎渲染窗口所展示的内容，渲染引擎可以显示超文本标记语言(Hyper Text MarkupLanguage，HTML)、可扩展标记语言(Extensible Markup Language，XML)文档以及图片等类型的数据。以HTML类型的数据为例，图8为浏览器渲染进程示意图，如图8所示，浏览器渲染页面的流程可以为：首先在浏览器的主线程中，根据HTML内容生成文档对象模型(DocumentObject Model，DOM)树，将层叠样式表(Cascading Style Sheets，CSS)解析成树形的数据结构(StyleSheets)；结合DOM树创建布局树(layout)，然后依次对布局树进行分层处理，获得分层树(Layer)；然后对每个分层树生成对应的绘制列表(paint)，并将绘制列表提交至浏览器的合成线程，接着将分层树对应的绘制列表分成图块(tiles)，并在光栅化线程池中将图块转换成位图(raster)；根据位图生成绘制图块图命令(DrawQuad)，并交给浏览器进程，最终根据DrawQuad生成页面，并进行显示，完成浏览器的渲染工作。
进一步地，在本申请的实施例中，网页对应的分层树，即为前述浏览器的渲染过程中，对布局树进行分层处理，获得的分层树。
需要说明的是，在本申请的实施例中，视频元素为网页中显示的视频类信息，可以在网页中对视频元素进行播控。
进一步地，在本申请的实施例中，由于网页的类型不同，对网页进行滑动操作时，视频元素在网页中的位置变化也可能不同。例如，当网页类型为iframe时，如前述图5所示，滑动C和A，视频位置会随之移动，而滑动B时，A和C均不动；而当网页类型为普通网页时，即为非iframe的网页，对网页进行滑动，页面上的视频位置是不变的，变动的是网页中视频元素以外的区域。因此，针对iframe页面上的视频元素，需要采用合适的渲染方式以实现页面滑动过程中，对视频元素位置的有效更新。
在本申请的实施例中，分层树中包括有视频元素对应的视频标识，也就是说，由于网页中包含视频元素，因此网页对应的分层树中包含视频元素对应的部分视频层，而分层树中这些视频元素对应的部分视频层均用视频标识进行标记，从而可以利用视频标识确定分层树中视频元素对应的视频层。进一步地，当滑动iframe页面，且页面中的视频元素发生偏移时，通过视频标识确定视频层的相关信息以后，就可以针对性的只处理视频层，从而得到偏移后的页面，提高浏览器的渲染效率。
步骤102、当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量。
在本申请的实施例中，终端在创建网页对应的分层树之后，当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量。
可以理解的是，在本申请的实施例中，当终端检测到网页对应的滑动操作时，则说明网页上显示的内容可能发生偏移，因此需要对经过滑动操作后的网页进行显示，具体地，首先获取网页对应的分层树中当前节点对应的第一偏移量，进而结合第一偏移量对滑动操作后的网页进行显示。
需要说明的是，在本申请的实施例中，当前节点是指网页上响应滑动操作的节点，当前节点的数量不做具体限制，可以是一个或多个检测到滑动操作的节点；例如，如前述图5所示，当滑动操作作用于C时，当前节点即为C对应的节点；当滑动操作作用于B时，当前节点即为B对应的节点。
进一步地，在本申请的实施例中，第一偏移量是指当前节点在滑动操作下产生的关于位置信息的偏移量，表征当前节点位置的偏移情况。
步骤103、若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量。
在本申请的实施例中，终端当检测到网页对应的滑动操作时，在获取分层树中的当前节点对应的第一偏移量之后，若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量。
可以理解的是，在本申请的实施例中，若当前节点包括视频标识，则说明执行滑动操作且产生偏移的是视频元素对应的区域，同时，当前节点存在父节点，则说明当前节点为子节点；例如当前节点可以为前述图5中所示的C，滑动C，视频元素会产生偏移，且C为子节点。
还可以理解的是，在本申请的实施例中，在包括视频标识的当前节点中，视频元素的数量不做具体限制，也就是说，在检测到滑动操作后，可以是当前节点中的一个或多个视频元素产生偏移。
进一步地，在本申请的实施例中，父节点对应的偏移量为第二偏移量，其表征父节点在滑动操作下的偏移量；也就是说，在获取了作为子节点的当前节点对应的第一偏移量以后，还需要获取当前节点的父节点对应的第二偏移量；如前述图5所示，A可以为当前节点C对应的父节点，在获取了C对应的第一偏移量以后，可以获取A对应的第二偏移量。
需要说明的是，在本申请的实施例中，若当前节点存在父节点，获取当前节点的父节点对应的第二偏移量是指获得当前节点对应的所有父节点的偏移量。也就是说，第二偏移量是通过一层一层向上遍历当前节点的所有父节点，直至根节点的偏移量，即第二偏移量可以为多个父节点对应的多个偏移量。
步骤104、根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量。
在本申请的实施例中，若分层树中的当前节点包括视频标识，且当前节点存在父节点，则终端在获取父节点对应的第二偏移量之后，根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量。
进一步地，在本申请的实施例中，目标偏移量是需要根据第一偏移量和第二偏移量确定的，而第一偏移量和第二偏移量均有各自的偏移方向，因此，目标偏移量需要结合第一偏移量和第二偏移量各自的偏移方向进行适应性处理。
需要说明的是，在本申请的实施例中，目标偏移量表征滑动操作后，视频元素对应的偏移量，从而可以根据目标偏移量显示偏移后的视频元素。具体地，目标偏移量需要结合第一偏移量和第二偏移量的方向进行确定，包括第一偏移量和第二偏移量的方向相同时，以及第一偏移量和第二偏移量的方向不同时的处理方法，从而根据不同的处理方法获取目标偏移量。
步骤105、按照目标偏移量对视频标识对应的视频元素进行显示处理。
在本申请的实施例中，终端在根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量之后，可以按照目标偏移量对视频标识对应的视频元素进行显示处理。
需要说明的是，在本申请的实施例中，在获取了目标偏移量之后，就可以根据目标偏移量进行相应的处理，从而能够对更新位置后的视频元素进行显示。
图9为本申请实施例提出的浏览器渲染方法的实现流程示意图二，如图9所示，在本申请的实施例中，终端按照目标偏移量对视频标识对应的视频元素进行显示处理，即步骤105可以包括如下步骤：
步骤105a、根据目标偏移量生成第一绘制命令。
在本申请的实施例中，终端按照目标偏移量对视频标识对应的视频元素进行显示处理，具体地，可以先根据目标偏移量生成第一绘制命令。
需要说明的是，在本申请的实施例中，第一绘制命令可以用于生成偏移后的视频元素显示信息。
可以理解的是，在本申请的实施例中，第一绘制命令是通过Mojo机制发送到浏览器进程的，从而浏览器进程可以根据第一绘制命令绘制更新位置后的视频元素。
步骤105b、根据第一绘制命令对视频标识对应的视频元素进行显示处理。
在本申请的实施例中，终端在根据目标偏移量生成第一绘制命令之后，可以根据第一绘制命令对视频标识对应的视频元素进行显示处理。
可以理解的是，在本申请的实施例中，根据第一绘制命令对视频元素进行显示处理后的网页信息，可以表示网页页面上的视频元素发生偏移后的显示信息。
图10为本申请实施例提出的浏览器渲染方法的实现流程示意图三，如图10所示，在本申请的实施例中，终端按照目标偏移量对视频标识对应的视频元素进行显示处理，即步骤105还可以包括如下步骤：
步骤105c、确定视频元素对应的初始位置信息。
在本申请的实施例中，终端按照目标偏移量对视频标识对应的视频元素进行显示处理，具体地，可以首先确定视频元素对应的初始位置信息。
可以理解的是，在本申请的实施例中，在视频元素发生偏移之前，视频元素所在的位置为初始位置，因此，当视频元素发生偏移以后，可以先获取视频元素对应的初始位置信息，然后在初始位置的基础上显示偏移后的视频元素。
需要说明的是，在本申请的实施例中，若当前节点包括视频标识，且视频标识对应的属性信息指示不响应滑动操作，则继续基于初始位置信息对视频元素进行显示处理。也就是说，虽然当前节点包含视频元素，但是视频元素对应的属性信息为不响应滑动操作，进一步地也就不再计算相应的偏移信息，因此，具有此属性信息的视频元素为固定的位置信息，当获取到这种属性信息以后，就可以确定视频元素的位置不会发生偏移，从而继续按照初始位置信息对视频元素进行显示。
步骤105d、根据初始位置信息和目标偏移量确定视频元素对应的目标位置信息。
在本申请的实施例中，终端在确定视频元素对应的初始位置信息之后，可以根据初始位置信息和目标偏移量确定视频元素对应的目标位置信息。
可以理解的是，在本申请的实施例中，由于目标偏移量表征执行滑动操作后，视频元素对应的偏移量，因此，可以在初始位置信息的基础上，结合目标偏移量确定视频元素对应的目标位置信息。
进一步地，在本申请的实施例中，目标位置信息表征偏移后的视频元素对应的位置信息。
步骤105e、基于目标位置信息对视频元素进行显示处理。
在本申请的实施例中，终端在根据初始位置信息和目标偏移量确定视频元素对应的目标位置信息之后，可以基于目标位置信息对视频元素进行显示处理。
图11为本申请实施例提出的浏览器渲染方法的实现流程示意图四，如图11所示，在本申请的实施例中，终端根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量，即步骤104可以包括如下步骤：
步骤104a、若第一偏移量的第一方向和第二偏移量的第二方向相同，则对第一偏移量和第二偏移量进行相加处理，获得目标偏移量。
在本申请的实施例中，终端根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量，具体地，若第一偏移量的第一方向和第二偏移量的第二方向相同，则对第一偏移量和第二偏移量进行相加处理，获得目标偏移量。
可以理解的是，在本申请的实施例中，偏移量的方向可以为任意方向。示例性的，以终端的显示界面的水平线为基准，顺时针方向的0度为向右，顺时针方向的180度为向左；以终端的显示界面的垂直线为基准，顺时针方向的0度为向上，顺时针方向的180度为向下。
需要说明的是，在本申请的实施例中，若第一偏移量的第一方向和第二偏移量的第二方向相同，则说明不仅是作为子节点的当前节点产生了偏移，其父节点也产生了偏移，且二者的偏移方向相同，因此目标偏移量为父节点和子节点的偏移量相加所得。示例性的，图12为本申请实施例提出的浏览器渲染方法示意图一，如图12所示，第一方向为a1，第二方向为a2，第一偏移量为d1，第二偏移量为d2；第一方向和第二方向均为向上偏移，则目标偏移量为d1+d2。
图13为本申请实施例提出的浏览器渲染方法的实现流程示意图五，如图13所示，在本申请的实施例中，终端根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量，即步骤104还可以包括如下步骤：
步骤104b、若第一偏移量的第一方向和第二偏移量的第二方向不相同，则根据第一方向、第二方向、第一偏移量以及第二偏移量，确定目标偏移量。
在本申请的实施例中，终端根据第一偏移量和第二偏移量确定视频元素对应的目标偏移量，具体地，若第一偏移量的第一方向和第二偏移量的第二方向不相同，则根据第一方向、第二方向、第一偏移量以及第二偏移量，确定目标偏移量。
需要说明的是，在本申请的实施例中，若第一偏移量的第一方向和第二偏移量的第二方向不相同，说明当前节点和其父节点产生偏移的方向并不相同。示例性的，图14为本申请实施例提出的浏览器渲染方法示意图二，如图14所示，第一方向为a1，第二方向为a2，第一偏移量为d1，第二偏移量为d2；第一方向为向上，而第二方向为向下，则目标偏移量为为第一偏移量和第二偏移量的差值，即d1-d2。
综上所述，在本申请的实施例中，在检测到网页对应的滑动操作以后，对于携带视频标识、且存在父节点的当前节点，需要获取当前节点对应的第一偏移量和当前节点的所有父节点对应的第二偏移量，然后结合第一偏移量的第一方向和第二偏移量的第二方向的具体情况进行适应性的处理，得到目标偏移量，最终按照目标偏移量对偏移后的网页进行显示处理。从而可以针对性的对网页中产生偏移的视频元素进行显示，而不是遍历网页中的所有节点得到偏移量以进行渲染处理，可以极大地减少浏览器进程中的通讯压力和终端的性能消耗，提高了页面的显示效率。
本申请实施例提供了一种浏览器渲染方法，终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频标识对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。由此可见，在本申请的实施例中，通过在网页对应的分层树中，针对其中的视频元素创建视频标识，从而可以利用视频标识确定分层树中的视频层，进而在对网页执行滑动操作时，获取分层树中当前节点对应的第一偏移量，如果当前节点包括视频标识，且当前节点存在父节点，则说明网页中的视频元素的位置在滑动操作中产生偏移，且当前节点为分层树中的子节点，从而确定根据当前节点对应的第一偏移量和父节点对应的第二偏移量得到视频元素的目标偏移量，并依据目标偏移量对视频元素进行显示处理，显示偏移后的视频元素；也就是说，本申请中的浏览器渲染方法，当网页中的视频元素的位置发生变化时，并不是通过遍历网页上的所有节点来获取偏移量，而是仅针对发生变化的视频元素对应的节点确定目标偏移量，从而可以提高显示效率，降低终端的性能消耗。
基于上述实施例，在本申请的另一实施例中，图15为本申请实施例提出的浏览器渲染方法的实现流程示意图六，如图15所示，在本申请的实施例中，当终端检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量之后，即步骤102之后，还可以包括如下步骤：
步骤106、若分层树中的当前节点不包括视频标识，则根据第一偏移量获取网页对应的区域偏移量。
在本申请的实施例中，终端检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量之后，若分层树中的当前节点不包括视频标识，则根据第一偏移量获取网页对应的区域偏移量。
可以理解的是，在本申请的实施例中，若分层树中的当前节点不包括视频标识，则说明当前节点并不是视频元素对应的节点，即视频元素未产生偏移，而是网页中的其他元素产生偏移，例如前述图5中，滑动B，B产生偏移，但是C未产生偏移，当前节点即为B。
进一步地，在本申请的实施例中，由于当前节点为不包括视频元素的节点，则获取的当前节点对应的第一偏移量也就不是表征视频元素偏移程度的偏移量，而是网页页面中区域对应的偏移量，区域为不包括视频元素的区域，例如图5中的B，进而根据第一偏移量确定网页对应的区域偏移量。
步骤107、根据区域偏移量生成第二绘制命令。
在本申请的实施例中，若分层树中的当前节点不包括视频标识，则终端根据第一偏移量获取网页对应的区域偏移量之后，根据区域偏移量生成第二绘制命令。
需要说明的是，在本申请的实施例中，第二绘制命令可以用于生成偏移后的网页对应的区域的显示信息，且第二绘制命令是通过Mojo机制发送到浏览器进程的，从而浏览器进程可以根据第二绘制命令绘制更新位置后的网页对应的区域的显示信息。
步骤108、根据第二绘制命令显示网页对应的偏移后网页。
在本申请的实施例中，终端根据区域偏移量生成第二绘制命令之后，根据第二绘制命令显示网页对应的偏移后网页。
可以理解的是，在本申请的实施例中，偏移后网页是指产生偏移后的网页信息，也就是说，根据第二绘制命令显示的网页信息是产生偏移后的网页中的区域信息。
综上所述，在本申请的实施例中，针对不包括视频标识的节点，可以按照节点对应的第一偏移量进行显示处理，而不用遍历所有节点获取偏移量，从而降低了对终端的性能消耗，提高页面显示效率。
图16为本申请实施例提出的浏览器渲染方法的实现流程示意图七，如图16所示，在本申请的实施例中，当终端检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量之后，即步骤102之后，且在终端按照目标偏移量对视频标识对应的视频元素进行显示处理之前，即步骤105之前，还可以包括如下步骤：
步骤109、若分层树中的当前节点包括视频标识，且当前节点不存在父节点，则将第一偏移量确定为目标偏移量。
在本申请的实施例中，当终端检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量之后，若分层树中的当前节点包括视频标识，且当前节点不存在父节点，则将第一偏移量确定为目标偏移量。
可以理解的是，在本申请的实施例中，当前节点包括视频标识，且当前节点不存在父节点，则说明当前节点为视频元素所在的节点，且当前节点为根节点，因此可以直接将当前节点的第一偏移量作为目标偏移量。
进一步地，在本申请的实施例中，在确定目标偏移量之后，可以按照目标偏移量对视频元素进行显示处理。
示例性的，对非iframe网页的普通网页执行滑动操作，当前节点为包含视频元素的根节点，则可以直接在浏览器进程获取第一偏移量，并将第一偏移量作为目标偏移量。无需通过渲染进程实时通知浏览器进程绘制视频元素，减少因滑动页面通知浏览器进程的Mojo消息，降低终端的通讯压力。
综上所述，在本申请的实施例中，针对包括视频标识，且不存在父节点的节点，可以直接将第一偏移量作为目标偏移量进行显示处理，从而减少因滑动页面通知浏览器进程的Mojo消息，降低终端的通讯压力，提高页面的显示效率。
在本申请的实施例中，通过把网页的页面按照规则划分成多个图层，在渲染的主线程中，只操作必要的图层，其他的图层可以只参与合成，从而提高了渲染的效率。
示例性的，首先生成网页对应的分层树，分层树中包括网页中的视频元素对应的视频层，视频层携带有视频元素对应的视频标识，从而可以利用视频标识将视频元素和对应的视频层联系起来。针对iframe网页执行滑动操作时，在主线程的分层树中获取当前滑动操作对应的区域的偏移量，例如前述图5中，拖动A、B或者C的滚动条，可以获得A、B或者C各自对应的偏移量，进而检测当前节点是否包含视频标识，如果包含视频标识，则遍历当前节点的父节点(Parent Layer)的所有偏移，根据父节点的偏移量和当前节点对应的偏移量得到目标偏移量，然后根据目标偏移量生成DrawQuad，最后利用Mojo机制将DrawQuad发送至浏览器进程，同步绘制偏移后的视频元素。
进一步地，若对非iframe网页类型的普通网页执行滑动操作时，无论怎样拖动网页，网页上的视频元素的位置是保持不变的，产生偏移的是视频元素以外的可视区域的内容，因此无需通知浏览器进程绘制视频元素，从而可以减少因滑动页面而频繁通知客户端对视频位置进行更新的Mojo消息，减少性能消耗，节省电流。
进一步地，可以解析视频元素的属性信息，若视频元素的属性信息为position:fixed，则表示无需处理视频元素的偏移，视频元素可以不响应滑动操作，也就是说，视频元素的位置一直为初始位置信息。
进一步地，可以通过检测视频元素在渲染进程的派发过程中的视频偏移量和视频标识，来区分视频偏移量是在那个进程中获取的。例如，若检测到浏览器渲染进程的派发过程中的视频偏移量为0，则说明是在浏览器进程直接获取的视频偏移量，按照浏览器进程获取的视频偏移量显示视频元素，否则按照渲染进程派发的视频偏移量显示视频元素。
综上所述，本申请相对于相关技术，可以在非同层播放视频时，减少因页面滑动导致渲染进程更新视频元素所引起的对终端的性能消耗大的影响，从而可以节省终端电流；进一步地，可以避免因频繁滑动页面导致渲染进程更新频繁，从而出现视频跟随或拖影等情况。
本申请实施例提供了一种浏览器渲染方法，终端及存储介质，终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频标识对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。由此可见，在本申请的实施例中，通过在网页对应的分层树中，针对其中的视频元素创建视频标识，从而可以利用视频标识确定分层树中的视频层，进而在对网页执行滑动操作时，获取分层树中当前节点对应的第一偏移量，如果当前节点包括视频标识，且当前节点存在父节点，则说明网页中的视频元素的位置在滑动操作中产生偏移，且当前节点为分层树中的子节点，从而确定根据当前节点对应的第一偏移量和父节点对应的第二偏移量得到视频元素的目标偏移量，并依据目标偏移量对视频元素进行显示处理，显示偏移后的视频元素；也就是说，本申请中的浏览器渲染方法，当网页中的视频元素的位置发生变化时，并不是通过遍历网页上的所有节点来获取偏移量，而是仅针对发生变化的视频元素对应的节点确定目标偏移量，从而可以提高显示效率，降低终端的性能消耗。
基于上述实施例，在本申请的另一实施例中，图17为本申请实施例提出的终端的组成结构示意图一，如图17所示，本申请实施例提出的终端10可以包括创建单元11、获取单元12、确定单元13以及显示单元14，
所述创建单元11，用于创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识。
所述获取单元12，用于当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量。
所述确定单元13，用于根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量。
所述显示单元14，用于按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
进一步地，所述显示单元14，具体用于根据所述目标偏移量生成第一绘制命令；根据所述第一绘制命令对所述视频标识对应的视频元素进行显示处理。
进一步地，所述显示单元14，还具体用于确定所述视频元素对应的初始位置信息；根据所述初始位置信息和所述目标偏移量确定所述视频元素对应的目标位置信息；基于所述目标位置信息对所述视频元素进行显示处理。
进一步地，所述显示单元14，还用于若所述当前节点包括所述视频标识，且所述视频标识对应的属性信息指示不响应所述滑动操作，则继续基于所述初始位置信息对所述视频元素进行显示处理。
进一步地，所述确定单元13，具体用于若所述第一偏移量的第一方向和所述第二偏移量的第二方向相同，则对所述第一偏移量和所述第二偏移量进行相加处理，获得所述目标偏移量。
进一步地，所述确定单元13，还具体用于若所述第一偏移量的第一方向和所述第二偏移量的第二方向不相同，则根据所述第一方向、所述第二方向、第一偏移量以及所述第二偏移量，确定所述目标偏移量。
进一步地，所述获取单元12，还用于当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量之后，若所述分层树中的当前节点不包括所述视频标识，则根据所述第一偏移量获取所述网页对应的区域偏移量。
进一步地，所述显示单元14，还用于根据所述区域偏移量生成第二绘制命令；根据所述第二绘制命令显示所述网页对应的偏移后网页。
进一步地，所述确定单元13，在所述获取单元12检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量之后，还用于若所述分层树中的当前节点包括所述视频标识，且所述当前节点不存在父节点，则将所述第一偏移量确定为所述目标偏移量。
进一步地，所述视频标识用于确定所述分层树中、所述视频元素对应的视频层。
在本申请的实施例中，进一步地，图18为本申请实施例提出的终端的组成结构示意图二，如图18所示，本申请实施例提出的终端10还可以包括处理器15、存储有处理器15可执行指令的存储器16，进一步地，终端10还可以包括通信接口17，和用于连接处理器15、存储器16以及通信接口17的总线18。
进一步地，在本申请的实施例中，处理器15，用于创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
在本申请的实施例中，上述处理器可以为特定用途集成电路(ApplicationSpecific Integrated Circuit，ASIC)、数字信号处理器(Digital Signal Processor，DSP)、数字信号处理装置(Digital Signal Processing Device，DSPD)、可编程逻辑装置(ProgRAMmable Logic Device，PLD)、现场可编程门阵列(Field ProgRAMmable GateArray，FPGA)、中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器中的至少一种。可以理解地，对于不同的设备，用于实现上述处理器功能的电子器件还可以为其它，本申请实施例不作具体限定。存储器可以与处理器连接，其中，存储器用于存储可执行程序代码，该程序代码包括计算机操作指令，存储器可能包含高速RAM存储器，也可能还包括非易失性存储器，例如，至少两个磁盘存储器。
在本申请的实施例中，总线用于连接通信接口、处理器以及存储器以及这些器件之间的相互通信。
在本申请的实施例中，存储器，用于存储指令和数据。
在实际应用中，上述存储器可以是易失性存储器(volatile memory)，例如随机存取存储器(Random-Access Memory，RAM)；或者非易失性存储器(non-volatile memory)，例如只读存储器(Read-Only Memory，ROM)，快闪存储器(flash memory)，硬盘(Hard DiskDrive，HDD)或固态硬盘(Solid-State Drive，SSD)；或者上述种类的存储器的组合，并向处理器提供指令和数据。
另外，在本实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。
集成的单元如果以软件功能模块的形式实现并非作为独立的产品进行销售或使用时，可以存储在一个计算机可读取存储介质中，基于这样的理解，本实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或processor(处理器)执行本实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
本申请实施例提供了一种终端，终端创建网页对应的分层树；其中，分层树中包括网页中的视频元素对应的视频标识；当检测到网页对应的滑动操作时，获取分层树中的当前节点对应的第一偏移量；若分层树中的当前节点包括视频标识，且当前节点存在父节点，则获取父节点对应的第二偏移量；根据第一偏移量和第二偏移量确定视频标识对应的目标偏移量；按照目标偏移量对视频标识对应的视频元素进行显示处理。由此可见，在本申请的实施例中，通过在网页对应的分层树中，针对其中的视频元素创建视频标识，从而可以利用视频标识确定分层树中的视频层，进而在对网页执行滑动操作时，获取分层树中当前节点对应的第一偏移量，如果当前节点包括视频标识，且当前节点存在父节点，则说明网页中的视频元素的位置在滑动操作中产生偏移，且当前节点为分层树中的子节点，从而确定根据当前节点对应的第一偏移量和父节点对应的第二偏移量得到视频元素的目标偏移量，并依据目标偏移量对视频元素进行显示处理，显示偏移后的视频元素；也就是说，本申请中的浏览器渲染方法，当网页中的视频元素的位置发生变化时，并不是通过遍历网页上的所有节点来获取偏移量，而是仅针对发生变化的视频元素对应的节点确定目标偏移量，从而可以提高显示效率，降低终端的性能消耗。
本申请实施例提供一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现如上所述的浏览器渲染方法。
具体来讲，本实施例中的一种浏览器渲染方法对应的程序指令可以被存储在光盘，硬盘，U盘等存储介质上，当存储介质中的与一种浏览器渲染方法对应的程序指令被终端读取或被执行时，包括如下步骤：
创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；
当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；
若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；
根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；
按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的实现流程示意图和/或方框图来描述的。应理解可由计算机程序指令实现流程示意图和/或方框图中的每一流程和/或方框、以及实现流程示意图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在实现流程示意图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在实现流程示意图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在实现流程示意图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述，仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。
Claims (12)
1.一种浏览器渲染方法，其特征在于，所述方法包括：
创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；
当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；
若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；
根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；
按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
2.根据权利要求1所述的方法，其特征在于，所述按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理，包括：
根据所述目标偏移量生成第一绘制命令；
根据所述第一绘制命令对所述视频标识对应的视频元素进行显示处理。
3.根据权利要求1所述的方法，其特征在于，所述按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理，包括：
确定所述视频元素对应的初始位置信息；
根据所述初始位置信息和所述目标偏移量确定所述视频元素对应的目标位置信息；
基于所述目标位置信息对所述视频元素进行显示处理。
4.根据权利要求3所述的方法，其特征在于，所述方法还包括：
若所述当前节点包括所述视频标识，且所述视频标识对应的属性信息指示不响应所述滑动操作，则继续基于所述初始位置信息对所述视频元素进行显示处理。
5.根据权利要求1所述的方法，其特征在于，所述根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量，包括：
若所述第一偏移量的第一方向和所述第二偏移量的第二方向相同，则对所述第一偏移量和所述第二偏移量进行相加处理，获得所述目标偏移量。
6.根据权利要求1所述的方法，其特征在于，所述根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量，包括：
若所述第一偏移量的第一方向和所述第二偏移量的第二方向不相同，则根据所述第一方向、所述第二方向、第一偏移量以及所述第二偏移量，确定所述目标偏移量。
7.根据权利要求1所述的方法，其特征在于，所述当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量之后，所述方法还包括：
若所述分层树中的当前节点不包括所述视频标识，则根据所述第一偏移量获取所述网页对应的区域偏移量；
根据所述区域偏移量生成第二绘制命令；
根据所述第二绘制命令显示所述网页对应的偏移后网页。
8.根据权利要求1所述的方法，其特征在于，所述当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量之后，所述方法还包括：
若所述分层树中的当前节点包括所述视频标识，且所述当前节点不存在父节点，则将所述第一偏移量确定为所述目标偏移量。
9.根据权利要求1所述的方法，其特征在于，所述视频标识用于确定所述分层树中、所述视频元素对应的视频层。
10.一种终端，其特征在于，所述终端包括创建单元、获取单元、确定单元以及显示单元，
所述创建单元，用于创建网页对应的分层树；其中，所述分层树中包括所述网页中的视频元素对应的视频标识；
所述获取单元，用于当检测到所述网页对应的滑动操作时，获取所述分层树中的当前节点对应的第一偏移量；若所述分层树中的当前节点包括所述视频标识，且所述当前节点存在父节点，则获取所述父节点对应的第二偏移量；
所述确定单元，用于根据所述第一偏移量和所述第二偏移量确定所述视频元素对应的目标偏移量；
所述显示单元，用于按照所述目标偏移量对所述视频标识对应的视频元素进行显示处理。
11.一种终端，其特征在于，所述终端还包括处理器、存储有所述处理器可执行指令的存储器，当所述指令被所述处理器执行时，实现如权利要求1-9任一项所述的方法。
12.一种计算机可读存储介质，其上存储有程序，应用于终端中，所述程序被处理器执行时，实现如权利要求1-9任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110492227.2A CN113204401B (zh) | 2021-05-06 | 2021-05-06 | 浏览器渲染方法，终端及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110492227.2A CN113204401B (zh) | 2021-05-06 | 2021-05-06 | 浏览器渲染方法，终端及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113204401A CN113204401A (zh) | 2021-08-03 |
| CN113204401B true CN113204401B (zh) | 2024-04-02 |
Family
ID=77030059
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110492227.2A Active CN113204401B (zh) | 2021-05-06 | 2021-05-06 | 浏览器渲染方法，终端及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113204401B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113971256A (zh) * | 2021-10-27 | 2022-01-25 | 百度在线网络技术（北京）有限公司 | 页面的处理方法、装置、电子设备和存储器 |
| CN114579031B (zh) * | 2022-03-08 | 2023-11-21 | 中国农业银行股份有限公司 | 滑动操作的响应方法、装置、服务器及存储介质 |
| CN116245710B (zh) * | 2023-05-11 | 2023-07-18 | 中国铁路设计集团有限公司 | 基于虚幻引擎和线程池的海量倾斜摄影模型动态调度方法 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106406901A (zh) * | 2016-09-28 | 2017-02-15 | 北京奇虎科技有限公司 | 一种窗口移动方法和装置 |
| CN110020311A (zh) * | 2017-12-05 | 2019-07-16 | 中兴通讯股份有限公司 | 网页显示方法、浏览器、终端和计算机可读存储介质 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8863035B2 (en) * | 2012-10-26 | 2014-10-14 | International Business Machines Corporation | Dynamic self-reorganizing trees in a user interface |
-
2021
- 2021-05-06 CN CN202110492227.2A patent/CN113204401B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106406901A (zh) * | 2016-09-28 | 2017-02-15 | 北京奇虎科技有限公司 | 一种窗口移动方法和装置 |
| CN110020311A (zh) * | 2017-12-05 | 2019-07-16 | 中兴通讯股份有限公司 | 网页显示方法、浏览器、终端和计算机可读存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113204401A (zh) | 2021-08-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113204401B (zh) | 浏览器渲染方法，终端及存储介质 | |
| EP3262497B1 (en) | Contextual zoom | |
| EP2805258B1 (en) | Low resolution placeholder content for document navigation | |
| US9921721B2 (en) | Navigation interfaces for ebooks | |
| US20030174173A1 (en) | Graphical user interface for searches | |
| US20130191785A1 (en) | Confident item selection using direct manipulation | |
| US20120066638A1 (en) | Multi-dimensional auto-scrolling | |
| KR20170098830A (ko) | 지속적인 뷰포트 제공 기법 | |
| US11675483B2 (en) | Client device, control method, and storage medium for smoothly exchanging the display of images on a device | |
| WO2015026750A1 (en) | Presenting fixed format documents in reflowed format | |
| CN104808903A (zh) | 文本选择方法和装置 | |
| US9548042B2 (en) | Responsive document breakpoints systems and methods | |
| JP2002251241A (ja) | 情報表示方法、これを利用した情報処理装置、媒体、およびプログラム | |
| CN106648571B (zh) | 一种用于校对应用界面的方法和装置 | |
| EP3043251A1 (en) | Method of displaying content and electronic device implementing same | |
| US20130016108A1 (en) | Information processing apparatus, information processing method, and program | |
| CN104462232A (zh) | 一种数据存储方法及装置 | |
| US20130111333A1 (en) | Scaling objects while maintaining object structure | |
| JP2010191739A (ja) | 文書表示装置、文書表示方法、及びこの方法を実行するコンピュータプログラム | |
| US20140337709A1 (en) | Method and apparatus for displaying web page | |
| CN104536674A (zh) | 一种用于在移动设备中对网页执行操作的方法和装置 | |
| CN106293671B (zh) | 一种生成组件模板的方法及装置 | |
| CN109032476B (zh) | 一种在图形用户界面中显示大数据集的方法 | |
| CN110515618A (zh) | 页面信息录入优化方法、设备、存储介质及装置 | |
| CN114185473B (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 |