飛豬上的doraemon一直對過度繪制和布局深度有監控，不合理的布局和過深得過度繪制影響頁面渲染速度。雖然發現了不少問題，多處可見如下圖的紅紅的頁面，但是一直很難推動解決，主要有兩個原因。
讓開發找到具體的位置需要從根布局一層層周遊分析下去，确實麻煩，是以不想改；
修改後，會不會影響到其他控件的顯示效果，光靠大腦想象難保萬全，是以不敢改；
<a></a>
感謝@睿牧提供的外部開源參考工具
于是doraemon裡就多了一樣新的工具，将目前頁面的布局3d化，有點像xcode上的view ui hierarchy工具，如下圖所示。新工具可以輔助分析頁面布局的合理性和影響過度繪制的關鍵點：
在3d化的頁面上将每個有名字的控件的名字（id）都寫上了，便于直接看出是哪個控件（或者控件的爸爸）導緻問題，以便快速定位到具體的控件；
在3d化的頁面上通過拖拽和多點觸摸放大來直覺的看出每一個控件在整體布局裡所處的位置，和對相關控件的影響，便于下結論能不能改；
按照上面的打開方式，然後進入門票首頁，再點選“3d”icon，可以看到如下圖。可以看到所有控件的背景色都被塗上了辨別過度繪制深度的顔色。
從最外層布局向内看，導緻背景色突變的控件是設定了背景色，如下圖示記。其中5和6的背景色變化是因為加載了圖檔，這種情況可以不修改。我們主要看下1、2、3、4這4個地方。
如下代碼，在根布局裡刷了一次全屏的白色。不合理性：标題欄本身也是白色，所在标題欄的像素區域内，根布局的全屏白色是多餘的。
整個頁面的布局可以看成是上面一個标題欄，下面一個清單控件（listview），代碼中為這個清單控件再一次刷了白色，如下代碼所示：
list的cell單元代碼中再次刷了個白色底色，很顯然這是多餘的
又一個list的cell單元這裡也刷了個白色底色，很顯然這也是多餘的，前面的e6透明度更是多此一舉。
去掉根布局的白色底色，保留listview的白色底色
去掉listview中的cell的白色底色
過度繪制數值由原先的4.04降低到2.63，提升53.6%。下圖是初步優化前後顔色對比。
如下黃色箭頭指向的位置，4個圖檔控件（imageview）并排放着，用了3層布局，對此表示質疑。
3d布局工具結合過渡繪制開關可以有效地提升定位過度繪制問題，此外還容易發現多餘的不合理的布局，以提升native的性能體驗。
下面是源碼，歡迎讨論共建。