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: windowing try rendering placeholders instead of padding #35571

Closed
wants to merge 15 commits into from

Conversation

gwwar
Copy link
Contributor

@gwwar gwwar commented Oct 12, 2021

It was recommended by @talldan to see if we could use placeholders after reviewing #35230. This is a quick sketch to see if there's any performance impact with windowing if we render a fixed number of items in a list vs all items, but using simple placeholder items for items outside of the current window.

Another point of consideration is that this is likely to block framer dragging #34022 I didn't have great results when I tried turning off the layout checks for only some items in that branch.

CleanShot.2021-10-12.at.15.01.30.mp4

@github-actions
Copy link

github-actions bot commented Oct 12, 2021

Size Change: +918 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-editor/index.min.js 135 kB +407 B (0%)
build/compose/index.min.js 10.9 kB +511 B (+5%) 🔍
ℹ️ 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-editor/style-rtl.css 13.9 kB
build/block-editor/style.css 13.9 kB
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/button/style-rtl.css 549 B
build/block-library/blocks/button/style.css 549 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/editor-rtl.css 568 B
build/block-library/blocks/navigation-link/editor.css 570 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 300 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.71 kB
build/block-library/blocks/navigation/editor.css 1.71 kB
build/block-library/blocks/navigation/style-rtl.css 1.64 kB
build/block-library/blocks/navigation/style.css 1.64 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 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 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 220 B
build/block-library/blocks/quote/theme.css 222 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 374 B
build/block-library/blocks/search/style.css 375 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 769 B
build/block-library/blocks/site-logo/editor.css 769 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/editor-rtl.css 9.65 kB
build/block-library/editor.css 9.65 kB
build/block-library/index.min.js 148 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.3 kB
build/block-library/style.css 10.3 kB
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 669 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46 kB
build/components/index.min.js 217 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/core-data/index.min.js 12.4 kB
build/customize-widgets/index.min.js 11.2 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.46 kB
build/edit-navigation/index.min.js 15.4 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.3 kB
build/edit-post/style-rtl.css 7.22 kB
build/edit-post/style.css 7.22 kB
build/edit-site/index.min.js 29.8 kB
build/edit-site/style-rtl.css 5.54 kB
build/edit-site/style.css 5.54 kB
build/edit-widgets/index.min.js 15.8 kB
build/edit-widgets/style-rtl.css 4.12 kB
build/edit-widgets/style.css 4.13 kB
build/editor/index.min.js 37.5 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.93 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.6 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 13, 2021

Placeholders Run 1:

This is actually a pretty interesting result. We see similar performance characteristics to rendering a much smaller number of rows, which suggests there are some severe slowdowns rendering list view blocks. (Perhaps icons or slow selectors?) I'm curious, so I'll do two follow up things here:

  1. If 900 blocks doesn't slow down rendering, profile to see at what number we start diverging in results. (There should in theory be some point where the browser takes longer rendering too many table rows).
  2. Profile the list view blocks for potential areas to improve (say speeding up a selector).
>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 632202a1d330b145289dac26e840d7dfdb6ff7e4 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '219.66 ms'                │ '197.42 ms'  │
│      firstPaint      │                '13.04 ms'                │  '68.2 ms'   │
│   domContentLoaded   │               '245.36 ms'                │  '276.1 ms'  │
│        loaded        │               '253.46 ms'                │ '284.34 ms'  │
│ firstContentfulPaint │                '4784 ms'                 │ '4863.88 ms' │
│      firstBlock      │               '5468.82 ms'               │ '5490.9 ms'  │
│         type         │                '39.69 ms'                │  '54.97 ms'  │
│       minType        │                '35.61 ms'                │  '50.31 ms'  │
│       maxType        │                '53.06 ms'                │  '70.61 ms'  │
│        focus         │               '122.21 ms'                │ '840.94 ms'  │
│       minFocus       │                '1.01 ms'                 │  '1.07 ms'   │
│       maxFocus       │               '166.86 ms'                │ '1486.96 ms' │
│     inserterOpen     │                '70.82 ms'                │ '126.66 ms'  │
│   minInserterOpen    │                '50.98 ms'                │  '51.77 ms'  │
│   maxInserterOpen    │               '223.92 ms'                │ '761.87 ms'  │
│    inserterSearch    │                '64.03 ms'                │  '65.03 ms'  │
│  minInserterSearch   │                '57.19 ms'                │  '54.56 ms'  │
│  maxInserterSearch   │                '70.62 ms'                │  '74.03 ms'  │
│    inserterHover     │                '37.2 ms'                 │  '35.41 ms'  │
│   minInserterHover   │                '32.08 ms'                │  '31.29 ms'  │
│   maxInserterHover   │                '45.01 ms'                │  '40.12 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 632202a1d330b145289dac26e840d7dfdb6ff7e4 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '116.53 ms'                │ '106.83 ms'  │
│      firstPaint      │                '441.5 ms'                │  '659.6 ms'  │
│   domContentLoaded   │               '514.77 ms'                │ '698.77 ms'  │
│        loaded        │                '727.4 ms'                │ '826.23 ms'  │
│ firstContentfulPaint │                '441.5 ms'                │  '659.6 ms'  │
│      firstBlock      │               '5494.33 ms'               │ '5573.07 ms' │
│         type         │                '30.04 ms'                │  '35.92 ms'  │
│       minType        │                '26.74 ms'                │  '32.58 ms'  │
│       maxType        │                '49.15 ms'                │  '54.34 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

