CN110362298A - 一种基于浏览器的目标对象绘制方法、装置和浏览器 - Google Patents

Abstract

本申请公开了一种基于浏览器的目标对象绘制方法、装置和浏览器，其中，该方法包括：浏览器中的Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；根据所述指令集中包含的多条指令，对所述目标对象进行绘制。这样，通过将多条指令整合为一个指令集，浏览器中的Web引擎可以直接调用指令集进行图形的目标对象绘制，相较于现有技术而言，由于Web引擎由调用多次指令进行目标对象绘制改为调用一次指令集进行目标对象绘制。因此，可以减少JS到WebAssembly之间的调用次数，提高了JS项目的运行效率。

Description

一种基于浏览器的目标对象绘制方法、装置和浏览器

技术领域

本申请涉及计算机技术领域，尤其涉及一种基于浏览器的目标对象绘制方法、装置和浏览器。

背景技术

在2D图形或3D图形的绘制中，为了提高运行效率，除采用运行器(runtime)进行图形绘制外，还可以采用浏览器作为载体执行JavaScript(以下简称JS)项目以实现图形绘制。由于JS项目采用JavaScript语言编写，而JavaScript语言是解释性脚本语言，依托于JavaScript语言实现的Web引擎进行解析执行，其运行效率较慢。

为提高在浏览器中运行JS项目的效率，现有技术提出了新的“Web引擎”的方案。该方案的做法是将运行在浏览器中的Web引擎划分为上层的JS接口层和底层的核心算法层两部分，JS接口层仍然采用JS语言开发，保持与JS项目的“平滑”承接，进而继续保留了JS项目开发效率高的优势，而底层核心算法层则采用WebAssembly构建，WebAssembly是JavaScript的增强版本，它可将JS语言编译成二进制结构，提供直接运行二进制机器代码的能力，因而运行效率远高于JS语言，进而能够有效提高JS项目的整体运行效率。正是基于此，可以将由WebAssembly实现部分称为“Web加速器”。

然而，尽管Web加速器能够提高Web引擎的扩展性和高效性，但是，这种方案中存在JavaScript语言与WebAssembly之间的调用，而这种调用较为频繁和低效，严重影响浏览器运行JS项目的效率。

发明内容

本申请实施例提供一种基于浏览器的目标对象绘制方法、装置和浏览器等，用于解决现有技术中浏览器在绘制目标对象时，其JS与WebAssembly之间的调用频繁、低效，导致JS项目运行效率低的问题。

第一方面，本申请实施例提供了一种基于浏览器的目标对象绘制方法，该方法包括：

浏览器中的Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；

Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；

Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

第二方面，本申请实施例提供了一种基于浏览器的目标对象绘制装置，所述浏览器包括具有Web引擎的所述装置，该装置包括：

接收单元，用于使Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；

确定单元，用于使Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；

所述绘制单元，用于使Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

第三方面，本申请实施例提供了一种运行器，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面所述的方法的步骤。

第四方面，本申请实施例提供了一种浏览器，该浏览器包括Web引擎，所述Web引擎执行如第一方面所述的方法的步骤。

第五方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的方法的步骤。

本申请实施例提供的技术方案，在接收的目标对象绘制请求中包含指令集标识，Web引擎可以根据所述绘制请求中包含的指令集标识，确定与指令集标识对应的指令集，进而根据所述指令集中包含的多条指令，对所述目标对象进行绘制。这样，通过将多条指令整合为一个指令集，浏览器中的Web引擎可以直接调用指令集进行图形绘制，相较于现有技术而言，由于Web引擎由调用多次指令进行目标对象绘制改为调用一次指令集进行目标对象绘制，因此，可以减少JS到WebAssembly之间的调用次数，提高JS项目的运行效率。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本申请的基于浏览器的目标对象绘制方法实施例的流程示意图；

图2为本申请项目层与Web加速器与指令集之间的关系示意图；

图3为本申请项目层、Web加速器与指令集、绘制数据之间的关系示意图；

图4为本申请中单个指令集与多个数据区之间对应关系示意图；

图5为本申请涉及的节点树结构示意图；

图6为本申请涉及的本帧数据与前一帧数据之间关系的示意图；

图7为本申请的基于浏览器的目标对象绘制装置实施例的结构示意图；

图8为本申请的运行器实施例的结构示意图。

具体实施方式

