前言
用了一個很大的詞“前端除錯”,事情是這樣的,這兩天一直在解決一個bug,我們用iscroll做了一個下拉重新整理的產品列表頁面,總會出現頁面渲染錯亂的問題,只要用js動態修改html或者在瀏覽器開發者工具中修改css、html就會恢復正常。
本來想分享一下iscroll的問題,避免大家走彎路,後來索性把我們定位問題的方法和過程也記錄了一下。
頁面效果
除錯工具修改
目錄
- 前言
- 以往詭異問題解決辦法
- 文件頭型別
- 標籤閉合
- 排除法
- 百度/谷歌大法
- 除錯過程與解決辦法
以往詭異問題解決辦法
以前也遇到過很多類似的問題,大部分是用以下三種方法解決的
1. 文件頭型別**
文件頭要告訴瀏覽器用什麼型別的語言和版本來渲染你的程式碼。 大部份前端書籍都有介紹HTML的來歷,推薦書籍《web標準開發之道》。
我們需要了解HTML與XHTML的來歷與版本,HTML 元素和有效的 DTD,出現渲染異常的問題如下:
- 文件頭未定義
- 版本與標籤不一致
- 標籤是否需要閉合
- 標籤是否支援大小寫
簡單列一下html與xhtml的歷史
第一階段 HTML4/HTML4.01
時間 | HTML4\HTML4.01 |
---|---|
1995年 | IETF(因特網工程推動小組) 釋出HTML2.0 |
1997年1月 | W3C釋出第一版HTML標準:HTML3.2 |
1997年12月 | W3C釋出:HTML4.0 |
1999年12月 | W3C釋出:HTML4.01 |
第二階段 XHTML1.0/XHTML1.01/XHTML1.2/HTML4.01 隨後,W3C將重點放在向後相容的XHTML上, 2000年年初,W3C釋出:XHTML1.0 完全相容HTML4.01 緊隨其後,XHTML1.1釋出,放棄與HTML4.01相容,移除大量樣式標籤、font、align等。
第三階段 HTML2/XHTML5 2002年,W3C轉變工作激進轉變,提案HTML2,當時瀏覽器不支援、HTML4.01不相容。 2007年,W3C內部提出HTML5,向後相容 XHTML1.01 和 HTML4.01。 2009年放棄更新HTML2,然後就有了我們們唸叨的HTML5.
2. 標籤閉合
很多前後端未分離的專案,經常出現後端工程師套完頁面以後出現頁面錯亂的情況,大部分都是標籤沒有閉合或者js生成的DOM沒有閉合,很多高版本的瀏覽器可以自動補全不規範的標籤,不影響展示,但是很多低版本的瀏覽器就沒有那麼智慧了,比如IE。
3. 排除法
這也是一個常用的辦法,刪除js和css,如果還復現,那肯定是HTML的問題,然後再刪50%的html,依次去定位問題,直到定位到問題程式碼程式碼。
4. 百度/谷歌大法
你懂得,有問題問度娘,疑難雜症一般在網上都有人分享或者吐槽,直接百度問題關鍵詞。
除錯過程與解決辦法
解決問題的辦法很多,簡單寫一下我的除錯過程,雖然笨拙,寫出來也可以避免大家重複我的笨拙。
-
確認jsp的文件頭
之前遇到過靜態頁面是HTML5的文件頭,開發用的是HTML4,會發現異常問題,確認jsp與靜態頁面一致後,排除文件頭問題。
-
刪除多餘HTML標籤
把其他元素全部刪除,僅留下上拉載入部分的DOM標籤,還是存在問題,然後再對比標籤,無異常,排除標籤閉合問題。
-
刪除多餘CSS樣式
團隊的同事們比較認真的學習過張鑫旭大神的《CSS世界》,按照**“z-index 不犯二原則”**,頁面並沒有使用z-index,使用的positon定位,並有增加,刪除其他css程式碼後,還是可以復現,感覺與positon有關係。
-
刪除JS程式碼
註釋掉iscroll例項就好了,然後再github上找position的lssues, 找到討論關於 z-index、translate、transform的lssues連結,然後提取關鍵詞搜尋。
-
定位到問題點
見張鑫旭大神的部落格《Safari 3D transform變換z-index層級渲染異常的研究》
-
找到解決辦法
根據內容的理解,增加了transform: translateZ(100px)。
最終效果 齊活兒