转码后线上线下环境页面对比的分析方法和设备的制作方法
【专利摘要】本发明提供了一种转码后线上线下环境页面对比的分析方法和设备。所述方法包括：获取并存储配置文件；根据存储的配置文件获取线上和线下访问的html页面；通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别；根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分；根据获取的线上和线下访问的html页面之间的差别来将线上和线下访问的html页面之间的变化进行漂染；展现漂染后的线上和线下访问的html页面以及打分结果。
【专利说明】转码后线上线下环境页面对比的分析方法和设备
【技术领域】
[0001]本发明涉及转码后页面效果的比较，更具体地讲，涉及一种转码后线上线下环境页面对比的分析方法和设备。
【背景技术】
[0002]以前的网页主要针对计算机等固定终端，随着智能终端(例如智能手机)等也可以浏览各种网页的移动终端的出现，由于这些移动终端的显示屏幕的大小或者移动终端中系统的限制，并不是所有的移动终端都能够很好地显示出各种网页的网页效果，因此需要使用转码器对原本针对计算机设计的原网页进行转码，使其适应各种移动终端的显示屏幕。
[0003]由于互联网的网页千姿百态、页面类型和形态不胜枚举，现有技术中对转码页面的质量测试是用人工用肉眼进行测试，即人工对两个网页进行一一比对以找到差异。由于人为主观因素，还容易导致测试的页面种类不全，使测试结果参考性大打折扣。
【发明内容】
[0004]因此，本发明提供了一种用于转码后线上线下环境页面对比的分析方法，所述方法包括:获取并存储配置文件；根据存储的配置文件获取线上和线下访问的html页面；通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别；根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分；根据获取的线上和线下访问的html页面之间的差别来将线上和线下访问的html页面之间的变化进行漂染；展现漂染后的线上和线下访问的html页面以及打分结果。
[0005]优选地，获取线上和线下访问的html页面可包括:根据存储的配置文件拼接线上和线下访问的URL ;根据拼接的线上和线下访问的URL获取执行javascript后的线上和线下访问的html页面。
[0006]优选地，可通过使用模拟浏览内核程序来执行URL，从而生成执行javascript后的html页面。
[0007]优选地，获取线上和线下访问的html页面之间的差别可包括:预处理线上和线下访问的html页面；对比预处理后的线上和线下访问的html页面的Dom树。
[0008]优选地，对比预处理后的线上和线下访问的html页面的Dom树可包括:获取线上和线下访问的html页面的Dom树；遍历Dom树获取各个标签的内容；分别针对线上和线下访问的html页面的Dom树中获取的各个标签内容进行比较；以Hash数组形式展示比较结果O
[0009]本发明提供了一种用于转码后线上线下环境页面对比的分析设备，所述分析设备可包括:配置文件获取单元，获取并存储配置文件；HTML页面获取单元，根据存储的配置文件获取线上和线下访问的html页面；HTML页面差别计算单元，通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别；打分单元，根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分；漂染单元，根据获取的线上和线下访问的html页面之间的差别来将线上和线下访问的html页面之间的变化进行漂染；展现单元，展现漂染后的线上和线下访问的html页面以及打分结果。
[0010]优选地，HTML页面获取单元可包括:URL拼接子单元，根据存储的配置文件拼接线上和线下访问的URL ；HTML页面获取子单元，根据拼接的线上和线下访问的URL获取执行javascript后的线上和线下访问的html页面。
[0011]优选地，HTML页面获取子单元可通过使用模拟浏览内核程序来执行URL，从而生成执行javascript后的html页面。
[0012]优选地，HTML页面差别计算单元可包括:HTML页面预处理单元，预处理线上和线下访问的html页面；Dom树对比单元,对比预处理后的线上和线下访问的html页面的Dom树。
[0013]优选地，Dom树对比单元可通过获取线上和线下访问的html页面的Dom树,遍历Dom树获取各个标签的内容，分别针对线上和线下访问的html页面的Dom树中获取的各个标签内容进行比较，并以Hash数组形式展示比较结果，来对比预处理后的线上和线下访问的html页面的Dom树。
[0014]将在接下来的描述中部分阐述本发明另外的方面和/或优点，还有一部分通过描述将是清楚的，或者可以经过本发明的实施而得知。
【专利附图】
【附图说明】
[0015]通过下面结合附图对本发明的实施例进行描述，本发明的上述和其他目的将会变得更加清楚，其中:
[0016]图1是示出根据本发明实施例的用于转码后线上线下环境页面对比的分析方法的流程图；
[0017]图2是示出根据本发明实施例的根据存储的配置文件获取线上和线下访问的html页面的详细过程；
[0018]图3是示出根据本发明实施例的获取线上和线下访问的html页面之间的差别的详细过程；
[0019]图4是示出Dom树的示意图；
[0020]图5是示出遍历Dom树后得到的text、branch、img、link数组的示意图；
[0021]图6是示出对比线上Dom树和线下Dom树的示意图；
[0022]图1是示出对比后得到的data数组(Branch、Image、Link)的示意图；
[0023]图8是示出对比后得到的data数组(Text)的示意图；
[0024]图9是示出Branch、Text、Image、Link数组对比后的hash数组；
[0025]图10是示出针对每个结点打分的示意图；
[0026]图11是示出将不同内容漂染后的html页面的示意图；
[0027]图12是示出将所有结果进行展现的示意图；
[0028]图13是示出本发明实施例的用于转码后线上线下环境页面对比的分析设备的结构的框图。【具体实施方式】
[0029]图1是示出根据本发明实施例的用于转码后线上线下环境页面对比的分析方法的流程图。
[0030]如图1所示，在SlOl，获取并存储配置文件。
[0031]具体的讲，配置文件可包括为页面打分的权值配置文件、页面类型配置文件、运行所需的其他配置文件(如线上线下机器名字、选择架构体系建站架构或云阅读架构或简略转码架构)、发送邮件地址等相关配置文件。
[0032]这些配置文件可被存储(例如，放置)在目录(例如，一个conf目录)中，因此在需要时可通过读取该目录来得到配置文件。
[0033]例如，由于线下的测试机器不固定、转码服务的统一资源定位器(URL)中各种参数在测试中不固定，因此将线上线下机器配置文件抽取出来并放置在预定目录中。在需要时，可以在该预定目录中添加需要的参数，如不中缓存的nocache,查看页面模块wdebug参
激坐坐
>ζΧ寸寸O
[0034]随后，在S102，根据存储的配置文件获取线上和线下访问的html页面。
[0035]如图2所示，S102可包括子S1021和S1022。
[0036]在S1021，根据存储的配置文件拼接线上和线下访问的URL。
[0037]例如，可通过从存储的配置文件中读取线上线下机器URL相关配置文件，来拼接线上和线下访问的URL。拼接就是将两个字符串连接到一起构成一个新的字符串。
[0038]例如，URL = "测试环境IP〃 + 〃/〃 + 〃参数！〃 + 〃&〃 + 〃参数2"+"&"+"......〃+〃&src=〃+〃PCURL〃 就是拼接后的 URL。
[0039]在S1022，根据拼接的线上和线下访问的URL获取执行javascript后的线上和线下访问的html页面。
[0040]具体的讲，在本发明的实施例中通过使用模拟浏览内核程序来执行URL，从而生成执行javascript后的html页面。
[0041]现在返回图1，在S103,通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别。
[0042]如图3所示，S103可包括子S1031和S1032。
[0043]在S1031，预处理线上和线下访问的html页面。
[0044]可通过去除html页面中的无用字符来执行所述预处理，例如，去掉文本中所有空白符以及转义字符；过滤掉所有控制字符；处理timg,去掉host, ip, sec, di ;过滤掉小文本。
[0045]在S1032，对比预处理后的线上和线下访问的html页面的Dom树。
[0046]具体的讲,首先,获取线上和线下访问的html页面的Dom树。图4是示出Dom树的示意图。
[0047]随后,遍历Dom树获取各个标签的内容。这些标签例如包括:text标签，title标签，style标签，di V标签，img标签，a标签。
[0048]例如,可从text标签得到text数组,包含text的n*3维数组,结点数量，结点信息，该结点的文本长度；从title标签得到标题；从style标签得到css信息,包含css对应的key和value信息；从div标签得到branch是否折叠的n*3维数组,折叠的数量,折叠点所对应的href值,折叠的文本内容；从img标签得到img的n*3维数组，img的数量，img的src, img的长度为-1 ;从a标签得到img和link数组，link是n*3维的，link的数量，link对应的src, link的长度为-1。图5是示出遍历Dom树后得到的text、branch、img、link数组的示意图。
[0049]再次，分别针对线上和线下访问的html页面的Dom树中获取的各个标签内容进行比较。例如，分别对线上线下的branch数组、text数组、img数组、link数组进行对比。图6是示出对比线上Dom树和线下Dom树的示意图。
[0050]例如,对比branch数组、img数组、link数组后得到data数组(数据数组)和data_diff数组(数据差异)。data数组包含线上branch或img或link的结点数量、线下branch或img或link的结点数量、线上线下相同结点的数量、线上线下不同结点的数量、线上比线下增加结点的数量、线上比线下减少结点的数量。图7是示出对比后得到的data数组(Branch、Image、Link)的示意图。此外，Data_diff数组包含data数组、线上branch或img或link的结点信息n*3维数组、线下branch或img或link的结点信息n*3维数组、相同的结点信息数组、不同的结点信息数组、线上比线下增加的结点信息数组、线上比线下减少的结点信息数组。
[0051]此外,例如,对比text数组得到data数组(数据数组)和data_diff数组。在此，data数组包含线上文本的size(大小)、线下文本的size、相同文本的size、不同文本的size、线上比线下增加的文本size、线上比线下减少的文本size、线上文本的覆盖率(线上文本的覆盖率=(same_size+chang_size)/total_size_ 线上)。data_diff 数组和 branch数组中的data_diff数组结构一样。图8是示出对比后得到的data数组(Text)的示意图。
[0052]最后，以Hash数组形式展示比较结果，即，以Hash数组形式展示比较线上和线下访问的html页面的Dom树中的各个标签的结果。图9是示出Branch、Text、Image、Link数组对比后的hash数组。
[0053]现在返回图1，在S104，根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分。
[0054]具体的讲，通过遍历每个结点，根据Hash结果、优先级、层级数等其他条件进行打分，并对各结点的分数进行汇总以计算出总分数。图10是示出针对每个结点打分的示意图。
[0055]下面通过一示例来描述打分过程。
[0056]针对branch, img, link数组中结点的打分规则如下:
[0057]$score_branch=($same_score+$change_score)*100/$total_score
[0058]$change_score=l-$change[$i]/$max_offset*0.5
[0059]$same_score:相同结点的数量
[0060]$change[$i]:第i个结点偏移的数量
[0061]$max_offset=线上不同结点数量减去线下不同结点数量的绝对值
[0062]$total_score:结点数量
[0063]$score_img:image 的得分[0064]$score—link:1 ink 的得分
[0065]text数组中结点的打分规则如下:
[0066]计算每个text结点对应的权重方法:
[0067]$weigth—text—node[$i]=$length—text—node[$i]*$total—text—num/$total_text_size
[0068]$total_text_size:所有结点文本长度之和
[0069]$total_text_num:结点总数
[0070]$weigth_text_node[$i]:第i个结点文本对应的权重
[0071]$length_text_node[$i]:第 i 个结点的长度
[0072]计算相同结点的分数:
[0073]$same_text_score:相同结点的对应的权重之和
[0074]计算不同结点的分数:
[0075]$change_text_score[$i]=(l*$weigth_text_node[$i]*$off_text_set[$i])
[0076]$change_text_score[$i]:第i个结点对应的分数，当前结点的权重乘以当前结点的偏移量
[0077]$change_text_score=$change_text_score[O]+$change_text_score[I]
[0078]+.........+$change_text_score [η]
[0079]$change_text_score:所有结点分数之和
[0080]$off_text_set[$i]=l-$offset_text_change[$i]/$max_text_offset*0.5
[0081]$off_text_set[$i]:第i个结点的偏移量的算法
[0082]$offset_text_change[$i]:第 i 个结点的偏移量
[0083]$max_text_offset:为线上线下文本数量中最大的值
[0084]$weigth_text_node[$i]:第i个结点对应的权值,在上面已经计算出来
[0085]其他分数的计算方法($other_text_score):遍历线上增加的结点add数组和线下减少的结点sub数组,看这两部分能不能匹配上，匹配成功，$other_text_score+=结点对应权重*线上这个结点的长度/线下这个结点的长度
[0086]总分的计算方法:same (相同)结点的分数+change (改变)结点的分数+其他的分数
[0087]$total_text_score=($same_text_score+$chang_text_score+$other_text_score)氺100/$total_text_num
[0088]$total_text_num: text 结点的数量。
[0089]一个页面总分的计算方法如下:
[0090]Branch结点的分数乘以权值+Text结点的分数乘以权值+image结点的分数乘以权值+link结点的分数乘以权值
[0091]$html_score=($ score_branch*$we igth_branch+$ score_img*$we i gth_img+$score_link*$weigth_link+$total_text_score*$weigth_text)/ ($weigth_branch+$weigth_img+$weigth_link+$weigth_text)
[0092]$weigth_branch、$weigth_img、$weigth_link、$weigth_text 的值来自配置文件中的页面权值表，下面是示出页面权值表的示例:[0093]
【权利要求】
1.一种用于转码后线上线下环境页面对比的分析方法，所述方法包括: 获取并存储配置文件； 根据存储的配置文件获取线上和线下访问的html页面； 通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别； 根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分； 根据获取的线上和线下访问的html页面之间的差别来将线上和线下访问的html页面之间的变化进行漂染； 展现漂染后的线上和线下访问的html页面以及打分结果。
2.如权利要求1所述的分析方法，其中，获取线上和线下访问的html页面包括: 根据存储的配置文件拼接线上和线下访问的URL ； 根据拼接的线上和线下访问的URL获取执行javascript后的线上和线下访问的html页面。
3.如权利要求2所述的分析方法，其中，通过使用模拟浏览内核程序来执行URL，从而生成执行javascript后的html页面。`
4.如权利要求1所述的分析方法，其中，获取线上和线下访问的html页面之间的差别包括: 预处理线上和线下访问的html页面； 对比预处理后的线上和线下访问的html页面的Dom树。
5.如权利要求4所述的分析方法，其中，对比预处理后的线上和线下访问的html页面的Dom树包括: 获取线上和线下访问的html页面的Dom树； 遍历Dom树获取各个标签的内容； 分别针对线上和线下访问的html页面的Dom树中获取的各个标签内容进行比较； 以Hash数组形式展示比较结果。
6.一种用于转码后线上线下环境页面对比的分析设备，所述分析设备包括: 配置文件获取单元，获取并存储配置文件； HTML页面获取单元，根据存储的配置文件获取线上和线下访问的html页面； HTML页面差别计算单元，通过对比线上和线下访问的html页面的Dom树来获取线上和线下访问的html页面之间的差别； 打分单元，根据获取的线上和线下访问的html页面之间的差别来对线上和线下访问的html页面之间的相似性进行打分； 漂染单元，根据获取的线上和线下访问的html页面之间的差别来将线上和线下访问的html页面之间的变化进行漂染； 展现单元，展现漂染后的线上和线下访问的html页面以及打分结果。
7.如权利要求6所述的分析设备，其中，HTML页面获取单元200包括: URL拼接子单元，根据存储的配置文件拼接线上和线下访问的URL ； HTML页面获取子单元，根据拼接的线上和线下访问的URL获取执行javascript后的线上和线下访问的html页面。
8.如权利要求7所述的分析设备，其中，HTML页面获取子单元通过使用模拟浏览内核程序来执行URL,从而生成执行javascript后的html页面。
9.如权利要求7所述的分析设备，其中，HTML页面差别计算单元包括: HTML页面预处理单元,预处理线上和线下访问的html页面； Dom树对比单元,对比预处理后的线上和线下访问的html页面的Dom树。
10.如权利要求9所述的分析设备，其中，Dom树对比单元通过获取线上和线下访问的html页面的Dom树,遍历Dom树获取各个标签的内容,分别针对线上和线下访问的html页面的Dom树中获取的各个标签内容进行比较，并以Hash数组形式展示比较结果，来对比预处理后的线上和线下访问的`html页面的Dom树。
【文档编号】G06F17/30GK103870546SQ201410066929
【公开日】2014年6月18日 申请日期:2014年2月26日 优先权日:2014年2月26日
【发明者】王峰, 邹静 申请人:百度在线网络技术（北京）有限公司