CN111190818B - 前端代码分析方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本申请实施例属于开发辅助领域，涉及一种前端代码分析方法，包括获取待分析的前端代码；对超级文本标记代码进行分析以获得超级文本标记代码的层级复杂度值和超级文本标记代码行数值；对脚本代码进行分析以获得脚本代码的时间复杂度值和机器代码行数值；对层叠样式表代码进行分析以获得层叠样式表代码的动画复杂度值和层叠样式表代码行数值；将层级复杂度值、超级文本标记代码行数值、时间复杂度值、机器代码行数值、动画复杂度值和层叠样式表代码行数值在交互界面进行展示。本申请还提供一种前端代码分析装置、计算机设备及存储介质。本申请通过对前端代码中的超级文本标记代码、脚本代码和层叠样式表代码进行分析来实现分析前端代码。

Description

前端代码分析方法、装置、计算机设备及存储介质

技术领域

本申请涉及开发辅助技术领域，尤其涉及前端代码分析方法、装置、计算机设备及存储介质。

背景技术

在计算机代码中，前端代码是一种非常灵活的代码，若前端代码的逻辑过于复杂，将容易导致许多不可预期的错误。在前端开发的过程中，开发人员都会尽量使前端代码的逻辑更加简单以保证前端代码的质量。现今，随着对前端开发团队的管理水平的提升，前端开发团队的管理人员希望能拥有一种自动分析前端代码质量的工具。但是，现在市场上的代码分析工具大多是针对广泛的计算机代码进行的分析，将其应用在前端代码的分析中，效果并不理想。因此，现有技术中还缺少一种前端代码的分析方法。

发明内容

本申请实施例的目的在于提出一种前端代码分析方法、装置、计算机设备及存储介质，以解决现有技术中代码分析工具无法对前端代码进行有效分析的问题。

为了解决上述技术问题，本申请实施例提供一种前端代码分析方法，采用了如下所述的技术方案：

获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码；

对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值；

对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值；

对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值；

将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示。

进一步的，所述对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值包括：

遍历所述超级文本标记代码对应的DOM树以获得所述超级文本标记代码的各个层级标签在所述超级文本标记代码中出现的次数；

计算各个层级标签的次数的加权和，以所述加权和为所述层级复杂度值；

识别所述超级文本标记代码中的行数标识字符，以所述行数标识字符在所述超级文本标记代码中出现的次数为所述超级文本标记代码行数值。

进一步的，遍历所述超级文本标记代码对应的DOM树时，还获取各个层级标签对应的层级权值，所述层级权值是一个随层级标签的层级深度增加而增加的斐波那契数列，所述计算各个层级标签的次数的加权和包括：

将所述层级权值作为各个层级标签的次数的加权计算所述次数的加权和。

进一步的，所述对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值包括：

识别所述脚本代码中的分割字符，提取每两个分割字符间的脚本代码以作为各个语句片段；

识别每个语句片段中的语句类型字符，并根据所述语句类型字符确定每个语句片段对应的机器代码行数；

将各个语句片段对应的机器代码行数相加以得到机器代码行数值；

识别各个语句片段中的循环标识字符，将包含有所述循环标识字符的语句片段作为循环语句片段；

识别所述循环语句片段中的条件字符，并根据所述条件字符获得所述循环语句片段的循环次数；

将各个所述循环语句片段对应的循环次数相加以得到时间复杂度值。

进一步的，所述根据所述条件字符获得所述循环语句片段的循环次数包括：

判断所述条件字符的字符类型；所述字符类型包括数字字符和字母字符；

当所述条件字符是数字字符时，以所述条件字符表示的数值为所述循环语句片段的循环次数；

当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数。

进一步的，在所述当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数之后还包括：

根据所述循环语句片段在所述脚本代码中出现的先后顺序对所述循环语句片段进行排序；

从排序中的最后一条循环语句片段开始，按照所述排序的倒序依次将每个循环语句片段作为基准循环语句片段；

每次选取新的基准循环语句片段时，以排序中基准循环语句片段的上一个循环语句片段为查重循环语句片段；

