基于IE下ulli互相嵌套时的bug,排查,解决过程以及心得介绍_javascript技巧

1. bug定位

在js脚本中，按照脚本执行的顺序，你可以用console或alert，来确定bug发生的代码区间，然后在区间内进一步来查找bug发生的具体代码段。

2. bug fix

通过排除，就是在插入节点内容的时候导致了bug，我用的是kissy的DOM.html()方法，其功能类似于DOM元素节点innerHTML方法，我起初认为是这个方法导致的IE6\7渲染出错，然后我换成了innerHTML方法，结果还是有误。

这时候我想到了内存泄露，看看是不是在循环拼接字符串的过程中，有循环引用或者其他原因造成内存泄露，然后在一些方法结束的时候，我把一些变量赋值null，来防止内存泄露（虽然不知道是否有效，但是至少我这么尝试过了），结果还是不行。

是不是数据过多，导致一下子渲染的时候崩溃呢？于是我减少了拼接的数据长度，这个起效了。1~3条数据的时候，可以渲染上，那就说明方法是没有错的；但是3条以上的数据，IE6\7还是无法响应。于是我又试着一条一条数据取持续插入，因为一次插入1条数据没有问题的话，我大不了多插入几次吧，但是IE还是有问题。其实，这时候我的思路已经偏离了。

后来找同事来看看，说之前也碰到过这个问题，是IE6\7下，标签没有正确闭合的原因导致的。没错，这就是这个bug的真正原因啦。后来，我把拼接的字符串打印出来，然后再使用格式化工具进行格式化，变很快发现了我拼接字符串的时候出现的这个问题，于是很快fix掉这个bug。我用的在线格式化工具：http://tool.chinaz.com/Tools/JsFormat.aspx

3. 测试

测试时候，我们写上一串html代码，并对一些标签不闭合，看看IE和chrome对比情况。

代码如下，在第二个li标签里，我们对ul标签中的其中一个标签，做不闭合处理
代码如下:

接下来通过开发工具调试看看。

在IE7~9下面，dom结构错乱，发送错误的地方就在那个没有闭合的标签那里，原来的第三个