Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List View: explore opening to focused block #35967

Closed
wants to merge 5 commits into from

Conversation

gwwar
Copy link
Contributor

@gwwar gwwar commented Oct 26, 2021

WIP alternative #35817

Spinning up a branch with some perf tests enabled, so we can see how different approaches work out.

After we get a baseline run, @ramonjd you're welcome to push to this branch.

@gwwar gwwar self-assigned this Oct 26, 2021
@gwwar gwwar changed the title List View: explore opening to expanded item List View: explore opening to focused block Oct 26, 2021
@gwwar gwwar mentioned this pull request Oct 26, 2021
7 tasks
@github-actions
Copy link

github-actions bot commented Oct 26, 2021

Size Change: +4.1 kB (0%)

Total Size: 1.08 MB

Filename Size Change
build/block-editor/index.min.js 136 kB +362 B (0%)
build/block-editor/style-rtl.css 14.1 kB +16 B (0%)
build/block-editor/style.css 14 kB +17 B (0%)
build/block-library/blocks/button/style-rtl.css 560 B +11 B (+2%)
build/block-library/blocks/button/style.css 560 B +11 B (+2%)
build/block-library/blocks/navigation-link/editor-rtl.css 642 B +154 B (+32%) 🚨
build/block-library/blocks/navigation-link/editor.css 642 B +153 B (+31%) 🚨
build/block-library/editor-rtl.css 9.78 kB +69 B (+1%)
build/block-library/editor.css 9.78 kB +71 B (+1%)
build/block-library/index.min.js 156 kB +2.74 kB (+2%)
build/block-library/style-rtl.css 10.5 kB +22 B (0%)
build/block-library/style.css 10.6 kB +22 B (0%)
build/blocks/index.min.js 46 kB +16 B (0%)
build/components/index.min.js 212 kB +38 B (0%)
build/components/style-rtl.css 15.4 kB +6 B (0%)
build/components/style.css 15.4 kB +6 B (0%)
build/core-data/index.min.js 12.6 kB +186 B (+1%)
build/customize-widgets/index.min.js 11.2 kB +31 B (0%)
build/edit-site/index.min.js 30.7 kB +61 B (0%)
build/edit-site/style-rtl.css 5.79 kB +10 B (0%)
build/edit-site/style.css 5.78 kB +9 B (0%)
build/edit-widgets/index.min.js 16.3 kB -2 B (0%)
build/editor/index.min.js 37.8 kB +96 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/buttons/editor-rtl.css 309 B
build/block-library/blocks/buttons/editor.css 309 B
build/block-library/blocks/buttons/style-rtl.css 317 B
build/block-library/blocks/buttons/style.css 317 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.17 kB
build/block-library/blocks/cover/style.css 1.17 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 502 B
build/block-library/blocks/image/style.css 505 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.81 kB
build/block-library/blocks/navigation/editor.css 1.81 kB
build/block-library/blocks/navigation/style-rtl.css 1.71 kB
build/block-library/blocks/navigation/style.css 1.7 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 198 B
build/block-library/blocks/page-list/style.css 198 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 347 B
build/block-library/blocks/post-comments-form/style.css 347 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 B
build/block-library/blocks/post-content/style-rtl.css 56 B
build/block-library/blocks/post-content/style.css 56 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 396 B
build/block-library/blocks/post-featured-image/editor.css 397 B
build/block-library/blocks/post-featured-image/style-rtl.css 156 B
build/block-library/blocks/post-featured-image/style.css 156 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 770 B
build/block-library/blocks/site-logo/editor.css 770 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 824 B
build/block-library/blocks/social-links/editor.css 823 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/theme-rtl.css 668 B
build/block-library/theme.css 673 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/compose/index.min.js 10.9 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.44 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.4 kB
build/edit-post/style-rtl.css 7.12 kB
build/edit-post/style.css 7.12 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.18 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.21 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.34 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.19 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.7 kB
build/server-side-render/index.min.js 1.52 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@gwwar
Copy link
Contributor Author

gwwar commented Oct 26, 2021

