自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

解析ConstraintLayout的性能優(yōu)勢

作者：Google
企業(yè)動(dòng)態(tài)
我們針對 ConstraintLayout 增加了一些新功能，幫助您構(gòu)建不同類型的布局，例如引入鏈和按比例設(shè)置大小。除了這些功能之外，使用 ConstraintLayout 還可以獲得一項(xiàng)顯著的性能優(yōu)勢。在本文中，我們將向您介紹如何從這些性能改進(jìn)中獲益。

自從在去年的 Google I/O 大會(huì)上發(fā)布 ConstraintLayout 以來，我們一直不斷改進(jìn)該布局的穩(wěn)定性，完善對布局編輯器的支持。我們還針對 ConstraintLayout 增加了一些新功能，幫助您構(gòu)建不同類型的布局，例如引入鏈和按比例設(shè)置大小。

除了這些功能之外，使用 ConstraintLayout 還可以獲得一項(xiàng)顯著的性能優(yōu)勢。在本文中，我們將向您介紹如何從這些性能改進(jìn)中獲益。

一、Android 如何繪制視圖?

為了更好地理解 ConstraintLayout 的性能，我們先回過頭來看看 Android 如何繪制視圖。

當(dāng)用戶將某個(gè) Android 視圖作為焦點(diǎn)時(shí)，Android 框架會(huì)指示該視圖進(jìn)行自我繪制。這個(gè)繪制過程包括 3 個(gè)階段：

1. 測量

系統(tǒng)自頂向下遍歷視圖樹，以確定每個(gè) ViewGroup 和 View 元素應(yīng)當(dāng)有多大。在測量 ViewGroup 的同時(shí)也會(huì)測量其子對象。

2. 布局

系統(tǒng)執(zhí)行另一個(gè)自頂向下的遍歷操作，每個(gè) ViewGroup 都根據(jù)測量階段中所確定的大小來確定其子對象的位置。

3. 繪制

系統(tǒng)再次執(zhí)行一個(gè)自頂向下的遍歷操作。對于視圖樹中的每個(gè)對象，系統(tǒng)會(huì)為其創(chuàng)建一個(gè) Canvas 對象，以便向 GPU 發(fā)送一個(gè)繪制命令列表。這些命令包含系統(tǒng)在前面 2 個(gè)階段中確定的 ViewGroup 和 View 對象的大小和位置。

測量階段如何遍歷視圖樹的示例

▲ 測量階段如何遍歷視圖樹的示例

繪制過程中的每個(gè)階段都需要對視圖樹執(zhí)行一次自頂向下的遍歷操作。因此，視圖層次結(jié)構(gòu)中嵌入(或嵌套)的視圖越多，設(shè)備繪制視圖所需的時(shí)間和計(jì)算功耗也就越多。通過在 Android 應(yīng)用布局中保持扁平的層次結(jié)構(gòu)，您可以為應(yīng)用創(chuàng)建響應(yīng)快速而靈敏的界面。

二、傳統(tǒng)布局層次結(jié)構(gòu)的開銷

請牢記上述解釋，下面我們來創(chuàng)建一個(gè)使用 LinearLayout 和 RelativeLayout 對象的傳統(tǒng)布局層次結(jié)構(gòu)。

布局示例

▲ 布局示例

假設(shè)我們想構(gòu)建一個(gè)像上圖那樣的布局。如果您使用傳統(tǒng)布局來構(gòu)建，XML 文件會(huì)包含類似于下面這樣的元素層次結(jié)構(gòu)(在本例中，我們忽略屬性)：

  1. <RelativeLayout> 
  2.   <ImageView /> 
  3.   <ImageView /> 
  4.   <RelativeLayout> 
  5.     <TextView /> 
  6.     <LinearLayout> 
  7.       <TextView /> 
  8.       <RelativeLayout> 
  9.         <EditText /> 
  10.       </RelativeLayout> 
  11.     </LinearLayout> 
  12.     <LinearLayout> 
  13.       <TextView /> 
  14.       <RelativeLayout> 
  15.         <EditText /> 
  16.       </RelativeLayout> 
  17.     </LinearLayout> 
  18.     <TextView /> 
  19.   </RelativeLayout> 
  20.   <LinearLayout > 
  21.     <Button /> 
  22.     <Button /> 
  23.   </LinearLayout> 
  24. </RelativeLayout> 

盡管一般來說，這種類型的視圖層次結(jié)構(gòu)都有改進(jìn)的空間，但您幾乎必定還需要?jiǎng)?chuàng)建一個(gè)包含一些嵌套視圖的層次結(jié)構(gòu)。

如前所述，嵌套的層次結(jié)構(gòu)會(huì)給性能造成負(fù)面影響。我們使用 Android Studio 的 Systrace 工具來看看嵌套視圖對界面性能到底有何實(shí)際影響。我們通過編程方式針對每個(gè) ViewGroup(ConstraintLayout 和 RelativeLayout)調(diào)用了測量和布局階段并在執(zhí)行測量和布局調(diào)用期間觸發(fā)了 Systrace。以下命令可生成一個(gè)包含 20 秒間隔周期內(nèi)發(fā)生的關(guān)鍵 Event 的概覽文件，例如開銷巨大的測量/布局階段：

  1. python $ANDROID_HOME/platform-tools/systrace/systrace.py --time=20 -o ~/trace.html gfx view res 