如前所述，JS到WebAssembly之间调用次数较多，而JS语言为解释性脚本语言、WebAssembly为编译型语言，这种差异导致相互调用越多、越频繁，JS项目运行的效率将越低。为了解决该技术问题，本申请实施例提供了一种基于浏览器的目标对象绘制方法，该方法适用时其执行主体可以是浏览器中的Web引擎，该方法包括如下步骤：S101：Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；S102：Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；S103：Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

在理解上述实施例的技术方案及其延伸方案时，有几点值得说明：

一是关于本实施例方法的执行主体。本实施例是基于浏览器进行的目标对象绘制，浏览器是作为绘制目标对象的载体，但并不意味着全部的执行工作是由浏览器来完成的。通常，浏览器包括很多组件，不同的组件由不同的功能。本实施例在浏览器中包括Web引擎，如前述介绍，Web引擎的基本功能是要完成JS项目的解析，但在本实施例中不排除还进行一些其他工作，比如，依据指令集标识符确定其对应的指令集，因而不能简单地将本实施例的Web引擎和现有技术中的引擎等同起来。在另一些情况下，Web引擎也仅仅是一种指示代称，实际上只要能够完成本实施例所述的方法步骤，均可以称为Web引擎。由于本申请实施例将要解决JS与WebAssembly之前的调用问题，执行上述步骤的主体可以主要是Web引擎中JS接口层部分和WebAssembly底层算法部分，这并不意味着将Web引擎仅仅限定在此两部分之内，本领域技术人员知道，根据实际需要Web引擎可以包含其他相应的部分。

二是关于本实施例提到的“目标对象”。目标对象是将要通过本实施例进行绘制的“对象”，其可“小”，亦可“大”。所谓“小”，是指其可以通过一套指令集能够绘制的具有一定独立性的最小单元，比如，由三条指令组成的一个指令集，能够绘制一个三角形，如果是两个底边重叠的三角形，则被认为是两个目标对象，但是，对三角形的某个边的绘制，则不能认为是一个待绘制的目标对象。所谓“大”，是指其可以是通过一套或多套指令集能够绘制的包含多个图形的一个整体。比如，一副复杂的画，在该画中包含了三角形、四边形、圆形等等基本的组成要素，那么对该副画的绘制，也可以称为是对“一个”目标对象的绘制。实际上，“目标对象”的外延可以取决于指令集的外延，如果预先设定的指令集是绘制一个“三角形”，那么该“三角形”便是一个“目标对象”，而小于该“三角形”的某条边以及大于该“三角形”带有对角线的四边形，则不能被认为是“目标对象”；如果预先设定的指令集是绘制一副包含三角形、四边形等在内的整体，那么该“整体”便是一个“目标对象”，而小于该“整体”的三角形、四边形等，则不能被认为是“目标对象”。但是，在后一种情况下，可以出现指令集的“嵌套”，即一个指令集中包含一个或多个子指令集，那么在通过指令集标识找到该指令集(外层指令集)后，可以对该指令集进行进一步解析，找到该指令集包含的子指令集的子指令集标识，进而依据该子指令集标识从与存储指令集(比如，可以称为第一存储区)相同或者不同的存储区(比如，可以称为第二存储区)中获取该子指令集(内层指令集)，并利用该子指令集完成目标对象的绘制。当然，实际应用过程中，嵌套可以是一层，也可能存在多层，但无论是多少层的嵌套，其获取指令集的过程仍然是相同，即通过从该层解析出来的指令集标识到相应的存储区中获取对应的指令集。不过需要强调的是，这里以“指令集”“子指令集”来称呼主要是体现嵌套的相邻两层之间的关系，而并不是说对于“孙子”辈的指令集就不在“子指令集”的概念之内，其相对于其父指令集而言，仍然是“子指令集”。

三是关于本实施例提到的“指令集”以及“指令集标识”的术语。

在现有技术中由于是一条指令、一条指令的执行，因而并不存在“打捆”在一起的“指令集”的概念，自然也就更不会存在“指令集标识”的概念。本实施例中将多条指令融合为一个指令集，不同的指令集需要进行区分，由此便需要指令集标识，通知指令集标识将不同的指令集进行区分，但需要注意的是不同的指令集，并不意味着其包含的多条指令中每一条都不相同，它们可能部分相同，或者部分不相同，也可能完全不相同。

