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

檢查bug的步驟

1. bug定位

在js腳本中，依照腳本執行的順序，你可以用console或alert，來決定bug發生的程式碼區間，然後在區間內進一步來找出bug發生的特定程式碼片段。

2. bug fix

透過排除，就是在插入節點內容的時候導致了bug，我用的是kissy的DOM.html()方法，其功能類似於DOM元素節點innerHTML方法，我起初認為是這個方法導致的IE67渲染出錯，然後我換了innerHTML方法，結果還是有誤。

這時候我想到了內存洩露，看看是不是在循環拼接字符串的過程中，有循環引用或者其他原因造成內存洩露，然後在一些方法結束的時候，我把一些變量賦值null，來防止記憶體外洩（雖然不知道是否有效，但至少我這麼嘗試過了），結果還是不行。

是不是資料過多，導致一下子渲染的時候崩潰呢？於是我減少了拼接的資料長度，這個起效了。 1~3條數據的時候，可以渲染上，那就表示方法是沒有錯的；但是3條以上的數據，IE67還是無法回應。於是我又試著一條一條數據取持續插入，因為一次插入1條數據沒有問題的話，我大不了多插入幾次吧，但是IE還是有問題。其實，這時候我的思路已經偏離了。

後來找同事來看看，說之前也碰到過這個問題，是IE67下，標籤沒有正確閉合的原因導致的。沒錯，這就是這個bug的真正原因啦。後來，我把拼接的字串列印出來，然後再使用格式化工具進行格式化，變很快發現了我拼接字串的時候出現的這個問題，於是很快fix掉這個bug。我使用的線上格式化工具：http://tool.chinaz.com/Tools/JsFormat.aspx

3. 檢定

測試時候，我們寫上一串html程式碼，並對一些標籤不閉合，看看IE和chrome對比情況。

程式碼如下，在第二個li標籤裡，我們對ul標籤中的其中一個標籤，做不閉合處理

複製程式碼 代碼如下:

 
• 
    
  
     
  • inner li
   li>inner li

   
• inner li

  

 
 

inner li

   

inner li

   

inner li
   not closederror happend   not closederror happend

🎜>  
 
 

  

   
• inner li
   
• 🎜>   
• inner li

  

 

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

接下來透過開發工具調試看看。

在IE7~9下面，dom結構錯亂，發送錯誤的地方就在那個沒有閉合的標籤那裡，原來的第三個

節點的內容直接插到了節點下面。

我們再來看看chrome下面的情況：第三個li正常的渲染到dom樹裡面，在發生錯誤的span標籤那裡，自動補上了一個span的閉合標籤

4. 總結

各個瀏覽器在渲染html的時候表現不一樣，尤其是IE瀏覽器同其他的瀏覽器。 chrome和FF的容錯性能很好，即使頁面中存在html標籤沒有正常閉合，它也會智能的進行識別，並使其在瀏覽器中看上去無恙，且最終的DOM結構也沒有問題，然而不好的一面就是你不知道你的程式碼有錯，還以為一切正常。而IE89現在也可以這樣處理，看起來頁面內容沒有問題，但是呢，透過開發工具，你可以看到錯誤的html程式碼沒有正常的DOM結構。但是IE67就不會給你這樣的機會，要嘛就直接崩潰了。

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

如果有一天，你發現IE下dom結構都無法渲染出來的時候，記得提醒自己，是否程式碼中有標籤沒有閉合。