有關(guān)如何使用 Systrace 的詳細(xì)信息，請參閱使用 Systrace 分析界面性能指南：

https://developer.android.google.cn/studio/profile/systrace.html

Systrace 會(huì)自動(dòng)突出顯示此布局中的(大量)性能問題，并給出修復(fù)這些問題的建議。通過點(diǎn)擊“Alerts”標(biāo)簽，您會(huì)發(fā)現(xiàn)，繪制此視圖層次結(jié)構(gòu)需要反復(fù)執(zhí)行 80 次的測量和布局階段，開銷極為龐大!

觸發(fā)開銷如此龐大的測量和布局階段當(dāng)然很不理想，如此龐大的繪制 Activity 會(huì)導(dǎo)致用戶能夠覺察到丟幀的現(xiàn)象。我們可以得出這樣的結(jié)論：這種嵌套式層次結(jié)構(gòu)和 RelativeLayout(會(huì)對其每個(gè)子對象重復(fù)測量兩次)的特性導(dǎo)致性能低下。

觀察 Systrace 針對使用 RelativeLayout 的布局版本發(fā)出的提醒

▲ 觀察 Systrace 針對使用 RelativeLayout 的布局版本發(fā)出的提醒

您可以在我們的 GitHub 代碼庫中查看我們用來執(zhí)行這些測量的完整代碼：

https://github.com/googlesamples/android-constraint-layout-performance

三、ConstraintLayout 對象的優(yōu)勢

如果您使用 ConstraintLayout 來構(gòu)建相同的布局，XML 文件會(huì)包含類似于下面這樣的元素層次結(jié)構(gòu)(再次忽略屬性)：

  1. <android.support.constraint.ConstraintLayout> 
  2.   <ImageView /> 
  3.   <ImageView /> 
  4.   <TextView /> 
  5.   <EditText /> 
  6.   <TextView /> 
  7.   <TextView /> 
  8.   <EditText /> 
  9.   <Button /> 
  10.   <Button /> 
  11.   <TextView /> 
  12. </android.support.constraint.ConstraintLayout> 

如本例所示，現(xiàn)在，該布局擁有一個(gè)完全扁平的層次結(jié)構(gòu)。這是因?yàn)?ConstraintLayout 允許您構(gòu)建復(fù)雜的布局，而不必嵌套 View 和 ViewGroup 元素。

舉個(gè)例子，我們來看一下布局中間的 TextView 和 EditText：

使用 RelativeLayout 時(shí)，您需要?jiǎng)?chuàng)建一個(gè)新的 ViewGroup 來垂直對齊 EditText 和 TextView：

  1. <LinearLayout 
  2.     android:id="@+id/camera_area" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="wrap_content" 
  5.     android:orientation="horizontal" 
  6.     android:layout_below="@id/title" > 
  7.  
  8.     <TextView 
  9.         android:text="@string/camera" 
  10.         android:layout_width="wrap_content" 
  11.         android:layout_height="wrap_content" 
  12.         android:layout_gravity="center_vertical" 
  13.         android:id="@+id/cameraLabel" 
  14.         android:labelFor="@+id/cameraType" 
  15.         android:layout_marginStart="16dp" /> 
  16.  
  17.     <RelativeLayout 
  18.         android:layout_width="match_parent" 
  19.         android:layout_height="wrap_content"> 
  20.  
  21.         <EditText 
  22.             android:id="@+id/cameraType" 
  23.             android:ems="10" 
  24.             android:inputType="textPersonName" 
  25.             android:text="@string/camera_value" 
  26.             android:layout_width="match_parent" 
  27.             android:layout_height="wrap_content" 
  28.             android:layout_centerVertical="true" 
  29.             android:layout_marginTop="8dp" 
  30.             android:layout_marginStart="8dp" 
  31.             android:layout_marginEnd="8dp" /> 
  32.     </RelativeLayout> 
  33. </LinearLayout> 

 

 

通過改用 ConstraintLayout，您只需添加一個(gè)從 TextView 基線到 EditText 基線之間的約束，即可實(shí)現(xiàn)同樣的效果，而不必創(chuàng)建另一個(gè) ViewGroup：

EditText 和 TextView 之間的約束

▲ EditText 和 TextView 之間的約束

在針對我們使用 ConstraintLayout 的布局版本運(yùn)行 Systrace 工具時(shí)，您會(huì)發(fā)現(xiàn)，同樣 20 秒間隔周期內(nèi)執(zhí)行的測量/布局次數(shù)大大減少，開銷也隨之大大減少。這種性能的改進(jìn)很有意義，現(xiàn)在，我們保持了扁平的視圖層次結(jié)構(gòu)!

觀察 Systrace 針對使用 ConstraintLayout 的布局版本發(fā)出的提醒

觀察 Systrace 針對使用 ConstraintLayout 的布局版本發(fā)出的提醒

