CN115438282B - 页面中元素的定位方法及装置 - Google Patents

页面中元素的定位方法及装置 Download PDF

Info

Publication number
CN115438282B
CN115438282B CN202211079214.3A CN202211079214A CN115438282B CN 115438282 B CN115438282 B CN 115438282B CN 202211079214 A CN202211079214 A CN 202211079214A CN 115438282 B CN115438282 B CN 115438282B
Authority
CN
China
Prior art keywords
page
target visual
visual page
positioning
rendering
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
Application number
CN202211079214.3A
Other languages
English (en)
Other versions
CN115438282A (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.)
Hundsun Technologies Inc
Original Assignee
Hundsun Technologies Inc
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 Hundsun Technologies Inc filed Critical Hundsun Technologies Inc
Priority to CN202211079214.3A priority Critical patent/CN115438282B/zh
Publication of CN115438282A publication Critical patent/CN115438282A/zh
Application granted granted Critical
Publication of CN115438282B publication Critical patent/CN115438282B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
    • G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/30—Monitoring
    • G06F11/3058—Monitoring arrangements for monitoring environmental properties or parameters of the computing system or of the computing system component, e.g. monitoring of power, currents, temperature, humidity, position, vibrations
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Quality & Reliability (AREA)
  • Mathematical Physics (AREA)
  • Processing Or Creating Images (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明提供页面中元素的定位方法及装置，其中页面中元素的定位方法包括：监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。如此，通过目标可视页面的懒加载和元素内容的预先缓存，既减少了目标可视页面内的元素渲染时间，也加快了目标可视页面中定位指定元素的响应速度，实现了元素无法分页展示场景下快速定位指定元素。

Description

页面中元素的定位方法及装置
技术领域
本说明书涉及计算机技术领域，特别涉及一种页面中元素的定位方法。本说明书同时涉及一种页面中元素的定位装置，一种计算设备，以及一种计算机可读存储介质。
背景技术
随着计算机和互联网的快速发展，网页应用逐渐成为各种业务的交互途径，通过网页应用可以向用户展示大量所需的信息。单页面网页应用可以展示成千上万个元素，元素间包含复杂的级联关系，因业务使用场景要求，无法进行元素分页展示，在页面操作过程中需要快速精确定位指定要素时，通过传统方式无法快速定位所需的指定元素，且由于页面包括大量元素，在定位过程中会造成页面卡顿、界面假死、操作不流畅等问题，进而需要更高效更便捷的方法进行元素定位的操作或者处理。
发明内容
有鉴于此，本说明书实施例提供了一种页面中元素的定位方法。本说明书同时涉及一种页面中元素的定位装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的技术缺陷。
根据本说明书实施例的第一方面，提供了一种页面中元素的定位方法，包括：
监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；
根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；
更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
可选地，监听目标可视页面中的元素定位指令之前，还包括：
接收目标可视页面的页面访问请求，对目标可视页面进行初始化，通过数据获取接口获取目标可视页面的元素内容；
按照设定格式，将元素内容封装为目标可视页面的元素缓存数据，并进行缓存。
可选地，将元素内容封装为目标可视页面的元素缓存数据，并进行缓存之后，还包括：
为目标可视页面中各个元素设置占位标识；
从元素缓存数据中获取各个元素的渲染属性，渲染属性用于指示是否渲染对应的元素；
针对渲染属性为第一属性的第一元素，在目标可视页面中渲染第一元素；
针对渲染属性为第二属性的第二元素，在目标可视页面中第二元素的位置处渲染第二元素对应的占位标识。
可选地，元素定位指令为关键字段检索指令，定位信息为检索字段，元素缓存数据包括各个元素的被检索字段；
根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，包括：
遍历元素缓存数据中的各个元素，确定各个元素的被检索字段和检索字段的匹配度；
根据匹配度从各个元素中筛选出与检索字段匹配的指定元素。
可选地，元素缓存数据还包括各个元素的占位标识；
更新指定元素的渲染属性，在目标可视页面中渲染指定元素，包括：
将指定元素的渲染属性由第二属性修改为第一属性；
从元素缓存数据中获取指定元素的占位标识；
根据占位标识，在目标可视页面中定位至指定元素的渲染位置，在目标可视页面的渲染位置处渲染指定元素。
可选地，元素定位指令为页面操作指令，定位信息为页面操作信息；
根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，包括：
根据页面操作信息，确定目标可视页面中的待渲染位置；
将待渲染位置的占位标识对应的元素确定为匹配的指定元素。
可选地，在目标可视页面中渲染指定元素，包括：
从元素缓存数据中获取指定元素的当前渲染属性；
根据当前渲染属性，创建对应的虚拟文档对象模型DOM树；
对比虚拟DOM树和目标可视页面的真实DOM树，确定差异元素节点；
根据差异元素节点，渲染对应的指定元素。
可选地，绘制目标可视页面对应的更新可视页面之后，还包括：
在更新可视页面中，对指定元素进行标记。
根据本说明书实施例的第二方面，提供了一种页面中元素的定位装置，包括：
监听模块，被配置为监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；
定位模块，被配置为根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；
渲染模块，被配置为更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
根据本说明书实施例的第三方面，提供了一种计算设备，包括：
存储器和处理器；
存储器用于存储计算机可执行指令，处理器用于执行计算机可执行指令，以实现下述方法：
监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；
根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；
更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
根据本说明书实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机可执行指令，该指令被处理器执行时实现页面中元素的定位方法的步骤。
本说明书提供的页面中元素的定位方法，监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
这种情况下，当前屏的目标可视页面采用懒加载的方式进行渲染，在目标可视页面包括大量元素时，并不直接在目标可视页面中渲染包括的各个元素，而是在目标可视页面中仅渲染部分元素，并且对目标可视页面包括的各个元素的元素内容预先基于设定格式进行了缓存。因而，可以监听目标可视页面中的元素定位指令，根据元素定位指令中携带的定位信息，在预先封装获得的元素缓存数据中进行定位，获得匹配的指定元素，更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。如此，可以通过懒加载的方式渲染目标可视页面，需要定位元素时，从预先基于设定格式封装获得的元素缓存数据中进行匹配定位，通过目标可视页面的懒加载和元素内容的预先缓存，既减少了目标可视页面内的元素渲染时间，也加快了目标可视页面中定位指定元素的响应速度，实现了元素无法分页展示场景下快速定位指定元素。
附图说明
图1是本说明书一实施例提供的一种页面中元素的定位方法的流程图；
图2a是本说明书一实施例提供的一种指定要素的匹配过程示意图；
图2b是本说明书一实施例提供的一种虚拟DOM树的映射过程示意图；
图3是本说明书一实施例提供的一种应用于单页面应用的页面中元素的定位方法的处理流程图；
图4是本说明书一实施例提供的一种页面中元素的定位装置的结构示意图；
图5是本说明书一实施例提供的一种计算设备的结构框图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本说明书。但是本说明书能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本说明书内涵的情况下做类似推广，因此本说明书不受下面公开的具体实施的限制。
在本说明书一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书一个或多个实施例。在本说明书一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本说明书一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本说明书一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
首先，对本说明书一个或多个实施例涉及的名词术语进行解释。
文档对象模型(Document Object Model，简称DOM)：是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM的设计是以对象管理组织(OMG)的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，DOM技术使得页面的交互性大大地增强。
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过JavaScript，可以重构整个HTML文档，可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型DOM来获得的。
懒加载：也就是延迟加载，只有当元素出现在浏览器的可视区域内时，才设置元素真正的路径，让元素显示出来。
需要说明的是，传统方式页面中元素一般通过两种方式进行渲染，第一种方式为进行分页动态渲染展示，此方法下在对页面中元素进行检索定位时，无法一次性的把所有匹配项检索出来，会与后台服务交互多次，造成资源消耗，检索时间延长；第二种方式为把所有的的元素信息全部展示在一个页面上，该页面展示有大量的元素，此方法下在对页面中元素进行检索定位时，可能导致页面卡顿、假死现象。
单页WEB应用展示成千上万个元素(单元素包含上百个DOM节点)，元素间包含复杂的级联关系。因业务使用场景要求，无法进行元素分页展示，在页面操作过程中需要快速精确定位指定元素，通过传统方式无法快速定位未渲染的元素信息，且定位过程中会造成页面卡顿、界面假死、操作不流畅。本说明书实施例提供的页面中元素的定位方法可以解决页面元素过多导致定位过程中页面卡顿、假死问题。
页面展示过多的组件元素，操作时会造成页面的卡顿假死，通常采用页面滚动懒加载方式进行页面元素的加载，即当前不在可视区域内的元素先不进行渲染，加快浏览器页面渲染和点击响应速度。但渲染出来的页面元素超过一定数量之后，在元素定位时，页面会频繁卡死。由于渲染出来的元素过多，直接影响了页面操作的流畅性。若通过前端分页展示元素，无法满足前端同屏元素定位和元素间的级联操作功能，而通过后端分页查询，会导致前后端频繁通信，造成后端服务器压力过大。基于当前需求，本说明书实施例提供了一种页面中元素的定位方法，基于当屏虚拟滚动技术及数据缓存技术实现同屏多元素场景下定位指定要素功能，支持单页WEB应用元素纵向、横向动态扩展，即单页WEB应用中可以包括大量存在级联关系的元素。
另外，单页WEB应用渲染组件元素过多的情况下，解决无法根据输入关键字快速定位指定元素的场景。本说明书实施例中可以使用当屏虚拟DOM技术和要素信息缓存机制进行页面元素虚拟动态渲染处理，可解决这种问题，既减少了可视区域内的元素渲染时间，也加快了页面操作响应速度，满足了该场景下快速定位指定元素所在位置的目的。
在本说明书中，提供了一种页面中元素的定位方法，本说明书同时涉及一种页面中元素的定位装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。
图1示出了根据本说明书一实施例提供的一种页面中元素的定位方法的流程图，具体包括以下步骤：
步骤102：监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息。
具体的，目标可视页面是指当前展示的可视页面，也即用户可以看到的当屏页面，该目标可视页面可以是单页面应用，如业务管理页面、基金管理首页等。另外，元素定位指令是指在目标可视页面中定位所需元素的指令，该元素定位指定可以通过缩放、滑动、检索等操作触发，该元素是指能够进行展示的组件单元，元素定位指令可以携带定位信息，该定位信息即是指定位至所需的指定元素的相关信息，如缩放信息、位置信息、检索关键词等。
需要说明的是，单页面应用往往包含大量的元素，因而为了提高目标可视页面的渲染时间和定位指定要素的响应速度，目标可视页面可以基于懒加载方式渲染，也即初始时目标可视页面中有些元素渲染而有些元素不渲染，后续用户需要定位至某个指定元素时，再对指定元素进行渲染。通过懒加载的方式，给客户提供流畅、不卡顿的操作体验。
实际应用中，目标可视页面是基于懒加载方式进行渲染绘制的，有些元素并未渲染，因而可以监听目标可视页面中的元素定位指令。具体的，目标可视页面是一种HTML或XML文档页面，因而目标可视页面是基于DOM树绘制而成的，目标可视页面中的元素均可以对应至DOM树中的节点，因而可以对目标可视页面对应的DOM树中的每个DOM节点，使用IntersectionObserver交叉视察器进行监听，针对某个DOM节点监听到其与当前可视区域(即目标可视页面)的交叉状态发生变化时，即该DOM节点对应的元素的显示状态要发生变化，此时即监听到元素定位指令，后续可以基于元素定位指令，定位至对应的指定元素进行渲染。
本说明书实施例中，通过IntersectionObserver交叉视察器进行监听，针对目标可视页面可以只渲染某些元素，减少了页面渲染的压力，保证了页面性能。
本实施例一个可选的实施方式中，监听目标可视页面中的元素定位指令之前，还可以渲染绘制目标可视页面，获取目标可视页面中包括的各个元素的元素内容，进行封装缓存，以便后续进行元素定位，也即监听目标可视页面中的元素定位指令之前，还可以包括：
接收目标可视页面的页面访问请求，对目标可视页面进行初始化，通过数据获取接口获取目标可视页面的元素内容；
按照设定格式，将元素内容封装为目标可视页面的元素缓存数据，并进行缓存。
具体的，页面访问请求是指在客户端中展示目标可视页面的请求，该页面访问请求可以通过设定的操作触发，如输入目标可视页面的网址、打开目标可视页面对应的应用程序等。
需要说明的是，客户端接收到目标可视页面的页面访问请求时，说明用户需要在客户端中查看目标可视页面，此时可以对目标可视页面进行初始化，通过数据获取接口获取目标可视页面包括的各个元素的元素内容，然后按照设定格式，将元素内容封装为便于渲染的数据结构，获得目标可视页面的元素缓存数据，并进行缓存。
其中，设定格式是指预先设置的、对元素内容进行封装的格式，该设定格式为便于渲染、且后续可以进行关键字段匹配检索的格式，也即设定格式中应该包括有元素的渲染属性、被检索字段等信息。当然，为了便于对元素进行渲染、定位等操作，设定格式中还可以包括其他标识性信息，如占位标识。
实际应用中，可以依据唯一主键获取到该主键生成表单的相应数据信息，也即基于主键从后台获取到本次展示的目标可视页面中包括的元素内容，可以解析目标可视页面的代码，获取用于控制表单渲染的元素内容，将获取到的元素内容封装成统一的数据结构，获得元素缓存数据。
示例的，如下所示为通过主键prd_code获取到的目标可视页面的代码内容，即后台服务器接收到页面访问请求直接响应回来的数据结构，解析该代码从中提取用于渲染的“chineseName”属性，及“dataProperty”、“tablePropertyBase”、“componentProperty”属性，作为获取到的目标可视页面的元素内容。其中，“chineseName”是目标可视页面的代码的名称标识；“dataProperty”是用来保存目标可视页面的表单组件的默认值等信息的；“tablePropertyBase”是用来控制目标可视页面的表单中二维表格的属性，譬如列宽、校验规则、是否展示以及列必输(也即这列值是否为必输项，如果是必输设置，页面上必须要填入值才行，否则不能提交)等属性；“componentProperty”是用来控制目标可视页面的表单组件的length(长度)、disabled(已经失效的输入域，即禁止修改的输入域)等属性，主要是涉及目标可视页面中表单组件的属性。
通过主键prd_code获取到的目标可视页面的代码：
"prd_code":{"showOrCopyList":["isParentShow","isSubShow","isLimitPartner","isTrustPlan"],"linkInfo":{"outputParams":[],"inputParams":[]},"isShowNlp":true,"fieldName":"prd_code","isCopyValue":true,"chineseName":"主基金代码","inOutParams":{},"permission":{},"id":"hcreator:h-input","type":"hInput","fromCode":"hcreator"}；
"prd_code":{"tablePropertyBase":{"visible":true,"colWidth":0,"formRule":[],"required":false}}；
"prd_code":{"componentProperty":{"maxlength":50,"titleShow":true,"disabled":true,"placeholder":"请输入"},}；
"prd_code":{"dataProperty":{"defaultValue":""}}。
作为一种示例，对获取到的元素内容重新封装过后的前端数据结构，即封装后的每个元素的大致数据结构如下:
{id:'prdCode',//占位标识；name:'产品代码',//被检索字段；cn_pinyin:'chanpindaima',//被检索字段；show:false，//渲染属性，控制当前节点内的功能要素是否渲染；nodes；[{type:'input',disabled:false,maxLength:100,defaultValue:”,label:'产品名称'},{type:'select',maxlength:50,titleShow:true,disabled:true,placeholder:请输入,visible:true,colWidth:0,formRule:[],required:false,defaultValue:”,options:[{value:1,label:'产品1'}],label:'产品类型'},...//以及一些实现其他功能的数据结构]}。
本说明书实施例中，可以通过数据获取接口获取目标可视页面的元素内容，然后按照设定格式，将元素内容封装为目标可视页面的元素缓存数据，并进行缓存，该元素缓存数据是便于渲染的数据结构，后续可以基于缓存的元素缓存数据渲染目标可视页面，提高渲染速度；另外，通过预先缓存设定格式的元素缓存数据，可以便于后续的元素检索定位。
本实施例一个可选的实施方式中，封装获得元素缓存数据，并进行缓存后，可以基于元素缓存数据渲染目标可视页面，以将目标可视页面展示给用户，也即将元素内容封装为目标可视页面的元素缓存数据，并进行缓存之后，还可以包括：
为目标可视页面中各个元素设置占位标识；
从元素缓存数据中获取各个元素的渲染属性，渲染属性用于指示是否渲染对应的元素；
针对渲染属性为第一属性的第一元素，在目标可视页面中渲染第一元素；
针对渲染属性为第二属性的第二元素，在目标可视页面中第二元素的位置处渲染第二元素对应的占位标识。
具体的，元素缓存数据中各个元素对应有渲染属性，该渲染属性用于指示是否渲染对应的元素，渲染属性包括第一属性和第二属性，其中，第一属性用于指示渲染对应的元素，第二属性用于指示不渲染对应的元素。
需要说明的是，目标可视页面是基于懒加载的方式渲染获得，即初始时有些元素进行渲染，而有些元素不进行渲染，对于不需要进行渲染的元素需要进行标识，以便于后续定位渲染，因而还可以为目标可视页面中各个元素设置占位标识。其中，该占位标识是元素对应的一种标识信息，用于表示在相应位置有元素，占位标识远远小于真实的元素，从而可以提高渲染速度，且便于进行元素定位，如元素为图片时，占位标识可以占位图，该占位图可以是空白框，远远小于真实图片。
实际应用中，目标可视页面中初始时有些元素要进行渲染，而有些元素则不进行渲染，客户端在绘制目标可视页面时，可以基于预先缓存的元素缓存数据中的渲染属性确定哪些元素要进行渲染，哪些元素不进行渲染。
也就是说，每个元素可以对应有渲染属性，该渲染属性可以指示对应的元素是否进行渲染，工作人员可以在后端预先配置目标可视页面包括的各个元素的渲染属性，对于初始时需要展示的元素(如首栏菜单等)，将其渲染属性设置为第一属性，对于初始时不需要展示的元素(如次级菜单等)，将其渲染属性设置为第二属性。
需要说明的是，绘制获得目标可视页面后，即可监听针对目标可视页面的元素定位指令，从而定位渲染所需的指定元素。
本说明书实施例中，可以预先为目标可视页面中各个元素设置占位标识，然后从元素缓存数据中获取各个元素的渲染属性，针对渲染属性为第一属性的第一元素，在目标可视页面中渲染第一元素；针对渲染属性为第二属性的第二元素，在目标可视页面中第二元素的位置处渲染第二元素对应的占位标识。如此，减少了目标可视页面中需要进行渲染的元素数量，从而提高渲染速度，且避免了在元素定位过程中造成页面卡顿、界面假死、操作不流畅等问题。
步骤104：根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得。
需要说明的是，元素定位指令中携带有元素定位信息，因而在监听到元素定位指令时，可以根据元素定位指令中携带的元素定位信息，在元素缓存数据中进行定位，获得匹配的指定元素。该元素缓存数据包括目标可视页面的各个元素相关的数据，因而对于当前未渲染的元素，也可以进行准确定位。
本实施例一个可选的实施方式中，元素定位指令为关键字段检索指令，定位信息为检索字段，元素缓存数据包括各个元素的被检索字段；此时根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，具体实现过程可以如下：
遍历元素缓存数据中的各个元素，确定各个元素的被检索字段和检索字段的匹配度；
根据匹配度从各个元素中筛选出与检索字段匹配的指定元素。
需要说明的是，当通过检索字段的方式定位指定要素时，监听到的元素定位指令中携带有检索字段，且元素缓存数据包括各个元素的被检索字段，此时可以遍历元素缓存数据中的各个元素，确定各个元素的被检索字段和检索字段的匹配度，根据匹配度从各个元素中筛选出与检索字段匹配的指定元素。如此，对于目标可视页面展示大数据量元素，本说明书实施例提供了一种高效、流畅、易操作、高可靠性的元素检索定位方法，对于包括大量元素的目标可视页面中当前未渲染的元素，可以进行快速定位匹配。
实际应用中，可以通过字符相似度，确定各个元素的被检索字段和检索字段的匹配度，也即针对各个元素，确定检索字段的第一字符数目，以及该元素的第二字符数目，使用第一字符数目除以第二字符数目，获得该元素的被检索字段和检索字段的匹配度。
另外，根据匹配度从各个元素中筛选出与检索字段匹配的指定元素时，可以将各个元素中匹配度最高的元素作为该指定元素；或者，也可以将各个元素中匹配度大于设定阈值的元素作为指定元素。也即，本说明书中对于定位获得的指定元素的数目不进行限定，可以为最匹配的一个元素，也可以为匹配度大于设定阈值的一个或多个元素。
示例的，图2a是本说明书一实施例提供的一种指定要素的匹配过程示意图，如图2a所示，用户输入检索字段“业绩报酬”，元素1的被检索字段为“业绩报酬计提模式”，元素2的被检索字段为“该级别是否计提业绩报酬”，元素3的被检索字段为“业绩报酬算法”，元素4的被检索字段为“业绩报酬”。针对元素1，被检索字段和检索字段的匹配度为：业绩报酬(4个字符)\业绩报酬计提模式(8个字符)＝0.5；针对元素2，被检索字段和检索字段的匹配度为：业绩报酬(4个字符)\该级别是否计提业绩报酬(11个字符)＝0.3636；针对元素3，被检索字段和检索字段的匹配度为：业绩报酬(4个字符)\业绩报酬算法(6个字符)＝0.667；针对元素4，被检索字段和检索字段的匹配度为：业绩报酬(4个字符)\业绩报酬(4个字符)＝1。假设选择匹配度最大的元素作为指定元素，此时指定元素为元素3“业绩报酬”，后续对元素3“业绩报酬”进行渲染。
本实施例一个可选的实施方式中，元素定位指令为页面操作指令，定位信息为页面操作信息；此时，根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，具体实现过程可以为：
根据页面操作信息，确定目标可视页面中的待渲染位置；
将待渲染位置的占位标识对应的元素确定为匹配的指定元素。
需要说明的是，由于用户对于目标页面页面的操作，可能会影响目标可视页面需要渲染展示的元素，因而除了上述可以通过检索字段触发元素定位指令外，还可以通过页面操作指令触发元素定位指令。其中，页面操作指令可以为页面滑动指令、页面缩放指令、某元素的选择指令等。
实际应用中，页面操作指令可以影响目标可视页面展示的元素，如对于页面滑动指令，鼠标滑动到的位置为需要展示的元素的位置；对于页面缩放指令，缩放后需要展示元素与缩放前需要展示的元素不同；对于某元素的选择指令，则说明该被选择的元素以及与该元素存在级联关系的元素需要进行渲染。
本说明书实施例中，根据页面操作信息，可以确定出目标可视页面中的待渲染位置，即有哪些位置的元素需要进行渲染展示，待渲染位置处当前渲染有占位标识，基于该占位标识可以确定出对应的元素，也即可以将待渲染位置的占位标识对应的元素确定为匹配的指定元素，后续使用指定元素替换目标可视页面中相应的占位标识，以对指定元素进行渲染。如此，通过页面操作指令，可以触发定位所需的指定元素，对于包括大量元素的目标可视页面中当前未渲染的元素，可以进行快速定位匹配。
步骤106：更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
需要说明的是，每个元素都对应有渲染属性，用于指示对应的元素是否渲染，由于指定元素初始时并未渲染，是基于元素定位指令检索定位出的元素，因而可以更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
本实施例一个可选的实施方式中，元素缓存数据还包括各个元素的占位标识；此时，更新指定元素的渲染属性，在目标可视页面中渲染指定元素，具体实现过程可以如下：
将指定元素的渲染属性由第二属性修改为第一属性；
从元素缓存数据中获取指定元素的占位标识；
根据占位标识，在目标可视页面中定位至指定元素的渲染位置，在目标可视页面的渲染位置处渲染指定元素。
需要说明的是，指定元素初始时并未渲染，是基于元素定位指令检索定位出的元素，因而指定元素的渲染属性为第二属性，即不进行渲染，在定位出指定元素后，说明指定元素需要进行渲染，因而可以将指定元素的渲染属性由第二属性更新为第一属性，从而在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
本说明书实施例中，定位出指定元素后，可以将指定元素的渲染属性由第二属性修改为第一属性，然后从元素缓存数据中获取指定元素的占位标识，基于该占位标识可以在目标可视页面中定位至指定元素的渲染位置，在目标可视页面的渲染位置处渲染指定元素，从而更新目标可视页面。
本实施例一个可选的实施方式中，可以基于虚拟DOM树进行映射，渲染指定元素，也即在目标可视页面中渲染指定元素，具体实现过程可以如下：
从元素缓存数据中获取指定元素的当前渲染属性；
根据当前渲染属性，创建对应的虚拟文档对象模型DOM树；
对比虚拟DOM树和目标可视页面的真实DOM树，确定差异元素节点；
根据差异元素节点，渲染对应的指定元素。
需要说明的是，可以从元素缓存数据中获取指定元素的当前渲染属性，目标可视页面是基于DOM树布局绘制的，因而目标可视页面中渲染元素的变化，需要修改DOM树中的节点。但是，若每个渲染元素均修改一次目标页面的真实DOM树，会导致计算量较大，渲染速度慢，因而可以根据当前渲染属性，创建对应的虚拟DOM树，将所需的各个变换对应至虚拟DOM树中，然后再将虚拟DOM树映射至目标可视页面的真实DOM树，确定差异元素节点，根据差异元素节点，渲染对应的指定元素。
实际应用中，在vue初始编译的时候，会将前端的目标可视页面(如HTML网页模板)编译成虚拟DOM的渲染函数，在获取后端响应数据(初始打开目标可视页面，后台请求服务响应回来的数据，包括目标可视页面的组件、组件属性、默认值等)之后，执行渲染函数，即可以得到对应的一个虚拟节点树，即虚拟DOM树，后续对目标可视页面进行操作时，对Dep(Data Execution Prevention，数据执行保护)中的Watcher对象进行触发调用，以通过虚拟节点与真实节点进行差异比对，Watcher对象调用update来进行视图的修改，以此来进行真实DOM树的视图更新操作，实现把虚拟DOM与真实DOM进行动态同步。
其中，Vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。Vue的双向绑定原理用到了发布订阅模式的思想，Dep就是发布者，它的工作就是依赖管理，要知道哪些地方用到了这个变量，可能用到这个变量的地方有很多，所以，它会有多个订阅者Watcher。然后，每个变量都应该有属于自己的Dep，因为每个变量所在的依赖位置是不一样的，所以他们的订阅者Watcher也不一样，然后在变量更新之后，就去通知所有的订阅者Watcher，我的变量更新了，应该要触发视图更新。Watcher就是订阅者，Watcher接受Dep发过来的更新通知之后，就可以执行视图更新，它其实就是所谓的Watcher监听器，变量改变之后，执行一个回调函数。
示例的，图2b是本说明书一实施例提供的一种虚拟DOM树的映射过程示意图，如图2b所示，可以先根据指定元素的当前渲染属性，创建对应的虚拟文档对象模型DOM树；然后对比虚拟DOM树和目标可视页面的真实DOM树，确定差异元素节点；之后，在目标可视页面中渲染差异元素节点对应的指定元素。
本说明书实施例中，使用当屏虚拟DOM技术和元素信息缓存机制进行页面元素虚拟动态渲染处理，既减少了可视区域内的元素渲染时间，也加快了页面操作响应速度，满足了该场景下快速定位指定元素所在位置的目的。
本实施例一个可选实施方式中，绘制目标可视页面对应的更新可视页面之后，还包括：
在更新可视页面中，对指定元素进行标记。
需要说明的是，对于定位出的指定元素，可以在更新可视页面中，对指定元素进行标记，该标记可以通过设定的标记方法进行，如高亮标记、放大字号、加粗、变更字体等操作。如此，可以使得用户在更新可视页面中快速看到指定元素，从而获取相关信息，提高用户体验。
本说明书提供的页面中元素的定位方法，当前屏的目标可视页面采用懒加载的方式进行渲染，在目标可视页面包括大量元素时，并不直接在目标可视页面中渲染包括的各个元素，而是在目标可视页面中仅渲染部分元素，并且对目标可视页面包括的各个元素的元素内容预先基于设定格式进行了缓存。因而，可以监听目标可视页面中的元素定位指令，根据元素定位指令中携带的定位信息，在预先封装获得的元素缓存数据中进行定位，获得匹配的指定元素，更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。如此，可以通过懒加载的方式渲染目标可视页面，需要定位元素时，从预先基于设定格式封装获得的元素缓存数据中进行匹配定位，通过目标可视页面的懒加载和元素内容的预先缓存，既减少了目标可视页面内的元素渲染时间，也加快了目标可视页面中定位指定元素的响应速度，实现了元素无法分页展示场景下快速定位指定元素。
下述结合附图3，以本说明书提供的页面中元素的定位方法在单页面应用中的应用为例，对页面中元素的定位方法进行进一步说明。其中，图3示出了本说明书一实施例提供的一种应用于单页面应用的页面中元素的定位方法的处理流程图，具体包括以下步骤：
单页面应用在页面初始化时通过数据获取接口获取所有内容元素的元数据，经过数据封装工具将获取到的元数据组装成便于渲染的数据结构，获得元素缓存数据，然后为每一个元素设置一个唯一的占位标识。从元素缓存数据中获取各个元素的渲染属性，针对渲染属性为第一属性的第一元素，在单页面应用中渲染第一元素，针对渲染属性为第二属性的第二元素，在单页面应用中第二元素的位置处渲染第二元素对应的占位标识，获得单页面应用。
监听单页面应用中的元素定位指令。
在元素定位指令为关键字段检索指令时，遍历元素缓存数据中的各个元素，确定各个元素的被检索字段和检索字段的匹配度，根据匹配度从各个元素中筛选出与检索字段匹配的指定元素。
在元素定位指令为页面操作指令时，根据页面操作信息，确定单页面应用中的待渲染位置，将待渲染位置的占位标识对应的元素确定为匹配的指定元素。
将所指定元素的渲染属性由第二属性修改为第一属性(即修改指定元素的渲染属性)；从元素缓存数据中获取指定元素的占位标识，根据占位标识，在单页面应用中定位至指定元素的渲染位置。
从元素缓存数据中获取指定元素的当前渲染属性；根据当前渲染属性，创建对应的虚拟DOM树；对比虚拟DOM树和单页面应用的真实DOM树，确定差异元素节点；根据差异元素节点，在单页面应用的渲染位置处渲染指定元素，获得单页面应用对应的更新可视页面。
在更新可视页面中，标记指定元素。
本说明书提供的页面中元素的定位方法，当前屏的单页面应用采用懒加载的方式进行渲染，在单页面应用包括大量元素时，并不直接在单页面应用中渲染包括的各个元素，而是在单页面应用中仅渲染部分元素，并且对单页面应用包括的各个元素的元素内容预先基于设定格式进行了缓存。因而，可以监听单页面应用中的元素定位指令，根据元素定位指令中携带的定位信息，在预先封装获得的元素缓存数据中进行定位，获得匹配的指定元素，更新指定元素的渲染属性，在单页面应用中渲染指定元素，绘制单页面应用对应的更新可视页面。如此，可以通过懒加载的方式渲染单页面应用，需要定位元素时，从预先基于设定格式封装获得的元素缓存数据中进行匹配定位，通过单页面应用的懒加载和元素内容的预先缓存，既减少了单页面应用内的元素渲染时间，也加快了单页面应用中定位指定元素的响应速度，实现了元素无法分页展示场景下快速定位指定元素。
与上述方法实施例相对应，本说明书还提供了页面中元素的定位装置实施例，图4示出了本说明书一实施例提供的一种页面中元素的定位装置的结构示意图。如图4所示，该装置包括：
监听模块402，被配置为监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；
定位模块404，被配置为根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；
渲染模块406，被配置为更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
可选地，该装置还包括封装模块，被配置为：
接收目标可视页面的页面访问请求，对目标可视页面进行初始化，通过数据获取接口获取目标可视页面的元素内容；
按照设定格式，将元素内容封装为目标可视页面的元素缓存数据，并进行缓存。
可选地，该装置还包括设置模块，被配置为：
为目标可视页面中各个元素设置占位标识；
从元素缓存数据中获取各个元素的渲染属性，渲染属性用于指示是否渲染对应的元素；
针对渲染属性为第一属性的第一元素，在目标可视页面中渲染第一元素；
针对渲染属性为第二属性的第二元素，在目标可视页面中第二元素的位置处渲染第二元素对应的占位标识。
可选地，元素定位指令为关键字段检索指令，定位信息为检索字段，元素缓存数据包括各个元素的被检索字段；定位模块404，进一步被配置为：
遍历元素缓存数据中的各个元素，确定各个元素的被检索字段和检索字段的匹配度；
根据匹配度从各个元素中筛选出与检索字段匹配的指定元素。
可选地，元素缓存数据还包括各个元素的占位标识；渲染模块406，进一步被配置为：
将指定元素的渲染属性由第二属性修改为第一属性；
从元素缓存数据中获取指定元素的占位标识；
根据占位标识，在目标可视页面中定位至指定元素的渲染位置，在目标可视页面的渲染位置处渲染指定元素。
可选地，元素定位指令为页面操作指令，定位信息为页面操作信息；定位模块404，进一步被配置为：
根据页面操作信息，确定目标可视页面中的待渲染位置；
将待渲染位置的占位标识对应的元素确定为匹配的指定元素。
可选地，渲染模块406，进一步被配置为：
从元素缓存数据中获取指定元素的当前渲染属性；
根据当前渲染属性，创建对应的虚拟文档对象模型DOM树；
对比虚拟DOM树和目标可视页面的真实DOM树，确定差异元素节点；
根据差异元素节点，渲染对应的指定元素。
可选地，该装置还包括标记模块，被配置为：
在更新可视页面中，对指定元素进行标记。
本说明书提供的页面中元素的定位装置，监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
这种情况下，当前屏的目标可视页面采用懒加载的方式进行渲染，在目标可视页面包括大量元素时，并不直接在目标可视页面中渲染包括的各个元素，而是在目标可视页面中仅渲染部分元素，并且对目标可视页面包括的各个元素的元素内容预先基于设定格式进行了缓存。因而，可以监听目标可视页面中的元素定位指令，根据元素定位指令中携带的定位信息，在预先封装获得的元素缓存数据中进行定位，获得匹配的指定元素，更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。如此，可以通过懒加载的方式渲染目标可视页面，需要定位元素时，从预先基于设定格式封装获得的元素缓存数据中进行匹配定位，通过目标可视页面的懒加载和元素内容的预先缓存，既减少了目标可视页面内的元素渲染时间，也加快了目标可视页面中定位指定元素的响应速度，实现了元素无法分页展示场景下快速定位指定元素。
上述为本实施例的一种页面中元素的定位装置的示意性方案。需要说明的是，该页面中元素的定位装置的技术方案与上述的页面中元素的定位方法的技术方案属于同一构思，页面中元素的定位装置的技术方案未详细描述的细节内容，均可以参见上述页面中元素的定位方法的技术方案的描述。
图5示出了根据本说明书一实施例提供的一种计算设备500的结构框图。该计算设备500的部件包括但不限于存储器510和处理器520。处理器520与存储器510通过总线530相连接，数据库550用于保存数据。
计算设备500还包括接入设备540，接入设备540使得计算设备500能够经由一个或多个网络560通信。这些网络的示例包括公用交换电话网(PSTN，Public SwitchedTelephone Network)、局域网(LAN，Local Area Network)、广域网(WAN，Wide AreaNetwork)、个域网(PAN，Personal Area Network)或诸如因特网的通信网络的组合。接入设备540可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC，NetworkInterface Controller))中的一个或多个，诸如IEEE802.11无线局域网(WLAN，WirelessLocal Area Networks)无线接口、全球微波互联接入(Wi-MAX，WorldwideInteroperability for Microwave Access)接口、以太网接口、通用串行总线(USB，Universal Serial Bus)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC，Near FieldCommunication)接口，等等。
在本说明书的一个实施例中，计算设备500的上述部件以及图5中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图5所示的计算设备结构框图仅仅是出于示例的目的，而不是对本说明书范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。
计算设备500可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备500还可以是移动式或静止式的服务器。
其中，处理器520用于执行如下计算机可执行指令，以实现下述方法：
监听目标可视页面中的元素定位指令，其中，目标可视页面基于懒加载方式渲染，元素定位指令携带定位信息；
根据定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，元素缓存数据为基于目标可视页面包括的各个元素按照设定格式封装获得；
更新指定元素的渲染属性，在目标可视页面中渲染指定元素，绘制目标可视页面对应的更新可视页面。
上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的页面中元素的定位方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述页面中元素的定位方法的技术方案的描述。
本说明书一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该指令被处理器执行时以用于实现页面中元素的定位方法的步骤。
上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的页面中元素的定位方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述页面中元素的定位方法的技术方案的描述。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
计算机指令包括计算机程序代码，计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。计算机可读介质可以包括：能够携带计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。
需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本说明书并不受所描述的动作顺序的限制，因为依据本说明书，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本说明书所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
以上公开的本说明书优选实施例只是用于帮助阐述本说明书。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本说明书的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本说明书。本说明书仅受权利要求书及其全部范围和等效物的限制。