Placeholders Run two with 4x post size

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ 92757e0f8061021486eba2f3f69ae0c4c33299b4 │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │                '477.3 ms'                │  '481.04 ms'  │
│      firstPaint      │               '-76.66 ms'                │  '-72.7 ms'   │
│   domContentLoaded   │               '352.56 ms'                │  '419.36 ms'  │
│        loaded        │               '363.86 ms'                │  '431.12 ms'  │
│ firstContentfulPaint │              '15536.04 ms'               │ '15389.54 ms' │
│      firstBlock      │              '17110.46 ms'               │ '17000.48 ms' │
│         type         │               '102.01 ms'                │  '137.3 ms'   │
│       minType        │                '87.03 ms'                │  '119.66 ms'  │
│       maxType        │               '169.67 ms'                │  '153.17 ms'  │
│        focus         │               '143.37 ms'                │ '1081.72 ms'  │
│       minFocus       │                '1.18 ms'                 │   '1.45 ms'   │
│       maxFocus       │                '205.2 ms'                │ '1538.57 ms'  │
│     inserterOpen     │                '95.59 ms'                │  '141.8 ms'   │
│   minInserterOpen    │                '61.42 ms'                │  '59.69 ms'   │
│   maxInserterOpen    │               '347.14 ms'                │  '815.56 ms'  │
│    inserterSearch    │                '99.87 ms'                │  '88.67 ms'   │
│  minInserterSearch   │                '68.69 ms'                │  '68.79 ms'   │
│  maxInserterSearch   │               '204.43 ms'                │  '114.79 ms'  │
│    inserterHover     │                '37.23 ms'                │   '36.9 ms'   │
│   minInserterHover   │                '29.96 ms'                │  '30.72 ms'   │
│   maxInserterHover   │                '48.03 ms'                │  '45.27 ms'   │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ 92757e0f8061021486eba2f3f69ae0c4c33299b4 │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │               '156.47 ms'                │  '159.87 ms'  │
│      firstPaint      │               '2038.63 ms'               │  '2128.8 ms'  │
│   domContentLoaded   │               '2097.7 ms'                │ '2190.57 ms'  │
│        loaded        │               '2227.27 ms'               │ '2341.07 ms'  │
│ firstContentfulPaint │               '2038.63 ms'               │  '2128.8 ms'  │
│      firstBlock      │              '20097.47 ms'               │ '20284.03 ms' │
│         type         │                '98.88 ms'                │  '122.99 ms'  │
│       minType        │                '86.28 ms'                │  '107.82 ms'  │
│       maxType        │               '118.47 ms'                │  '152.2 ms'   │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