Baseline before any changes https://github.com/WordPress/gutenberg/runs/4012470808

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ edbf6fc48ab5a235db54d564ac0d60227a60f846 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '257.52 ms'                │ '265.38 ms'  │
│      firstPaint      │                '37.38 ms'                │  '31.98 ms'  │
│   domContentLoaded   │               '423.92 ms'                │  '300.9 ms'  │
│        loaded        │               '434.02 ms'                │ '311.22 ms'  │
│ firstContentfulPaint │               '5905.94 ms'               │ '5789.72 ms' │
│      firstBlock      │               '7029.08 ms'               │ '6541.08 ms' │
│         type         │                '67.54 ms'                │  '72.22 ms'  │
│       minType        │                '58.96 ms'                │  '58.03 ms'  │
│       maxType        │                '78.01 ms'                │  '90.78 ms'  │
│        focus         │               '238.12 ms'                │ '239.54 ms'  │
│       minFocus       │                 '1.4 ms'                 │  '1.33 ms'   │
│       maxFocus       │               '392.09 ms'                │ '376.61 ms'  │
│     inserterOpen     │                '89.97 ms'                │  '90.13 ms'  │
│   minInserterOpen    │                '63.47 ms'                │  '62.59 ms'  │
│   maxInserterOpen    │               '274.73 ms'                │ '275.09 ms'  │
│    inserterSearch    │               '109.27 ms'                │ '106.11 ms'  │
│  minInserterSearch   │                '69.4 ms'                 │  '68.71 ms'  │
│  maxInserterSearch   │               '341.82 ms'                │ '313.79 ms'  │
│    inserterHover     │                '46.18 ms'                │  '44.03 ms'  │
│   minInserterHover   │                '40.48 ms'                │  '39.69 ms'  │
│   maxInserterHover   │                '55.55 ms'                │  '51.66 ms'  │
│     listViewOpen     │               '3705.02 ms'               │ '3646.73 ms' │
│   minListViewOpen    │               '3402.29 ms'               │ '3318.71 ms' │
│   maxListViewOpen    │               '5416.23 ms'               │ '5133.56 ms' │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬─────────────┐
│       (index)        │ edbf6fc48ab5a235db54d564ac0d60227a60f846 │    trunk    │
├──────────────────────┼──────────────────────────────────────────┼─────────────┤
│    serverResponse    │                '149.2 ms'                │ '149.77 ms' │
│      firstPaint      │                '505.2 ms'                │ '448.8 ms'  │
│   domContentLoaded   │               '516.07 ms'                │ '482.47 ms' │
│        loaded        │                '711.7 ms'                │ '655.67 ms' │
│ firstContentfulPaint │                '505.2 ms'                │ '448.8 ms'  │
│      firstBlock      │               '7376.27 ms'               │ '7198.8 ms' │
│         type         │                '46.11 ms'                │ '44.99 ms'  │
│       minType        │                '42.68 ms'                │ '41.92 ms'  │
│       maxType        │                '59.19 ms'                │ '60.69 ms'  │
└──────────────────────┴──────────────────────────────────────────┴─────────────┘

@ramonjd
Copy link
Member

ramonjd commented Oct 27, 2021

Thanks so much for setting this up and reviewing #35817 @gwwar

Performance check after commit changes: #35967 (commits)