Claims (10)

1.一种页面中元素的定位方法，其特征在于，所述方法包括：
监听目标可视页面中的元素定位指令，其中，所述目标可视页面基于懒加载方式渲染，所述元素定位指令携带定位信息，所述目标可视页面为单页面应用，所述目标可视页面中各个元素设置有占位标识，所述占位标识用于表示在相应位置有元素，所述元素是指进行展示的组件单元；
根据所述定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，所述元素缓存数据为基于所述目标可视页面包括的各个元素按照设定格式封装获得；
更新所述指定元素的渲染属性，根据所述指定元素的当前渲染属性，创建对应的虚拟文档对象模型DOM树；对比虚拟DOM树和所述目标可视页面的真实DOM树，确定差异元素节点；根据所述差异元素节点，渲染对应的指定元素，绘制所述目标可视页面对应的更新可视页面。
2.根据权利要求1所述的页面中元素的定位方法，其特征在于，所述监听目标可视页面中的元素定位指令之前，还包括：
接收所述目标可视页面的页面访问请求，对所述目标可视页面进行初始化，通过数据获取接口获取所述目标可视页面的元素内容；
按照设定格式，将所述元素内容封装为所述目标可视页面的元素缓存数据，并进行缓存。
3.根据权利要求2所述的页面中元素的定位方法，其特征在于，所述将所述元素内容封装为所述目标可视页面的元素缓存数据，并进行缓存之后，还包括：
为所述目标可视页面中各个元素设置占位标识；
从所述元素缓存数据中获取所述各个元素的渲染属性，所述渲染属性用于指示是否渲染对应的元素；
针对所述渲染属性为第一属性的第一元素，在所述目标可视页面中渲染所述第一元素；
针对所述渲染属性为第二属性的第二元素，在所述目标可视页面中所述第二元素的位置处渲染所述第二元素对应的占位标识。
4.根据权利要求1-3任一项所述的页面中元素的定位方法，其特征在于，所述元素定位指令为关键字段检索指令，所述定位信息为检索字段，所述元素缓存数据包括各个元素的被检索字段；
所述根据所述定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，包括：
遍历所述元素缓存数据中的各个元素，确定所述各个元素的被检索字段和所述检索字段的匹配度；
根据所述匹配度从所述各个元素中筛选出与所述检索字段匹配的指定元素。
5.根据权利要求4所述的页面中元素的定位方法，其特征在于，所述元素缓存数据还包括各个元素的占位标识；
所述更新所述指定元素的渲染属性，包括：
将所述指定元素的渲染属性由第二属性修改为第一属性；
从所述元素缓存数据中获取所述指定元素的占位标识；
根据所述占位标识，在所述目标可视页面中定位至所述指定元素的渲染位置。
6.根据权利要求1-3任一项所述的页面中元素的定位方法，其特征在于，所述元素定位指令为页面操作指令，所述定位信息为页面操作信息；
所述根据所述定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，包括：
根据所述页面操作信息，确定所述目标可视页面中的待渲染位置；
将所述待渲染位置的占位标识对应的元素确定为匹配的指定元素。
7.根据权利要求1-3任一项所述的页面中元素的定位方法，其特征在于，所述绘制所述目标可视页面对应的更新可视页面之后，还包括：
在所述更新可视页面中，对所述指定元素进行标记。
8.一种页面中元素的定位装置，其特征在于，所述装置包括：
监听模块，被配置为监听目标可视页面中的元素定位指令，其中，所述目标可视页面基于懒加载方式渲染，所述元素定位指令携带定位信息，所述目标可视页面为单页面应用，所述目标可视页面中各个元素设置有占位标识，所述占位标识用于表示在相应位置有元素，所述元素是指进行展示的组件单元；
定位模块，被配置为根据所述定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，所述元素缓存数据为基于所述目标可视页面包括的各个元素按照设定格式封装获得；
渲染模块，被配置为更新所述指定元素的渲染属性，根据所述指定元素的当前渲染属性，创建对应的虚拟文档对象模型DOM树；对比虚拟DOM树和所述目标可视页面的真实DOM树，确定差异元素节点；根据所述差异元素节点，渲染对应的指定元素，绘制所述目标可视页面对应的更新可视页面。
9.一种计算设备，包括：
存储器和处理器；
所述存储器用于存储计算机可执行指令，所述处理器用于执行所述计算机可执行指令，以实现下述方法：
监听目标可视页面中的元素定位指令，其中，所述目标可视页面基于懒加载方式渲染，所述元素定位指令携带定位信息，所述目标可视页面为单页面应用，所述目标可视页面中各个元素设置有占位标识，所述占位标识用于表示在相应位置有元素，所述元素是指进行展示的组件单元；
根据所述定位信息，在元素缓存数据中进行定位，获得匹配的指定元素，其中，所述元素缓存数据为基于所述目标可视页面包括的各个元素按照设定格式封装获得；
更新所述指定元素的渲染属性，根据所述指定元素的当前渲染属性，创建对应的虚拟文档对象模型DOM树；对比虚拟DOM树和所述目标可视页面的真实DOM树，确定差异元素节点；根据所述差异元素节点，渲染对应的指定元素，绘制所述目标可视页面对应的更新可视页面。
10.一种计算机可读存储介质，其存储有计算机指令，该指令被处理器执行时实现权利要求1至7任意一项所述的页面中元素的定位方法的步骤。
CN202211079214.3A 2022-09-05 2022-09-05 页面中元素的定位方法及装置 Active CN115438282B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211079214.3A CN115438282B (zh) 2022-09-05 2022-09-05 页面中元素的定位方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211079214.3A CN115438282B (zh) 2022-09-05 2022-09-05 页面中元素的定位方法及装置