同樣值得一提的是，我們構(gòu)建 ConstraintLayout 版本的布局時(shí)僅僅使用了布局編輯器，而不是手工編輯 XML。而要使用 RelativeLayout 來實(shí)現(xiàn)同樣的視覺效果，我們很可能必須手工編輯 XML。

四、測量性能差異

我們使用 Android 7.0(API 級別 24)中引入的 OnFrameMetricsAvailableListener 分析了 ConstraintLayout 和 RelativeLayout 這兩種類型的布局所執(zhí)行的每次測量和布局操作所花費(fèi)的時(shí)間。通過該類，您可以收集有關(guān)應(yīng)用界面渲染的逐幀時(shí)間信息。

通過調(diào)用以下代碼，您可以開始記錄每個(gè)幀的界面操作：

  1. window.addOnFrameMetricsAvailableListener( 
  2.         frameMetricsAvailableListener, frameMetricsHandler); 

在能夠獲取時(shí)間信息之后，該應(yīng)用觸發(fā) frameMetricsAvailableListener() 回調(diào)。我們對測量/布局的性能感興趣，因此，我們在檢索實(shí)際幀的持續(xù)時(shí)間時(shí)調(diào)用了 FrameMetrics.LAYOUT_MEASURE_DURATION。

  1. Window.OnFrameMetricsAvailableListener { 
  2.         _, frameMetrics, _ -> 
  3.         val frameMetricsCopy = FrameMetrics(frameMetrics); 
  4.         // Layout measure duration in nanoseconds 
  5.         val layoutMeasureDurationNs =  
  6.                 frameMetricsCopy.getMetric(FrameMetrics.LAYOUT_MEASURE_DURATION); 

如需詳細(xì)了解 FrameMetrics 可以檢索的其他類型的持續(xù)時(shí)間信息，請參閱 FrameMetricsAPI 參考：

https://developer.android.google.cn/reference/android/view/FrameMetrics.html

五、測量結(jié)果：ConstraintLayout 速度更快

我們的性能比較結(jié)果表明：ConstraintLayout 在測量/布局階段的性能比 RelativeLayout大約高 40%：

測量/布局(單位：毫秒，100 幀的平均值)

▲ 測量/布局(單位：毫秒，100 幀的平均值)

這些結(jié)果表明：ConstraintLayout 很可能比傳統(tǒng)布局的性能更出色。不僅如此，ConstraintLayout 還具備其他一些功能，能夠幫助您構(gòu)建復(fù)雜的高性能布局。

有關(guān)詳情，請參閱使用 ConstraintLayout 構(gòu)建快速響應(yīng)的界面指南：

https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

我們建議您在設(shè)計(jì)應(yīng)用布局時(shí)使用 ConstraintLayout。在過去，幾乎所有情形下，您都需要一個(gè)深度嵌套的布局，因此，ConstraintLayout 應(yīng)當(dāng)成為您優(yōu)化性能和易用性的不二之選。

六、附錄：測量環(huán)境 & 后續(xù)計(jì)劃

上述所有測量均在以下環(huán)境中執(zhí)行：

  • 設(shè)備 - Nexus 5X
  • Android 版本 - 8.0
  • ConstraintLayout 版本 - 1.0.2
  • 查看開發(fā)者指南：https://developer.android.google.cn/training/constraint-layout/index.html
  • API 參考文檔：https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html
  • 媒體文章：https://medium.com/google-developers/building-interfaces-with-constraintlayout-3958fa38a9f7

【本文是51CTO專欄機(jī)構(gòu)“谷歌開發(fā)者”的原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者(微信公眾號：Google_Developers)】

戳這里，看該作者更多好文

責(zé)任編輯：趙寧寧 來源： 51CTO專欄
ConstraintLayout編輯器測量
相關(guān)推薦

2023-02-22 09:47:40

查詢計(jì)算

2011-05-08 17:23:15

英特爾優(yōu)勢

2009-12-22 16:55:26

WCF性能優(yōu)勢

2023-04-17 16:33:27

云計(jì)算工具云性能測試

2009-04-08 10:34:00

IPSec VPN協(xié)議

2010-07-30 13:15:17

Flex優(yōu)勢

2009-07-01 18:12:18

JSP的優(yōu)勢性能比較

2011-07-01 09:36:30

高性能Web

2017-10-24 06:52:27

性能監(jiān)測云可視化

2010-04-12 12:59:19

Wi－Fi無線技術(shù)優(yōu)勢

2010-09-06 15:00:40

DB2 9 XML

2009-12-30 16:01:32

Linux性能

2010-02-23 16:28:28

CentOS Fast

2022-03-29 07:20:04

密封類.NET性能

2010-04-19 12:17:09

雙模AP無線網(wǎng)絡(luò)

2010-05-27 16:17:46

IPv6協(xié)議

2012-12-14 01:52:49

JVM淘寶JVMtaobao jvm

2023-12-25 09:51:13

性能測試

2023-09-26 22:34:12

開發(fā)const char

2009-05-06 16:52:01

虛擬化LinuxKVM
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號