CN106598574B - 页面渲染的方法和装置 - Google Patents
页面渲染的方法和装置 Download PDFInfo
- Publication number
- CN106598574B CN106598574B CN201611054075.3A CN201611054075A CN106598574B CN 106598574 B CN106598574 B CN 106598574B CN 201611054075 A CN201611054075 A CN 201611054075A CN 106598574 B CN106598574 B CN 106598574B
- Authority
- CN
- China
- Prior art keywords
- node
- tree
- current
- page
- subtree
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 74
- 238000000034 method Methods 0.000 title claims abstract description 46
- 238000000547 structure data Methods 0.000 claims description 26
- 230000004044 response Effects 0.000 claims description 12
- 125000004122 cyclic group Chemical group 0.000 claims description 4
- 230000001131 transforming effect Effects 0.000 claims description 2
- 238000012163 sequencing technique Methods 0.000 claims 2
- 238000010586 diagram Methods 0.000 description 22
- 238000012545 processing Methods 0.000 description 5
- 239000012634 fragment Substances 0.000 description 3
- 238000006243 chemical reaction Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
- G06F40/143—Markup, e.g. Standard Generalized Markup Language [SGML] or Document Type Definition [DTD]
-
- 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
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/448—Execution paradigms, e.g. implementations of programming paradigms
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及一种页面渲染的方法和装置,包括:获取更新后的当前节点树,查找所述当前节点树中的当前集合子树,获取所述当前集合子树对应的标识;判断所述标识是否与原始节点树的原始集合子树的标识相同,如果相同,则保留所述原始集合子树在当前页面对应的原始视图节点;如果不相同,则生成所述当前集合子树对应的更新视图节点;根据所述原始视图节点和更新视图节点渲染生成更新后的页面,能提高页面更新显示的效率。
Description
技术领域
本发明涉及计算机技术领域,特别是涉及一种页面渲染的方法和装置。
背景技术
随着计算机技术的发展,用户可以在终端上安装各种应用程序,在应用程序内部展示页面或通过浏览器展示页面,从而浏览页面获取感兴趣的内容。
计算机通过渲染实现页面的显示,渲染是指将程序代码根据样式规则显示在浏览器窗口或应用程序内部窗口中的过程。在页面更新时,往往需要将更新后的程序代码重新转化为更新后的页面视图数据,再根据更新后的页面视图数据显示页面,将程序代码转化为页面视图数据需要耗费大量时间,导致页面的更新显示效率低。
发明内容
基于此,有必要针对上述技术问题,提供一种页面渲染的方法和装置,提高页面更新显示的效率。
一种页面渲染的方法,所述方法包括:
获取更新后的当前节点树,查找所述当前节点树中的当前集合子树,获取所述当前集合子树对应的标识;
判断所述标识是否与原始节点树的原始集合子树的标识相同,如果相同,则保留所述原始集合子树在当前页面对应的原始视图节点;
如果不相同,则生成所述当前集合子树对应的更新视图节点;
根据所述原始视图节点和更新视图节点渲染生成更新后的页面。
一种页面渲染的装置,所述装置包括:
获取模块,用于获取更新后的当前节点树,查找所述当前节点树中的当前集合子树,获取所述当前集合子树对应的标识;
判断模块,用于判断所述标识是否与原始节点树的原始集合子树的标识相同,如果相同,则进入保留模块,否则进入生成模块;
保留模块,用于保留所述原始集合子树在当前页面对应的原始视图节点;
生成模块,用于生成所述当前集合子树对应的更新视图节点;
渲染模块,用于根据所述原始视图节点和更新视图节点渲染生成更新后的页面。
上述页面渲染的方法和装置,通过获取更新后的当前节点树,查找当前节点树中的当前集合子树,获取当前集合子树对应的标识,判断标识是否与原始节点树的原始集合子树的标识相同,如果相同,则保留原始集合子树在当前页面对应的原始视图节点,如果不相同,则生成当前集合子树对应的更新视图节点,根据原始视图节点和更新视图节点渲染生成更新后的页面,通过比较当前节点树中当前集合子树对应的标识与原始节点树的原始集合子树的标识,识别页面中不需要进行变更的视图节点保留不需要重新绘制,只需要增量生成更新视图节点进行增量渲染,不需要生成整个当前节点树对应的视图节点,节省了页面渲染时间,可提高页面更新的效率。
附图说明
图1为一个实施例中页面渲染的方法的应用环境图;
图2为一个实施例中图1中终端的内部结构图;
图3为一个实施例中页面渲染的方法的流程图;
图4为一个实施例中子树与视图节点的对应关系示意图;
图5为一个实施例中生成当前节点树的流程图;
图6为另一个实施例中生成当前节点树的流程图;
图7为一个实施例中根据视图节点进行渲染的流程图;
图8为一个具体的实施例中页面对应的初始页面结构数据示意图;
图9为一个具体的实施例中第一节点树逻辑形式示意图;
图10为一个具体的实施例中根据第一节点树渲染生成的页面示意图;
图11为一个具体的实施例中第一节点树逻辑形式与第二节点树逻辑形式对比示意图;
图12为一个具体的实施例中根据第二节点树渲染生成的页面示意图;
图13为一个实施例中页面渲染的装置的结构框图;
图14为另一个实施例中页面渲染的装置的结构框图;
图15为再一个实施例中页面渲染的装置的结构框图;
图16为一个实施例中渲染模块的结构框图。
具体实施方式
图1为一个实施例中页面渲染的方法运行的应用环境图。如图1所示,该应用环境包括终端110和服务器120,其中终端110、服务器120通过网络进行通信。
终端110,可为智能手机、平板电脑、笔记本电脑、台式计算机等,但并不局限于此。终端110可从服务器120获取页面结构数据并显示当前页面,在对当前页面进行更新时,终端110通过比较当前节点树中当前集合子树对应的标识与原始节点树的原始集合子树的标识进行增量渲染,只需要增量生成更新视图节点,不需要生成整个当前节点树对应的视图节点,节省了页面渲染时间,可提高页面更新的效率。
在一个实施例中,如图所示,图1中的终端110的内部结构如图2所示,该终端110包括通过系统总线连接的处理器、图形处理单元、存储介质、内存、网络接口、显示屏幕和输入设备。其中,终端110的存储介质存储有操作系统,还包括页面渲染的装置,该装置用于实现一种适用于终端的页面渲染的方法。该处理器用于提供计算和控制能力,支撑整个终端110的运行。终端110中的图形处理单元用于至少提供显示界面的绘制能力,如渲染页面等,内存为存储介质中的页面渲染的装置的运行提供环境,网络接口用于与服务器120进行网络通信,如接收服务器120发送的页面结构数据等。显示屏幕用于显示应用界面等,输入设备用于接收用户输入的命令或数据等。对于带触摸屏的终端110,显示屏幕和输入设备可为触摸屏。图2中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的终端的限定,具体的终端可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,如图3所示,提供了一种页面渲染的方法,应用于上述应用环境中的终端来举例说明,包括以下步骤:
步骤S210,获取更新后的当前节点树,查找当前节点树中的当前集合子树,获取当前集合子树对应的标识。
具体的,节点树是以页面结构数据中的元素为节点,存在自上而下的父节点与子节点关系的树形数据结构,节点树中的一个子节点可称为一个子树。节点树可以是前端能直接解析的标准数据结构,也可以是需要转化为标准数据结构的自定义树形数据结构。集合子树是一个或多个子树形成的不同子树间存在关联关系的具有相对独立的特征和状态的集合,如用户帐户子树和用户帐户对应的帐户额度子树形成一个集合子树,当用户帐户不变时,对应的帐户额度在下一次页面更新时可能保持不变。可通过设置预设节点或设置预设属性或通过预设文本字符串区分各个集合子树。每个集合子树都有对应的标识,此标识是唯一的,标识可以是集合子树对应的变量的属性值,此属性值是唯一的字符串或数字,也可以是循环中的变量本身,要求变量本身是唯一的字符串或数字。
步骤S220,判断标识是否与原始节点树的原始集合子树的标识相同,如果相同,则进入步骤S230,否则进入步骤S240。
具体的,如果原始节点树的原始集合子树的标识与当前节点树中的当前集合子树的标识相同,则说明当前页面中已经存在此集合子树对应的视图节点,不需要重新创建。由于从节点树至生成节点树对应的视图数据渲染展现在页面上,需要耗费大量时间,本实施例中根据当前集合子树的标识进入不同的处理步骤,在更新后的页面中存在需要保持原始特征和状态的视图节点时,不需要重新生成视图数据,提高了渲染的速度。
步骤S230,保留原始集合子树在当前页面对应的原始视图节点。
具体的,视图节点是展现在页面中与子树对应的视图数据,如图4所示,为一个集合子树中的各个子树与视图节点的对应关系,其中子树240对应了视图view节点260,子树250对应了视图text节点270。获取与原始节点树的原始集合子树的标识相同的当前集合子树对应的原始视图节点,保留所述原始视图节点,从而不需要重新进行绘制,减少了渲染时间。
步骤S240,生成当前集合子树对应的更新视图节点。
具体的,对于与原始节点树的原始集合子树的标识不相同的当前集合子树,可能是新增的集合子树,也可能是数据发生变化的原始集合子树,此时需要重新进行绘制,通过解析当前集合子树渲染生成对应的更新视图节点。
步骤S250,根据原始视图节点和更新视图节点渲染生成更新后的页面。
具体的,根据当前节点树的结构对原始视图节点和更新视图节点进行布局,如进行排序、插入等,得到对应的展示位置,从而渲染生成更新后的页面。
本实施例中,通过获取更新后的当前节点树,查找当前节点树中的当前集合子树,获取当前集合子树对应的标识,判断标识是否与原始节点树的原始集合子树的标识相同,如果相同,则保留原始集合子树在当前页面对应的原始视图节点,如果不相同,则生成当前集合子树对应的更新视图节点,根据原始视图节点和更新视图节点渲染生成更新后的页面,通过比较当前节点树中当前集合子树对应的标识与原始节点树的原始集合子树的标识,识别页面中不需要进行变更的视图节点保留不需要重新绘制,只需要增量生成更新视图节点进行增量渲染,不需要生成整个当前节点树对应的视图节点,节省了页面渲染时间,可提高页面更新的效率。
在一个实施例中,如图5所示,步骤S210之前还包括:
步骤S310,获取对当前页面的触发事件,根据触发事件获取对应的事件响应数据,根据事件响应数据得到当前数据集合。
具体的,每个触发事件都对应了匹配的事件响应,可先确定触发事件的事件类型,进而采用页面逻辑代码中与该事件类型相匹配的逻辑代码处理该事件,得到相应的事件响应数据。
步骤S320,通过脚本语言描述的页面生成方法根据当前数据集合生成对应的当前集合子树,生成当前集合子树对应的标识,输出当前节点树。
具体的,脚本语言是一种解释性的编程语言,如JavaScript脚本语言或者VBScript,对脚本语言的具体类型不作限定。页面生成方法是脚本语言编写的用于根据数据变量集合输出节点树的逻辑,由于是脚本语言描述,不存在扩展的自定义语法,客户端可直接对其进行解析,如通过浏览器或webview等对其进行解析。页面生成方法中包括了数据变量集合在不同逻辑条件下对应的页面生成方法片段,从而能根据不同的数据变量集合满足的逻辑条件获取对应的目标页面生成方法片段,根据目标页面生成方法片段输出对应的节点树,不同的节点树可进行解析渲染得到不同的视图节点,从而节点树的更新导致页面视图的更新。其中输出的节点树中包括了根据预设条件形成的集合子树,各个集合子树可在页面更新的过程中根据当前数据集合更新对应的特征和状态。
数据变量集合是页面展示过程中需要传递至页面生成方法的所有变量的集合,在页面展示过程中,可通过对页面的操作获取事件响应数据为数据变量集合中的变量赋值得到当前数据集合,从而更新页面,如通过对页面上的按钮的点击,获取按钮绑定的当前数据,将页面展示的数据更新为当前数据。当前数据可为原始视图节点对应的更新后的数据,也可为新增加视图节点时所需的数据。根据当前数据对当前集合子树设置对应的标识,如果当前数据与更新前的页面对应的数据相同,则当前集合子树与原始集合子树的标识相同。如果当前数据对应了新增加的集合子树,而新增加的集合子树对应的标识为唯一的原始集合子树中不存在标识。
本实施例中,事件对应的事件响应可根据需要自定义,从而通过事件的触发通过预设逻辑更新数据变量的值,方便灵活,并根据更新的数据集合设置集合子树对应的标识,生成更新后的节点树,从而后续可根据集合子树对应的标识快速渲染新的页面。
在一个实施例中,页面生成方法为通过由扩展标记语言生成的初始页面结构数据编译生成。
具体的,标记语言是一种将文本以及文本相关的其他信息结合起来,展现出关于文档结构和数据处理细节的文字编码,扩展标记语言是指基于XML(Extensible MarkupLanguage,可扩展标记语言)扩展的自定义标记语言。通过扩展标记语言生成的初始页面结构数据可通过自定义的语法结构灵活方便的描述页面结构。初始页面结构数据中往往包括了不同的标签,每个标签都存在标签的属性、标签的内容等数据,标签的属性可能为控制属性,标签的内容中可包括表达式、文本内容等。其中标签的属性用于对标签进行修饰,如定义标签本身的样式、需要的数据等。需要对组成初始页面结构数据的各个元素进行分析,获取其中的数据处理逻辑从而将各个标签携带的逻辑、数据转换为以数据变量集合为输入,以节点树为输出的页面生成方法,由于节点树是已经编译完成的存在节点关系的数据结构,从而不需要在终端再进行解析,在前端得到节点树时可直接转换为前端能解析的携带节点关系的标准数据结构,从而快速的进行页面的渲染。
在一个实施例中,步骤S210中查找当前节点树中的当前集合子树的步骤包括:判断节点树中是否存在虚拟节点,如果存在,则获取虚拟节点包裹的子树得到当前集合子树。
具体的,虚拟节点只用于识别集合子树,不会渲染成最终的视图。每个虚拟节点都对应了一个集合子树,存在对应的集合子树标识,其中集合子树标识可作为虚拟节点的属性。虚拟节点包括虚拟节点对应的起始节点和终止节点,起始节点和终止节点之间的部分形成集合子树。可根据对子树类型的识别,通过逻辑判断设置虚拟节点。通过虚拟节点可快速识别得到当前集合子树,不需要进行字符串的对比等,简单方便。
在一个实施例中,如图6所示,步骤S210之前,还包括:
步骤S410,获取由循环控制属性对应的标签生成的子树及其儿子树或通过连续的选择控制属性对应的标签生成的子树得到集合子树。
具体的,使用循环控制属性绑定一个数组,即可使用数组中各项的数据重复渲染目标对象,如目标对象可为一个列表。循环控制属性对应的标签可为多个,通过预设语法标签,如block标签将多个节点包装起来,使得一次性渲染多个节点。因为每次循环处理的对象都具有相同的结构,将一次循环处理的子树及其儿子树进行组合作为集合子树的组成部分。而连续的选择控制属性对应的标签生成的子树也往往相对独立,作为集合子树的组成部分。
步骤S420,在集合子树的起始位置设置虚拟节点对应的起始节点,在集合子树的终止位置设置虚拟节点对应的终止节点,生成包含集合子树的当前节点树。
具体的,通过起始节点和终止节点将上一步得到的集合子树包裹起来,形成一个相对独立,存在特征和状态的单元,生成包含集合子树的当前节点树。
本实施例中,通过标签的控制属性自动识别得到集合子树,可在代码运行时通过逻辑判断自动生成对应的包含集合子树的当前节点树,不需要在由扩展标记语言生成的初始页面结构数据中由开发人员自定义集合子树,简单方便。
在一个实施例中,步骤S240包括:将当前集合子树变换生成描述视图的标准结构数据,根据标准结构数据渲染生成对应的更新视图节点。
具体的,当前集合子树可以是自定义的树形结构,需要先变换生成描述视图的标准结构数据,描述视图的标准结构数据是指可直接在终端进行解析的视图数据结构,如变换生成HTML(HyperText Markup Language,超级文本标记语言)数据,再解析标准结构数据渲染生成对应的更新视图节点。自定义的树形结构更加灵活方便,使得生成的页面更加多样。
在一个实施例中,页面为运行于操作系统上的母应用中的子应用的页面。
具体的,子应用是依附于母应用运行的应用程序,可通过母应用下载、启动、运行、关闭子应用。母应用可以是社交应用、专门支持子应用的专用应用、文件管理应用、邮件应用或者游戏应用等。社交应用包括即时通信应用、SNS(Social Network Service,社交网站)应用或者直播应用等。子应用则是可在母应用提供的环境中实现的应用,子应用具体可以是社交应用、文件管理应用、邮件应用或者游戏应用等。每个子应用中的页面都可通过增量渲染的方式进行渲染,从而提高子应用中的页面的渲染速度。
在一个实施例中,如图7所示,步骤S250包括:
步骤S251,判断是否存在更新视图节点,如果存在,则进入步骤S252,否则进入步骤S253。
具体的,如果不存在更新视图节点,则说明更新后的页面中没有新增的视图数据,只需要对原始视图数据进行位置的修改即可完成页面的渲染。
步骤S252,根据当前节点树将原始视图节点和更新视图节点进行排序,根据排序后的顺序渲染原始视图节点和更新视图节点显示更新后的页面。
具体的,更新视图节点可出现在原始视图节点的上方、下方或插入原始视图节点的中间位置,且原始视图节点各个节点间的相对位置也可进行调整,根据当前节点树中各个集合子树的位置关系将原始视图节点和更新视图节点进行排序,根据目标顺序依次渲染原始视图节点和更新视图节点显示更新后的页面。
步骤S253,将原始视图节点进行重排序后,根据排序后的顺序渲染原始视图节点显示更新后的页面。
具体的,如果没有新增更新视图节点,则可直接将原始视图节点进行重排序,就可快速进行渲染生成更新后的页面。
在一个具体的实施例中,初始页面结构数据为图8所示,通过变量key为各个集合子树的标识进行设置,当输入数据为:
{"list":[{"account":"A","amount":100},{"account":"B","amount":0}]}时,生成的第一节点树逻辑形式示意图如图9所示,包括第一原始集合子树510和第二原始集合子树520,第一原始集合子树标识为A,第二原始集合子树标识为B。对应的页面如图10所示,页面中包括第一原始视图节点510a和第二原始视图节点520a。当输入数据变为:
{"list":[{"account":"A","amount":100},{"account":"C","amount":50"},{"account":"B","amount":0},]}时,生成的第二节点树逻辑形式示意图如图11中右图所示,包括第一当前集合子树530、第二当前集合子树540和第三当前集合子树550,第一当前集合子树标识为A,第二当前集合子树标识为C,第三当前集合子树标识为B,其中图11中左图为第一节点树逻辑形式示意图,形成与第二节点树逻辑形式的对比。
由于第一节点树与第二节点树中存在标识相同的集合子树,其中第一当前集合子树530与第一原始集合子树510标识相同,第三当前集合子树550与第二原始集合子树520标识相同,从而在更新页面时,只需要生成第二当前集合子树540对应的更新视图节点540a,并获取保留的集合子树对应的第一原始视图节点510a和第二原始视图节点520a,就可快速渲染生成更新后的页面,更新后的页面如图12所示,由于第一原始视图节点510a和第二原始视图节点520a是之前页面渲染时保留的视图节点,不需要重新创建,所以本次更新视图只需要生成更新视图节点540a,渲染代价被优化,提高了渲染速度。
在一个实施例中,如图13所示,提供了一种页面渲染的装置,包括:
获取模块610,用于获取更新后的当前节点树,查找当前节点树中的当前集合子树,获取当前集合子树对应的标识。
判断模块620,用于判断标识是否与原始节点树的原始集合子树的标识相同,如果相同,则进入保留模块630,否则进入生成模块640。
保留模块630,用于保留原始集合子树在当前页面对应的原始视图节点。
生成模块640,用于生成当前集合子树对应的更新视图节点。
渲染模块650,用于根据原始视图节点和更新视图节点渲染生成更新后的页面。
在一个实施例中,如图14所示,装置还包括:
第一节点树生成模块660,用于获取对当前页面的触发事件,根据触发事件获取对应的事件响应数据,根据事件响应数据得到当前数据集合,通过脚本语言描述的页面生成方法根据当前数据集合生成对应的当前集合子树,生成当前集合子树对应的标识,输出当前节点树。
在一个实施例中,页面生成方法为通过由扩展标记语言生成的初始页面结构数据编译生成。
在一个实施例中,获取模块610还用于判断节点树中是否存在虚拟节点,如果存在,则获取虚拟节点包裹的子树得到当前集合子树。
在一个实施例中,如图15所示,装置还包括:
第二节点树生成模块670,用于获取由循环控制属性对应的标签生成的子树及其儿子树或通过连续的选择控制属性对应的标签生成的子树得到集合子树,在集合子树的起始位置设置虚拟节点对应的起始节点,在所述集合子树的终止位置设置虚拟节点对应的终止节点,生成包含集合子树的当前节点树。
在一个实施例中,生成模块640还用于将当前集合子树变换生成描述视图的标准结构数据,根据标准结构数据渲染生成对应的更新视图节点。
在一个实施例中,页面为运行于操作系统上的母应用中的子应用的页面。
在一个实施例中,如图16所示,渲染模块650包括:
判断单元651,用于判断是否存在更新视图节点,如果存在,则进入第一渲染单元652,否则进入第二渲染单元653。
第一渲染单元652,用于根据当前节点树将所述原始视图节点和更新视图节点进行排序,根据排序后的顺序渲染原始视图节点和更新视图节点显示更新后的页面。
第二渲染单元653,用于将原始视图节点进行重排序后,根据排序后的顺序渲染所述原始视图节点显示更新后的页面。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述程序可存储于一计算机可读取存储介质中,如本发明实施例中,该程序可存储于计算机系统的存储介质中,并被该计算机系统中的至少一个处理器执行,以实现包括如上述各方法的实施例的流程。其中,所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory,ROM)或随机存储记忆体(Random AccessMemory,RAM)等。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。
Claims (12)
1.一种页面渲染的方法,所述方法包括:
通过脚本语言描述的页面生成方法根据当前数据集合生成对应的当前集合子树,生成当前集合子树对应的标识,输出当前节点树,所述当前集合子树对应的标识是根据比较当前数据与更新前的页面对应的数据对当前集合子树设置的;
获取更新后的当前节点树,判断所述当前节点树中是否存在虚拟节点,如果存在,则获取所述虚拟节点包裹的子树得到当前集合子树,每个虚拟节点都对应了一个集合子树,存在对应的集合子树标识,获取所述当前集合子树对应的标识,集合子树是多个子树形成的不同子树间存在关联关系的具有相对独立的特征和状态的集合,所述子树为节点树的节点,所述节点树是以页面结构数据中的元素为节点;
判断所述标识是否与原始节点树的原始集合子树的标识相同,如果相同,则保留所述原始集合子树在当前页面对应的原始视图节点,视图节点是展现在页面中与所述子树对应的视图数据;
如果不相同,则生成所述当前集合子树对应的更新视图节点;
根据所述原始视图节点和更新视图节点渲染生成更新后的页面,所述页面为运行于操作系统上的母应用中的子应用的页面,所述子应用是依附于母应用运行的应用程序,通过所述母应用下载、启动、运行、关闭所述子应用,所述子应用在所述母应用提供的环境中实现的应用。
2.根据权利要求1所述的方法,其特征在于,所述获取更新后的当前节点树的步骤之前,还包括:
获取对当前页面的触发事件,根据所述触发事件获取对应的事件响应数据;
根据所述事件响应数据得到当前数据集合。
3.根据权利要求2所述的方法,其特征在于,所述页面生成方法为通过由扩展标记语言生成的初始页面结构数据编译生成。
4.根据权利要求1所述的方法,其特征在于,所述获取更新后的当前节点树的步骤之前,还包括:
获取由循环控制属性对应的标签生成的子树及其儿子树或通过连续的选择控制属性对应的标签生成的子树得到集合子树;
在所述集合子树的起始位置设置虚拟节点对应的起始节点;
在所述集合子树的终止位置设置虚拟节点对应的终止节点,生成包含所述集合子树的当前节点树。
5.根据权利要求1所述的方法,其特征在于,所述生成所述当前集合子树对应的更新视图节点的步骤包括:
将所述当前集合子树变换生成描述视图的标准结构数据;
根据所述标准结构数据渲染生成对应的更新视图节点。
6.根据权利要求1所述的方法,其特征在于,所述根据所述原始视图节点和更新视图节点生成更新后的页面的步骤包括:
判断是否存在更新视图节点,如果存在,则根据当前节点树将所述原始视图节点和更新视图节点进行排序,根据排序后的顺序渲染原始视图节点和更新视图节点显示更新后的页面;
如果不存在,则将所述原始视图节点进行重排序后,根据排序后的顺序渲染所述原始视图节点显示更新后的页面。
7.一种页面渲染的装置,其特征在于,所述装置包括:
第一节点树生成模块,通过脚本语言描述的页面生成方法根据当前数据集合生成对应的当前集合子树,生成当前集合子树对应的标识,输出当前节点树,所述当前集合子树对应的标识是根据比较当前数据与更新前的页面对应的数据对当前集合子树设置的;
获取模块,用于获取更新后的当前节点树,判断所述节点树中是否存在虚拟节点,如果存在,则获取所述虚拟节点包裹的子树得到当前集合子树,每个虚拟节点都对应了一个集合子树,存在对应的集合子树标识,获取所述当前集合子树对应的标识,集合子树是多个子树形成的不同子树间存在关联关系的具有相对独立的特征和状态的集合,所述子树为节点树的节点,所述节点树是以页面结构数据中的元素为节点;
判断模块,用于判断所述标识是否与原始节点树的原始集合子树的标识相同,如果相同,则进入保留模块,否则进入生成模块;
保留模块,用于保留所述原始集合子树在当前页面对应的原始视图节点,视图节点是展现在页面中与所述子树对应的视图数据;
生成模块,用于生成所述当前集合子树对应的更新视图节点;
渲染模块,用于根据所述原始视图节点和更新视图节点渲染生成更新后的页面,所述页面为运行于操作系统上的母应用中的子应用的页面,所述子应用是依附于母应用运行的应用程序,通过所述母应用下载、启动、运行、关闭所述子应用,所述子应用在所述母应用提供的环境中实现的应用。
8.根据权利要求7所述的装置,其特征在于,所述
第一节点树生成模块还用于获取对当前页面的触发事件,根据所述触发事件获取对应的事件响应数据,根据所述事件响应数据得到当前数据集合。
9.根据权利要求7所述的装置,其特征在于,所述页面生成方法为通过由扩展标记语言生成的初始页面结构数据编译生成。
10.根据权利要求7所述的装置,其特征在于,所述装置还包括:
第二节点树生成模块,用于获取由循环控制属性对应的标签生成的子树及其儿子树或通过连续的选择控制属性对应的标签生成的子树得到集合子树,在所述集合子树的起始位置设置虚拟节点对应的起始节点,在所述集合子树的终止位置设置虚拟节点对应的终止节点,生成包含所述集合子树的当前节点树。
11.根据权利要求7所述的装置,其特征在于,所述生成模块还用于将所述当前集合子树变换生成描述视图的标准结构数据,根据所述标准结构数据渲染生成对应的更新视图节点。
12.根据权利要求7所述的装置,其特征在于,所述渲染模块包括:
判断单元,用于判断是否存在更新视图节点,如果存在,则进入第一渲染单元,否则进入第二渲染单元;
第一渲染单元,用于根据当前节点树将所述原始视图节点和更新视图节点进行排序,根据排序后的顺序渲染原始视图节点和更新视图节点显示更新后的页面;
第二渲染单元,用于将所述原始视图节点进行重排序后,根据排序后的顺序渲染所述原始视图节点显示更新后的页面。
Priority Applications (3)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611054075.3A CN106598574B (zh) | 2016-11-25 | 2016-11-25 | 页面渲染的方法和装置 |
PCT/CN2017/111274 WO2018095261A1 (zh) | 2016-11-25 | 2017-11-16 | 页面渲染的方法、装置和存储介质 |
US16/290,642 US10824691B2 (en) | 2016-11-25 | 2019-03-01 | Page rendering method, device, and data storage medium |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201611054075.3A CN106598574B (zh) | 2016-11-25 | 2016-11-25 | 页面渲染的方法和装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106598574A CN106598574A (zh) | 2017-04-26 |
CN106598574B true CN106598574B (zh) | 2020-02-18 |
Family
ID=58591973
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201611054075.3A Active CN106598574B (zh) | 2016-11-25 | 2016-11-25 | 页面渲染的方法和装置 |
Country Status (3)
Country | Link |
---|---|
US (1) | US10824691B2 (zh) |
CN (1) | CN106598574B (zh) |
WO (1) | WO2018095261A1 (zh) |
Families Citing this family (28)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106598574B (zh) * | 2016-11-25 | 2020-02-18 | 腾讯科技(深圳)有限公司 | 页面渲染的方法和装置 |
CN107368562B (zh) * | 2017-07-07 | 2020-06-02 | 北京小米移动软件有限公司 | 页面的显示方法、装置及终端 |
CN108255486B (zh) * | 2017-12-19 | 2021-12-10 | 东软集团股份有限公司 | 用于表单设计的视图转换方法、装置和电子设备 |
CN108647025A (zh) * | 2018-05-15 | 2018-10-12 | 浙江口碑网络技术有限公司 | 文档对象模型中节点的处理方法及装置、电子和存储设备 |
CN108829485B (zh) * | 2018-06-25 | 2021-03-02 | 腾讯科技(深圳)有限公司 | 应用界面布局的更新方法、装置、存储介质及计算机设备 |
CN109299158A (zh) * | 2018-10-12 | 2019-02-01 | 成都北科维拓科技有限公司 | 一种数据可视化方法及系统 |
CN109558159B (zh) * | 2018-12-11 | 2022-02-15 | 网易(杭州)网络有限公司 | 游戏中用户界面的更新方法和装置 |
CN109885794B (zh) * | 2019-01-24 | 2020-10-20 | 曲阜师范大学 | 基于区块链的循环式同步更新网页的处理方法 |
CN110647322B (zh) * | 2019-08-15 | 2020-12-18 | 北京三快在线科技有限公司 | 列表渲染方法、装置、电子设备和计算机可读介质 |
CN110807761B (zh) * | 2019-09-18 | 2023-11-21 | 腾讯科技(深圳)有限公司 | 标注面板生成方法、装置、存储介质和计算机设备 |
CN110930491B (zh) * | 2019-11-14 | 2024-02-13 | 北京达佳互联信息技术有限公司 | 节点渲染方法、装置、电子设备和存储介质 |
CN110929199B (zh) * | 2019-12-05 | 2024-03-01 | 广州酷狗计算机科技有限公司 | 内容显示方法、装置、计算机设备、存储介质及程序产品 |
CN112416339A (zh) * | 2020-02-17 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | 页面开发方法、装置、计算机设备 |
CN111353112A (zh) * | 2020-02-27 | 2020-06-30 | 百度在线网络技术(北京)有限公司 | 页面处理方法、装置、电子设备和计算机可读介质 |
CN111539186B (zh) * | 2020-04-29 | 2023-05-09 | 烽火通信科技股份有限公司 | 一种应用于html5的大数据树组件实现方法及系统 |
CN111741257B (zh) * | 2020-05-21 | 2022-01-28 | 深圳市商汤科技有限公司 | 数据处理方法及装置、电子设备及存储介质 |
CN113761428A (zh) * | 2020-06-05 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、系统、存储介质及电子设备 |
CN112100552A (zh) * | 2020-08-06 | 2020-12-18 | 北京沃东天骏信息技术有限公司 | 页面渲染方法、装置、设备及计算机可读存储介质 |
CN112395483B (zh) * | 2020-11-13 | 2024-03-01 | 郑州阿帕斯数云信息科技有限公司 | 基于树形结构的页面渲染方法及装置 |
CN112558968B (zh) * | 2020-12-22 | 2023-10-17 | 北京飞讯数码科技有限公司 | 一种资源树视图的生成方法、装置、设备及存储介质 |
CN112650435A (zh) * | 2020-12-23 | 2021-04-13 | 平安普惠企业管理有限公司 | 页面内容滚动处理方法、装置、计算机设备及存储介质 |
CN114691128A (zh) * | 2020-12-29 | 2022-07-01 | 苏州国双软件有限公司 | 一种前端页面生成方法、装置、电子设备及存储介质 |
CN112925518A (zh) * | 2021-03-26 | 2021-06-08 | 贵州汇通华城股份有限公司 | 一种空调设备监视界面生成方法及系统 |
CN113487725B (zh) * | 2021-06-30 | 2024-03-29 | 山东齐鲁数通科技有限公司 | 一种模型节点修改方法、装置、终端设备及存储介质 |
CN114489892A (zh) * | 2022-01-12 | 2022-05-13 | 深圳Tcl新技术有限公司 | 数据处理方法、装置、计算机可读存储介质和计算机设备 |
CN116089056B (zh) * | 2022-08-22 | 2023-10-20 | 荣耀终端有限公司 | 用于图像绘制的方法及相关装置 |
TWI828527B (zh) * | 2023-01-19 | 2024-01-01 | 王一互動科技有限公司 | 自動導覽的方法及電子裝置 |
CN117150095B (zh) * | 2023-09-12 | 2024-03-22 | 北京云枢创新软件技术有限公司 | 层次结构树节点的查找方法、电子设备和介质 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
CN106126645A (zh) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | 一种提高web页面渲染性能的装置 |
Family Cites Families (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6476833B1 (en) * | 1999-03-30 | 2002-11-05 | Koninklijke Philips Electronics N.V. | Method and apparatus for controlling browser functionality in the context of an application |
US20020087596A1 (en) * | 2000-12-29 | 2002-07-04 | Steve Lewontin | Compact tree representation of markup languages |
JP4382326B2 (ja) * | 2002-05-24 | 2009-12-09 | ケープレックス・インク | ウェブ・ドキュメントを再編集して再配布する方法及び装置 |
EP1406183A3 (en) * | 2002-10-01 | 2004-04-14 | Sap Ag | Method and system for refreshing browser pages |
US9171097B2 (en) * | 2009-03-31 | 2015-10-27 | Qualcomm Incorporated | Memoizing web-browsing computation with DOM-based isomorphism |
US20120110437A1 (en) * | 2010-10-28 | 2012-05-03 | Microsoft Corporation | Style and layout caching of web content |
CN103473347B (zh) * | 2013-09-24 | 2017-01-11 | 北京大学 | 一种基于网页相似度的浏览器渲染优化方法 |
CN105808237A (zh) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | 页面渲染方法和页面渲染系统 |
CN106598574B (zh) * | 2016-11-25 | 2020-02-18 | 腾讯科技(深圳)有限公司 | 页面渲染的方法和装置 |
-
2016
- 2016-11-25 CN CN201611054075.3A patent/CN106598574B/zh active Active
-
2017
- 2017-11-16 WO PCT/CN2017/111274 patent/WO2018095261A1/zh active Application Filing
-
2019
- 2019-03-01 US US16/290,642 patent/US10824691B2/en active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105630902A (zh) * | 2015-12-21 | 2016-06-01 | 明博教育科技股份有限公司 | 一种渲染和增量更新网页的方法 |
CN106126645A (zh) * | 2016-06-24 | 2016-11-16 | 浪潮软件股份有限公司 | 一种提高web页面渲染性能的装置 |
Also Published As
Publication number | Publication date |
---|---|
US20190197068A1 (en) | 2019-06-27 |
CN106598574A (zh) | 2017-04-26 |
US10824691B2 (en) | 2020-11-03 |
WO2018095261A1 (zh) | 2018-05-31 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106598574B (zh) | 页面渲染的方法和装置 | |
US10776567B2 (en) | Method for compiling page data, method, device and storage medium for page rendering | |
CN107818163B (zh) | 页面展示方法、装置、计算机设备和存储介质 | |
US10942708B2 (en) | Generating web API specification from online documentation | |
CN111045655A (zh) | 一种页面渲染的方法、装置、渲染服务器和存储介质 | |
US7698694B2 (en) | Methods and systems for transforming an AND/OR command tree into a command data model | |
US8051105B1 (en) | Directing searches on tree data structures | |
CN111209374B (zh) | 数据查询展示方法、装置、计算机系统及可读存储介质 | |
CN109145235B (zh) | 用于解析网页的方法、装置及电子设备 | |
CN107220096A (zh) | 一种json数据解析方法及装置 | |
CN110647322B (zh) | 列表渲染方法、装置、电子设备和计算机可读介质 | |
US20190147104A1 (en) | Method and apparatus for constructing artificial intelligence application | |
CN115358200A (zh) | 一种基于SysML元模型的模板化文档自动生成方法 | |
US20120124462A1 (en) | Web Application Optimization | |
CN114594927A (zh) | 低代码开发方法、装置、系统、服务器及存储介质 | |
US20120124555A1 (en) | Optimization of Compiled Control Objects | |
CN102193789B (zh) | 一种实现可配置跳转链接的方法和设备 | |
CN116909573A (zh) | 计算图的节点融合方法、装置、电子设备及存储介质 | |
CN111143568A (zh) | 一种论文分类时的缓冲方法、装置、设备及存储介质 | |
JP2006065467A (ja) | データ抽出定義情報生成装置およびデータ抽出定義情報生成方法 | |
CN115629763A (zh) | 目标代码的生成方法、npu指令的显示方法及装置 | |
CN115080154A (zh) | 页面显示方法、装置、存储介质及电子设备 | |
CN114489619A (zh) | 一种界面视图显示方法及终端设备、计算机可读存储介质 | |
CN112632933A (zh) | 快速制作Excel文件方法、快速制作装置及存储介质 | |
CN111124386A (zh) | 基于Unity的动画事件处理方法、装置、设备和存储介质 |
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 | ||
TR01 | Transfer of patent right |
Effective date of registration: 20240103 Address after: 518057 Tencent Building, No. 1 High-tech Zone, Nanshan District, Shenzhen City, Guangdong Province, 35 floors Patentee after: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. Patentee after: TENCENT CLOUD COMPUTING (BEIJING) Co.,Ltd. Address before: 518000 Tencent Building, No. 1 High-tech Zone, Nanshan District, Shenzhen City, Guangdong Province, 35 Floors Patentee before: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. |
|
TR01 | Transfer of patent right |