-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Perf] Improved performance for
useActivityTreeWithRenderer (#5163)
* Early investigations * Add skipCheckAccessibility locally * Fix destructuring * Remove unnecessary accessibility check * Add performance test * Rename * Use Map.get instead of [].find * Clean up tests * Add entry * Update PR number * Typo * Update CHANGELOG.md
- Loading branch information
Showing
7 changed files
with
158 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| Tests in this folder may not have its corresponding `.js` file as we are still exploring how to write tests for tracking performance issues. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| <!doctype html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <link href="/assets/index.css" rel="stylesheet" type="text/css" /> | ||
| <script crossorigin="anonymous" src="/test-harness.js"></script> | ||
| <script crossorigin="anonymous" src="/test-page-object.js"></script> | ||
| <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script> | ||
| </head> | ||
| <body> | ||
| <main id="webchat"></main> | ||
| <script> | ||
| const NUM_MESSAGE = 200; | ||
| const QUORUM_SIZE = 20; | ||
|
|
||
| run( | ||
| async function () { | ||
| const { | ||
| WebChat: { ReactWebChat } | ||
| } = window; // Imports in UMD fashion. | ||
|
|
||
| const { directLine, store } = testHelpers.createDirectLineEmulator(); | ||
|
|
||
| WebChat.renderWebChat({ directLine, store }, document.querySelector('main')); | ||
|
|
||
| await pageConditions.uiConnected(); | ||
|
|
||
| const startAt = Date.now(); | ||
| const timeForEachQuorum = []; | ||
| const promises = []; | ||
| let lastFlushAt = Date.now(); | ||
|
|
||
| for (let index = 0; index < NUM_MESSAGE; index++) { | ||
| promises.push( | ||
| // Plain text message isolate dependencies on Markdown. | ||
| directLine.emulateIncomingActivity( | ||
| { text: `Message ${index}.`, textFormat: 'plain', type: 'message' }, | ||
| { skipWait: true } | ||
| ) | ||
| ); | ||
|
|
||
| if (promises.length >= QUORUM_SIZE) { | ||
| await Promise.all(promises.splice(0)); | ||
| await pageConditions.numActivitiesShown(index + 1); | ||
|
|
||
| const now = Date.now(); | ||
|
|
||
| timeForEachQuorum.push(now - lastFlushAt); | ||
| lastFlushAt = now; | ||
| } | ||
| } | ||
|
|
||
| if (promises.length) { | ||
| await Promise.all(promises); | ||
|
|
||
| const now = Date.now(); | ||
|
|
||
| timeForEachQuorum.push(now - lastFlushAt); | ||
| } | ||
|
|
||
| await pageConditions.numActivitiesShown(NUM_MESSAGE); | ||
|
|
||
| // Remove outliers. | ||
| timeForEachQuorum.shift(); | ||
| timeForEachQuorum.shift(); | ||
|
|
||
| const firstHalf = timeForEachQuorum.splice(0, timeForEachQuorum.length >> 1); | ||
|
|
||
| const sumOfFirstHalf = firstHalf.reduce((sum, time) => sum + time, 0); | ||
| const sumOfSecondHalf = timeForEachQuorum.reduce((sum, time) => sum + time, 0); | ||
|
|
||
| const averageOfFirstHalf = sumOfFirstHalf / firstHalf.length; | ||
| const averageOfSecondHalf = sumOfSecondHalf / timeForEachQuorum.length; | ||
|
|
||
| console.log(`Took ${Date.now() - startAt} ms.`, { | ||
| firstHalf, | ||
| secondHalf: timeForEachQuorum, | ||
| averageOfFirstHalf, | ||
| averageOfSecondHalf | ||
| }); | ||
|
|
||
| // Time taken to render the first half of the chat history, should be 80% similar to the time taken to render the second half of the chat history. | ||
| expect(averageOfFirstHalf / averageOfSecondHalf).toBeGreaterThan(0.8); | ||
| }, | ||
| { skipCheckAccessibility: true } | ||
| ); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!doctype html> | ||
| <html lang="en-US"> | ||
| <head> | ||
| <link href="/assets/index.css" rel="stylesheet" type="text/css" /> | ||
| <script crossorigin="anonymous" src="/test-harness.js"></script> | ||
| <script crossorigin="anonymous" src="/test-page-object.js"></script> | ||
| <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script> | ||
| </head> | ||
| <body> | ||
| <main id="webchat"></main> | ||
| <script> | ||
| const NUM_MESSAGE = 400; | ||
| const QUORUM = 5; | ||
|
|
||
| run(async function () { | ||
| const { | ||
| WebChat: { ReactWebChat } | ||
| } = window; // Imports in UMD fashion. | ||
|
|
||
| const { directLine, store } = testHelpers.createDirectLineEmulator(); | ||
|
|
||
| WebChat.renderWebChat({ directLine, store }, document.querySelector('main')); | ||
|
|
||
| await pageConditions.uiConnected(); | ||
|
|
||
| const now = Date.now(); | ||
| const timeForEachMessage = []; | ||
|
|
||
| for (let index = 0; index < NUM_MESSAGE; index++) { | ||
| const last = Date.now(); | ||
|
|
||
| await directLine.emulateIncomingActivity(`Message ${index}.`); | ||
|
|
||
| timeForEachMessage.push(Date.now() - last); | ||
| } | ||
|
|
||
| await pageConditions.numActivitiesShown(NUM_MESSAGE); | ||
|
|
||
| console.log(`Took ${Date.now() - now} milliseconds.`); | ||
| console.log(timeForEachMessage.join(',')); | ||
|
|
||
| // TODO: How do we consider performance don't exponentially increase? | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters