前言
用了一個很大的詞“前端除錯”，事情是這樣的，這兩天一直在解決一個bug，我們用iscroll做了一個下拉重新整理的產品列表頁面，總會出現頁面渲染錯亂的問題，只要用js動態修改html或者在瀏覽器開發者工具中修改css、html就會恢復正常。
本來想分享一下iscroll的問題，避免大家走彎路，後來索性把我們定位問題的方法和過程也記錄了一下。
頁面效果
除錯工具修改
目錄
- 前言
- 以往詭異問題解決辦法
- 文件頭型別
- 標籤閉合
- 排除法
- 百度/谷歌大法
- 除錯過程與解決辦法
以往詭異問題解決辦法
以前也遇到過很多類似的問題，大部分是用以下三種方法解決的
1. 文件頭型別**
文件頭要告訴瀏覽器用什麼型別的語言和版本來渲染你的程式碼。
大部份前端書籍都有介紹HTML的來歷，推薦書籍《web標準開發之道》。
我們需要了解HTML與XHTML的來歷與版本,HTML 元素和有效的 DTD,出現渲染異常的問題如下：
- 文件頭未定義
- 版本與標籤不一致
- 標籤是否需要閉合
- 標籤是否支援大小寫
簡單列一下html與xhtml的歷史
第一階段 HTML4/HTML4.01
| 時間 | HTML4HTML4.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)。
最終效果 齊活兒