Updated Profiling overview/proposal again
Brian Vaughn committed
Mar 9, 2019 at 14:08 UTC
c687252b6a5f9f8301753918340c2024c7bb87d5
1 file changed
+32
-22
OVERVIEW.md
+32
-22
@@ -20,11 +20,12 @@ We only send the following bits of information: element type, id, parent id, own
20
21
#### Adding a root node
22
23
-Adding a root to the tree requires sending 3 numbers:
23
+Adding a root to the tree requires sending 4 numbers:
24
25
1. add operation constant (`1`)
26
1. fiber id
27
1. element type constant (`8 === ElementTypeRoot`)
28
+1. profiling flag
29
30
For example, adding a root fiber with an id of 1:
31
```js
@@ -32,6 +33,7 @@ For example, adding a root fiber with an id of 1:
33
1, // add operation
34
1, // fiber id
35
8, // ElementTypeRoot
36
+ 1, // this root's renderer supports profiling
37
]
38
```
39
@@ -169,7 +171,7 @@ The Profiler UI is a powerful tool for identifying and fixing performance proble
171
* Minimizing bridge traffic.
172
* Making expensive computations lazy.
173
172
-Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts ("_profilingStarted_") and stops ("_profilingStopped_").
174
+Profiling information is stored on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. (The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message.)
175
176
When profiling begins, the frontend takes a snapshot/copy of each root. This snapshot includes the id, name, key, and child IDs for each node in the tree. (This information is already present on the frontend, so it does not require any additional bridge traffic.) While profiling is active, each time React commits– the frontend also stores a copy of the "_operations_" message (described above). Once profiling has finished, the frontend can use the original snapshot along with each of the stored "_operations_" messages to reconstruct the tree for each of the profiled commits.
177
@@ -191,6 +193,7 @@ If so, then it sends a "_profileSummary_" message with an id that identifies the
193
* root id (to match request and response)
194
* number of interactions that were traced for this root
195
* the commits (each consisting of a timestamp and duration) that were profiled for the root
196
+* tree base durations as of when profiling started
197
198
This is the minimal information required to render the main ["commit selector"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#browsing-commits).
199
@@ -199,19 +202,29 @@ Here is an example profile summary:
202
{
203
rootID: 1,
204
interactionCount: 2,
205
+
206
+ // Tuples of commit time (relative to when profiling started) and duration
207
commits: [
203
- [
204
- 210, // first commit started 210ms after profiling began
205
- 10, // and took 10ms
206
- ],
207
- [
208
- 284, // second commit started 284ms after profiling began
209
- 13, // and took 13ms
210
- ]
211
- [
212
- 303, // third commit started 303ms after profiling began
213
- 5, // and took 5ms
214
- ]
208
+ 210, // first commit started 210ms after profiling began
209
+ 10, // and took 10ms
210
+
211
+ 284, // second commit started 284ms after profiling began
212
+ 13, // and took 13ms
213
+
214
+ 303, // third commit started 303ms after profiling began
215
+ 5, // and took 5ms
216
+ ],
217
+
218
+ // Tuples of fiber id and initial tree base duration
219
+ treeBaseDuration: [
220
+ 1, // fiber id
221
+ 11, // tree base duration when profiling started
222
+
223
+ 2, // fiber id
224
+ 12, // tree base duration when profiling started
225
+
226
+ 3, // fiber id
227
+ 8, // tree base duration when profiling started
228
]
229
]
230
```
@@ -281,14 +294,11 @@ Here is an example of a component that committed twice during a profiling sessio
294
295
// Tuples of commit index and render duration (ms)
296
commits: [
284
- [
285
- 0, // index of first
286
- 11 // duration (ms)
287
- ],
288
- [
289
- 2, // index of second commit
290
- 7 // duration (ms)
291
- ]
297
+ 0, // index of first
298
+ 11 // duration (ms)
299
+
300
+ 2, // index of second commit
301
+ 7 // duration (ms)
302
]
303
}
304
```