https://github.com/WordPress/gutenberg/runs/4014766222

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 637a337d9862e646de3953fb493903894f542454 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '261.28 ms'                │ '260.24 ms'  │
│      firstPaint      │                '7.42 ms'                 │  '48.54 ms'  │
│   domContentLoaded   │               '349.28 ms'                │ '396.72 ms'  │
│        loaded        │               '362.52 ms'                │ '407.58 ms'  │
│ firstContentfulPaint │                '6552 ms'                 │ '6799.86 ms' │
│      firstBlock      │               '7856.56 ms'               │ '7976.04 ms' │
│         type         │                '58.63 ms'                │  '66.02 ms'  │
│       minType        │                '48.22 ms'                │  '53.18 ms'  │
│       maxType        │                '70.86 ms'                │  '79.15 ms'  │
│        focus         │               '1165.66 ms'               │ '223.78 ms'  │
│       minFocus       │                '1.19 ms'                 │  '1.17 ms'   │
│       maxFocus       │               '1696.16 ms'               │ '364.92 ms'  │
│     inserterOpen     │               '100.73 ms'                │  '98.42 ms'  │
│   minInserterOpen    │                '66.8 ms'                 │  '66.2 ms'   │
│   maxInserterOpen    │               '374.55 ms'                │ '365.73 ms'  │
│    inserterSearch    │               '107.11 ms'                │ '104.63 ms'  │
│  minInserterSearch   │                '69.9 ms'                 │  '65.19 ms'  │
│  maxInserterSearch   │               '311.82 ms'                │ '343.42 ms'  │
│    inserterHover     │                '43.05 ms'                │  '33.65 ms'  │
│   minInserterHover   │                '36.76 ms'                │  '29.92 ms'  │
│   maxInserterHover   │                '56.19 ms'                │  '46.81 ms'  │
│     listViewOpen     │               '4228.85 ms'               │ '4240.76 ms' │
│   minListViewOpen    │               '3957.87 ms'               │ '3906.51 ms' │
│   maxListViewOpen    │               '5578.71 ms'               │  '5865 ms'   │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 637a337d9862e646de3953fb493903894f542454 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '145.77 ms'                │ '136.73 ms'  │
│      firstPaint      │               '479.97 ms'                │ '526.67 ms'  │
│   domContentLoaded   │               '539.77 ms'                │  '580.4 ms'  │
│        loaded        │               '696.93 ms'                │ '682.83 ms'  │
│ firstContentfulPaint │               '479.97 ms'                │ '526.67 ms'  │
│      firstBlock      │               '7352.67 ms'               │ '7445.33 ms' │
│         type         │                '41.12 ms'                │  '41.01 ms'  │
│       minType        │                '36.27 ms'                │  '36.91 ms'  │
│       maxType        │                '64.44 ms'                │  '54.92 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

I think there's a slight drop in performance if I'm reading things right?

Before

│     listViewOpen     │               '3705.02 ms'               │ '3646.73 ms' │
│   minListViewOpen    │               '3402.29 ms'               │ '3318.71 ms' │
│   maxListViewOpen    │               '5416.23 ms'               │ '5133.56 ms' │

After

│     listViewOpen     │               '4228.85 ms'               │ '4240.76 ms' │
│   minListViewOpen    │               '3957.87 ms'               │ '3906.51 ms' │
│   maxListViewOpen    │               '5578.71 ms'               │  '5865 ms'   │

@gwwar
Copy link
Contributor Author

gwwar commented Oct 27, 2021

So querying for selectedId in the parent affects block focus time. You can test this locally with a post that has ~900 blocks. Trying to focus from one paragraph to another will lag by about a second, as we see here:

CleanShot 2021-10-27 at 09 00 22@2x

More detailed explanation of why is in #35706. But the TL;DR is that by default if a parent updates in React all children re-render regardless of if props change.

@gwwar
Copy link
Contributor Author

gwwar commented Oct 27, 2021

My other List View performance PR landed in #35230 ✨ I'm going to rebase with trunk to see the perf effects.

Ideally changes here shouldn't slow down focus too much after the rebase.

gwwar and others added 3 commits October 27, 2021 10:35
…t only when a block is selected outside the block list.

Using an `useEffect` to loop through parent nodes, and expand them when necessary.
@gwwar gwwar force-pushed the try/list-view-scroll-to-item branch from 203379c to b2947ee Compare October 27, 2021 17:35
@ramonjd
Copy link
Member

ramonjd commented Oct 28, 2021

So querying for selectedId in the parent affects block focus time. You can test this locally with a post that has ~900 blocks. Trying to focus from one paragraph to another will lag by about a second

Ouch.

Okay I was definitely focussing on the wrong stat 😆 Thanks for the explanation and for doing the heavy lifting on performance checks.