Windowing Run with x4 Post size

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ 5a599961b560db07f560a6e9b9117468c4d2b5ac │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │                '481.7 ms'                │  '478.52 ms'  │
│      firstPaint      │               '-76.04 ms'                │  '-69.98 ms'  │
│   domContentLoaded   │               '416.16 ms'                │  '474.58 ms'  │
│        loaded        │               '428.12 ms'                │  '485.7 ms'   │
│ firstContentfulPaint │              '15501.68 ms'               │ '15586.16 ms' │
│      firstBlock      │               '17206.4 ms'               │ '17215.92 ms' │
│         type         │                '99.49 ms'                │  '134.36 ms'  │
│       minType        │                '84.16 ms'                │  '117.37 ms'  │
│       maxType        │               '161.12 ms'                │  '268.57 ms'  │
│        focus         │               '137.45 ms'                │ '1066.65 ms'  │
│       minFocus       │                '1.32 ms'                 │   '1.06 ms'   │
│       maxFocus       │               '193.51 ms'                │ '1953.57 ms'  │
│     inserterOpen     │                '95.01 ms'                │  '135.8 ms'   │
│   minInserterOpen    │                '62.2 ms'                 │  '62.53 ms'   │
│   maxInserterOpen    │               '343.49 ms'                │  '732.95 ms'  │
│    inserterSearch    │                '91.05 ms'                │  '84.35 ms'   │
│  minInserterSearch   │                '72.48 ms'                │  '65.71 ms'   │
│  maxInserterSearch   │               '114.62 ms'                │  '119.56 ms'  │
│    inserterHover     │                '39.28 ms'                │  '35.01 ms'   │
│   minInserterHover   │                '33.88 ms'                │  '26.98 ms'   │
│   maxInserterHover   │                '49.73 ms'                │   '47.2 ms'   │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬───────────────┐
│       (index)        │ 5a599961b560db07f560a6e9b9117468c4d2b5ac │     trunk     │
├──────────────────────┼──────────────────────────────────────────┼───────────────┤
│    serverResponse    │                '151.6 ms'                │  '154.7 ms'   │
│      firstPaint      │               '2092.7 ms'                │ '2288.77 ms'  │
│   domContentLoaded   │               '2144.03 ms'               │  '2386.9 ms'  │
│        loaded        │               '2260.2 ms'                │ '2521.47 ms'  │
│ firstContentfulPaint │               '2092.7 ms'                │ '2288.77 ms'  │
│      firstBlock      │               '20020.6 ms'               │ '20306.13 ms' │
│         type         │               '100.86 ms'                │  '118.72 ms'  │
│       minType        │                '91.01 ms'                │  '106.16 ms'  │
│       maxType        │               '123.59 ms'                │  '151.93 ms'  │
└──────────────────────┴──────────────────────────────────────────┴───────────────┘

@gwwar gwwar force-pushed the try/list-view-placeholder branch from f8f71a1 to 25db3e6 Compare October 13, 2021 17:39
@gwwar
Copy link
Contributor Author

gwwar commented Oct 13, 2021

Profile the list view blocks for potential areas to improve (say speeding up a selector).

So I profiled a bit on trunk. This is pretty informal but roughly measured that focus time scales with the number of blocks but is exacerbated by the list view being open. If we render arbitrary content in rows instead of <ListViewBlock focus time is equivalent to the list view being closed.

Focusing on a block in the editor re-renders all list-view items. I can open another exploratory draft to see if memo'ing these has similar effects. Those four props are difficult to memo since they're declared inside of a map call, we'd end up needing to create another component wrapper to fix this.

blocks focus time list view closed focus time list view open
50 87 ms 114ms
250 100 ms 311 ms
900 180 ms 1000 ms

CleanShot 2021-10-13 at 14 00 02@2x

CleanShot 2021-10-13 at 14 47 25@2x

@gwwar gwwar force-pushed the try/list-view-placeholder branch from f891610 to 25db3e6 Compare October 13, 2021 21:58
@gwwar
Copy link
Contributor Author

gwwar commented Oct 13, 2021

This was a good exercise, I'll close this one out for now and report findings on the main PR.

@gwwar gwwar closed this Oct 13, 2021
@gwwar gwwar reopened this Oct 14, 2021
@gwwar gwwar force-pushed the try/list-view-placeholder branch from 2f21c9a to c6b08e5 Compare October 14, 2021 18:44
@gwwar
Copy link
Contributor Author

gwwar commented Oct 14, 2021

Edit: comparing a second run has similar results, so rendering row placeholders has about a 100ms cost here on the 900 block performance post.

Placeholder

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 5f0f9cdb251e2fbbc350736ddd1927a41909f908 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '282.18 ms'                │  '257.1 ms'  │
│      firstPaint      │                '28.68 ms'                │  '50.32 ms'  │
│   domContentLoaded   │               '300.96 ms'                │ '353.18 ms'  │
│        loaded        │               '312.52 ms'                │ '364.46 ms'  │
│ firstContentfulPaint │               '6640.6 ms'                │ '6486.06 ms' │
│      firstBlock      │               '7592.3 ms'                │ '7501.26 ms' │
│         type         │                '47.45 ms'                │  '62.56 ms'  │
│       minType        │                '41.16 ms'                │  '53.7 ms'   │
│       maxType        │                '73.63 ms'                │  '85.23 ms'  │
│        focus         │               '170.64 ms'                │ '1137.98 ms' │
│       minFocus       │                '1.18 ms'                 │  '1.39 ms'   │
│       maxFocus       │               '233.03 ms'                │ '1800.54 ms' │
│     inserterOpen     │                '91.85 ms'                │ '106.32 ms'  │
│   minInserterOpen    │                '59.04 ms'                │  '62.57 ms'  │
│   maxInserterOpen    │               '339.74 ms'                │ '372.37 ms'  │
│    inserterSearch    │                '97.28 ms'                │  '120.3 ms'  │
│  minInserterSearch   │                '71.42 ms'                │  '75.32 ms'  │
│  maxInserterSearch   │               '133.04 ms'                │ '332.34 ms'  │
│    inserterHover     │                '40.05 ms'                │  '38.55 ms'  │
│   minInserterHover   │                '32.99 ms'                │  '31.3 ms'   │
│   maxInserterHover   │                '50.35 ms'                │  '49.19 ms'  │
│     listViewOpen     │               '332.65 ms'                │ '4130.73 ms' │
│   minListViewOpen    │               '296.61 ms'                │ '3594.76 ms' │
│   maxListViewOpen    │               '383.43 ms'                │ '5198.59 ms' │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 5f0f9cdb251e2fbbc350736ddd1927a41909f908 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '163.37 ms'                │ '149.37 ms'  │
│      firstPaint      │               '471.47 ms'                │  '576.6 ms'  │
│   domContentLoaded   │               '512.07 ms'                │ '637.23 ms'  │
│        loaded        │               '726.13 ms'                │ '877.83 ms'  │
│ firstContentfulPaint │               '471.47 ms'                │  '576.6 ms'  │
│      firstBlock      │               '7549.5 ms'                │ '7902.37 ms' │
│         type         │                '34.98 ms'                │  '43.93 ms'  │
│       minType        │                '28.36 ms'                │  '36.5 ms'   │
│       maxType        │                '58.49 ms'                │  '68.98 ms'  │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

