快捷導(dǎo)航

基于IE下ul li 互相嵌套時的bug,排查,解決過程以及心得介紹

更新時間：2013年05月07日 16:06:50 作者：

昨天到今天上午都在查一個IE的bug，情形如下：通過異步請求獲取json數(shù)據(jù)，然后拼接成html代碼，最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進入IE7，瀏覽器就崩潰，更別提IE6了，也是一副死給你看的樣子。于是我就把這個bug定位于IE6\7，其實這時候我已經(jīng)陷入了這個固定思維模式中，浪費了不少時間

檢查bug的步驟

1. bug定位

在js腳本中，按照腳本執(zhí)行的順序，你可以用console或alert，來確定bug發(fā)生的代碼區(qū)間，然后在區(qū)間內(nèi)進一步來查找bug發(fā)生的具體代碼段。

2. bug fix

通過排除，就是在插入節(jié)點內(nèi)容的時候?qū)е铝薭ug，我用的是kissy的DOM.html()方法，其功能類似于DOM元素節(jié)點innerHTML方法，我起初認(rèn)為是這個方法導(dǎo)致的IE6\7渲染出錯，然后我換成了innerHTML方法，結(jié)果還是有誤。

這時候我想到了內(nèi)存泄露，看看是不是在循環(huán)拼接字符串的過程中，有循環(huán)引用或者其他原因造成內(nèi)存泄露，然后在一些方法結(jié)束的時候，我把一些變量賦值null，來防止內(nèi)存泄露（雖然不知道是否有效，但是至少我這么嘗試過了），結(jié)果還是不行。

是不是數(shù)據(jù)過多，導(dǎo)致一下子渲染的時候崩潰呢？于是我減少了拼接的數(shù)據(jù)長度，這個起效了。1~3條數(shù)據(jù)的時候，可以渲染上，那就說明方法是沒有錯的；但是3條以上的數(shù)據(jù)，IE6\7還是無法響應(yīng)。于是我又試著一條一條數(shù)據(jù)取持續(xù)插入，因為一次插入1條數(shù)據(jù)沒有問題的話，我大不了多插入幾次吧，但是IE還是有問題。其實，這時候我的思路已經(jīng)偏離了。

后來找同事來看看，說之前也碰到過這個問題，是IE6\7下，標(biāo)簽沒有正確閉合的原因?qū)е碌摹]錯，這就是這個bug的真正原因啦。后來，我把拼接的字符串打印出來，然后再使用格式化工具進行格式化，變很快發(fā)現(xiàn)了我拼接字符串的時候出現(xiàn)的這個問題，于是很快fix掉這個bug。我用的在線格式化工具：http://tool.chinaz.com/Tools/JsFormat.aspx

3. 測試

測試時候，我們寫上一串html代碼，并對一些標(biāo)簽不閉合，看看IE和chrome對比情況。

代碼如下，在第二個li標(biāo)簽里，我們對ul標(biāo)簽中的其中一個<span>標(biāo)簽，做不閉合處理

復(fù)制代碼代碼如下:

<ul>
 <li>
  <ul>
   <li>inner li</li>
   <li>inner li</li>
   <li>inner li</li>
  </ul>
 </li>
 <li>
  <ul>
   <li>inner li</li>
   <li>inner li</li>
   <li>inner li
   <span>not closed<span>error happend</span></li>
  </ul>
 </li>
 <li>
  <ul>
   <li>inner li</li>
   <li>inner li</li>
   <li>inner li</li>
  </ul>
 </li>
</ul>

IE 和chrome下都正常顯示，如上圖。

接下來通過開發(fā)工具調(diào)試看看。

在IE7~9下面，dom結(jié)構(gòu)錯亂，發(fā)送錯誤的地方就在那個沒有閉合的<span>標(biāo)簽?zāi)抢铮瓉淼牡谌齻€<li>節(jié)點的內(nèi)容直接插到了<span>節(jié)點下面。

我們再來看看chrome下面的情況吧：第三個li正常的渲染到dom樹里面，在發(fā)生錯誤的span標(biāo)簽?zāi)抢?，自動補上了一個span的閉合標(biāo)簽

4. 總結(jié)

各個瀏覽器在渲染html的時候表現(xiàn)不一樣，尤其是IE瀏覽器同其他的瀏覽器。chrome和FF的容錯性能很好，即使頁面中存在html標(biāo)簽沒有正常閉合，它也會智能的進行識別，并使其在瀏覽器中看上去無恙，且最終的DOM結(jié)構(gòu)也沒有問題，然而不好的一面就是你不知道你的代碼有錯，還以為一切正常。而IE8\9現(xiàn)在也可以這樣處理，看上去頁面內(nèi)容沒有問題，但是呢，通過開發(fā)工具，你可以看到錯誤的html代碼沒有正常的DOM結(jié)構(gòu)。但是IE6\7就不會給你這樣的機會，要么就直接崩潰了。

chrome可以容許我們犯錯，而IE卻對我們更加嚴(yán)格，雖然IE讓我們很頭疼，但是卻對我們的代碼提出了更高的要求！忽然覺得，有IE也蠻好的。。。

如果有一天，你發(fā)現(xiàn)IE下dom結(jié)構(gòu)都無法渲染出來的時候，記得提醒自己，是否代碼中有標(biāo)簽沒有閉合。