检测所述基准循环语句片段和所述查重循环语句片段之间的脚本代码是否存在有循环终止字符；

若是，则维持所述基准循环语句片段和所述查重循环语句片段的循环次数不变；

若否，则将所述基准循环语句片段的循环次数与所述查重循环语句片段的循环次数相乘以作为所述查重循环语句片段的循环次数，并将所述基准循环语句片段的循环次数置零。

进一步的，所述对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值包括：

识别所述层叠样式表代码中的动画标签字符，并统计各个动画标签字符的出现次数；

将动画标签字符的起始项数与动画标签字符的出现次数相加以作为动画标签的映射项数；所述起始项数是针对各个动画标签预设的正整数；

以映射项数在斐波拉契数列中对应的数值为动画标签字符的动画复杂度值；

将各个动画标签字符的动画复杂度值相加以作为所述层叠样式表代码的动画复杂度值；

识别所述层叠样式表代码中的行数标签字符，以所述行数标签字符的出现次数作为所述层叠样式表代码行数值。

为了解决上述技术问题，本申请实施例还提供一种前端代码分析装置，采用了如下所述的技术方案：

获取模块，用于获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码；

超级文本标记代码分析模块，用于对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值；

脚本代码分析模块，用于对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值；

层叠样式表代码分析模块，用于对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值；

展示模块，用于将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项的前端代码分析方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一项的前端代码分析方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

能够对前端代码中的超级文本标记代码、脚本代码和层叠样式表代码进行分析，从而获得超级文本标记代码的层级复杂度值和超级文本标记代码行数值、脚本代码的时间复杂度值和机器代码行数值、层叠样式表代码的动画复杂度值和层叠样式表代码行数值，最后据此在交互界面展示分析结果，从而能够实现对前端代码的分析，解决现有技术中代码分析工具无法对前端代码进行有效分析的问题。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请可以应用于其中的示例性系统架构图；

图2是根据本申请的前端代码分析方法的一个实施例的流程图；

图3是图2中步骤S2的一种具体实施方式的流程图；

图4是图2中步骤S3的一种具体实施方式的流程图；

图5是图4中步骤S35的一种具体实施方式的流程图；

图6是图4中步骤S35的另一种具体实施方式的流程图；

图7是图2中步骤S4的一种具体实施方式的流程图；

图8是根据本申请的前端代码分析装置的一个实施例的结构示意图；

图9是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的前端代码分析方法一般由服务器/终端设 备执行，相应地，前端代码分析装置一般设置于服务器/终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

参考图2，示出了根据本申请的前端代码分析方法的一个实施例的流程图。所述的前端代码分析方法，包括以下步骤：

S1：获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码。

在上述步骤S1中，超级文本标记代码是指HTML((Hyper Text Markup Language))代码，脚本代码是指JS(JavaScript)代码，层叠样式表代码是指CSS(Cascading StyleSheet)代码。在实际开发过程中，前端代码通常包括HTML、JS和CSS三部分的代码。前端代码文件包中通常包含有三种文件：以.html为后缀的html文件、以.js为后缀的js文件和以.css为后缀的css文件。通过获取不同文件里的内容即可以获得对应种类的代码。获取待分析的前端代码可以有以下两种实现方式：

(1)在交互界面处提供文本框以收集待分析的前端代码。

(2)在交互界面处提供文本框以收集待分析的网站地址，然后提取待分析的网站地址中的源代码作为待分析的前端代码。

S2：对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值。

进一步地，如图3所示，上述步骤S2可以包括：

S21：遍历所述超级文本标记代码对应的DOM树以获得所述超级文本标记代码的各个层级标签在所述超级文本标记代码中出现的次数。

在上述步骤S21中，DOM树是指对存储有前端代码的文档进行解析后生成的文档对象模型，其将文档抽象成一个树型结构，便于开发人员操作和查看文档中的元素、属性、节点等。

通常超级文本标记代码都具有自己的层级结构，例如以下超级文本标记代码：