padding

>> post-editor

┌──────────────────────┬──────────────────────────────────────────┬──────────────┐
│       (index)        │ 4bd8deab66b68f3a26e8fe02c36e841dfc6b2ac8 │    trunk     │
├──────────────────────┼──────────────────────────────────────────┼──────────────┤
│    serverResponse    │               '221.84 ms'                │ '204.52 ms'  │
│      firstPaint      │                '17.06 ms'                │  '28.46 ms'  │
│   domContentLoaded   │               '232.86 ms'                │ '239.48 ms'  │
│        loaded        │               '241.54 ms'                │ '247.94 ms'  │
│ firstContentfulPaint │               '5010.56 ms'               │ '4995.18 ms' │
│      firstBlock      │               '5693.28 ms'               │ '5699.52 ms' │
│         type         │                '43.34 ms'                │  '58.95 ms'  │
│       minType        │                '40.7 ms'                 │  '54.53 ms'  │
│       maxType        │                '49.77 ms'                │  '72.45 ms'  │
│        focus         │               '148.87 ms'                │ '840.75 ms'  │
│       minFocus       │                '1.04 ms'                 │  '1.19 ms'   │
│       maxFocus       │               '203.61 ms'                │ '1090.06 ms' │
│     inserterOpen     │                '76.71 ms'                │  '77.07 ms'  │
│   minInserterOpen    │                '55.07 ms'                │  '56.43 ms'  │
│   maxInserterOpen    │               '234.56 ms'                │ '234.25 ms'  │
│    inserterSearch    │                '68.54 ms'                │  '91.16 ms'  │
│  minInserterSearch   │                '56.99 ms'                │  '57.99 ms'  │
│  maxInserterSearch   │                '73.35 ms'                │  '283.9 ms'  │
│    inserterHover     │                '40.99 ms'                │  '41.75 ms'  │
│   minInserterHover   │                '37.8 ms'                 │  '36.24 ms'  │
│   maxInserterHover   │                '45.15 ms'                │  '51.4 ms'   │
│     listViewOpen     │               '203.01 ms'                │ '2874.56 ms' │
│   minListViewOpen    │               '192.07 ms'                │ '2630.45 ms' │
│   maxListViewOpen    │               '211.94 ms'                │ '4297.52 ms' │
└──────────────────────┴──────────────────────────────────────────┴──────────────┘

>> site-editor

┌──────────────────────┬──────────────────────────────────────────┬─────────────┐
│       (index)        │ 4bd8deab66b68f3a26e8fe02c36e841dfc6b2ac8 │    trunk    │
├──────────────────────┼──────────────────────────────────────────┼─────────────┤
│    serverResponse    │                '125.1 ms'                │ '127.57 ms' │
│      firstPaint      │               '416.63 ms'                │ '402.2 ms'  │
│   domContentLoaded   │                '476.3 ms'                │ '442.6 ms'  │
│        loaded        │                '622.6 ms'                │ '603.73 ms' │
│ firstContentfulPaint │               '416.63 ms'                │ '402.2 ms'  │
│      firstBlock      │               '6050.7 ms'                │ '5869.5 ms' │
│         type         │                '34.46 ms'                │ '41.65 ms'  │
│       minType        │                '30.9 ms'                 │ '37.01 ms'  │
│       maxType        │                '49.61 ms'                │ '59.19 ms'  │
└──────────────────────┴──────────────────────────────────────────┴─────────────┘

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.

1 participant