Adding diagram for measuring bottlenecks.

high-performance-react.org

@@ -1084,24 +1084,58 @@ TODO useCallback
   :EXPORT_FILE_NAME: manuscript/diagnosing-bottlenecks.markua
   :END:
 
-When trying to improve performance the most important and valuable
-step in the process is identifying and diagnosing bottlenecks. You can
-attempt to guess at how to write high-performance code from the start,
-and to a small extent that can help, but with the complexity of the
-web ecosystem today that is very unlikely to be sufficient. There are
-just too many layers and components in the system to always get it
-right. So inevitably you will run in to performance bottlenecks.
-
-There are six main steps to solving performance bottlenecks, with
-some parts done in a cycle:
-
-- Describing the performance issue
-- Measuring the issue
-- Identifying the source of the problem
+When your application is not performing as you would like or expect,
+what can you do? What follows is my general approach to solving
+performance bottlenecks with a focus on React specific tools. There is
+an element of creativity to the process though so you should take this
+more as a guide and not something set in stone. You can start here but
+also try to find what works best for you.
+
+These are the six main steps I use to solve performance bottlenecks:
+
+- Describing the performance bottleneck
+- Measuring the bottleneck
+- Identifying the source
 - Diagnosing the cause
 - Generating possible solutions
 - Selecting and implementing a solution
-- Measuring the issue again
+
+#+name: bottleneck-process
+#+begin_src dot :file "./images/bottleneck-process.png" :exports results
+  digraph {
+     size="12!,4";
+     rankdir=TB;
+     node [fontname="DejaVu Sans"];
+     edge [fontname="DejaVu Sans"];
+     describe [label="Describe", shape=rectangle, fillcolor=yellow, style=filled];
+     measure [label="Measure", shape=oval];
+     identify [label="Identify", shape=oval];
+     diagnose [label="Diagnose", shape=oval];
+     generate [label="Solve", shape=oval];
+     select [label="Implement", shape=oval];
+     complete [label="Bottleneck Eliminated", shape=rectangle, fillcolor=green, style=filled];
+     describe -> measure;
+     measure -> identify;
+     identify -> diagnose;
+     diagnose -> generate;
+     generate -> select;
+     select -> measure;
+     measure -> complete;
+     { rank=same; describe; measure; complete; }
+     { rank=same; identify; diagnose; generate; select; }
+  }
+#+end_src
+
+#+caption: Figure {{{n(FIGURE)}}}: Tree of components
+#+attr_leanpub: :width 90%
+#+RESULTS: bottleneck-process
+[[file:./images/bottleneck-process.png]]
+
+As you can see in Figure {{{n(FIGURE, -)}}}, I use them in a cycle
+centered around measuring the bottleneck. Having some way to measure
+the bottleneck is extremely important. Without measuring you will not
+always be able to tell if the changes you made in the cycle had any
+effect.
 
 ** Describing Performance Issues
 

manuscript/diagnosing-bottlenecks.markua

@@ -1,16 +1,20 @@
 # Identifying & Diagnosing Bottlenecks
 
-When trying to improve performance the most important and valuable step in the process is identifying and diagnosing bottlenecks. You can attempt to guess at how to write high-performance code from the start, and to a small extent that can help, but with the complexity of the web ecosystem today that is very unlikely to be sufficient. There are just too many layers and components in the system to always get it right. So inevitably you will run in to performance bottlenecks. 
+When your application is not performing as you would like or expect, what can you do? What follows is my general approach to solving performance bottlenecks with a focus on React specific tools. There is an element of creativity to the process though so you should take this more as a guide and not something set in stone. You can start here but also try to find what works best for you. 
 
-There are six main steps to solving performance bottlenecks, with some parts done in a cycle: 
+These are the six main steps I use to solve performance bottlenecks: 
 
-* Describing the performance issue
-* Measuring the issue
-* Identifying the source of the problem
+* Describing the performance bottleneck
+* Measuring the bottleneck
+* Identifying the source
 * Diagnosing the cause
 * Generating possible solutions
 * Selecting and implementing a solution
-* Measuring the issue again
+
+{width: "90%", caption: "Figure 1: Tree of components"}
+![Figure 1: Tree of components](./images/bottleneck-process.png) 
+
+As you can see in Figure 1, I use them in a cycle centered around measuring the bottleneck. Having some way to measure the bottleneck is extremely important. Without measuring you will not always be able to tell if the changes you made in the cycle had any effect. 
 
 ## Describing Performance Issues