其中div、span和p皆为层级标签，通过遍历超级文本标记代码对应的DOM树即能够获得div层级标签出现的次数为1，span层级标签出现的次数为1，p层级标签出现的次数为1。

S22：计算各个层级标签的次数的加权和，以所述加权和为所述层级复杂度值。

在上述步骤S22中，计算各个层级标签的次数的加权和时，次数的权值可以取值为依次递增的正整数。在上述步骤S21的例子的基础之上，div、span和p的权值可以依次取值为1、2、3，此时加权和为1*1+1*2+1*3＝6，即层级复杂度值为6。

进一步地，在上述步骤S22中，遍历所述超级文本标记代码对应的DOM树时，还获取各个层级标签对应的层级权值，所述层级权值是一个随层级标签的层级深度增加而增加的斐波那契数列，所述计算各个层级标签的次数的加权和可以包括：

将所述层级权值作为各个层级标签的次数的加权计算所述次数的加权和。

斐波拉契数列是这样一个数列：1,1,2,3,5,8,13,21,34,55,89,144......这个数列从第三项开始，每一项都等于前两项之和。层级标签对应的层级权值由层级标签所在的层级深度决定。以上述步骤S21的例子为基础，其中，div为一级层级深度的标签，span和p为二级层级深度的标签，一级层级深度对应的层级权值为斐波那契数列的第2项(由于该数列的第一个数和第二个数皆为1，从第三项才开始递增，故从第2项开始取值)，即为1，二级层级深度对应的层级权值为斐波那契数列的第3项，即为2，此时加权和为1*1+1*2+1*2＝5，即层级复杂度为5。

在超级文本标记代码中，代码层级结构越深，维护的难度越高。通过使用斐波那契数列这一递增数列作为层级权值，然后将层级权值作为各个层级标签的次数的加权以计算出层级复杂度值，能够使层级复杂度值更加准确地反映超级文本标记代码的复杂度。

S23：识别所述超级文本标记代码中的行数标识字符，以所述行数标识字符在所述超级文本标记代码中出现的次数为所述超级文本标记代码行数值。

在上述步骤S23中，行数标识字符可以是“/”。在超级文本标识代码中，每段有意义的代码通常包含在开头单词和结束单词之间，例如，<span>......</span>。因此，通过识别结束单词中特有的字符“/”，能够得到超级文本标记代码的行数值。如上述步骤S21的例子，其中，“/”出现了三次，所以超级文本标记代码行数值为3。

S3：对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值。

进一步地，如图4所示，上述步骤S3可以包括：

S31：识别所述脚本代码中的分割字符，提取每两个分割字符间的脚本代码以作为各个语句片段。

在上述步骤S31中，分割字符可以包括空格字符和换行字符。在脚本代码中，每两个语句之间通常会存在空格字符或换行字符，所以识别脚本代码中的分割字符，并提取每两个分割字符间的脚本代码以作为各个语句片段能够将脚本代码划分为多个语句片段。例如，以下的脚本代码：

for(let i＝0；i<len；i++){

for(let j＝0；j<len；j++){

console.log(11)；}}

其提取出来的各个语句片段为：“for(let i＝0；i<len；i++){”、“for(let j＝0；j<len；j++){”、“console.log(11)；}}”。

S32：识别每个语句片段中的语句类型字符，并根据所述语句类型字符确定每个语句片段对应的机器代码行数。

在上述步骤S32中，语句类型字符可以包括“for”、“do”、“switch”等脚本代码语句中特有的单词。由于每种类型的语句对应的机器代码是固定的，所以通过识别每个语句片段中的语句类型字符能够确定每个语句片段的语句类型，从而获得每个语句片段对应的机器代码行数。例如，for循环对应的机器代码为：

main PROC

mov cx,101

mov dx,sum

L1:

mov ax,i

mov bl,2

div bl

cmp ah,0

......等17行，所以“for”语句类型字符对应的机器代码行数为17。

S33：将各个语句片段对应的机器代码行数相加以得到机器代码行数值。

