做設(shè)計(jì)的人很少能知道GPU過(guò)度繪制是個(gè)什么鬼爽室？跟設(shè)計(jì)有什么關(guān)系汁讼？今天就讓大家了解了解，首先來(lái)普及一下Android開(kāi)發(fā)者選項(xiàng)中的Debug GPU overdraw阔墩。
GPU過(guò)度繪制定義
如果你粉刷過(guò)一個(gè)房間或一所房子嘿架，就會(huì)知道給墻壁涂上顏色需要做大量的工作。假如你還要重新粉刷一次的話啸箫，第二次粉刷的顏色會(huì)覆蓋住第一次的顏色耸彪，第一次的顏色就永遠(yuǎn)不可見(jiàn)了，等于你第一次粉刷做的大量工作就完全被浪費(fèi)掉筐高。這太可怕了搜囱。
同樣的道理，如果在你的應(yīng)用程序中浪費(fèi)精力去繪制一些東西同樣會(huì)產(chǎn)生性能問(wèn)題柑土。過(guò)度繪制這個(gè)名詞就是用來(lái)描述屏幕上一個(gè)像素在單個(gè)幀中被重繪了多少次蜀肘。
GPU過(guò)度繪制就指的是在屏幕一個(gè)像素上繪制多次(超過(guò)一次)，GPU過(guò)度繪制或多或少對(duì)性能有些影響稽屏。
GPU過(guò)度繪制分析
過(guò)度繪制其實(shí)是一個(gè)性能和設(shè)計(jì)的交叉點(diǎn)扮宠。我們?cè)谠O(shè)計(jì)上追求很華麗的視覺(jué)效果，但一般來(lái)說(shuō)這種視覺(jué)效果會(huì)采用非常多的層疊組件來(lái)實(shí)現(xiàn)狐榔，這時(shí)候就會(huì)帶來(lái)過(guò)度繪制的問(wèn)題坛增。我們?cè)賮?lái)看看具體顯示在Android界面層級(jí)關(guān)系：
當(dāng)我們來(lái)繪制一個(gè)界面時(shí)，會(huì)有一個(gè)windows薄腻，然后是建立Activity收捣，在Activity里可以建立多個(gè)view，或view group庵楷，view也可以嵌套view罢艾。這些組件從上到下分布，上面的組件是可以被用戶看見(jiàn)的尽纽，而在下面的組件是不可見(jiàn)的咐蚯，但是我們依然要花很多時(shí)間去繪制那些不可見(jiàn)的組件，因?yàn)樵谀承r(shí)候弄贿，它也可能會(huì)顯示出來(lái)春锋。
檢測(cè)過(guò)度繪制
如何查看是否過(guò)度繪制：
設(shè)置-開(kāi)發(fā)者選項(xiàng)-調(diào)試GPU過(guò)度繪制-顯示過(guò)度繪制區(qū)域(過(guò)度渲染等，不同機(jī)器可能不同)
然后就可以看看你的應(yīng)用是否存在過(guò)度繪制的情況了差凹。
那么如何判斷界面是否存在過(guò)度繪制呢期奔？
開(kāi)啟后，點(diǎn)擊我們的應(yīng)用危尿，可以看到各種顏色的區(qū)域,其中：
最理想的是藍(lán)色,一個(gè)像素只繪制一次能庆，合格的頁(yè)面繪制是白色、藍(lán)色為主脚线，綠色以上區(qū)域不能超過(guò)整個(gè)的三分之一搁胆，顏色越淺越好。
那么從設(shè)計(jì)的角度來(lái)看你的應(yīng)用是否GPU繪制過(guò)度邮绿，看一下以下幾個(gè)界面：
從上圖我們可以看出：
Google now頁(yè)面GPU繪制比較正城裕基本都是在1x-2x范圍內(nèi)，QQ的繪制情況也還可以船逮，2345手機(jī)助手和2345影視大全過(guò)度繪制是很嚴(yán)重的顾腊，基本都是超過(guò)3x，4x挖胃。
可能有些人覺(jué)得不以為然杂靶，覺(jué)得沒(méi)什么影響梆惯。話又說(shuō)回來(lái)，GPU繪制過(guò)渡對(duì)應(yīng)用造成什么影響吗垮。
實(shí)際上垛吗，GPU繪制影響的是界面的流暢度和用戶體驗(yàn)，對(duì)于好的手機(jī)可能體驗(yàn)不到差距烁登，對(duì)于差的手機(jī)怯屉，流暢度卻起著關(guān)鍵的作用。
可以大部分設(shè)計(jì)師關(guān)注的都是開(kāi)發(fā)是否有100%還原你的設(shè)計(jì)稿饵沧，應(yīng)用的交互體驗(yàn)是否良好锨络，沒(méi)有幾個(gè)設(shè)計(jì)師會(huì)去關(guān)注GPU過(guò)度繪制問(wèn)題。
本人接觸到這方面知識(shí)也是優(yōu)化我們開(kāi)發(fā)人員指導(dǎo)狼牺，當(dāng)時(shí)我們正在做界面層級(jí)簡(jiǎn)化羡儿，而應(yīng)用界面出現(xiàn)了2種背景顏色，如圖（左邊的背景為白色是钥，右邊的背景為淺灰）失受。
開(kāi)發(fā)讓我們梳理一下頁(yè)面層級(jí)，得出右邊的管理頁(yè)面要再多繪制一層咏瑟；
開(kāi)發(fā)人員建議我們以后在設(shè)計(jì)中拂到，梳理一下頁(yè)面之前層級(jí)關(guān)系，盡量保持整個(gè)界面的架構(gòu)統(tǒng)一码泞，大背景色一致性兄旬。而且開(kāi)發(fā)人員在開(kāi)發(fā)過(guò)程中，盡量用簡(jiǎn)化的結(jié)構(gòu)來(lái)布局余寥，保持界面還原度的同時(shí)也要考慮界面的流暢度领铐。
列舉一下我們2345王牌助手首頁(yè)界面前后優(yōu)化對(duì)比，看了以后宋舷，感覺(jué)整個(gè)人的心情都好了有木有啊绪撵，感覺(jué)更高大上了很多。
經(jīng)過(guò)優(yōu)化后的頁(yè)面一次繪制時(shí)間能提升3ms-5ms,可以看下面這張圖來(lái)進(jìn)行對(duì)比祝蝠，綠色色塊部分為提升空間音诈。
這次優(yōu)化工作對(duì)我來(lái)說(shuō)，是一次寶貴的經(jīng)驗(yàn)绎狭，我們一直在努力讓設(shè)計(jì)變得更好细溅，但有時(shí)候設(shè)計(jì)不只是表面的美化工作，還是深度的改善用戶體驗(yàn)儡嘶。在這里我想感慨一下喇聊，一個(gè)項(xiàng)目的成功上線，里面不知道有多少酸甜苦辣蹦狂，不知道有多少人在為之努力誓篱，感謝所有工作人員的不懈努力朋贬，辛苦你們啦！
總結(jié)原因：
1.太多重疊的背景
重疊著的背景有時(shí)候是有必要的窜骄，有時(shí)候是沒(méi)必要的锦募。這要視你的項(xiàng)目具體情況而定。
2.太多疊加的View
或者本來(lái)這個(gè)UI布局就很復(fù)雜或者你是為了追求一個(gè)炫麗的視覺(jué)效果啊研，這都有可能使得很多view疊加在一起御滩。這個(gè)情況非常普遍鸥拧，下面的建議中會(huì)談?wù)勗趺礈p少這種情況帶來(lái)的影響党远。
3.復(fù)雜的Layout層級(jí)
復(fù)雜的層級(jí)關(guān)系，這個(gè)在布局中也很常見(jiàn)富弦，下面也會(huì)說(shuō)這種情況怎么做可以盡可能的減少過(guò)度繪制沟娱。
建議：
1.太多重疊的背景
這個(gè)問(wèn)題其實(shí)最容易解決，建議前期在設(shè)計(jì)時(shí)盡量保持整體背景統(tǒng)一腕柜，另外開(kāi)發(fā)可以檢查你在布局和代碼中設(shè)置的背景济似，有些背景是被隱藏在底下的，它永遠(yuǎn)不可能顯示出來(lái)盏缤，這種沒(méi)必要的背景一定要移除砰蠢，因?yàn)樗芸赡軙?huì)嚴(yán)重影響到app的性能。
2.太多重疊的view
第一個(gè)建議是：使用ViewStub來(lái)加載一些不常用的布局唉铜，它是一個(gè)輕量級(jí)且默認(rèn)不可見(jiàn)的視圖台舱，可以動(dòng)態(tài)的加載一個(gè)布局，只有你用到這個(gè)重疊著的view的時(shí)候才加載潭流，推遲加載的時(shí)間竞惋。第二個(gè)建議是：如果使用了類似viewpager+Fragment這樣的組合或者有多個(gè)Fragment在一個(gè)界面上，需要控制Fragment的顯示和隱藏灰嫉，盡量使用動(dòng)態(tài)地Inflation view拆宛，它的性能要比SetVisiblity好。
3.復(fù)雜的Layout層級(jí)
這里的建議比較多一些讼撒，首先推薦用Android提供的布局工具Hierarchy Viewer來(lái)檢查和優(yōu)化布局浑厚。第一個(gè)建議是：如果嵌套的線性布局加深了布局層次，可以使用相對(duì)布局來(lái)取代根盒。第二個(gè)建議是：用標(biāo)簽來(lái)合并布局瞻颂，這可以減少布局層次。第三個(gè)建議是：用標(biāo)簽來(lái)重用布局郑象，抽取通用的布局可以讓布局的邏輯更清晰明了贡这。記住，這些建議的最終目的都是使得你的Layout在Hierarchy Viewer里變得寬而淺厂榛，而不是窄而深盖矫。