Publications (2)

Publication Number Publication Date
CN115438282A CN115438282A (zh) 2022-12-06
CN115438282B true CN115438282B (zh) 2024-01-23

Family

ID=84247705

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211079214.3A Active CN115438282B (zh) 2022-09-05 2022-09-05 页面中元素的定位方法及装置

Country Status (1)

Country Link
CN (1) CN115438282B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102622395A (zh) * 2011-12-20 2012-08-01 深信服网络科技（深圳）有限公司 虚拟化应用辅助访问网页的方法、服务器及客户端
CN103020092A (zh) * 2011-09-28 2013-04-03 深圳市金蝶中间件有限公司 懒加载树中定位节点的方法和系统
CN105786352A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 快速定位页面内容的方法、装置及移动终端
CN111259284A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 页面懒加载的方法和装置、存储介质和处理器
CN112287258A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 页面渲染方法、装置、设备和存储介质
CN112612845A (zh) * 2020-12-22 2021-04-06 中国建设银行股份有限公司 一种组织机构视图实现方法、装置、电子设备及可读存储介质
CN114528509A (zh) * 2022-02-17 2022-05-24 恒安嘉新（北京）科技股份公司 一种页面显示处理方法、装置、电子设备及存储介质

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103020092A (zh) * 2011-09-28 2013-04-03 深圳市金蝶中间件有限公司 懒加载树中定位节点的方法和系统
CN102622395A (zh) * 2011-12-20 2012-08-01 深信服网络科技（深圳）有限公司 虚拟化应用辅助访问网页的方法、服务器及客户端
CN105786352A (zh) * 2014-12-26 2016-07-20 阿里巴巴集团控股有限公司 快速定位页面内容的方法、装置及移动终端
CN111259284A (zh) * 2018-11-30 2020-06-09 阿里巴巴集团控股有限公司 页面懒加载的方法和装置、存储介质和处理器
CN112287258A (zh) * 2020-09-25 2021-01-29 长沙市到家悠享网络科技有限公司 页面渲染方法、装置、设备和存储介质
CN112612845A (zh) * 2020-12-22 2021-04-06 中国建设银行股份有限公司 一种组织机构视图实现方法、装置、电子设备及可读存储介质
CN114528509A (zh) * 2022-02-17 2022-05-24 恒安嘉新（北京）科技股份公司 一种页面显示处理方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN115438282A (zh) 2022-12-06