在指令集及指令集标识的概念之下，Web引擎接收的针对目标对象进行绘制的绘制请求，便不同于现有技术中直接包含绘制指令的绘制请求，该新的绘制请求中包含指令集标识，当Web引擎获取到指令集标识后，便可根据该指令集标识去找到相应的指令集。这些指令集可以存储于内存的某个存储区内，比如，在JS项目从服务器端下载到本地后，解析该JS项目时(比如，Web引擎的JS接口部分)即在本地设备的内存中开辟第一存储区，将指令集存储在该第一存储区内，由此，该第一存储区可以被Web引擎(比如，Web引擎中的WebAssembly部分)“读取”来完成相应的工作，即借助该存储区作为载体，实现JS与WebAssembly部分之间的共享。当存在多个指令集时，可以将这些指令集存储在一个存储区内物理上相邻的物理，也可以存储在不同的物理位置而仅仅是“逻辑”上位于一个存储区，当然，一种更“自由”的存储方式是不同的指令集无论在实际物理地址上，还是在逻辑上，均可以不相邻。这些不同的存储方式，只要在根本上保证根据指令标识能找到该标识对应的指令集，即可实现本申请的发明目的。

为了确保依据指令集标识能查找到指令集，需要建立指令集标识与指令集之间的对应关系。该对应关系可以是“显性的”。比如，将指令集标识与指令集(地址)之间的映射关系形成一张表格，当Web引擎接收到指令集标识后，即可根据指令集标识从该表中查找到指令集的地址，然后依据该地址去获取指令集。这种指令集标识与指令集之间的对应关系也可以是“隐形的”，比如，指令集标识是相对于存储区的“偏移量”，那么在Web引擎接收到指令集标识后，依据该指令集标识直接从指令集的存储区中找到该偏移量对应的指令集，而不需要专门去维护一张映射表格。

通过本申请实施例提供的技术方案以及对上述技术方案的说明，进一步参见图2，可以了解到，该方案将用于绘制目标对象的多条指令整合为一个指令集(如图中的“指令集A”，特别说明：指令集中的指令仅为示例)，在绘制目标对象时，浏览器中的Web引擎可以直接调用指令集进行目标对象的绘制，相较于现有技术而言，由于Web引擎由调用多次指令进行目标对象改为调用一次指令集进行目标对象的绘制，因此，可以减少JS到WebAssembly之间的调用，提高了JS项目的运行效率。

上述内容详细描述了本申请实施例的基本方案。实际上，本申请实施例的方案还可以从不同的方向作进一步优化。在另一个实施例中，一种可行的优化方向是关于指令集与指令集中各指令所操作的数据(可称为绘制数据)之间关系的优化。这种关系可以划分为两类：一类是指令集中指令与绘制数据“合一”模式，二是指令集中指令与绘制数据“分离”模式。下面分别予以介绍。

在“合一模式”之下，所述指令集中可以包含绘制数据，其中，所述绘制数据可以用于与所述指令集中包含的多条指令相结合，共同绘制得到所述目标对象，例如，所述绘制数据可以是目标对象的位置、大小等。在根据所述指令集中包含的多条指令，对所述目标对象进行绘制时，可以根据所述指令集中包含的多条指令以及所述绘制数据，对所述目标对象进行绘制。

具体地，浏览器在根据所述指令集中包含的多条指令以及绘制数据绘制所述目标对象时，Web引擎可以只调用一次接口，告知WebAssembly可以根据所述指令集绘制所述目标对象，此时，WebAssembly可以直接从共享的所述存储区中调用所述指令集，并根据所述指令集中包含的多条指令以及绘制数据完成所述目标对象的绘制。由于Web引擎只需要一次调用就可以完成一次目标对象的绘制，因此，可以有效提高JS项目的运行效率。

在本实施例中，当Web引擎需要对指令集中的绘制数据进行修改时，由于所述存储区中存储的指令集在JS以及WebAssembly之间实现了数据共享，因此，JS可以直接修改所述指令集中的绘制数据，无需进行其他操作，在绘制目标对象时，WebAssembly可以直接使用修改后的指令集进行目标对象的绘制，从而可以在指令集修改的情况下实现高效率绘图。

