CN112035768A - 快应用的页面渲染方法、装置、存储介质及电子设备 - Google Patents
快应用的页面渲染方法、装置、存储介质及电子设备 Download PDFInfo
- Publication number
- CN112035768A CN112035768A CN202010880897.7A CN202010880897A CN112035768A CN 112035768 A CN112035768 A CN 112035768A CN 202010880897 A CN202010880897 A CN 202010880897A CN 112035768 A CN112035768 A CN 112035768A
- Authority
- CN
- China
- Prior art keywords
- node
- rendering
- page
- information
- object model
- 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
- 238000009877 rendering Methods 0.000 title claims abstract description 166
- 238000000034 method Methods 0.000 title claims abstract description 58
- 230000001960 triggered effect Effects 0.000 claims abstract description 23
- 238000004590 computer program Methods 0.000 claims description 20
- 230000004044 response Effects 0.000 claims description 8
- 238000010586 diagram Methods 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 238000009434 installation Methods 0.000 description 3
- 230000001360 synchronised effect Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 230000007613 environmental effect Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000012545 processing Methods 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
-
- 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/46—Multiprogramming arrangements
- G06F9/52—Program synchronisation; Mutual exclusion, e.g. by means of semaphores
Abstract
本申请实施例公开了一种快应用的页面渲染方法、装置、存储介质及电子设备，其中，本申请实施例响应于前端框架触发的渲染指令，获取渲染指令对应的第一节点的节点信息，其中，第一节点为前端框架的第一文档对象模型树的节点；调用预设线程对第一节点的节点信息进行解析，得到第一节点的属性信息；通过预设线程，根据属性信息创建第二文档对象模型树的第二节点，并将第二节点的节点信息传输至主线程；通过主线程，根据第二节点的节点信息创建与第二节点对应的视图，并根据视图渲染用户界面。分别由预设线程执行第一节点的解析与第二节点的创建，由主线程执行视图的创建和渲染，两个线程可以并行执行，提高了快应用的页面加载速度。
Description
技术领域
本申请涉及电子设备技术领域，具体涉及一种快应用的页面渲染方法、装置、存储介质及电子设备。
背景技术
随着各式各样的应用程序的开发，终端可以通过下载应用程序的安装包来安装应用程序，对于这类需要下载安装包进行安装的应用程序，可以将其称为原生应用。由于终端需要下载并安装原生应用，才能使用此类应用程序，且终端在启动和加载此类应用程序时速度较慢，因此，影响应用程序的使用。在这种情况下，业界提出了快应用。
发明内容
本申请实施例提供一种快应用的页面渲染方法、装置、存储介质及电子设备，能够提高快应用的页面加载速度。
第一方面，本申请实施例提供一种快应用的页面渲染方法，包括：
响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
所述预设线程根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
所述主线程通过所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
第二方面，本申请实施例还提供一种快应用的页面渲染装置，包括：
信息获取模块，用于响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
信息解析模块，用于调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
节点创建模块，用于通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
界面渲染模块，用于通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
第三方面，本申请实施例还提供一种存储介质，其上存储有计算机程序，当所述计算机程序在计算机上运行时，使得所述计算机执行如本申请任一实施例提供的快应用的页面渲染方法。
第四方面，本申请实施例还提供一种电子设备，包括处理器和存储器，所述存储器有计算机程序，所述处理器通过调用所述计算机程序，用于执行如本申请任一实施例提供的快应用的页面渲染方法。
本申请实施例提供的技术方案，在接收到前端框架发送的渲染指令时，响应于前端框架触发的渲染指令，获取渲染指令对应的第一节点的节点信息，该第一节点为前端框架的第一文档对象模型树的节点；得到第一节点的节点信息之后，启动预设线程，由该预设线程对该节点信息进行解析，得到对应的属性信息，并根据该属性信息创建渲染引擎的第二文档对象模型树的第二节点，再将该第二节点的节点信息传输到主线程，由主线程执行创建该第二节点对应的视图，并根据该视图渲染用户界面的操作，按照这样的方式，对于前端框架中的每一个第一文档对象模型树的节点，都可以按照上述过程进行渲染。并且，分别由预设线程执行第一节点的解析与第二节点的创建，由主线程执行视图的创建和渲染，两个线程可以并行执行，提高了快应用的页面加载速度。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例提供的快应用的页面渲染方法的第一种流程示意图。
图2为本申请实施例提供的快应用的页面渲染方法的第二种流程示意图。
图3为本申请实施例提供的快应用的页面渲染装置的结构示意图。
图4为本申请实施例提供的电子设备的第一种结构示意图。
图5为本申请实施例提供的电子设备的第二种结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有付出创造性劳动前提下所获得的所有其他实施例，都属于本申请的保护范围。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
本申请实施例提供一种快应用的页面渲染方法，该快应用的页面渲染方法的执行主体可以是本申请实施例提供的快应用的页面渲染装置，或者集成了该快应用的页面渲染装置的电子设备，其中该快应用的页面渲染装置可以采用硬件或者软件的方式实现。其中，电子设备可以是智能手机、平板电脑、掌上电脑、笔记本电脑、或者台式电脑等设备。
请参阅图1，图1为本申请实施例提供的快应用的页面渲染方法的第一种流程示意图。本申请实施例提供的快应用的页面渲染方法的具体流程可以如下：
在101中，响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点。
本申请实施例的方案可以应用于快应用的页面显示，比如，快应用在第一次开启时，或者，在快应用中由一个页面跳转到另一个页面时，也就是说，只要有新页面的开启，需要显示该页面的场景，都可以应用该方案。当需要启动快应用或者切换快应用的界面时，终端可以通过识别用户的触发操作，接收到快应用的页面显示指令。
本申请实施例应用于电子设备，电子设备中运行有至少一个快应用。其中，快应用是一种基于硬件平台共同推出的新型应用生态。快应用使用前端技术栈开发，原生渲染，无需安装，即点即用。同时，还兼具原生应用体验。其中，快应用作为完整的应用形态，可以与系统深入整合，如同原生应用一样运行，以及和系统交互。
本申请实施例中，快应用的场景入口可以包括桌面、应用市场、浏览器、负一屏、全局搜索、安全中心中的至少一种。
快应用的应用文件存储于快应用平台上，当电子设备首次接收到快应用的启动指令时，电子设备从快应用平台获取快应用的应用文件，同时，快应用的引擎进行初始化相关工作。当快应用的应用文件下载完成并校验完成后，该快应用需要展示的第一个页面的页面视图描述文件开始被加载，并且开始进行渲染。
在一些实施例中，快应用在电子设备中被启动过，其应用文件仍存储在电子设备中，当再次接收到快应用的启动指令后，可以直接从电子设备本地获取应用文件进行启动。
电子设备从快应用对应的服务器端获取要显示的页面的页面视图描述文件，由前端框架，例如JSframework，对该页面描述文件进行解析，得到框架层的文档对象模型(Document Object Model，DOM)树，这里为了将框架层的文档对象模型树与下文中原生渲染引擎的文档对象模型树进行区分，将框架层的文档对象模型树记为第一文档对象模型树，将原生渲染引擎的文档对象模型树记为第二文档对象模型树；同时，将第一文档对象模型树的节点记为第一节点，将第二文档对象模型树的节点记为第二节点。
其中，页面视图描述文件是预先采用结构化语言来描述待显示页面的页面视图信息而生成的文件。开发人员可以根据业务需求以及结构化语言规范，预先创建页面视图描述文件。例如，结构化语言可以包括但不限于JavaScript对象标记JSON(JavaScriptObject Notation)语言或可扩展标记语言XML(Extensible Markup Language)，比如，页面视图描述文件可以是JS(Javascript，java脚本)文件。本实施例中待显示页面可以对应一个或多个页面视图描述文件。
其中，页面视图的属性参数包括但不限于以下内容：背景颜色、前景颜色、字体颜色、文本字体、字号和字形等等。本申请实施例中的待显示的页面可以可以包括一个或者多个页面视图，页面视图的具体数量可以根据业务需求预先设置。
文档对象模型树的构成要素为节点，一个文档对象模型树由根节点和多个子节点构成，其中，包括但不限于文档节点、元素节点、文本节点、属性节点、注释节点等。一个节点包括至少一个属性，如name(名称)、位置、颜色等。从树的根部至顶，这些节点按照层级顺序分布，构成文档对象模型树。
前端框架通过对JS文件解析得到第一文档对象模型树之后，前端框架可以基于该第一文档对象模型树的节点向原生渲染引擎发送渲染指令，原生渲染引擎在接收到渲染指令时，获取该渲染指令对应的第一节点的节点信息。其中，节点信息为通过解析JS文件得到的与该节点相关的全部数据。
在102中，调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息。
在103中，通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程。
由于原生渲染引擎与前端框架是不同的平台，因此原生渲染引擎不能直接基于前端框架处的第一文档对象模型树进行视图的创建，需要对第一文档对象模型树进行解析，并根据解析结果创建第二文档对象模型树，第一文档对象模型树中的节点与第二文档对象模型树中的节点一一对应。
在104中，通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
其中，快应用在启动后，会创建一个主线程，在相关技术中，第一文档对象模型树的解析、第二文档对象模型树的创建，以及视图创建和渲染操作都是由主线程执行，这样就必须按照串行的顺序依次执行这些操作，例如，第一文档对象模型树的各节点全部解析完成，才会根据解析结果创建第二文档对象模型树，再根据第二文档对象模型树，创建Dom节点对应的视图(View)，同时调用Android原生容器的addView方法进行界面的渲染。这样做必定会在主线程做大量的工作，容易造成主线程的阻塞，而主线程的阻塞会导致页面启动速度慢。
为了解决上述问题，本申请实施例创建一个子线程，记为预设线程，用来执行第一节点的节点信息的解析操作以及第二节点的创建操作。并且，该预设线程可以与主线程并行。前端框架每发送一个渲染指令，原生渲染引擎就调用预设线程，对该渲染指令对应的第一节点的节点信息进行解析，得到属性信息，基于该属性信息创建与第一节点对应的第二节点，并且在该第二节点创建完毕后，将第二节点的节点信息同步到主线程。主线程的视图容器会创建该第二节点对应的视图，并添加到视图容器中，同时由渲染引擎基于该视图进行用户界面的渲染，就可以在用户界面上显示出该第二节点对应的对象。由上可以看出，这两个操作分别由两个线程同步执行，极大地减轻了主线程的工作量，避免主线程出现阻塞。
其中，在一些实施例中，所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息之前，该方法还包括：响应于在应用内启动快应用的请求，启动所述快应用，并创建所述预设线程。
该实施例中，在快应用启动时就创建一个子线程，作为常驻子线程。
或者在其他实施例中，可以在检测到页面显示指令时，创建该预设线程，在页面显示完毕后，销毁该预设线程。
此外，需要说明的是，预设线程与主线程之间按照常规的线程间通信机制进行数据的同步。
其中，在一些实施例中，将所述第二节点的节点信息传输至主线程之后，该方法还包括：返回执行所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，直至完成所述第一文档对象模型树的全部节点渲染完成。
对于前端框架来说，每解析得到一个第一节点，就可以触发一个渲染指令给原生渲染引擎，对于原生渲染引擎来说，预设线程每创建一个第二节点，就可以将第二节点的节点信息同步到主线程，基于此，当主线程在执行上一个第二节点的渲染的同时，预设线程就可以同步地执行下一个第二节点的创建，加快了页面显示效率，使得快应用启动和页面跳转时，都可以快速地实现页面的显示。
具体实施时，本申请不受所描述的各个步骤的执行顺序的限制，在不产生冲突的情况下，某些步骤还可以采用其它顺序进行或者同时进行。
由上可知，本申请实施例提供的快应用的页面渲染方法，在接收到前端框架发送的渲染指令时，响应于前端框架触发的渲染指令，获取渲染指令对应的第一节点的节点信息，该第一节点为前端框架的第一文档对象模型树的节点；得到第一节点的节点信息之后，启动预设线程，由该预设线程对该节点信息进行解析，得到对应的属性信息，并根据该属性信息创建渲染引擎的第二文档对象模型树的第二节点，再将该第二节点的节点信息传输到主线程，由主线程执行创建该第二节点对应的视图，并根据该视图渲染用户界面的操作，按照这样的方式，对于前端框架中的每一个第一文档对象模型树的节点，都可以按照上述过程进行渲染。并且，分别由预设线程执行第一节点的解析与第二节点的创建，由主线程执行视图的创建和渲染，两个线程可以并行执行，提高了快应用的页面加载速度。
根据前面实施例所描述的方法，以下将举例作进一步详细说明。
请参阅图2，图2为本发明实施例提供的快应用的页面渲染方法的第二流程示意图。所述方法包括：
在201中，当检测到快应用启动时，启动所述快应用，并创建所述预设线程。
在202中，获取待显示页面对应的页面视图描述文件。
本申请实施例应用于电子设备，电子设备中运行有至少一个快应用。快应用的应用文件存储于快应用平台上，当电子设备首次接收到快应用的启动指令时，电子设备从快应用平台获取快应用的应用文件，同时，快应用的引擎进行初始化相关工作。当快应用的应用文件下载完成并校验完成后，该快应用需要展示的第一个页面的页面视图描述文件开始被加载，并且开始进行渲染。
在一些实施例中，快应用在电子设备中被启动过，其应用文件仍存储在电子设备中，当再次接收到快应用的启动指令后，可以直接从电子设备本地获取应用文件进行启动。
在启动块应用后，创建一个子线程，作为常驻子线程，记为预设线程。该常驻子线程用来执行第一节点的节点信息的解析操作以及第二节点的创建操作。
电子设备从快应用对应的服务器端获取要显示的页面的页面视图描述文件，例如，JS文件。然后，由前端框架对该页面描述文件进行解析，得到第一文档对象模型树。
在203中，通过所述前端框架解析所述页面视图描述文件，得到第一文档对象模型树。
在204中，通过所述前端框架，按照节点之间的层级顺序遍历第一文档对象模型树，逐一基于第一文档对象模型树上的第一节点触发渲染指令。
其中，所述第一文档对象模型树包括多个第一节点。
前端框架通过对JS文件解析得到第一文档对象模型树之后，前端框架按照节点之间的层级顺序遍历第一文档对象模型树，逐一基于该第一文档对象模型树的第一节点向原生渲染引擎发送渲染指令。
在205中，响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息。
其中，所述第一节点为前端框架的第一文档对象模型树的节点。
原生渲染引擎在接收到渲染指令时，获取该渲染指令对应的第一节点的节点信息。其中，节点信息为通过解析JS文件得到的与该节点相关的全部数据。
在206中，调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息。
在207中，通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程，并返回执行205。
在208中，通过所述主线程，调用视图创建方法，根据所述第二节点的节点信息创建与所述第二节点对应的视图。
在208中，通过渲染引擎，根据所述视图渲染用户界面。
前端框架每发送一个渲染指令，原生渲染引擎就调用预设线程，对该渲染指令对应的第一节点的节点信息进行解析，得到第一节点的属性信息，基于该属性信息创建与第一节点对应的第二节点，并且在该第二节点创建完毕后，将第二节点的节点信息同步到主线程。全部的第二节点构成第二文档对象模型树，该树上包含了待显示的页面上的全部页面元素。
主线程获取到预设线程发送的第二节点的节点信息后，调用视图创建(addview)方法，根据第二节点的节点信息创建该第二节点对应的视图，并添加到视图容器中，同时由渲染引擎基于该视图进行用户界面的渲染，就可以在用户界面上显示出该第二节点对应的对象。
由上可知，本发明实施例提出的快应用的页面渲染方法，对于前端框架来说，每解析得到一个第一节点，就可以触发一个渲染指令给原生渲染引擎，对于原生渲染引擎来说，预设线程每创建一个第二节点，就可以将第二节点的节点信息同步到主线程，基于此，当主线程在执行上一个第二节点的渲染的同时，预设线程就可以同步地执行下一个第二节点的创建，加快了页面显示效率，使得快应用启动和页面跳转时，都可以快速地实现页面的显示。并且两个线程的同步执行，极大地减轻了主线程的工作量，避免主线程出现阻塞。
在一实施例中还提供一种快应用的页面渲染装置。请参阅图3，图3为本申请实施例提供的快应用的页面渲染装置300的结构示意图。其中该快应用的页面渲染装置300应用于电子设备，该快应用的页面渲染装置300包括信息获取模块301、信息解析模块302、节点创建模块303以及界面渲染模块304，如下：
信息获取模块301，用于响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
信息解析模块302，用于调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
节点创建模块303，用于通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
界面渲染模块304，用于通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
在一些实施例中，快应用的页面渲染装置300还包括：
文件获取模块，用于响应于页面显示指令，获取所述页面显示指令对应的页面视图描述文件；
文件解析模块，用于基于前端框架解析所述页面视图描述文件，得到第一文档对象模型树，并基于所述第一文档对象模型树触发渲染指令。
在一些实施例中，文件解析模块还用于：按照节点之间的层级顺序，遍历所述第一文档对象模型树，逐一基于所述第一文档对象模型树上的节点触发渲染指令，其中，所述第一文档对象模型树包括多个第一节点。
在一些实施例中，节点创建模块303将所述第二节点的节点信息传输至主线程之后，信息获取模块301继续执行响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，直至完成所述第一文档对象模型树的全部节点渲染完成。
在一些实施例中，快应用的页面渲染装置300还包括：
启动响应模块，用于响应于在应用内启动快应用的请求，启动所述快应用，并创建所述预设线程。
在一些实施例中，界面渲染模块304还用于：通过所述主线程，调用视图创建方法，根据所述第二节点的节点信息创建与所述第二节点对应的视图；通过渲染引擎，根据所述视图渲染用户界面。
应当说明的是，本申请实施例提供的快应用的页面渲染装置与上文实施例中的快应用的页面渲染方法属于同一构思，通过该快应用的页面渲染装置可以实现快应用的页面渲染方法实施例中提供的任一方法，其具体实现过程详见快应用的页面渲染方法实施例，此处不再赘述。
由上可知，本申请实施例提出的快应用的页面渲染装置300包括信息获取模块301、信息解析模块302、节点创建模块303以及界面渲染模块304，其中，信息获取模块301在接收到前端框架发送的渲染指令时，响应于前端框架触发的渲染指令，获取渲染指令对应的第一节点的节点信息，该第一节点为前端框架的第一文档对象模型树的节点；得到第一节点的节点信息之后，信息解析模块302启动预设线程，由该预设线程对该节点信息进行解析，得到对应的属性信息，节点创建模块303根据该属性信息创建渲染引擎的第二文档对象模型树的第二节点，再将该第二节点的节点信息传输到主线程，由界面渲染模块304通过主线程执行创建该第二节点对应的视图，并根据该视图渲染用户界面的操作，按照这样的方式，对于前端框架中的每一个第一文档对象模型树的节点，都可以按照上述过程进行渲染。并且，分别由预设线程执行第一节点的解析与第二节点的创建，由主线程执行视图的创建和渲染，两个线程可以并行执行，提高了快应用的页面加载速度。
本申请实施例还提供一种电子设备。所述电子设备可以是智能手机、平板电脑等设备。请参阅图4，图4为本申请实施例提供的电子设备的第一种结构示意图。电子设备400包括处理器401和存储器402。其中，处理器401与存储器402电性连接。
处理器401是电子设备400的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或调用存储在存储器402内的计算机程序，以及调用存储在存储器402内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。
存储器402可用于存储计算机程序和数据。存储器402存储的计算机程序中包含有可在处理器中执行的指令。计算机程序可以组成各种功能模块。处理器401通过调用存储在存储器402的计算机程序，从而执行各种功能应用以及数据处理。
在本实施例中，电子设备400中的处理器401会按照如下的步骤，将一个或一个以上的计算机程序的进程对应的指令加载到存储器402中，并由处理器401来运行存储在存储器402中的计算机程序，从而实现各种功能：
响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
在一些实施例中，请参阅图5，图5为本申请实施例提供的电子设备的第二种结构示意图。电子设备400还包括：射频电路403、显示屏404、控制电路405、输入单元406、音频电路407、传感器408以及电源409。其中，处理器401分别与射频电路403、显示屏404、控制电路405、输入单元406、音频电路407、传感器408以及电源409电性连接。
射频电路403用于收发射频信号，以通过无线通信与网络设备或其他电子设备进行通信。
显示屏404可用于显示由用户输入的信息或提供给用户的信息以及电子设备的各种图形用户接口，这些图形用户接口可以由图像、文本、图标、视频和其任意组合来构成。
控制电路405与显示屏404电性连接，用于控制显示屏404显示信息。
输入单元406可用于接收输入的数字、字符信息或用户特征信息(例如指纹)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。其中，输入单元406可以包括指纹识别模组。
音频电路407可通过扬声器、传声器提供用户与电子设备之间的音频接口。其中，音频电路407包括麦克风。所述麦克风与所述处理器401电性连接。所述麦克风用于接收用户输入的语音信息。
传感器408用于采集外部环境信息。传感器408可以包括环境亮度传感器、加速度传感器、陀螺仪等传感器中的一种或多种。
电源409用于给电子设备400的各个部件供电。在一些实施例中，电源409可以通过电源管理系统与处理器401逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。
虽然图中未示出，电子设备400还可以包括摄像头、蓝牙模块等，在此不再赘述。
在本实施例中，电子设备400中的处理器401会按照如下的步骤，将一个或一个以上的计算机程序的进程对应的指令加载到存储器402中，并由处理器401来运行存储在存储器402中的计算机程序，从而实现各种功能：
响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
在一些实施例中，在所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息之前，处理器401还执行：
响应于页面显示指令，获取所述页面显示指令对应的页面视图描述文件；
通过所述前端框架解析所述页面视图描述文件，得到第一文档对象模型树，并基于所述第一文档对象模型树触发渲染指令。
由上可知，本申请实施例提供了一种电子设备，所述电子设备在接收到前端框架发送的渲染指令时，响应于前端框架触发的渲染指令，获取渲染指令对应的第一节点的节点信息，该第一节点为前端框架的第一文档对象模型树的节点；得到第一节点的节点信息之后，启动预设线程，由该预设线程对该节点信息进行解析，得到对应的属性信息，并根据该属性信息创建渲染引擎的第二文档对象模型树的第二节点，再将该第二节点的节点信息传输到主线程，由主线程执行创建该第二节点对应的视图，并根据该视图渲染用户界面的操作，按照这样的方式，对于前端框架中的每一个第一文档对象模型树的节点，都可以按照上述过程进行渲染。并且，分别由预设线程执行第一节点的解析与第二节点的创建，由主线程执行视图的创建和渲染，两个线程可以并行执行，提高了快应用的页面加载速度。
本申请实施例还提供一种存储介质，所述存储介质中存储有计算机程序，当所述计算机程序在计算机上运行时，所述计算机执行上述任一实施例所述的快应用的页面渲染方法。
需要说明的是，本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过计算机程序来指令相关的硬件来完成，所述计算机程序可以存储于计算机可读存储介质中，所述存储介质可以包括但不限于：只读存储器(ROM，Read OnlyMemory)、随机存取存储器(RAM，Random Access Memory)、磁盘或光盘等。
此外，本申请中的术语“第一”、“第二”和“第三”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或模块的过程、方法、系统、产品或设备没有限定于已列出的步骤或模块，而是某些实施例还包括没有列出的步骤或模块，或某些实施例还包括对于这些过程、方法、产品或设备固有的其它步骤或模块。
以上对本申请实施例所提供的快应用的页面渲染方法、装置、存储介质及电子设备进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。
Claims (10)
1.一种快应用的页面渲染方法，其特征在于，包括：
响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
2.如权利要求1所述的快应用的页面渲染方法，其特征在于，所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息之前，还包括：
响应于页面显示指令，获取所述页面显示指令对应的页面视图描述文件；
通过所述前端框架解析所述页面视图描述文件，得到第一文档对象模型树，并基于所述第一文档对象模型树触发渲染指令。
3.如权利要求2所述的快应用的页面渲染方法，其特征在于，所述基于所述第一文档对象模型树触发渲染指令，包括：
按照节点之间的层级顺序，遍历所述第一文档对象模型树，逐一基于所述第一文档对象模型树上的节点触发渲染指令，其中，所述第一文档对象模型树包括多个第一节点。
4.如权利要求3所述的快应用的页面渲染方法，其特征在于，所述将所述第二节点的节点信息传输至主线程之后，还包括：
返回执行所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，直至完成所述第一文档对象模型树的全部节点渲染完成。
5.如权利要求1所述的快应用的页面渲染方法，其特征在于，所述响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息之前，还包括：
响应于在应用内启动快应用的请求，启动所述快应用，并创建所述预设线程。
6.如权利要求1所述的快应用的页面渲染方法，其特征在于，所述通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面，包括：
通过所述主线程，调用视图创建方法，根据所述第二节点的节点信息创建与所述第二节点对应的视图；
通过渲染引擎，根据所述视图渲染用户界面。
7.一种快应用的页面渲染装置，其特征在于，包括：
信息获取模块，用于响应于前端框架触发的渲染指令，获取所述渲染指令对应的第一节点的节点信息，其中，所述第一节点为前端框架的第一文档对象模型树的节点；
信息解析模块，用于调用预设线程对所述第一节点的节点信息进行解析，得到所述第一节点的属性信息；
节点创建模块，用于通过所述预设线程，根据所述属性信息创建第二文档对象模型树的第二节点，并将所述第二节点的节点信息传输至主线程；
界面渲染模块，用于通过所述主线程，根据所述第二节点的节点信息创建与所述第二节点对应的视图，并根据所述视图渲染用户界面。
8.如权利要求7所述的快应用的页面渲染装置，其特征在于，还包括：
文件获取模块，用于响应于页面显示指令，获取所述页面显示指令对应的页面视图描述文件；
文件解析模块，用于基于前端框架解析所述页面视图描述文件，得到第一文档对象模型树，并基于所述第一文档对象模型树触发渲染指令。
9.一种存储介质，其上存储有计算机程序，其特征在于，当所述计算机程序在计算机上运行时，使得所述计算机执行如权利要求1至6任一项所述的快应用的页面渲染方法。
10.一种电子设备，包括处理器和存储器，所述存储器存储有计算机程序，其特征在于，所述处理器通过调用所述计算机程序，用于执行如权利要求1至6任一项所述的快应用的页面渲染方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010880897.7A CN112035768A (zh) | 2020-08-27 | 2020-08-27 | 快应用的页面渲染方法、装置、存储介质及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010880897.7A CN112035768A (zh) | 2020-08-27 | 2020-08-27 | 快应用的页面渲染方法、装置、存储介质及电子设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112035768A true CN112035768A (zh) | 2020-12-04 |
Family
ID=73585985
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010880897.7A Pending CN112035768A (zh) | 2020-08-27 | 2020-08-27 | 快应用的页面渲染方法、装置、存储介质及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112035768A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112631592A (zh) * | 2020-12-30 | 2021-04-09 | 北京有竹居网络技术有限公司 | 数据请求方法、装置、设备、介质及程序产品 |
| CN113051015A (zh) * | 2021-03-30 | 2021-06-29 | 北京达佳互联信息技术有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
| CN113436344A (zh) * | 2021-06-25 | 2021-09-24 | 广联达科技股份有限公司 | 一种引用视图的显示方法、系统及图像显示设备 |
| CN114398094A (zh) * | 2021-12-21 | 2022-04-26 | 中国银联股份有限公司 | 小程序启动方法、装置、设备及计算机可读存储介质 |
| CN117130688A (zh) * | 2023-09-06 | 2023-11-28 | 南京荣耀软件技术有限公司 | 快应用卡片加载方法、电子设备及存储介质 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105631011A (zh) * | 2015-12-28 | 2016-06-01 | 上海瀚之友信息技术服务有限公司 | 一种网页视图交互处理方法及系统 |
| CN107729094A (zh) * | 2017-08-29 | 2018-02-23 | 口碑(上海)信息技术有限公司 | 一种用户界面渲染的方法及装置 |
| CN109634598A (zh) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | 一种页面显示方法、装置、设备及存储介质 |
| CN110069302A (zh) * | 2019-03-15 | 2019-07-30 | 平安普惠企业管理有限公司 | 页面配置方法、装置、计算机设备及存储介质 |
| CN110928543A (zh) * | 2019-11-04 | 2020-03-27 | 北京小米移动软件有限公司 | 页面处理方法、装置及存储介质 |
| CN111240769A (zh) * | 2020-01-02 | 2020-06-05 | 广州虎牙科技有限公司 | 页面启动方法、装置、设备及存储介质 |
-
2020
- 2020-08-27 CN CN202010880897.7A patent/CN112035768A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105631011A (zh) * | 2015-12-28 | 2016-06-01 | 上海瀚之友信息技术服务有限公司 | 一种网页视图交互处理方法及系统 |
| CN107729094A (zh) * | 2017-08-29 | 2018-02-23 | 口碑(上海)信息技术有限公司 | 一种用户界面渲染的方法及装置 |
| CN109634598A (zh) * | 2018-12-14 | 2019-04-16 | 北京字节跳动网络技术有限公司 | 一种页面显示方法、装置、设备及存储介质 |
| CN110069302A (zh) * | 2019-03-15 | 2019-07-30 | 平安普惠企业管理有限公司 | 页面配置方法、装置、计算机设备及存储介质 |
| CN110928543A (zh) * | 2019-11-04 | 2020-03-27 | 北京小米移动软件有限公司 | 页面处理方法、装置及存储介质 |
| CN111240769A (zh) * | 2020-01-02 | 2020-06-05 | 广州虎牙科技有限公司 | 页面启动方法、装置、设备及存储介质 |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112631592A (zh) * | 2020-12-30 | 2021-04-09 | 北京有竹居网络技术有限公司 | 数据请求方法、装置、设备、介质及程序产品 |
| CN113051015A (zh) * | 2021-03-30 | 2021-06-29 | 北京达佳互联信息技术有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
| CN113051015B (zh) * | 2021-03-30 | 2024-01-09 | 北京达佳互联信息技术有限公司 | 页面渲染方法、装置、电子设备及存储介质 |
| CN113436344A (zh) * | 2021-06-25 | 2021-09-24 | 广联达科技股份有限公司 | 一种引用视图的显示方法、系统及图像显示设备 |
| CN114398094A (zh) * | 2021-12-21 | 2022-04-26 | 中国银联股份有限公司 | 小程序启动方法、装置、设备及计算机可读存储介质 |
| CN114398094B (zh) * | 2021-12-21 | 2023-08-18 | 中国银联股份有限公司 | 小程序启动方法、装置、设备及计算机可读存储介质 |
| CN117130688A (zh) * | 2023-09-06 | 2023-11-28 | 南京荣耀软件技术有限公司 | 快应用卡片加载方法、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112035768A (zh) | 快应用的页面渲染方法、装置、存储介质及电子设备 | |
| CN108319489B (zh) | 应用页面的启动方法、装置、存储介质及电子设备 | |
| CN111240777B (zh) | 动态壁纸生成方法、装置、存储介质及电子设备 | |
| CN112052008B (zh) | 代码检查方法、装置、计算机设备及计算机可读存储介质 | |
| CN111026490B (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
| CN110413347B (zh) | 应用程序中广告的处理方法、装置、存储介质及终端 | |
| CN111240774B (zh) | 动态壁纸生成方法、装置、存储介质及电子设备 | |
| CN111416756B (zh) | 协议测试方法、装置、计算机设备及存储介质 | |
| CN110297624B (zh) | 基于electron框架的Widget系统的实现方法及采用该系统的电视机 | |
| CN111209065B (zh) | 动态壁纸设置方法、装置、存储介质及电子设备 | |
| CN107526623B (zh) | 一种数据处理方法及装置 | |
| CN110851108A (zh) | 电子设备操作方法、装置、电子设备及存储介质 | |
| CN111078316B (zh) | 布局文件加载方法、装置、存储介质及电子设备 | |
| CN110471701B (zh) | 图像渲染的方法、装置、存储介质及电子设备 | |
| CN110851211A (zh) | 用于显示应用信息的方法、装置、电子设备和介质 | |
| US20220292141A1 (en) | Quick Application Startup Method and Related Apparatus | |
| CN114218052A (zh) | 一种业务交互图生成方法、装置、设备及存储介质 | |
| CN113220366A (zh) | 子应用启动方法、装置、终端及服务器 | |
| WO2022057889A1 (zh) | 一种对应用程序的界面进行翻译的方法及相关设备 | |
| CN111240776B (zh) | 动态壁纸设置方法、装置、存储介质及电子设备 | |
| CN115509531A (zh) | 基于前端技术的微前端实现方法、装置、终端及存储介质 | |
| CN114968529A (zh) | 定时器实现方法及相关产品 | |
| CN113900650A (zh) | 一种数据处理的方法、装置、电子设备及可读存储介质 | |
| CN113724711A (zh) | 一种语音识别服务实现方法、装置、系统、介质及设备 | |
| CN111563035B (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 |