Similar Documents

Publication Publication Date Title
US20190251143A1 (en) Web page rendering method and related device
US8707159B1 (en) Translating tabular data formatted for one display device to a format for display on other display device
CN102779167B (zh) 在移动终端中显示网页的方法及系统
WO2021178731A1 (en) Neurological movement detection to rapidly draw user attention to search results
US8700988B2 (en) Selectively interpreted portal page layout template
US10740540B2 (en) Techniques for programmatic magnification of visible content elements of markup language documents
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
US8489985B2 (en) Automatically adjusting a webpage
US20180191798A1 (en) Methods and systems for server-side rendering of native content for presentation
US20210149842A1 (en) System and method for display of document comparisons on a remote device
US20140380229A1 (en) System, method and user interface for designing customizable products from a mobile device
US20070214422A1 (en) Framework for implementing skins into a portal server
US20100083172A1 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
US20120144291A1 (en) Apparatus and method for controlling web browser display
JP6975339B2 (ja) デジタルコンポーネントのバックドロップレンダリング
Bader et al. Responsive web design techniques
KR101340588B1 (ko) 웹페이지 구성방법 및 그 장치
US20080282150A1 (en) Finding important elements in pages that have changed
CN110968314A (zh) 一种页面生成方法及装置
CN111783019A (zh) 浏览器子页面创建方法、装置、计算机设备和存储介质
CN112243517A (zh) 资源上单个样式定义标识符的条件解释
EP1204030A1 (en) Extending hypermedia documents by adding tagged attributes
CN117390326A (zh) 页面管理方法、装置、设备以及存储介质
Nebeling et al. Tools and architectural support for crowdsourced adaptation of web interfaces
CN115438282B (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