在本申请的另一个实施例中，考虑到在对所述指令集中包含的指令增加或删除时，需要为所述指令集重新分配存储空间。较为重要的是，在实际应用中，目标对象对应的指令集类型变化的频率非常低，但是该目标对象对应的数据区变化频率非常高(例如：游戏中的角色移动时，角色的坐标一直在变化，即该角色对应的数据区一直在变化，但是该角色对应的指令集却没有变化)，因此，为了提高效率，以及减少所述指令集占用的存储空间，可以将所述指令集中包含的所述绘制数据(比如：位置、大小)与所述指令集中包含的指令分离，即所述指令集中可以不包含所述绘制数据，而是将所述指令集中的绘制数据以数据区的形式与所述指令集对应存储(参见图3)。同时，为了便于将所述数据区中的绘制数据与所述指令集相结合进而对目标对象进行绘制，所述指令集中可以包含数据索引(比如，图3中赋值符号右侧的数字：“6”“4”“5”等，其表示自数据区的开始位置的偏移量)，该数据区中可以包含与数据索引对应的绘制数据，这样，可以根据所述指令集中包含的所述数据索引从所述数据区中查找对应的绘制数据，并根据查找的绘制数据以及所述指令集绘制目标对象。

例如，指令集A中包含数据索引M，指令集A对应的数据区1中包含数据标识1到N对应的N个绘制数据，其中N大于M，这样，可以根据数据索引M从数据区1中查找第M个绘制数据，第M个绘制数据可以与指令集A相结合绘制得到目标对象。

需要说明的是，由于所述指令集中可以包含多条指令，每一条指令可以包含绘制数据，因此，所述指令集中包含的数据索引的个数可以是多个，与所述指令集对应的所述数据区中可以包含与每一个所述数据索引对应的绘制数据。为了便于描述，本申请实施例可以以所述指令集中包含一个数据索引为例进行说明。

还需要说明的是，所述数据区可以存储在与指令集相同性质的所述存储区中(比如，第三存储区)，这样，所述数据区中包含的绘制数据也可以在JS和WebAssembly之间进行数据共享。

在上述的数据索引的实现方式中，可以有多种方式。比如，可以是绘制数据在存储区中的偏移值作为数据索引，那么在获取到数据索引后，在存储区中从起始地址开始，偏移该数据索引大小的偏移量，即可找到该数据索引对应的绘制数据。另一种方式是在指令集中包含不同的参数名(参见图3中数据区中的“x”“y”等)，将该参数名作为数据索引，那么在获取到参数名后，在存储区中遍历或者按照某种规则查找，当查找到对应的参数名后，即可获得该参数名对应的绘制数据。

在本实施例中，针对一个所述指令集而言，所述指令集可以对应一个数据区，所述数据区与所述指令集结合可以用于绘制得到一个目标对象；此外，所述指令集也可以对应多个数据区，每一个所述数据区与所述指令集相结合后，可以用于绘制得到不同的目标对象，即多个不同的目标对象可以共同使用一个指令集进行目标对象的绘制，这样，由于多个目标对象可以根据同一个指令集绘制得到，因此，可以有效减少存储的指令集的个数，从而有效减少指令集对存储空间的占用。

例如，参见图4，指令集A可以对应数据区1和数据区2，根据指令集A和数据区1中的绘制数据，可以绘制得到目标对象A1，根据指令集A和数据区2中的绘制数据，可以绘制得到目标对象A2。由于目标对象A1和A2均可以根据指令集A绘制得到，因此，可以减少指令集的个数，从而减少指令集占用的存储空间。

基于本实施例中指令集与数据区分开存储的设计，在根据所述指令集中包含的多条指令，对所述目标对象进行绘制时，可以包括：

从所述存储区中查找与所述指令集对应的其中一个所述数据区；

根据所述指令集中包含的数据索引，从查找到的所述数据区中确定与所述数据索引对应的绘制数据；

根据所述绘制数据以及所述指令集中包含的多条指令，对所述目标对象进行绘制。

具体地，浏览器中的Web引擎可以根据实际绘制需求，确定与所述指令集对应的一个数据区，并通过一次接口调用告知WebAssembly使用所述指令集以及所述数据区进行目标对象的绘制，此时，WebAssembly可以根据所述指令集中包含的数据索引，从存储设备中的所述数据区中查找与所述数据索引对应的绘制数据，并将该绘制数据与所述指令集中包含的多条指令相结合，最终可以绘制得到所述目标对象。

例如，Web引擎在确定用于绘制目标对象的指令集A后，根据实际绘制需求从所述存储设备中确定与指令集A对应的数据区1后，可以将指令集A以及数据区1通过调用一次接口告知WebAssembly，此时，WebAssembly可以根据指令集A中包含的数据索引M，从数据区1中查找到与数据索引M对应的绘制数据x，WebAssembly在确定指令集A以及对应的绘制数据x后，可以将指令集A与绘制数据x相结合进而绘制得到所述目标对象。

