Refined OVERVIEW a little more
Brian Vaughn committed
Mar 7, 2019 at 14:31 UTC
5386917f594dfdacc0ed5935fa03f80b8e130a54
1 file changed
+33
-26
OVERVIEW.md
+33
-26
@@ -192,7 +192,7 @@ If so, then it sends a "_profileSummary_" message with an id that identifies the
192
* number of interactions that were traced for this root
193
* the commits (each consisting of a timestamp and duration) that were profiled for the root
194
195
-This is the minimal information required to render the main Profiler interface.
195
+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).
196
197
Here is an example profile summary:
198
```js
@@ -225,7 +225,7 @@ When a commit is selected in the profiling view, the frontend needs to reconstru
225
In addition to this, it also needs to ask the backend for some additional information needed to display the ["flame chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#flame-chart) and ["ranked chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#ranked-chart) views. The frontend sends a "_profileCommitDetails_" message specifying which root and commit (index) it is interested in. The backend sends a response to fill in missing details about the commit:
226
227
* root id and commit index (to match request and response)
228
-* which elements were rendered during the commit and how long did they take
228
+* which elements were rendered during the commit <sup>1</sup> and how long did they take
229
* which interactions were part of the commit
230
231
Here is an example commit in which two elements were rendered and one interaction was traced:
@@ -234,28 +234,27 @@ Here is an example commit in which two elements were rendered and one interactio
234
{
235
rootID: 1,
236
commitIndex: 0,
237
-
238
- // Map of interaction ID to interaction.
239
- interactions: {
240
- 1: {
237
+ interactions: [
238
+ {
239
+ id: 1,
240
timestamp: 4,
241
name: "Foo"
242
},
244
- 2: {
243
+ {
244
+ id: 2,
245
timestamp: 4,
246
name: "Bar"
247
}
248
- },
249
-
250
- // Map of element ID to render durations (ms).
251
- // Elements not in this map were not rendered during the commit.
252
- nodes: {
253
- 1: {,
248
+ ],
249
+ nodes: [
250
+ {
251
+ id: 1,
252
baseDuration: 15,
253
selfDuration: 4,
254
actualDuration: 15
255
},
258
- 2: {
256
+ {
257
+ id: 2,
258
baseDuration: 11,
259
selfDuration: 8,
260
actualDuration: 11
@@ -264,6 +263,8 @@ Here is an example commit in which two elements were rendered and one interactio
263
}
264
```
265
266
+<sup>1</sup> Elements in the tree that are not explicitly included in the above response were not rendered during the current commit.
267
+
268
### Component commits
269
270
When a particular component (fiber) is selected, the frontend polls the backend for the aggregate data required to render the ["component chart"](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html#component-chart) view. The frontend sends a "_profileComponentDetails_" message specifying which root and component (id) it is interested in. The backend sends a response that includes:
@@ -278,11 +279,17 @@ Here is an example of a component that committed twice during a profiling sessio
279
rootID: 1,
280
id: 2,
281
281
- // Map of commit index to render duration (ms)
282
- commits: {
283
- 0: 11,
284
- 3: 7
285
- }
282
+ // Tuples of commit index and render duration (ms)
283
+ commits: [
284
+ [
285
+ 0, // index of first
286
+ 11 // duration (ms)
287
+ ],
288
+ [
289
+ 2, // index of second commit
290
+ 7 // duration (ms)
291
+ ]
292
+ ]
293
}
294
```
295
@@ -298,23 +305,23 @@ Here is an example of a profiling session consisting of two interactions:
305
```js
306
{
307
rootID: 1,
301
-
302
- // Map of ID to interaction:
303
- interactions: {
304
- 1: {
308
+ interactions: [
309
+ {
310
+ id: 1,
311
name: "Foo",
312
commits: [
313
0, // index of first commit
308
- 3 // index of second commit
314
+ 2 // index of second commit
315
]
316
},
311
- 2: {
317
+ {
318
+ id: 2,
319
name: "Bar",
320
commits: [
321
0 // index of first commit
322
]
323
}
317
- }
324
+ ]
325
}
326
```
327