For Butter or Worse Smoothing Out Performance in Android Uis

!
"#"$%&"'(
For Butter or Worse
Smoothing Out Performance in Android UIs
Chet Haase
Romain Guy
Android UI Toolkit Engineers
!"#"$%&"'(
jank, noun
1. Choppy performance
Swiping the home screen feels janky
2. Discontinuous, surprising experience
What's with the jank launching that app?
butter, tasty noun
1. Smooth performance
Home screen swiping is very buttery
2. Fattening spread and cooking ingredient
Americas obesity problem is directly
proportional to the deliciousness of butter
2. Discontinuous, surprising experience
What's with the jank launching that app?
jank, noun
1. Choppy performance
Swiping the home screen feels janky
Recipe
Butter for eating is made from cream
Butter for Android is made from
- low latency
- fast, consistent framerate
Latency
Event Display
Recipe
- low latency
Latency
Event Display
Recipe
- low latency
Latency
Event Display Event Display Event Display Event Display Event Display Event Display Event Display Event Display Event Display Event Display Event Display
Input Latency
Event
Event
Queue
Event
Event
Event
Event
Process
Events
Draw
Input Lag (What a drag)
Input Latency
a
a..c
b User Input
Time
c d e f g h i j k l m n o p q r s t u v w x
Dispatcher
Activity Proc a..c Draw
d...j
Proc d..j Draw
k..s
Input Latency
a
a..c
b User Input
Time
Dispatcher
Activity Proc a..c Draw
d...j
Proc d..j Draw
k..s
Latency
a
d
c
j
Event Streaming
a b User Input
Time
Activity Proc a..f Draw Proc g..o Draw
VSync VSync
Event Streaming
a b User Input
Time
Activity Proc a..f Draw Proc g..o Draw
VSync VSync
Latency
a
g
f
o
Framerate
Drawing
Drawing faster is a good start
Framerate
Drawing
Framerate
But that's not quite all there is to it...
Drawing
Drawing: The Big Picture
Event
Set Property
Value
Invalidate
Measure &
Layout
Prepare
Draw
Update
DisplayList
Draw
DisplayList
Swap
Buffers
Composite
Windows
Post
Buffer
Display
List
Dequeue
Buffer
Enqueue
Buffer
Activity
SurfaceFlinger
Something
Happens
Draw
Display
Activity
SurfaceFlinger
Something
Happens
Draw Display
Something
Happens
Draw Display
Event
Set Property
Value
Invalidate
Something
Happens
Draw Display
Something
Happens
Draw Display
Measure &
Layout
Something
Happens
Draw Display
Something
Happens
Draw Display
Measure &
Layout
Prepare
Draw
Dequeue
Buffer
Something
Happens
Draw Display
Something
Happens
Draw Display
Measure &
Layout
Prepare
Draw
Update
DisplayList
Display
List
Dequeue
Buffer
Something
Happens
Draw Display
Something
Happens
Draw Display
Measure &
Layout
Prepare
Draw
Update
DisplayList
Draw
DisplayList
Display
List
Dequeue
Buffer
Something
Happens
Draw Display
Something
Happens
Draw Display
Measure &
Layout
Prepare
Draw
Update
DisplayList
Draw
DisplayList
Swap
Buffers
Display
List
Dequeue
Buffer
Enqueue
Buffer
Something
Happens
Draw Display
Something
Happens
Draw Display
Composite
Windows
Post
Buffer
Something
Happens
Draw Display
Something
Happens
Draw Display
Event
Set Property
Value
Invalidate
Measure &
Layout
Prepare
Draw
Update
DisplayList
Draw
DisplayList
Swap
Buffers
Composite
Windows
Post
Buffer
Display
List
Dequeue
Buffer
Enqueue
Buffer
Activity
SurfaceFlinger
VSync
Synchronizing rendering with the display refresh
60 fps
Displays refresh at 60 Hz, allowing apps to render at 60fps
Tearing
Getting the Pixels to the Screen
Time
CPU GPU Visible
Update
DisplayList
Draw
DisplayList
Display
Drawing without VSync
1
0
1
Time
Display 1 1 2
2
2
CPU
GPU
3
VSync VSync VSync VSync
3
3
4
4
Drawing without VSync
1
0
1
Time
Display 1 1 2
2
2
CPU
GPU
3
3
3
4
4
J
a
n
k
!
Drawing with VSync
1
0
1
Time
Display 1 2 3
2
2
CPU
GPU
4
3
3
4
4
Drawing with DisplayLists
set property invalidate
Update
DisplayList
Draw
DisplayList
Display
List
VSync
Drawing with DisplayList Properties
set property
set property
set property
set property
Draw
DisplayList
Display
List
VSync
DLProps
DisplayList Properties
Free with ViewPropertyAnimator
Or use ObjectAnimator with View properties
- alpha
- translationX/Y
- scaleX/Y
- rotation/X/Y
0
1
2
3
T
i
m
e

i
n

m
s
Frame
With DisplayList Properties Without DisplayList Properties
Parallel Processing and Double Buffering
B
A
B
Time
Display
VSync
B A B
A
A
B
B
A
A
CPU
GPU
A
VSync VSync VSync
B
A
B
Time
Display A B B
A
A
CPU
GPU
A
J
a
n
k
!
J
a
n
k
!
T
r
i
p
l
e
B
A
B
Time
Display A B C
C
A
CPU
GPU C
A B
B
A
J
a
n
k
!
Window Composition
Draw
DisplayList
Swap
Buffers
Composite
Windows
Post
Buffer
Activity
SurfaceFlinger
Window Composition
GPU
Draw
DisplayList
Swap
Buffers
Composite
Windows
Post
Buffer
Activity
SurfaceFlinger
Buffer
Overlay
Overlay
Overlay FB
FB
FB
Overlay
android:sdk $ cd platform-tools/
android:platform-tools $ adb shell
dumpsys gfxinfo
Demo
0
3
6
9
12
15
T
i
m
e