在本实施例中，考虑到所述目标对象在显示时可能存在多种不同的显示状态，因此，在将多条指令整合成指令集，并以此方法得到多个指令集后，还可根据所述目标对象不同的状态，将多个所述指令集进行分类，不同类型的所述指令集可以视为一个指令集模板，不同的指令集模板可以对应目标对象不同的状态。

在得到多个不同类型的指令集模板后，根据所述指令集中包含的多条指令，对所述目标对象进行绘制，可以包括：

当所述目标对象的第一状态(比如，第一显示状态)发生变化时，确定与所述目标对象变化后的第二状态(比如，第二显示状态)对应的指令集；

根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

具体地，基于多个不同类型的指令集模板，在绘制所述目标对象的过程中，若所述目标对象在前后两帧的状态发生变化，则可以根据变化后的状态确定与变化后的显示状态对应的指令集(即上述记载的所述指令集模板)，进而根据该指令集对所述目标对象进行绘制，以得到不同状态的所述目标对象。其中，在根据不同的指令集模板绘制不同状态的所述目标对象时，使用的数据区可以保持不变。

例如，在绘制第一帧的目标对象时，所述目标对象是正常的显示状态，此时，可以根据该正常的显示状态对应的指令集A和数据区1绘制得到所述目标对象；在绘制第二帧的所述目标对象时，所述目标对象增加了缩放状态，那么，可以确定与缩放状态对应的指令集B，并根据指令集B以及数据区1绘制得到增加了缩放状态的所述目标对象。

这样，在所述目标对象的显示状态发生变化时，由于可以根据所述目标对象不同的显示状态随意切换不同的指令集，因此，可以提到图形绘制的效率，提高JS项目的运行效率。

本申请实施例提供的技术方案，可以实现对一帧数据中的每一个目标对象进行绘制，其中，在对每一个目标对象进行绘制时，通过将多条指令整合为一个指令集，可以使得Web引擎直接调用指令集进行目标对象的绘制，相较于现有技术而言，由于Web引擎由调用多次指令进行目标对象绘制改为调用一次指令集进行目标对象的绘制，因此，可以减少JS到WebAssembly的调用次数，提高JS项目的运行效率。

在本申请的另一实施例中，在对某个应用中包含的多个目标对象进行绘制时，可以根据上述记载的方法确定与每一个目标对象对应的指令集，并根据确定的所述指令集完成对多个目标对象的绘制。然而，在实际应用中，如果某个应用的某帧数据(例如：游戏中的界面)中包含的目标对象个数比较多，例如5000或10000个，那么，在绘制多个这样的目标对象时，需要逐个去遍历这些目标对象；当该应用的下一帧数据来到时，又需要循环遍历另外或相同的多个目标对象，而这相邻两帧或几帧的目标对象可能其相互之间的父子关系并未发生变化，甚至相应的绘制数据也未发生变化，这种每帧均重新遍历的做法，导致图形绘制的效率较低，进而JS项目的运行效率受到严重影响。

为了解决上述问题，在绘制一个应用的连续多帧涉及多个目标对象时，针对每一帧而言，可以建立该应用中多个目标对象的树形结构，该树形结构中可以包含多个节点，每一个节点分别对应一个目标对象。遍历目标对象即可以认为是遍历这种树形结构的节点树(可以称为伪节点树)。

若下一帧数据到来时，知悉该帧数据中相应节点的父子级关系未发生变化，则可以直接将上一帧中父子级关系未发生变化的节点对应的目标对象的数据复制到下一帧的目标对象的数据中，以便对下一帧中的目标对象进行绘制。因为采用上述记载的指令集和数据区分离方案，以及指令集模板方案，所以即使指令集标示类型和数据区发生变化(比如：位置、旋转、缩放)，也可以直接将上一帧数据直接拷贝到下一帧数据中。这样，由于可以直接将上一帧中的一部分数据直接复制到下一帧中，避免Web引擎循环遍历多次应用中包含的目标对象，由于Web引擎中JS接口对JS语言的解析执行效率比较低，通过在Web引擎中建立树形结构以及数据的复制使用，大大减少了循环遍历的次数，节省了绘制所需时间，提高JS项目的运行效率。下面结合图例进行说明。

