基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
檢查bug的步驟
1. bug定位
在js腳本中,按照腳本執(zhí)行的順序,你可以用console或alert,來確定bug發(fā)生的代碼區(qū)間,然后在區(qū)間內(nèi)進(jìn)一步來查找bug發(fā)生的具體代碼段。
2. bug fix
通過排除,就是在插入節(jié)點(diǎn)內(nèi)容的時(shí)候?qū)е铝薭ug,我用的是kissy的DOM.html()方法,其功能類似于DOM元素節(jié)點(diǎn)innerHTML方法,我起初認(rèn)為是這個(gè)方法導(dǎo)致的IE6\7渲染出錯(cuò),然后我換成了innerHTML方法,結(jié)果還是有誤。
這時(shí)候我想到了內(nèi)存泄露,看看是不是在循環(huán)拼接字符串的過程中,有循環(huán)引用或者其他原因造成內(nèi)存泄露,然后在一些方法結(jié)束的時(shí)候,我把一些變量賦值null,來防止內(nèi)存泄露(雖然不知道是否有效,但是至少我這么嘗試過了),結(jié)果還是不行。
是不是數(shù)據(jù)過多,導(dǎo)致一下子渲染的時(shí)候崩潰呢?于是我減少了拼接的數(shù)據(jù)長度,這個(gè)起效了。1~3條數(shù)據(jù)的時(shí)候,可以渲染上,那就說明方法是沒有錯(cuò)的;但是3條以上的數(shù)據(jù),IE6\7還是無法響應(yīng)。于是我又試著一條一條數(shù)據(jù)取持續(xù)插入,因?yàn)橐淮尾迦?條數(shù)據(jù)沒有問題的話,我大不了多插入幾次吧,但是IE還是有問題。其實(shí),這時(shí)候我的思路已經(jīng)偏離了。
后來找同事來看看,說之前也碰到過這個(gè)問題,是IE6\7下,標(biāo)簽沒有正確閉合的原因?qū)е碌摹]錯(cuò),這就是這個(gè)bug的真正原因啦。后來,我把拼接的字符串打印出來,然后再使用格式化工具進(jìn)行格式化,變很快發(fā)現(xiàn)了我拼接字符串的時(shí)候出現(xiàn)的這個(gè)問題,于是很快fix掉這個(gè)bug。我用的在線格式化工具:http://tool.chinaz.com/Tools/JsFormat.aspx
3. 測試
測試時(shí)候,我們寫上一串html代碼,并對一些標(biāo)簽不閉合,看看IE和chrome對比情況。
代碼如下,在第二個(gè)li標(biāo)簽里,我們對ul標(biāo)簽中的其中一個(gè)<span>標(biāo)簽,做不閉合處理
<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)錯(cuò)亂,發(fā)送錯(cuò)誤的地方就在那個(gè)沒有閉合的<span>標(biāo)簽?zāi)抢?,原來的第三個(gè)<li>節(jié)點(diǎn)的內(nèi)容直接插到了<span>節(jié)點(diǎn)下面。
我們再來看看chrome下面的情況吧:第三個(gè)li正常的渲染到dom樹里面,在發(fā)生錯(cuò)誤的span標(biāo)簽?zāi)抢?,自動補(bǔ)上了一個(gè)span的閉合標(biāo)簽
4. 總結(jié)
各個(gè)瀏覽器在渲染html的時(shí)候表現(xiàn)不一樣,尤其是IE瀏覽器同其他的瀏覽器。chrome和FF的容錯(cuò)性能很好,即使頁面中存在html標(biāo)簽沒有正常閉合,它也會智能的進(jìn)行識別,并使其在瀏覽器中看上去無恙,且最終的DOM結(jié)構(gòu)也沒有問題,然而不好的一面就是你不知道你的代碼有錯(cuò),還以為一切正常。而IE8\9現(xiàn)在也可以這樣處理,看上去頁面內(nèi)容沒有問題,但是呢,通過開發(fā)工具,你可以看到錯(cuò)誤的html代碼沒有正常的DOM結(jié)構(gòu)。但是IE6\7就不會給你這樣的機(jī)會,要么就直接崩潰了。
chrome可以容許我們犯錯(cuò),而IE卻對我們更加嚴(yán)格,雖然IE讓我們很頭疼,但是卻對我們的代碼提出了更高的要求!忽然覺得,有IE也蠻好的。。。
如果有一天,你發(fā)現(xiàn)IE下dom結(jié)構(gòu)都無法渲染出來的時(shí)候,記得提醒自己,是否代碼中有標(biāo)簽沒有閉合。
相關(guān)文章
如何解決ligerUI布局時(shí)Center中的Tab高度大小
這篇文章主要介紹了如何解決ligerUI布局時(shí)Center中的Tab高度大小的相關(guān)資料,需要的朋友可以參考下2015-11-11javascript 密碼強(qiáng)度驗(yàn)證規(guī)則、打分、驗(yàn)證(給出前端代碼,后端代碼可根據(jù)強(qiáng)度規(guī)則翻譯)
密碼強(qiáng)度是一個(gè)很普遍的功能,比較簡單,主要是怎么制定這個(gè)強(qiáng)度規(guī)則。2010-05-05JavaScript多種圖形實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了JavaScript多種圖形實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06js 獲取、清空input type="file"的值(示例代碼)
本篇文章主要介紹了js 獲取、清空input type="file"的值(示例代碼) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12詳解解決小程序中webview頁面多層history返回問題
這篇文章主要介紹了詳解解決小程序中webview頁面多層history返回問題,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08原生JS實(shí)現(xiàn)圖片輪播 JS實(shí)現(xiàn)小廣告插件
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)圖片輪播、小廣告插件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09