做設(shè)計(jì)的人很少能知道GPU過度繪制是個(gè)什么鬼？跟設(shè)計(jì)有什么關(guān)系？今天就讓大家了解了解，首先來普及一下Android開發(fā)者選項(xiàng)中的Debug GPU overdraw。

GPU過度繪制定義

如果你粉刷過一個(gè)房間或一所房子，就會(huì)知道給墻壁涂上顏色需要做大量的工作。假如你還要重新粉刷一次的話，第二次粉刷的顏色會(huì)覆蓋住第一次的顏色，第一次的顏色就永遠(yuǎn)不可見了，等于你第一次粉刷做的大量工作就完全被浪費(fèi)掉。這太可怕了。

同樣的道理，如果在你的應(yīng)用程序中浪費(fèi)精力去繪制一些東西同樣會(huì)產(chǎn)生性能問題。過度繪制這個(gè)名詞就是用來描述屏幕上一個(gè)像素在單個(gè)幀中被重繪了多少次。

GPU過度繪制就指的是在屏幕一個(gè)像素上繪制多次(超過一次)，GPU過度繪制或多或少對(duì)性能有些影響。

GPU過度繪制分析

過度繪制其實(shí)是一個(gè)性能和設(shè)計(jì)的交叉點(diǎn)。我們?cè)谠O(shè)計(jì)上追求很華麗的視覺效果，但一般來說這種視覺效果會(huì)采用非常多的層疊組件來實(shí)現(xiàn)，這時(shí)候就會(huì)帶來過度繪制的問題。我們?cè)賮砜纯淳唧w顯示在Android界面層級(jí)關(guān)系：

當(dāng)我們來繪制一個(gè)界面時(shí)，會(huì)有一個(gè)windows，然后是建立Activity，在Activity里可以建立多個(gè)view，或view group，view也可以嵌套view。這些組件從上到下分布，上面的組件是可以被用戶看見的，而在下面的組件是不可見的，但是我們依然要花很多時(shí)間去繪制那些不可見的組件，因?yàn)樵谀承r(shí)候，它也可能會(huì)顯示出來。

檢測(cè)過度繪制

如何查看是否過度繪制：

設(shè)置-開發(fā)者選項(xiàng)-調(diào)試GPU過度繪制-顯示過度繪制區(qū)域(過度渲染等，不同機(jī)器可能不同)

然后就可以看看你的應(yīng)用是否存在過度繪制的情況了。

那么如何判斷界面是否存在過度繪制呢？

開啟后，點(diǎn)擊我們的應(yīng)用，可以看到各種顏色的區(qū)域,其中：

最理想的是藍(lán)色,一個(gè)像素只繪制一次，合格的頁(yè)面繪制是白色、藍(lán)色為主，綠色以上區(qū)域不能超過整個(gè)的三分之一，顏色越淺越好。

那么從設(shè)計(jì)的角度來看你的應(yīng)用是否GPU繪制過度，看一下以下幾個(gè)界面：

從上圖我們可以看出：

Google now頁(yè)面GPU繪制比較正?；径际窃?x-2x范圍內(nèi)，QQ的繪制情況也還可以，2345手機(jī)助手和2345影視大全過度繪制是很嚴(yán)重的，基本都是超過3x，4x。

可能有些人覺得不以為然，覺得沒什么影響。話又說回來，GPU繪制過渡對(duì)應(yīng)用造成什么影響。

實(shí)際上，GPU繪制影響的是界面的流暢度和用戶體驗(yàn)，對(duì)于好的手機(jī)可能體驗(yàn)不到差距，對(duì)于差的手機(jī)，流暢度卻起著關(guān)鍵的作用。

可以大部分設(shè)計(jì)師關(guān)注的都是開發(fā)是否有100%還原你的設(shè)計(jì)稿，應(yīng)用的交互體驗(yàn)是否良好，沒有幾個(gè)設(shè)計(jì)師會(huì)去關(guān)注GPU過度繪制問題。

本人接觸到這方面知識(shí)也是優(yōu)化我們開發(fā)人員指導(dǎo)，當(dāng)時(shí)我們正在做界面層級(jí)簡(jiǎn)化，而應(yīng)用界面出現(xiàn)了2種背景顏色，如圖（左邊的背景為白色，右邊的背景為淺灰）。

開發(fā)讓我們梳理一下頁(yè)面層級(jí)，得出右邊的管理頁(yè)面要再多繪制一層；

開發(fā)人員建議我們以后在設(shè)計(jì)中，梳理一下頁(yè)面之前層級(jí)關(guān)系，盡量保持整個(gè)界面的架構(gòu)統(tǒng)一，大背景色一致性。而且開發(fā)人員在開發(fā)過程中，盡量用簡(jiǎn)化的結(jié)構(gòu)來布局，保持界面還原度的同時(shí)也要考慮界面的流暢度。

列舉一下我們2345王牌助手首頁(yè)界面前后優(yōu)化對(duì)比，看了以后，感覺整個(gè)人的心情都好了有木有啊，感覺更高大上了很多。

經(jīng)過優(yōu)化后的頁(yè)面一次繪制時(shí)間能提升3ms-5ms,可以看下面這張圖來進(jìn)行對(duì)比，綠色色塊部分為提升空間。

這次優(yōu)化工作對(duì)我來說，是一次寶貴的經(jīng)驗(yàn)，我們一直在努力讓設(shè)計(jì)變得更好，但有時(shí)候設(shè)計(jì)不只是表面的美化工作，還是深度的改善用戶體驗(yàn)。在這里我想感慨一下，一個(gè)項(xiàng)目的成功上線，里面不知道有多少酸甜苦辣，不知道有多少人在為之努力，感謝所有工作人員的不懈努力，辛苦你們啦！

總結(jié)原因：

1.太多重疊的背景

重疊著的背景有時(shí)候是有必要的，有時(shí)候是沒必要的。這要視你的項(xiàng)目具體情況而定。

2.太多疊加的View

或者本來這個(gè)UI布局就很復(fù)雜或者你是為了追求一個(gè)炫麗的視覺效果，這都有可能使得很多view疊加在一起。這個(gè)情況非常普遍，下面的建議中會(huì)談?wù)勗趺礈p少這種情況帶來的影響。

3.復(fù)雜的Layout層級(jí)

復(fù)雜的層級(jí)關(guān)系，這個(gè)在布局中也很常見，下面也會(huì)說這種情況怎么做可以盡可能的減少過度繪制。

建議：

1.太多重疊的背景

這個(gè)問題其實(shí)最容易解決，建議前期在設(shè)計(jì)時(shí)盡量保持整體背景統(tǒng)一，另外開發(fā)可以檢查你在布局和代碼中設(shè)置的背景，有些背景是被隱藏在底下的，它永遠(yuǎn)不可能顯示出來，這種沒必要的背景一定要移除，因?yàn)樗芸赡軙?huì)嚴(yán)重影響到app的性能。

2.太多重疊的view

第一個(gè)建議是：使用ViewStub來加載一些不常用的布局，它是一個(gè)輕量級(jí)且默認(rè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來檢查和優(yōu)化布局。第一個(gè)建議是：如果嵌套的線性布局加深了布局層次，可以使用相對(duì)布局來取代。第二個(gè)建議是：用標(biāo)簽來合并布局，這可以減少布局層次。第三個(gè)建議是：用標(biāo)簽來重用布局，抽取通用的布局可以讓布局的邏輯更清晰明了。記住，這些建議的最終目的都是使得你的Layout在Hierarchy Viewer里變得寬而淺，而不是窄而深。