如图5所示，图5中树形结构包括节点A至K，节点A至K为某应用的一帧中包含的11个目标对象对应的节点，在绘制完成上一帧后，已知下一帧中节点B、D、E、F、G、H和I(图5中用灰色进行标记)的父子级关系没有发生变化，且节点B、D、E、F、H、G和I对应的目标对象的渲染类型也没有发生变化，则在绘制下一帧时，可以直接将上一帧中节点B、D、E、F、H、G和I的数据直接复制到下一帧的数据中，无需再次循环遍历节点B、D、E、F、G、H和I。

在实际应用过程中，最终渲染数据的形成，一种实施方式是由Web引擎的JS接口层循环遍历节点，把要显示的节点列表以伪节点树结构压成数组(比如，压缩成ArrayBuffer，参见图6)，然后传递给Web引擎的Web加速器，以便WebAssembly遍历时能够按照正确顺序遍历。当前帧到来时，如果各节点之间的父子关系不发生改变，便可直接采用上一帧中ArrayBuffer内的相应数据(如图6中C-C段部分)，这种“双Buffer互换”方案，减少了循环遍历的次数，提高了运行效率。在实际游戏中，目标对象节点的位置、旋转会频繁发生变化，但是节点的父子关系的变化则非常不频繁，采取上述方案，命中率较高。退一步而言，即使目标对象节点的位置、旋转、缩放、渲染类型等发生改变，也可以直接使用上述方案，命中率也较高。

需要说明的是，上述的“双Buffer互换”方案是针对相同的目标对象的不同帧而言的，即对于相同目标对象的相邻帧或者不相邻帧之间，在父子级关系未发生变化时，为减少遍历可直接使用以前帧的数据。实际上，只要父子级关系未发生变化，无论是相同目标对象的不同帧之间，还是不同目标对象的不同帧之间，均可以采用这种技术方案，均能在一定程度上减少遍历，提高JS项目的运行效率。相同目标对象可能来自于相同的应用，不同目标对象可能来自于相同的应用，也可能来自不同的应用，无论何种情形，只要满足该方案的本质要求(即父子级关系不发生变化)，即可采用之。

图7为本申请的一个实施例基于浏览器的目标对象绘制装置的结构示意图，所述浏览器包括具有Web引擎的所述装置。该装置包括：接收单元U71、确定单元U72和绘制单元U73，其中：

U71接收单元，用于使Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；

U72确定单元，用于使Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；

U73绘制单元，用于使Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

可选地，当指令集中包含绘制目标对象的绘制数据的数据索引时，U73绘制单元具体可以包括：绘制数据获取子单元U731和目标对象绘制子单元U732，其中：

绘制数据获取子单元U731，用于根据所述指令集中数据索引从第三存储区中获取所述数据索引对应的绘制数据，所述第三存储区中存储有用于对目标对象进行绘制的绘制数据；

目标对象绘制子单元U732，用于根据所述指令集中包含的多条指令以及所述数据索引对应的绘制数据，对所述目标对象进行绘制。

上述装置实施例可以取得与前述方法实施例同样的技术效果，为避免重复，这里不再赘言。

图8为本申请的一个实施例运行器的结构示意图，所述运行器80中包含存储器81、处理器82及存储在所述存储器81上并可在所述处理器82上运行的计算机程序，所述计算机程序被所述处理器82执行时实现上述记载的目标对象绘制方法的步骤。此外，本申请实施例还提供一种浏览器，该浏览器包括Web引擎，所述Web引擎执行上述目标对象绘制方法的步骤。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述记载的目标对象绘制方法的步骤。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个......”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (14)

1.一种基于浏览器的目标对象绘制方法，其特征在于，所述浏览器包括Web引擎，所述方法包括：

Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；

Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；

Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

2.如权利要求1所述的方法，其特征在于，根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，具体包括：

根据所述绘制请求中包含的所述指令集标识，从第一存储区中查找与所述指令集标识对应的指令集，所述第一存储区中存储有不同的指令集标识以及与指令集标识对应的指令集。

3.如权利要求2所述的方法，其特征在于，所述指令集包含子指令集，则根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，具体包括：

根据所述绘制请求中包含的所述指令集标识，从第一存储区中查找与所述指令集标识对应的指令集；

从所述指令集中确定所述指令集包含的子指令集标识；

根据所述子指令集标识，从第二存储区中查找与所述子指令集标识对应的子指令集。

