AsyncDisplayKit
How to keey complex UE smooth and responsive?
Smooth?
60f/s
16ms to push each frame
<10ms for you to do something because of system overhead
Other thing
IOS7,Physics Animation happened on in main-thread,still main thread need to deal with touch events and draw operation and core graphics.
So do little things an possiple in main thread <=10ms
Main thread executes just in one core,Single-threaded view hierarchies can't take advantage of the multicore CPUs in all modern iOS devices.
Running the CPU on all cores for a short time is preferable to running one core for an extended amount of time
if the processor can race to sleep by finishing its work and idling faster, it can spend more time in a low-power mode, improving battery life.
2.Some Normal solution?
cache the size,but when it changes,still code is not tenable
if cache OK,you still must block main thead to calculate size,that's terrible,and not fix the main question
Create TextKit stack and size the text ourselves in background thread:It's a laborious work and TextKit is not thread-safe either,and if IOS updating later,your code will broken in somewhere
3.Let's see Our solution:AsyncDisplayKit,it's thread-safe layer over UIViews and CALayers
4.Text Sizing,Rendering and Image Decoding both in background thread,then draw them in main thread
5.In AsyncDisplayKit,using Nodes replace of Views
Nodes is not UIKit,it's a tool for UI
node.view and node.layer used for UIView and Draw rect
6.AsyncDisplayKit includes several powerful components:
ASDisplayNode. Counterpart to UIView — subclass to make custom nodes.
ASControlNode. Analogous to UIControl — subclass to make buttons.
ASImageNode. Like UIImageView — decodes images asynchronously.
ASTextNode. Like UITextView — built on TextKit with full-featured rich text support.
ASTableView. UITableView subclass that supports nodes.
ASCollectView. UICollectView subclass that supports nodes.
Note:
ASImageNode's .view is not UIImageView,In ASDK,it's UIView
7.Level 1:Use AsyncDisplayKit Simple Node
Fixed Size: alloc node,add to your view
Dynamic Size:
a)alloc and sizing node in background thread,add node.view to self.view in main thread when completing calulating node
b)alloc and measure in main thread,add to your view == [Fixed Size]
a)[The recommended way to use ASDK is to only add nodes to your view hierarchy once they've been sized]
b)[AsyncDisplayKit can still improve your app's performance even when rendering fully synchronously]?
8.Level 2:Custom node
//using it any thread
//perform any other expensive pre-layout calculations in this method
// call [self invalidateCalculatedSize] when necessary
//ASTextNode's attributedString property is changed.
- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize;
//auto layout in main-thread
- (void)layout;
//Also your can draw it yourself ??
+ (void)drawRect:(CGRect)bounds
withParameters:(id<NSObject>)parameters
isCancelled:(asdisplaynode_iscancelled_block_t)isCancelledBlock
isRasterizing:(BOOL)isRasterizing;
9.Level3:
Placeholders
//The easiest way to make a realistic placeholder is to set static background colours on your subnodes
Work range:Scrolls [ASRangeController]
//A working range controller tracks the visible range, the subset of content that's currently visible onscreen, and enqueues asynchronous rendering for the next few screenfuls of content
//code
ASRangeController *rangeController = [[ASRangeController alloc] init];
rangeController.tuningParameters = (ASRangeTuningParameters){
.leadingBufferScreenfuls = 2.0f; // two screenfuls in the direction of scroll
.trailingBufferScreenfuls = 0.5f; // one-half screenful in the other direction
};
10.level4:ASTableView based on ASRangeController
ASTableView is UITableView
ASCellNode is not UITableViewCell
Put your datasource ASCellNodeArray
#ASTableView cell count is 0
calculateSizeThatFits every ASCellNode in other thread,cal cell size each core[4核CPU4个线程]
rendering 4 cell
calculate OK,push 4 cell to ASTableView
#ASTableView cell count is 4,batch update UITableView
Keep calculate cell 4, 4 to end
#Batch update cell 4, 4 ,4 to end
So your not calculate cell height and rendering it in main thread
And your can fully using mutable-core in iPhone,your improve your app performance
and save battery
And your tableview is smooth
11.View to layer can improve your app performance, but if you want touch or others views function,your code is not good
In ASDK,you just need delete rootNode.layerBacked = YES;
Flattening an entire view hierarchy into a single layer also improves performance, but comes with a hit to maintainability and hierarchy-based reasoning. Nodes can do this for you too!
rootNode.shouldRasterizeDescendants = YES;
12.Node architecture
https://github.com/facebook/AsyncDisplayKit
How to keey complex UE smooth and responsive?
Smooth?
60f/s
16ms to push each frame
<10ms for you to do something because of system overhead
Other thing
IOS7,Physics Animation happened on in main-thread,still main thread need to deal with touch events and draw operation and core graphics.
So do little things an possiple in main thread <=10ms
Main thread executes just in one core,Single-threaded view hierarchies can't take advantage of the multicore CPUs in all modern iOS devices.
Running the CPU on all cores for a short time is preferable to running one core for an extended amount of time
if the processor can race to sleep by finishing its work and idling faster, it can spend more time in a low-power mode, improving battery life.
2.Some Normal solution?
cache the size,but when it changes,still code is not tenable
if cache OK,you still must block main thead to calculate size,that's terrible,and not fix the main question
Create TextKit stack and size the text ourselves in background thread:It's a laborious work and TextKit is not thread-safe either,and if IOS updating later,your code will broken in somewhere
3.Let's see Our solution:AsyncDisplayKit,it's thread-safe layer over UIViews and CALayers
4.Text Sizing,Rendering and Image Decoding both in background thread,then draw them in main thread
5.In AsyncDisplayKit,using Nodes replace of Views
Nodes is not UIKit,it's a tool for UI
node.view and node.layer used for UIView and Draw rect
6.AsyncDisplayKit includes several powerful components:
ASDisplayNode. Counterpart to UIView — subclass to make custom nodes.
ASControlNode. Analogous to UIControl — subclass to make buttons.
ASImageNode. Like UIImageView — decodes images asynchronously.
ASTextNode. Like UITextView — built on TextKit with full-featured rich text support.
ASTableView. UITableView subclass that supports nodes.
ASCollectView. UICollectView subclass that supports nodes.
Note:
ASImageNode's .view is not UIImageView,In ASDK,it's UIView
7.Level 1:Use AsyncDisplayKit Simple Node
Fixed Size: alloc node,add to your view
Dynamic Size:
a)alloc and sizing node in background thread,add node.view to self.view in main thread when completing calulating node
b)alloc and measure in main thread,add to your view == [Fixed Size]
a)[The recommended way to use ASDK is to only add nodes to your view hierarchy once they've been sized]
b)[AsyncDisplayKit can still improve your app's performance even when rendering fully synchronously]?
8.Level 2:Custom node
//using it any thread
//perform any other expensive pre-layout calculations in this method
// call [self invalidateCalculatedSize] when necessary
//ASTextNode's attributedString property is changed.
- (CGSize)calculateSizeThatFits:(CGSize)constrainedSize;
//auto layout in main-thread
- (void)layout;
//Also your can draw it yourself ??
+ (void)drawRect:(CGRect)bounds
withParameters:(id<NSObject>)parameters
isCancelled:(asdisplaynode_iscancelled_block_t)isCancelledBlock
isRasterizing:(BOOL)isRasterizing;
9.Level3:
Placeholders
//The easiest way to make a realistic placeholder is to set static background colours on your subnodes
Work range:Scrolls [ASRangeController]
//A working range controller tracks the visible range, the subset of content that's currently visible onscreen, and enqueues asynchronous rendering for the next few screenfuls of content
//code
ASRangeController *rangeController = [[ASRangeController alloc] init];
rangeController.tuningParameters = (ASRangeTuningParameters){
.leadingBufferScreenfuls = 2.0f; // two screenfuls in the direction of scroll
.trailingBufferScreenfuls = 0.5f; // one-half screenful in the other direction
};
10.level4:ASTableView based on ASRangeController
ASTableView is UITableView
ASCellNode is not UITableViewCell
Put your datasource ASCellNodeArray
#ASTableView cell count is 0
calculateSizeThatFits every ASCellNode in other thread,cal cell size each core[4核CPU4个线程]
rendering 4 cell
calculate OK,push 4 cell to ASTableView
#ASTableView cell count is 4,batch update UITableView
Keep calculate cell 4, 4 to end
#Batch update cell 4, 4 ,4 to end
So your not calculate cell height and rendering it in main thread
And your can fully using mutable-core in iPhone,your improve your app performance
and save battery
And your tableview is smooth
11.View to layer can improve your app performance, but if you want touch or others views function,your code is not good
In ASDK,you just need delete rootNode.layerBacked = YES;
Flattening an entire view hierarchy into a single layer also improves performance, but comes with a hit to maintainability and hierarchy-based reasoning. Nodes can do this for you too!
rootNode.shouldRasterizeDescendants = YES;
12.Node architecture