在上述步骤S33中，以上述步骤S31和上述步骤S32的例子为基础，console语句对应的机器代码行数为15，所以机器代码行数值为17+17+15＝49。

S34：识别各个语句片段中的循环标识字符，将包含有所述循环标识字符的语句片段作为循环语句片段。

在上述步骤S34中，循环标识字符可以包括“do”和“while”。在脚本代码中，循环语句通常包括三类:for循环、while循环和do......while循环，故将“do”和“while”设置为循环标识字符。通过识别语句片段中的循环标识字符，能够提取脚本代码中的循环语句。

S35：识别所述循环语句片段中的条件字符，并根据所述条件字符获得所述循环语句片段的循环次数。

在上述步骤S35中，识别循环语句片段中的条件字符可以通过以下方式实现：识别循环语句片段中的判断字符，然后截取判断字符和间隔字符间的字符作为条件字符。这里，判断字符可以包括：“<”、“>”、“＝”、“<＝”等。间隔字符可以是“；”。例如，一个循环语句片段为：“for(let i＝0；i<10；i++){”，其条件字符即为“10”。

S36：将各个所述循环语句片段对应的循环次数相加以得到时间复杂度值。

进一步地，如图5所示，在上述步骤S35中，所述根据所述条件字符获得所述循环语句片段的循环次数可以包括：

S351：判断所述条件字符的字符类型；所述字符类型包括数字字符和字母字符。

S352：当所述条件字符是数字字符时，以所述条件字符表示的数值为所述循环语句片段的循环次数。

在上述步骤S352中，例如，循环语句片段“for(let i＝0；i<10；i++){”中的条件字符为“10”，其中，“10”为数字字符，所以for(let i＝0；i<10；i++){”的循环次数为10。

S353：当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数。

在上述步骤353中，例如，循环语句片段“for(let i＝0；i<len；i++){”中的条件字符为“len”，其中，“len”为字母字符，且脚本代码中存在“len”的赋值语句：“len＝5”，所以“for(let i＝0；i<len；i++){”的循环次数为5。

进一步地，如图6所示，在上述步骤S353之后还可以包括：

S354：根据所述循环语句片段在所述脚本代码中出现的先后顺序对所述循环语句片段进行排序。

S355：从排序中的最后一条循环语句片段开始，按照所述排序的倒序依次将每个循环语句片段作为基准循环语句片段。

S356：每次选取新的基准循环语句片段时，以排序中基准循环语句片段的上一个循环语句片段为查重循环语句片段。

S357：检测所述基准循环语句片段和所述查重循环语句片段之间的脚本代码是否存在有循环终止字符。

S358：若是，则维持所述基准循环语句片段和所述查重循环语句片段的循环次数不变。

S359：若否，则将所述基准循环语句片段的循环次数与所述查重循环语句片段的循环次数相乘以作为所述查重循环语句片段的循环次数，并将所述基准循环语句片段的循环次数置零。

在上述步骤S354、S355、S356、S357、S358和S359中，循环终止字符可以是“}”。在脚本代码中，循环语句通常以字符“}”表示循环结束，故循环终止字符可以设置为“}”。例如，以下的脚本代码：

for(let i＝0；i<10；i++){

for(let j＝0；j<5；j++){

console.log(11)；}}

其提取出来的各个语句片段为：“for(let i＝0；i<10；i++){”、“for(let j＝0；j<5；j++){”、“console.log(11)；}}”。其中，循环语句片段依次为：“for(let i＝0；i<10；i++){”、“for(let j＝0；j<5；j++){”，两个循环语句片段的循环次数分别为10和5。但是，由于“for(let i＝0；i<10；i++){”和“for(let j＝0；j<5；j++){”之间并不存在循环终止字符“}”，所以这两个循环语句片段是一个嵌套循环，故将“for(let i＝0；i<10；i++){”的循环次数设置为10*5＝50，“for(let j＝0；j<5；j++){”的循环次数设置为0。

在脚本代码中，有时会出现循环嵌套的情形，在这种情况下，若单纯地以循环语句片段中的条件字符确定循环次数，必然与实际的循环次数不太吻合。通过上述步骤S354、S355、S356、S357、S358和S359能够判断出循环语句片段间是否存在循环嵌套的情形，并根据循环嵌套的情形对循环嵌套中的循环语句片段的循环次数进行重新调整，从而能够更加准确的计算脚本代码中进行的循环次数，使时间复杂度值能够更加准确地反映脚本代码的复杂度。

S4：对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值。

进一步地，如图7所示，上述步骤S4可以包括：

S41：识别所述层叠样式表代码中的动画标签字符，并统计各个动画标签字符的出现次数。

在上述步骤S41中，动画标签字符可以是“animation”、“transfrom”等调用动画时需要使用的语句。

S42：将动画标签字符的起始项数与动画标签字符的出现次数相加以作为动画标签的映射项数；所述起始项数是针对各个动画标签预设的正整数。

在上述步骤S42中，起始项数可以是随运行动画标签字符对应的语句时，所需要的运行时间的增大而预设的更大的值。例如，“animation”的运行时间较短，即起始项数可以预设为1，“transfrom”的运行时间较长，即起始项数可以预设为6。此时，若“animation”的出现次数为2，“transfrom”的出现次数为3，即“animation”的映射项数为3，“transfrom”的映射项数为9。

S43：以映射项数在斐波拉契数列中对应的数值为动画标签字符的动画复杂度值。

在上述步骤S43中，斐波拉契数列是这样一个数列：1,1,2,3,5,8,13,21,34,55,89,144......这个数列从第三项开始，每一项都等于前两项之和。在上述步骤S42的例子的基础之上，斐波拉契数列的第3项为2，第9项为34，所以，“animation”的动画复杂度值为2，“transfrom”的动画复杂度值为34。

在层叠样式表代码中，动画标签字符出现得次数越多，调用动画的次数也会越多，需要的运行时间也会成比例增长，由于斐波拉契数列也是一个呈比例增长的一个数列，故以斐波拉契数列中映射项数对应的数值为动画标签字符的动画复杂度值，能够使动画标签字符的动画复杂度值更加准确的反映层叠样式表代码的复杂度。

S44：将各个动画标签字符的动画复杂度值相加以作为所述层叠样式表代码的动画复杂度值。

在上述步骤S44中，在上述步骤S42的例子的基础之上，此时，层叠样式表代码的动画复杂度值即为“animation”的动画复杂度值与“transfrom”的动画复杂度值之和，即2+34＝36。

S45：识别所述层叠样式表代码中的行数标签字符，以所述行数标签字符的出现次数作为所述层叠样式表代码行数值。

在上述步骤S45中，行数标签字符可以包括：“：”和“{”。在层叠样式表代码中，每一行代码都对应有一个“：”符号或“{”符号，所以通过识别“：”和“{”能够识别出层叠样式表代码的代码行数。

例如，以下的层叠样式表代码：

“：”字符出现了两次，“{”字符出现了一次，行数标签字符的出现次数为3次，所以其中有意义的行数为3行，将层叠样式表代码行数值设置为3。

S5:将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示。

在上述步骤S5中，可以直接在交互界面处展示层级复杂度值、超级文本标记代码行数值、时间复杂度值、机器代码行数值、动画复杂度值和层叠样式表代码行数值对应的数值。另外，还可以为层级复杂度值、超级文本标记代码行数值、时间复杂度值、机器代码行数值、动画复杂度值和层叠样式表代码行数值分别设置不同的警示阈值，当层级复杂度值、超级文本标记代码行数值、时间复杂度值、机器代码行数值、动画复杂度值或层叠样式表代码行数值大于其对应的警示阈值时，将其在交互界面处展示的数值图形设置为红色。

在本实施例中，能够对前端代码中的超级文本标记代码、脚本代码和层叠样式表代码进行分析，从而获得超级文本标记代码的层级复杂度值和超级文本标记代码行数值、脚本代码的时间复杂度值和机器代码行数值、层叠样式表代码的动画复杂度值和层叠样式表代码行数值，最后据此在交互界面展示分析结果，从而能够实现对前端代码的分析，解决现有技术中代码分析工具无法对前端代码进行有效分析的问题。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图8，作为对上述图2所示方法的实现，本申请提供了一种前端代码分析装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图8所示，本实施例所述的前端代码分析装置400包括：获取模块401、超级文本标记代码分析模块402、脚本代码分析模块403、层叠样式表代码分析模块404以及展示模块405。其中：

获取模块401，用于获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码。

超级文本标记代码分析模块402，用于对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值。

脚本代码分析模块403，用于对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值。

层叠样式表代码分析模块404，用于对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值。

展示模块405，用于将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示。

在本实施例中，能够对前端代码中的超级文本标记代码、脚本代码和层叠样式表代码进行分析，从而获得超级文本标记代码的层级复杂度值和超级文本标记代码行数值、脚本代码的时间复杂度值和机器代码行数值、层叠样式表代码的动画复杂度值和层叠样式表代码行数值，最后据此在交互界面展示分析结果，从而能够实现对前端代码的分析，解决现有技术中代码分析工具无法对前端代码进行有效分析的问题。

进一步地，超级文本标记代码分析模块402可以包括：

层级标签次数获取单元，用于遍历所述超级文本标记代码对应的DOM树以获得所述超级文本标记代码的各个层级标签在所述超级文本标记代码中出现的次数。

层级复杂度值计算单元，用于计算各个层级标签的次数的加权和，以所述加权和为所述层级复杂度值。

超级文本标记代码行数值计算单元，用于识别所述超级文本标记代码中的行数标识字符，以所述行数标识字符在所述超级文本标记代码中出现的次数为所述超级文本标记代码行数值。

进一步地，脚本代码分析模块403可以包括：

语句片段提取单元，用于识别所述脚本代码中的分割字符，提取每两个分割字符间的脚本代码以作为各个语句片段。

语句类型识别单元，用于识别每个语句片段中的语句类型字符，并根据所述语句类型字符确定每个语句片段对应的机器代码行数。

机器代码行数值计算单元，用于将各个语句片段对应的机器代码行数相加以得到机器代码行数值。

循环标识识别单元，用于识别各个语句片段中的循环标识字符，将包含有所述循环标识字符的语句片段作为循环语句片段。

条件字符识别单元，用于识别所述循环语句片段中的条件字符，并根据所述条件字符获得所述循环语句片段的循环次数。

时间复杂度值计算单元，用于将各个所述循环语句片段对应的循环次数相加以得到时间复杂度值。

进一步地，条件字符识别单元可以包括：

字符类型判断单元，用于判断所述条件字符的字符类型；所述字符类型包括数字字符和字母字符。

数字字符循环次数确定单元，用于当所述条件字符是数字字符时，以所述条件字符表示的数值为所述循环语句片段的循环次数。

字母字符循环次数确定单元，用于当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数。

进一步地，条件字符识别单元还可以包括：

排序单元，用于根据所述循环语句片段在所述脚本代码中出现的先后顺序对所述循环语句片段进行排序。

基准单元，用于从排序中的最后一条循环语句片段开始，按照所述排序的倒序依次将每个循环语句片段作为基准循环语句片段。

查重选取单元，用于每次选取新的基准循环语句片段时，以排序中基准循环语句片段的上一个循环语句片段为查重循环语句片段。

循环终止检测单元，用于检测所述基准循环语句片段和所述查重循环语句片段之间的脚本代码是否存在有循环终止字符。

循环次数维持单元，用于若是，则维持所述基准循环语句片段和所述查重循环语句片段的循环次数不变。

循环次数变更单元，用于若否，则将所述基准循环语句片段的循环次数与所述查重循环语句片段的循环次数相乘以作为所述查重循环语句片段的循环次数，并将所述基准循环语句片段的循环次数置零。

进一步地，层叠样式表代码分析模块404可以包括：

动画标签字符识别单元，用于识别所述层叠样式表代码中的动画标签字符，并统计各个动画标签字符的出现次数。

映射项数计算单元，用于将动画标签字符的起始项数与动画标签字符的出现次数相加以作为动画标签的映射项数；所述起始项数是针对各个动画标签预设的正整数。

动画复杂度值初步计算单元，用于以映射项数在斐波拉契数列中对应的数值为动画标签字符的动画复杂度值。

动画复杂度值总计算单元，用于将各个动画标签字符的动画复杂度值相加以作为所述层叠样式表代码的动画复杂度值。

行数标签字符识别单元，用于识别所述层叠样式表代码中的行数标签字符，以所述行数标签字符的出现次数作为所述层叠样式表代码行数值。

具体地，对于前端代码分析装置的具体限定与上述前端代码分析方法的具体限定一致，在此不再一一赘述。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图9，图9为本实施例计算机设备基本结构框图。

所述计算机设备9包括通过系统总线相互通信连接存储器91、处理器92、网络接口93。需要指出的是，图中仅示出了具有组件91-93的计算机设备9，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器91至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器91可以是所述计算机设备9的内部存储单元，例如该计算机设备9的硬盘或内存。在另一些实施例中，所述存储器91也可以是所述计算机设备9的外部存储设备，例如该计算机设备9上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器91还可以既包括所述计算机设备9的内部存储单元也包括其外部存储设备。本实施例中，所述存储器91通常用于存储安装于所述计算机设备9的操作系统和各类应用软件，例如前端代码分析方法的程序代码等。此外，所述存储器91还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器92在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器92通常用于控制所述计算机设备9的总体操作。本实施例中，所述处理器92用于运行所述存储器91中存储的程序代码或者处理数据，例如运行所述前端代码分析方法的程序代码。

所述网络接口93可包括无线网络接口或有线网络接口，该网络接口93通常用于在所述计算机设备9与其他电子设备之间建立通信连接。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有前端代码分析程序，所述前端代码分析程序可被至少一个处理器执行，以使所述至少一个处理器执行如上述的前端代码分析方法的步骤。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (7)

1.一种前端代码分析方法，其特征在于，包括下述步骤：

获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码；

对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值；

对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值；

对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值；

将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示；

所述对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值包括：

遍历所述超级文本标记代码对应的DOM树以获得所述超级文本标记代码的各个层级标签在所述超级文本标记代码中出现的次数；

计算各个层级标签的次数的加权和，以所述加权和为所述层级复杂度值；

识别所述超级文本标记代码中的行数标识字符，以所述行数标识字符在所述超级文本标记代码中出现的次数为所述超级文本标记代码行数值；

所述对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值包括：

识别所述脚本代码中的分割字符，提取每两个分割字符间的脚本代码以作为各个语句片段；

识别每个语句片段中的语句类型字符，并根据所述语句类型字符确定每个语句片段对应的机器代码行数；

将各个语句片段对应的机器代码行数相加以得到机器代码行数值；

识别各个语句片段中的循环标识字符，将包含有所述循环标识字符的语句片段作为循环语句片段；

识别所述循环语句片段中的条件字符，并根据所述条件字符获得所述循环语句片段的循环次数；

将各个所述循环语句片段对应的循环次数相加以得到时间复杂度值；

所述对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值包括：

识别所述层叠样式表代码中的动画标签字符，并统计各个动画标签字符的出现次数；

将动画标签字符的起始项数与动画标签字符的出现次数相加以作为动画标签的映射项数；所述起始项数是针对各个动画标签预设的正整数；

以映射项数在斐波拉契数列中对应的数值为动画标签字符的动画复杂度值；

将各个动画标签字符的动画复杂度值相加以作为所述层叠样式表代码的动画复杂度值；

识别所述层叠样式表代码中的行数标签字符，以所述行数标签字符的出现次数作为所述层叠样式表代码行数值。

2.根据权利要求1所述的前端代码分析方法，其特征在于，遍历所述超级文本标记代码对应的DOM树时，还获取各个层级标签对应的层级权值，所述层级权值是一个随层级标签的层级深度增加而增加的斐波那契数列，所述计算各个层级标签的次数的加权和包括：

将所述层级权值作为各个层级标签的次数的加权计算所述次数的加权和。

3.根据权利要求1所述的前端代码分析方法，所述根据所述条件字符获得所述循环语句片段的循环次数包括：

判断所述条件字符的字符类型；所述字符类型包括数字字符和字母字符；

当所述条件字符是数字字符时，以所述条件字符表示的数值为所述循环语句片段的循环次数；

当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数。

4.根据权利要求3所述的前端代码分析方法，在所述当所述条件字符是字母字符时，在所述脚本代码中查找所述字母字符的赋值语句，以所述赋值语句中的赋值为所述循环语句片段的循环次数之后还包括：

根据所述循环语句片段在所述脚本代码中出现的先后顺序对所述循环语句片段进行排序；

从排序中的最后一条循环语句片段开始，按照所述排序的倒序依次将每个循环语句片段作为基准循环语句片段；

每次选取新的基准循环语句片段时，以排序中基准循环语句片段的上一个循环语句片段为查重循环语句片段；

检测所述基准循环语句片段和所述查重循环语句片段之间的脚本代码是否存在有循环终止字符；

若是，则维持所述基准循环语句片段和所述查重循环语句片段的循环次数不变；

若否，则将所述基准循环语句片段的循环次数与所述查重循环语句片段的循环次数相乘以作为所述查重循环语句片段的循环次数，并将所述基准循环语句片段的循环次数置零。

5.一种前端代码分析装置，其特征在于，包括：

获取模块，用于获取待分析的前端代码；所述前端代码包括超级文本标记代码、脚本代码和层叠样式表代码；

超级文本标记代码分析模块，用于对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值；

脚本代码分析模块，用于对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值；

层叠样式表代码分析模块，用于对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值；

展示模块，用于将所述层级复杂度值、所述超级文本标记代码行数值、所述时间复杂度值、所述机器代码行数值、所述动画复杂度值和所述层叠样式表代码行数值在交互界面进行展示；

所述对所述超级文本标记代码进行分析以获得所述超级文本标记代码的层级复杂度值和超级文本标记代码行数值包括：

遍历所述超级文本标记代码对应的DOM树以获得所述超级文本标记代码的各个层级标签在所述超级文本标记代码中出现的次数；

计算各个层级标签的次数的加权和，以所述加权和为所述层级复杂度值；

识别所述超级文本标记代码中的行数标识字符，以所述行数标识字符在所述超级文本标记代码中出现的次数为所述超级文本标记代码行数值；

所述对所述脚本代码进行分析以获得所述脚本代码的时间复杂度值和机器代码行数值包括：

识别所述脚本代码中的分割字符，提取每两个分割字符间的脚本代码以作为各个语句片段；

识别每个语句片段中的语句类型字符，并根据所述语句类型字符确定每个语句片段对应的机器代码行数；

将各个语句片段对应的机器代码行数相加以得到机器代码行数值；

识别各个语句片段中的循环标识字符，将包含有所述循环标识字符的语句片段作为循环语句片段；

识别所述循环语句片段中的条件字符，并根据所述条件字符获得所述循环语句片段的循环次数；

将各个所述循环语句片段对应的循环次数相加以得到时间复杂度值；

所述对所述层叠样式表代码进行分析以获得所述层叠样式表代码的动画复杂度值和层叠样式表代码行数值包括：

识别所述层叠样式表代码中的动画标签字符，并统计各个动画标签字符的出现次数；

将动画标签字符的起始项数与动画标签字符的出现次数相加以作为动画标签的映射项数；所述起始项数是针对各个动画标签预设的正整数；

以映射项数在斐波拉契数列中对应的数值为动画标签字符的动画复杂度值；

将各个动画标签字符的动画复杂度值相加以作为所述层叠样式表代码的动画复杂度值；

识别所述层叠样式表代码中的行数标签字符，以所述行数标签字符的出现次数作为所述层叠样式表代码行数值。

6.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述的前端代码分析方法的步骤。

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