preface

Life is like rowing upstream; not to advance is to drop back. Mutual encouragement ！！！！ IOS information: download the address

Sunshine is not dry, breeze comfortable. Wandering around I came to the nuggets. Today I want to share 3 W’s and 5 H’s with you. The main content is Texture’s asynchronous rendering and layout engine. Mainly from the following aspects:

  • A brief introduction to Texture
  • Why use Texture (why)
  • Author of Texture (who)
  • Node asynchronous drawing (How)
  • How to implement asynchronous Node rendering (Runloop task distribution)
  • Texture’s Layout Engine (How)
  • How Much does the Texture give you?

Texture profile

Texture, formerly known as AsyncDisplayKit, is FaceBook’s open-source framework for keeping the interface smooth. Built on top of UlKit, it keeps the most complex user interfaces smooth and responsive. (Smooth and responsive)

Texture overall structure

  • Node: An abstraction of UIView and CALayer
  • Node Containers: Node Containers that load render nodes
  • Layout Engineer: Node Layout

Texture node container with UIKit

The Texture node subclasses with UIKit

The Texture node subclass inherits the class

Why use Texture ()

  • Layout calculation, decoding, drawing, asynchronous concurrent execution
  • Runloop Task distribution (asynchronous rendering)
  • Declarative layout system
  • Layer precomposition
  • Deep optimization of list performance (intelligent preloading)

Text: Layer precomposition

Sometimes a layer can contain many sub-layers that do not respond to touch events, and do not need to be animated or positioned. ASDK implemented a technique called pre-composing these sub-layers into a single image. At development time, ASNode has replaced UIView and CALayer; Asnodes can even pre-compose to avoid creating internal UIViews and Calayers by using the various Node controls directly and setting them to Layer Backed.

In this way, you can get a big performance boost by drawing a big hierarchy onto a graph with a big drawing method. The CPU avoids the cost of creating UIkit objects, the Gpu avoids the cost of composing and rendering multiple textures, and fewer bitmaps means less memory footprint.

Texture Smart preloading

All nodes hold the current interfaceState interfaceState, updated by the ASRangeController control property, created and maintained internally within all node containers.

  • Preload: The node is not yet visible, when the node collects external sources (API or disk data)
  • Dispiay: Node starts rendering, including rasterization of text, image decoding, etc
  • Visible: The node is Visible and has at least one pixel on the screen

How to implement asynchronous drawing of Node

UIKit drawing mechanism diagram

CALayer’s dispiay method is called by the system to update the contents of the layer. If the layer has a delegate object, the display method will attempt to update the contents of the layer by calling the delegate’s dispiayLayer: method. If the delegate does not implement the displayLayer: method, the method will create a backing store to hold the original content, and then call layer’s drawInContext: method to fill the back Store. Finally, the backing store replaces the previous content of the layer with a new backing store to update the layer. Normally the delegate of a CALayer in UIKit is a UIView object.

There are two ways to customize the contents of a CALayer. One is to directly set the contents property of a CALayer to create a boarding diagram, and the other is to implement the Delegate method of a CALayer, which can be used to operate directly on a CALayer.

Node asynchronous drawing

ASDispiayNode is the cornerstone of Texture and the core of asynchronous page rendering. It holds UIView and CALayer objects, both generated and managed by Node itself.

_ASDisplayLayer customizes CALayer’s lodging map property by overwriting CALayer’s display method. The relationship between _ASDisplayLayer and ASDisplayNode is similar to the relationship between CALayer and UIView.

Node asynchronous drawing process

  • 1. Get the Node’s displayBlock, which is the task of drawing the content to be displayed based on the node’s view hierarchy.
  • 2. Generate the Node callback completeBlock after it has been drawn
  • 3. Determine whether asynchronous drawing is required according to the displayASynchronously property. If it is asynchronous, submit the displayBlock to _ASAsyncTransaction, otherwise, displayBlock immediately.

Node asynchronous rendering

  • 1. Look for Layer dependent ASAsyncTransaction.
  • 2. Add displayBlock and completeBlock to ASAsyncTransaction
  • 3. Use ASAsyncTransactionQueue to schedule tasks
  • 4. MainRunloop commits ASAsync Transaction when sleep and exit are started
  • 5.ASAsync Transaction calls back to the completeBlock at commit time to complete the assignment of the Layer board diagram.

Underlying signal driving principle

The iOS display system is driven by the VSync signal, which is generated by the hardware clock 60 times per second. After iOS graphics server receives VS YNC signal, it will notify the APP through IPC. APP Runloong will register the corresponding CFRunloopSource to receive the clock signal notification through mach_port upon startup, and then the source callback will drive the animation and display of the entire APP.

Runloop Task distribution ->CoreAnimation

The CA registers an Observer in the Runloop that listens for Exit events in BeforeWaiting and has a lower priority than other observers. When a touch event arrives, the Runloop is awakened, and the code in the App performs operations such as creating and adjusting the view hierarchy, setting the UIView’s frame, modifying the CALayer’s transparency, and adding an animation to the view. These operations are eventually captured by CALayer and submitted to an intermediate state via CATransaction. When all the above operations are complete and the Runloop is about to go to sleep (or exit), observers of the event are notified. The CA-registered Observer then merges all intermediate states to the GPU for display in a callback; If there is an animation, the CA triggers the process multiple times through mechanisms such as CADisplayLink.

Runloop Task distribution ->Texture

Texture emulates the Core Animation mechanism here: For all ASNode modifications and commits, there are always tasks that must be put into the main thread. When such a task occurs, ASNode encapsulates the task with ASAsyncTransaction (Group) and submits it to a global container. Texture also registers an Observer in the Runloop to monitor the same events as the CA, but with a lower priority. Before Runloop goes to sleep and after the CA processes the event, Texture will execute all tasks submitted within the loop. With this mechanism, Texure can synchronize asynchronous, concurrent operations to the main thread as often as possible, and get good performance.

Texture Layout engine

Relative to the AutoLayout

UIKit AutoLayout’s Texture has the following advantages compared to AutoLayout:

  • Fast: Texture calculates the layout as fast as handwritten Frame
  • Asynchronous and concurrent: Layouts can be computed on background threads
  • Declarative rendering: The layout uses immutable data structure declaration to realize a layout perspective from focusing on the distance and constraints between views to dividing and formulating layout rules of different view subdomains. The higher level of abstraction makes the layout code easier to develop and maintain
  • Cacheable: If the layout is unchanged, it is automatically precomputed and cached in the background
  • Extensibility: It becomes convenient to use the same layout in different classes

Texture’s layout system

Texture has created a powerful Automatic Layout system based on the CSS Box Model that allows you to define your layout declaratively by introducing the concept of LayoutSpec.

: a special layoutTable. Different from Node, it is essentially an in-memory data structure, used to assist in view location calculation. It does not need view to hold space or carry child elements when drawing.

Texture Layout rules & Layout elements

Layout rule: Acts as a container for LayoutElements and arranges the location of LayoutElemengts by association between multiple LayoutElemengts, inherited from ASLayoutSpec.

Layout elements: All AsDisplayNodes and AsLayoutSpecs follow the protocol, and a new LayoutSpecs can be generated or combined with two Nodes and other LayoutSpecs. Protocols and LayoutSpecs have some properties for creating very complex layouts.

Sample Texture layout

Texture layout debugging

Calling -asciiArtString on any ASDisplayNode or ASLayoutSpec returns a character graph of the object and its children, which can also be set. DebugName is also included in the character graph.

You can also print style objects on any ASLayoutElement, such as Node and LayoutSpec, and debug the.size property.

The benefits of Texture

  • Asynchronous rendering and asynchronous rendering are distributed through Runloop tasks to optimize the main thread lag of complex interfaces.
  • Layer precomposition, intelligent preloading mechanism, in-depth optimization of the list, so as to further improve the experience and performance.
  • Declarative layout, FlexBox layout features, to iOS native development layout mode to bring a new layout thinking, very novel, very characteristic.

That’s basically what it looks like, if there’s a little help and inspiration for you. Just give me free likes and likes. Finally, let’s give you a wave of information.

Related information: Download address