i
n

m
s
Frames
Update display lists Process display lists Swap bu!ers
android:sdk $ cd tools/systrace
android:systrace $ ./systrace
Demo
Captures 5 seconds
Stand-alone HTML output
android:sdk $ cd platform-tools/
android:platform-tools $ adb shell
dumpsys SurfaceFlinger
Demo
type | ... | name
----------+ ... +-------
OVERLAY | ... | com...SlowListActivity
OVERLAY | ... | StatusBar
OVERLAY | ... | NavigationBar
type | ... | name
----------+ ... +-------
OVERLAY | ... | StatusBar
OVERLAY | ... | NavigationBar
!
!
!
type | ... | name
----------+ ... +------
FB | ... | PopupWindow:424d4cc8
FB | ... | StatusBar
FB | ... | NavigationBar
type | ... | name
----------+ ... +------
FB | ... | PopupWindow:424d4cc8
!
"
"
"
Caveats
traceview
HierarchyViewer
https://github.com/romainguy/ViewServer
Tracer for OpenGL ES
Allocation Tracker
Tips & Tricks
! Consistent frame-rate
! Lower latency
! Faster display list drawing
! GPU-free window composition
! Faster display list updates
new
new
public void bindView(View view, Context context, Cursor c) {
BookViewHolder holder = (BookViewHolder) view.getTag();
String bookId = c.getString(mInternalIdIndex);
holder.bookId = bookId;
holder.sortTitle = c.getString(mSortTitleIndex);
final ShelvesActivity activity = mActivity;
if (activity.getScrollState() == SCROLL_STATE_FLING ||
activity.isPendingCoversUpdate()) {
holder.title.setCompoundDrawablesWithIntrinsicBounds(
null, null, null, mDefaultCover);
holder.queryCover = true;
} else {
holder.title.setCompoundDrawablesWithIntrinsicBounds(
null, null, null,
ImageUtilities.getCachedCover(bookId, mDefaultCover));
holder.queryCover = false;
}
final CharArrayBuffer buffer = holder.buffer;
c.copyStringToBuffer(mTitleIndex, buffer);
final int size = buffer.sizeCopied;
if (size != 0) {
holder.title.setText(buffer.data, 0, size);
}
}
// Do less!
! Lower latency
android.view.Choreographer
// Invalidates at the next v-sync event
myView.postInvalidateOnAnimation();
callback = new Runnable() {
public void run() {
setupAndStartAnimation();
}
}
myView.postOnAnimation(callback);
callback = new Choreographer.FrameCallback() {
public void doFrame(long frameTime) {
render(frameTime);
}
};
Choreographer c = Choreographer.getInstance();
c.postFrameCallback(callback);
! Lower latency
view.setLayerType(View.LAYER_TYPE_HARDWARE, null);
view.animate().alpha(0).withLayer();
#
CLIP PING
view.invalidate();
view.invalidate(left, top, right, bottom);
DisplayList
DisplayList
DisplayList DisplayList
DisplayList DisplayList DisplayList DisplayList
DisplayList
DisplayList
invalidate()
DisplayList
DisplayList
invalidate()
Draw display lists
DisplayList
DisplayList
DisplayList
DisplayList
DisplayList
DisplayList DisplayList DisplayList
DisplayList
DisplayList
invalidate()
Draw display lists
DisplayList
DisplayList
DisplayList
DisplayList
invalidate(l, t, r, b)
DisplayList
DisplayList
Draw display lists
DisplayList
DisplayList
DisplayList
DisplayList
DisplayList
DisplayList
Draw display lists
Dont draw invisible items
@Override
public void onDraw(Canvas c) {
c.save();
if (stacked) {
c.clipRect(headerLeft, headerTop,
headerRight, headerBottom);
}
drawHeader(c);
drawContent(c);
c.restore();
}
clipRect
clipRect
clipRect
private void drawContent(Canvas c) {
for (Item item : itemsList) {
if (!c.quickReject(item.l, item.t, item.r, item.b,
Canvas.EdgeType.BW)) {
item.draw(c);
}
}
}
! Faster display list updates
Dim layer
getWindow().addFlags(
WindowManager.LayoutParams.FLAG_DIM_BEHIND);
type | ... | name
----------+ ... +------
OVERLAY | ... | com...MyActivity
FB | ... | DimAnimator
type | ... | name
----------+ ... +------
OVERLAY | ... | com...MyActivity
FB | ... | DimAnimator
!
"
"
"
getWindow().setBackground(
new ColorDrawable(0x7f000000));
! GPU-free window composition
Users love butter
Users love butter
Spread the word
For More Information
Google I/O 2011
Parleys.com
Accelerated Android Rendering
Various Android GUI performance talks
Q&A
+Chet Haase
+Romain Guy
@chethaase
@romainguy
!"#"$%&"'(

For Butter or Worse Smoothing Out Performance in Android Uis

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

For Butter or Worse Smoothing Out Performance in Android Uis

Diunggah oleh

Hak Cipta:

Format Tersedia

!

Anda mungkin juga menyukai