4.如权利要求2所述的方法，其特征在于，所述指令集中包含绘制目标对象的绘制数据，则根据所述指令集中包含的多条指令，对所述目标对象进行绘制，具体包括：

根据所述指令集中包含的多条指令以及所述绘制目标对象的绘制数据，对所述目标对象进行绘制。

5.如权利要求2所述的方法，其特征在于，所述指令集中包含绘制目标对象的绘制数据的数据索引，则根据所述指令集中包含的多条指令，对所述目标对象进行绘制，具体包括：

根据所述指令集中数据索引从第三存储区中获取所述数据索引对应的绘制数据，所述第三存储区中存储有用于对目标对象进行绘制的绘制数据；

根据所述指令集中包含的多条指令以及所述数据索引对应的绘制数据，对所述目标对象进行绘制。

6.如权利要求5所述的方法，其特征在于，所述第三存储区中包括多个数据区，不同的数据区存储有不同的绘制数据，则根据所述指令集中包含的多条指令，对所述目标对象进行绘制，具体包括：

根据所述指令集中数据索引从第三存储区中的一个数据区中获取所述数据索引对应的第一绘制数据，根据所述指令集中包含的多条指令以及所述数据索引对应的第一绘制数据，对所述目标对象进行绘制；和/或，

根据所述指令集中数据索引从第三存储区中的另一个数据区中获取所述数据索引对应的第二绘制数据，根据所述指令集中包含的多条指令以及所述数据索引对应的第二绘制数据，对目标对象进行绘制。

7.如权利要求2所述的方法，其特征在于，所述第一存储区中存储有不同类型的所述指令集，不同类型的所述指令集对应所述目标对象的不同状态，则根据所述指令集中包含的多条指令，对所述目标对象进行绘制，具体包括：

当所述目标对象为第一状态时，确定与所述目标对象的第一状态对应的指令集，根据所述第一状态对应的指令集中包含的多条指令以及所述数据索引对应的绘制数据，对所述目标对象进行绘制；和/或，

当所述目标对象为第二状态时，确定与所述目标对象的第二状态对应的指令集，根据所述第二状态对应的指令集中包含的多条指令以及所述数据索引对应的绘制数据，对所述目标对象进行绘制。

8.如权利要求1所述的方法，其特征在于，所述待绘制目标对象为多个，则所述对目标对象的绘制请求结构为伪节点树结构，所述伪节点树结构为按照节点之间的父子级关系的顺序排列的数组，所述节点为目标对象。

9.如权利要求8所述的方法，其特征在于，

在Web引擎接收到对目标对象进行绘制的第一绘制请求后，如果在接收对新的目标对象或者相同目标对象的新一帧进行绘制的第二绘制请求之前，确定所述第一绘制请求的伪节点树结构中的父子级关系未发生变化，则将所述第一绘制请求的伪节点树结构中父子级关系未发生变化的部分复制到第二绘制请求的伪节点树结构中；

Web引擎接收所述对新的目标对象或者相同目标对象的新一帧进行绘制的第二绘制请求。

10.一种基于浏览器的目标对象绘制装置，其特征在于，所述浏览器包括具有Web引擎的所述装置，所述装置包括：

接收单元，用于使Web引擎接收对目标对象进行绘制的绘制请求，所述绘制请求中包含与所述目标对象对应的指令集标识；

确定单元，用于使Web引擎根据所述绘制请求中包含的所述指令集标识，确定与所述指令集标识对应的指令集，所述指令集中包含对所述目标对象进行绘制的多条指令；

所述绘制单元，用于使Web引擎根据所述指令集中包含的多条指令，对所述目标对象进行绘制。

11.如权利要求10所述的装置，其特征在于，所述指令集中包含绘制目标对象的绘制数据的数据索引，则所述绘制单元还包括：

绘制数据获取子单元，用于根据所述指令集中数据索引从第三存储区中获取所述数据索引对应的绘制数据，所述第三存储区中存储有用于对目标对象进行绘制的绘制数据；

目标对象绘制子单元，用于根据所述指令集中包含的多条指令以及所述数据索引对应的绘制数据，对所述目标对象进行绘制。

12.一种运行器，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至9中任一项所述的方法的步骤。

13.一种浏览器，其特征在于，所述浏览器包括Web引擎，所述Web引擎执行如权利要求1至9中任一项所述的方法的步骤。

14.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至9中任一项所述的方法的步骤。