昨天,客户报了个Bug过来:html5应用在ipad下卡住不动了。按照他发过来的地址,初步诊断是xml解析的性能问题。应用初始化时要加载几个xml配置文件,客户给的地址中,一个配置文件有800多K(文件A),另一个配置文件有400多K(文件B)。我修改了程序,在PC机上用Safari模拟ipad登录,解析文件A花了30多秒。一般来说,ipad2的性能是我的PC机的1/5,在ipad上解析这个xml文件至少要花150秒。这是不能接受的。同样的程序,在ie下测试,仅仅耗时160ms!我用的是haXe的xml库,在ie9和在safari上竟然有这么大的性能差距。
又找了几个xml库,不是无法运行,就是执行失败。实在没有办法,只好用domparser来解析,当html文件处理。使用domparser可以极大的提高性能,还是以文件A为例子,在PC的safari上解析耗时降为1秒左右,这个时间是可以承受的。然而,使用domparser存在一个问题,就是无法提取出CData数据。 给出了一个解决方案:将CData数据用标签围住,这是一种思路。于是,修改程序,将<![CDATA[替换为<cdata>,将]]>替换成</cdata>。提取cdata标签的数据,当作XML文件的CData数据/。问题似乎解决了,经过多次测试,又发现了新的问题:CData中有很多字符没有转义。在CData中倒是无害,但在<cdata></cdata>中就变成有害了。这里又要表扬下ie9:ie9在这种情况下能够正确解析,Safari不能!既然问题出现在CData,那么我们就对CData数据进行预处理:(1),找到每个CData数据,为它编号;(2),对每个CData片段,用它的编号进行替换,这样就屏蔽了敏感字符;(3),将替换后的文本,用domparser解析。这样一来,当使用这个Dom时,碰到CData编号,再将它替换为对应的CData数据即可。因为文件A在ipad上无法解析成功,这里只对文件B的解析进行了都比。之前解析文件B耗时是13-16秒,使用新方法后,解析时间缩短为32毫秒,提高了约400倍。====
下面的代码是用haXe写的,haXe很容易读,就不详加解释了。
CData类,存储键值对: class CData { public var key:String; public var val:String; public function new() { } }
Xml2Html类,对xml文本进行预处理,并存储CData信息:
class Xml2Html { private var map:Array<CData>; public function new() { } public function getCData(key:String):String { if (map == null) return null; for (i in 0 ... map.length) { var item:CData = map[i]; if (item.key == key) { return item.val; } } return null; } public function prepareXmlAsHtml(txt:String):String { map = new Array<CData>(); txt = StringTools.replace(txt, " <![CDATA[ ", " ]]> "); var lines:Array<String> = txt.split( " ]]> "); if (lines.length == 0) return txt; var buff:StringBuf = new StringBuf(); var k:Int = 0; for (i in 0 ... lines.length) { var val:String = lines[i]; if (i % 2 == 0) // 正常内容 { buff.add(val); } else { var key:String = Std. string(k); buff.add( " <cdata> " + key + " </cdata> "); var cdata:CData = new CData(); cdata.key = key; cdata.val = val; map.push(cdata); k++; } } return buff.toString(); } }
下面是解析示例:
var ctx:Xml2Html = new Xml2Html(); searchInfo = dom.parseFromString(ctx.prepareXmlAsHtml(data), " text/xml "); var dom:HtmlDom = searchInfo; var pages:HtmlCollection<HtmlDom> = dom.getElementsByTagName( " page "); for (i in 0 ... pages.length) { var node:HtmlDom = pages[i]; var pageNumVal:String = node.getAttribute( " pageNumber "); var htmlText:String = null; var htmlTextDoms:HtmlCollection<HtmlDom> = node.getElementsByTagName( " cdata "); if (htmlTextDoms != null && htmlTextDoms.length > 0) { htmlText = StringTools.trim(htmlTextDoms[ 0].childNodes[ 0].nodeValue); htmlText = ctx.getCData(htmlText); } for (k in 0 ... book.pages.length) { var page:Page = book.pages[k]; if (page.id == pageNumVal) { page.content = htmlText; } } }
====
小结:
(1)IE9很厉害!
(2)haXe是好东东,用它写js程序很舒服。但因为是开源社区的作品,还不够成熟,需要使用者自己想办法来弥补其缺陷。