@gwwar
Copy link
Contributor Author

gwwar commented Oct 29, 2021

Excellent, it looks like with windowing, we shouldn't see the terrible focus slowdown. I'd recommend manually testing to verify, but I think we can query for selectedId in the parent component again.

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 462f05081bd252d9c34652249e873265df25a990 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '244.18 ms'                │ '236.08 ms'  │
│      firstPaint      │                '57.04 ms'                │  '25.98 ms'  │
│   domContentLoaded   │                '309.8 ms'                │   '303 ms'   │
│        loaded        │               '321.86 ms'                │ '312.08 ms'  │
│ firstContentfulPaint │               '5391.36 ms'               │ '5467.12 ms' │
│      firstBlock      │               '6122.66 ms'               │ '6302.98 ms' │
│         type         │                '47.48 ms'                │  '49.45 ms'  │
│       minType        │                '41.27 ms'                │  '44.32 ms'  │
│       maxType        │                '57.12 ms'                │  '60.06 ms'  │
│        focus         │               '152.83 ms'                │ '152.86 ms'  │
│       minFocus       │                '1.11 ms'                 │  '1.22 ms'   │
│       maxFocus       │               '208.97 ms'                │ '210.65 ms'  │
│     inserterOpen     │                '79.39 ms'                │  '81.94 ms'  │
│   minInserterOpen    │                '56.72 ms'                │  '56.9 ms'   │
│   maxInserterOpen    │                '259.6 ms'                │  '261.1 ms'  │
│    inserterSearch    │                '75.4 ms'                 │  '72.17 ms'  │
│  minInserterSearch   │                '63.29 ms'                │  '65.45 ms'  │
│  maxInserterSearch   │                '95.69 ms'                │  '79.64 ms'  │
│    inserterHover     │                '41.27 ms'                │  '40.34 ms'  │
│   minInserterHover   │                '37.02 ms'                │  '36.19 ms'  │
│   maxInserterHover   │                '45.31 ms'                │  '46.72 ms'  │
│     listViewOpen     │               '282.23 ms'                │ '285.29 ms'  │
│   minListViewOpen    │               '269.43 ms'                │ '269.73 ms'  │
│   maxListViewOpen    │               '296.47 ms'                │ '298.42 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 462f05081bd252d9c34652249e873265df25a990 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '152.13 ms'                │ '132.73 ms'  │
│      firstPaint      │               '436.27 ms'                │ '420.63 ms'  │
│   domContentLoaded   │               '458.27 ms'                │  '455.1 ms'  │
│        loaded        │               '649.67 ms'                │ '638.27 ms'  │
│ firstContentfulPaint │               '436.27 ms'                │ '420.63 ms'  │
│      firstBlock      │               '6616.37 ms'               │ '6679.73 ms' │
│         type         │                '39.19 ms'                │  '35.45 ms'  │
│       minType        │                '35.58 ms'                │  '32.91 ms'  │
│       maxType        │                '53.88 ms'                │  '52.3 ms'   │
���──────────────────────┴──────────────────────────────────────────┴──────────────┘

setExpandedState( {
type: 'expand',
clientId,
} );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two recommendations here:

  • Let's make a new action so we can dispatch a single one instead of many
  • It might be worth exploring if we need to keep track of focus or not. (Is there any other state we can query?) I'd timebox this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make a new action so we can dispatch a single one instead of many

Good idea. I'll make a start next week. Thanks again, and great work.

@ramonjd
Copy link
Member

ramonjd commented Nov 1, 2021

After pushing the latest changes from #35817 on top of #35230

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 93499c01d00f978d8d726689738e4bac61d76039 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│        focus         │                '191.3 ms'                │ '177.87 ms'  │
│       minFocus       │                '1.21 ms'                 │  '1.15 ms'   │
│       maxFocus       │               '545.72 ms'                │ '520.51 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

A big improvement on #35967 (comment) Way to go @gwwar
🎉

@gwwar gwwar closed this Jul 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants