React Internals - Batching Write Operations by tree Traversal
•
1 like•56 views
This Presentation carries information on 1. How Does Animation work? 2. How does Browser render? 3. How Browser identifies when to batch layouts? 4. How we traverse Tree to Batch Write operation? 5. How we traverse Across Frames by converting recursion to Iteration? 6. Small Prototype Code - on How React would have implemented? 7. Prototype Code Walkthrough. While Explaining React Internals Note: The slide is broken down into multiple slides to provide an animated feel. Hence 200 slides.
Recommended
More Related Content
Similar to React Internals - Batching Write Operations by tree Traversal
Similar to React Internals - Batching Write Operations by tree Traversal (20)
Recently uploaded
Recently uploaded (20)
React Internals - Batching Write Operations by tree Traversal
- 1. React Data Structure behind Batching Write “ to help browser Batch Layout ”
- 2. How Animation Works ?
- 27. Instructions Color Coordinates Layer Draw Initial X: 2 Y: 5 Width: 100 Height: 400 X: 2 Width: 400 Y: 25 Height: 100 Animation Engine
- 28. Instructions Color Coordinates Layer Draw Initial X: 2 Y: 5 Width: 100 Height: 400 Z index: 0 Z index: 1 Animation Engine X: 2 Width: 400 Y: 25 Height: 100
- 29. Instructions Color Coordinates Layer Draw Initial Animation Engine X: 2 Y: 5 Width: 100 Height: 400 Z index: 0 Z index: 1 X: 2 Width: 400 Y: 25 Height: 100
- 36. Instructions Color Coordinates Layer Draw Initial Animation Engine = Browser Abstract
- 37. How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree) Instructions Color Coordinates Layer Draw HTML Parser
- 38. Instructions Color Coordinates Layer Draw HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree)
- 39. JS Style Coordinates Layer Draw HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree)
- 40. JS Style Layout Paint Composite HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree)
- 41. JS Style Layout Paint Composite HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree) Cycle = Animation Frame
- 42. JS Style Layout Paint Composite HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree) Cycle = Animation Frame Screen refresh: 60 (times or frames) per second
- 43. JS Style Layout Paint Composite HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree) Cycle = Animation Frame Screen refresh: 60 (times or frames) per second Duration Per Frame: 1 / 60 = 0.01666666666
- 44. JS Style Layout Paint Composite HTML Parser How Browser constructs ? String => object(Parse Tree) => Object(DOM Tree) => Object (Render Tree) Cycle = Animation Frame Screen refresh: 60 (times or frames) per second Duration Per Frame: 1 / 60 = 0.01666666666 16.67 ms
- 45. JS Style Layout Paint Composite HTML Parser How Browser constructs ? When do we see visual Changes?
- 46. JS Style Layout Paint Composite HTML Parser How Browser constructs ? When do we see visual Changes? Visual change: When we modify object (DOM Tree) in JavaScript
- 47. JS Style Layout Paint Composite HTML Parser How Browser constructs ? When do we see visual Changes? Visual change: When we modify object (DOM Tree) in JavaScript 1. “layout” property: width, height , its position with left or top.
- 48. JS Style Layout Paint Composite HTML Parser How Browser constructs ? When do we see visual Changes? Visual change: When we modify object (DOM Tree) in JavaScript 1. “layout” property: width, height , its position with left or top. 2. “paint” property: background image, text color, shadows.
- 49. JS Style Layout Paint Composite HTML Parser 1. Traverse Object (Render Tree) 2. Find all Dirty Changes 3. Batch all these changes at once in one commit Browser Immediate Layouts Browser Batch Layouts 1. Font Size change 2. Browser Resize How Browser Updates ?
- 50. JS Style Layout Paint Composite HTML Parser How Browser Updates ? When to Batch?
- 51. JS Style Layout Paint Composite HTML Parser Read How Browser Updates ? When to Batch?
- 52. JS Style Layout Paint Composite HTML Parser Read Write How Browser Updates ? When to Batch?
- 53. JS Style Layout Paint Composite HTML Parser Read Read Write How Browser Updates ? When to Batch?
- 54. JS Style Layout Paint Composite HTML Parser Read Read Write Write How Browser Updates ? When to Batch?
- 55. JS Style Layout Paint Composite HTML Parser Read Read Write Write Layout Calculations = 2 How Browser Updates ? When to Batch?
- 56. JS Style Layout Paint Composite HTML Parser Read Read Write WriteRead - Write Read - Write How Browser Updates ? How can we help Browser Batching?
- 57. JS Style Layout Paint Composite HTML Parser Read Write Write ReadRead - Read Write - Write How Browser Updates ? How can we help Browser Batching ? Batch Write
- 58. JS Style Layout Paint Composite HTML Parser Read Write Write ReadRead - Read Write - Write Layout Calculations = 1 How Browser Updates ? How can we help Browser Batching ? Batch Write
- 59. Tree Traversal 1.Read 2.Compare 3.Write to DOM tree
- 60. Array Traversal => Index 1 3 2 4
- 61. 1 3 2 4 1 3 2 4 Array Traversal => Index
- 62. 1 3 2 4 1 3 2 4 Traversal How to Change the index order ?
- 63. 1 3 2 4 1 3 2 4 Traversal How to Change the index order ? Link List
- 64. Traversal How to Handle One to Many Relation ? root child1 child2 child3 gchild1 gChild2
- 65. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 66. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 67. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 68. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 69. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 70. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 71. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 72. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 73. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 74. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 75. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 76. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 77. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 78. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 79. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 80. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) How to Handle One to Many Relation ?
- 81. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) Single Frame
- 82. root child1 child2 child3 gchild1 gChild2 Traversal (Recursion) Single Frame => Across Frames
- 83. JS Style Layout Paint Composite HTML Parser Traversal Across Frames
- 84. JS Style Layout Paint Composite HTML Parser Traversal Across Frames
- 85. JS Style Layout Paint Composite HTML Parser Request Idle Callbacks Request AnimationFrame Callbacks Traversal Across Frames
- 86. JS Style Layout Paint Composite HTML Parser Request Idle Callbacks Request AnimationFrame Callbacks Traversal Across Frames
- 87. JS Style Layout Paint Composite HTML Parser Request Idle Callbacks Request AnimationFrame Callbacks Traversal Across Frames => Break Traversal
- 88. JS Style Layout Paint Composite HTML Parser Request Idle Callbacks Request AnimationFrame Callbacks Traversal Across Frames => Break Traversal => Run in Idle Time
- 89. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ?
- 90. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ? Recursion => Iteration
- 91. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ?
- 92. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ?
- 93. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ? => Reference to Traverse Back
- 94. root child1 child2 child3 gchild1 gChild2 Traversal Across Frames => Break Traversal => How ? => Reference to Parent
- 95. Build Tree
- 97. Build Tree Dynamic Children root child1 child2 child3
- 98. root child1 child2 child3 Build Tree Dynamic Children
- 99. root child1 child2 child3 Build Tree Dynamic Children
- 100. root child1 child2 child3 Build Tree Dynamic Children
- 101. root child1 child2 child3 Build Tree Dynamic Children
- 102. Build Tree Dynamic Children root child1 child2 child3
- 103. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 104. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 105. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 106. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 107. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 108. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 109. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 110. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 111. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 112. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 113. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 114. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 115. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 116. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 117. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 118. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 119. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 120. Build Tree Dynamic Children gchild1 gChild2 root child1 child2 child3
- 121. Build Tree | Traversal | Update Abstract => React 1. Build Linked List for Iteration 2. Traverse Node in Idle Time across frames 3. Collect Changes from Virtual DOM 4. Commit to DOM Tree in Single Frame
- 122. 1. Build Linked List for Iteration 2. Traverse Node in Idle Time across frames 3. Collect Changes from Virtual DOM 4. Commit to DOM Tree in Single Frame Build Tree | Traversal | Update Abstract => React => React Component => Life Cycle Methods | Hooks
- 123. 1. Build Linked List for Iteration 2. Traverse Node in Idle Time across frames 3. Collect Changes from Virtual DOM 4. Commit to DOM Tree in Single Frame 5. React Component Wrapped in Fiber Node Build Tree | Traversal | Update Abstract => React => React Component => Life Cycle Methods | Hooks
- 124. React Fiber Node
- 125. React Fiber Node => Instance (React Component)
- 126. React Fiber Node => Instance (React Component) => Render
- 127. React Fiber Node => Instance (React Component) => Render
- 128. React Fiber Node => Instance (React Component) => Render
- 129. React Fiber Node => Instance (React Component) => Render
- 130. Initial Tree Virtual DOM Creation DOM tree Copy
- 132. app
- 133. app list
- 134. app list
- 135. app list
- 192. Minimum Operations 0(n3) Update Insert | delete => reorder 1 app list item item button 4
- 193. Minimum Operations 0(n3) Update Insert | delete => reorder 1 app list item item button 4 React implements a heuristic O(n) algorithm based on two assumptions: 1. Two elements of different types will produce different trees. 2.Render children with a key prop.
- 194. Inference
- 195. Render Tree (Render Engine) | API | DOM Tree (JS Engine) | API | Virtual DOM Tree (JS Framework - React)
- 196. Render Tree (Render Engine) | API | DOM Tree (JS Engine) | API | Virtual DOM Tree (JS Framework - React) Build Link List: Render() State changes: setState | useState sideEffect: ComponentDidMount | useEffect
- 197. Render Tree (Render Engine) | API | DOM Tree (JS Engine) | API | Virtual DOM Tree (JS Framework - React) Build Link List: Render() State changes: setState | useState sideEffect: ComponentDidMount | useEffect
- 198. Render Tree (Render Engine) | API | DOM Tree (JS Engine) | API | Virtual DOM Tree (JS Framework - React) Build Link List: Render() State changes: setState | useState sideEffect: ComponentDidMount | useEffect
- 199. Resource • Lin Clark: A Cartoon Intro to Fiber (React Conf 2017)