doc: update multiple thread mode.

Author: andycall

website/docs/tutorials/performance_optimization/imgs/thread_mode_diff.png

@@ -56,4 +56,22 @@ WebFController controller2 = WebFController(
   runningThread: group.slave(),
   devToolsService: ChromeDevToolsService(),
 );
-```
+```
+
+## How to Choose Between Dedicated-Threading or Single-Threading Mode
+
+Different threading modes offer various advantages depending on the scenario.
+
+It's difficult to categorize threading models simply as good or bad. In this section, we will explore the applicable scenarios for different threading modes and how to choose between them.
+
+![img](./imgs/thread_mode_diff.png)
+
+The advantage of single-thread mode is the efficient communication cost between the JavaScript runtime and the Flutter UI, especially if your apps contain a lot of JavaScript-controlled animations.
+
+However, the disadvantage of single-thread mode is still obvious—any execution of JavaScript will block the running of Dart, affecting animations and gesture handling.
+
+If your application does not require significant JavaScript runtime and it does not noticeably affect the running of the Flutter UI, using single-thread mode is a good choice. Additionally, it helps reduce delays in JavaScript animation states relative to the actual UI results.
+
+On the other hand, dedicated-threading mode is the counterpart of single-threading mode, where JavaScript execution won't block Dart execution unless necessary. However, the downside is the increased time for cross-thread synchronization.
+
+But in most scenarios, especially for Vue or React users, using dedicated-threading mode is a preferred choice most of the time.