Skip to content

[RNMobile] Performance- refactor setting blockWidth in block list item#28299

Merged
lukewalczak merged 3 commits intomasterfrom
rnmobile/improve-perf-block-width
Jan 25, 2021
Merged

[RNMobile] Performance- refactor setting blockWidth in block list item#28299
lukewalczak merged 3 commits intomasterfrom
rnmobile/improve-perf-block-width

Conversation

@lukewalczak
Copy link
Copy Markdown
Member

@lukewalczak lukewalczak commented Jan 18, 2021

Description

Fixes: wordpress-mobile/gutenberg-mobile#2962

This PR introduces improvements in settings block width where after changes it's measured at the top and passed to bottom component by props.

It allows to avoid redundant renders related to setting the block width which actually doesn't change.

Mounting time of example post on Android emulator (google pixel 3) was decreased from ~9.5s to ~7.5s

before after
Screenshot 2021-01-19 at 15 20 23 Screenshot 2021-01-19 at 15 41 46

How has this been tested?

Copy the content from initial.html file (except the Cover, since there is some kind of issue) and explore all the blocks.
Expect there is no crash and blocks are rendered properly.

Select each block, change its alignment to Full Width if there is an options.
Expect that blocks extend.

Rotate the device.
Expect that blocks extend.

Screenshots

Types of changes

Performance improvements

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jan 18, 2021

Size Change: +104 kB (+8%) 🔍

Total Size: 1.39 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B (0%)
build/annotations/index.js 3.77 kB -26 B (-1%)
build/api-fetch/index.js 3.4 kB -15 B (0%)
build/autop/index.js 2.84 kB -3 B (0%)
build/block-directory/index.js 9.08 kB +3 B (0%)
build/block-editor/index.js 123 kB +1.15 kB (+1%)
build/block-editor/style-rtl.css 11.9 kB +12 B (0%)
build/block-editor/style.css 11.9 kB +14 B (0%)
build/block-library/blocks/cover/editor-rtl.css 505 B -19 B (-4%)
build/block-library/blocks/cover/editor.css 503 B -19 B (-4%)
build/block-library/blocks/cover/style-rtl.css 1.35 kB +45 B (+3%)
build/block-library/blocks/cover/style.css 1.35 kB +46 B (+4%)
build/block-library/blocks/image/editor-rtl.css 828 B +27 B (+3%)
build/block-library/blocks/image/editor.css 827 B +27 B (+3%)
build/block-library/blocks/image/style-rtl.css 585 B +16 B (+3%)
build/block-library/blocks/image/style.css 586 B +16 B (+3%)
build/block-library/blocks/template-part/editor-rtl.css 794 B +80 B (+11%) ⚠️
build/block-library/blocks/template-part/editor.css 794 B +80 B (+11%) ⚠️
build/block-library/editor-rtl.css 9.21 kB +195 B (+2%)
build/block-library/editor.css 9.19 kB +183 B (+2%)
build/block-library/index.js 143 kB +1.35 kB (+1%)
build/block-library/style-rtl.css 8.7 kB +119 B (+1%)
build/block-library/style.css 8.71 kB +121 B (+1%)
build/block-serialization-default-parser/index.js 1.88 kB -6 B (0%)
build/blocks/index.js 48.3 kB +138 B (0%)
build/components/index.js 274 kB +101 kB (+59%) 🆘
build/components/style-rtl.css 15.5 kB +41 B (0%)
build/components/style.css 15.5 kB +41 B (0%)
build/compose/index.js 11.2 kB -84 B (-1%)
build/core-data/index.js 15.2 kB -19 B (0%)
build/data-controls/index.js 830 B +1 B (0%)
build/data/index.js 8.97 kB -18 B (0%)
build/date/index.js 31.8 kB +1 B (0%)
build/dom/index.js 4.93 kB -17 B (0%)
build/edit-navigation/index.js 11.1 kB -42 B (0%)
build/edit-post/index.js 306 kB -31 B (0%)
build/edit-post/style-rtl.css 6.51 kB +6 B (0%)
build/edit-post/style.css 6.5 kB +7 B (0%)
build/edit-site/index.js 24 kB -159 B (-1%)
build/edit-site/style-rtl.css 4.01 kB +7 B (0%)
build/edit-site/style.css 4.01 kB +6 B (0%)
build/edit-widgets/index.js 23.6 kB -27 B (0%)
build/edit-widgets/style-rtl.css 3.17 kB +6 B (0%)
build/edit-widgets/style.css 3.18 kB +9 B (0%)
build/editor/index.js 41.8 kB -116 B (0%)
build/element/index.js 4.62 kB -8 B (0%)
build/format-library/index.js 6.77 kB +5 B (0%)
build/format-library/style-rtl.css 637 B +17 B (+3%)
build/format-library/style.css 639 B +18 B (+3%)
build/hooks/index.js 2.27 kB -2 B (0%)
build/i18n/index.js 3.56 kB -3 B (0%)
build/is-shallow-equal/index.js 699 B +2 B (0%)
build/keyboard-shortcuts/index.js 2.53 kB -10 B (0%)
build/keycodes/index.js 1.93 kB -9 B (0%)
build/list-reusable-blocks/index.js 3.14 kB -12 B (0%)
build/notices/index.js 1.85 kB -4 B (0%)
build/nux/index.js 3.41 kB -15 B (0%)
build/plugins/index.js 2.54 kB -6 B (0%)
build/primitives/index.js 1.42 kB -12 B (-1%)
build/priority-queue/index.js 789 B -1 B (0%)
build/redux-routine/index.js 2.84 kB +4 B (0%)
build/reusable-blocks/index.js 2.92 kB -5 B (0%)
build/rich-text/index.js 13.4 kB -98 B (-1%)
build/server-side-render/index.js 2.76 kB -11 B (0%)
build/shortcode/index.js 1.7 kB -1 B (0%)
build/token-list/index.js 1.27 kB +2 B (0%)
build/url/index.js 3.02 kB -2 B (0%)
build/viewport/index.js 1.86 kB +1 B (0%)
build/warning/index.js 1.14 kB +1 B (0%)
build/wordcount/index.js 1.22 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 1.01 kB 0 B
build/block-directory/style.css 1.01 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 196 B 0 B
build/block-library/blocks/archives/editor.css 196 B 0 B
build/block-library/blocks/audio/editor-rtl.css 194 B 0 B
build/block-library/blocks/audio/editor.css 194 B 0 B
build/block-library/blocks/audio/style-rtl.css 225 B 0 B
build/block-library/blocks/audio/style.css 225 B 0 B
build/block-library/blocks/block/editor-rtl.css 283 B 0 B
build/block-library/blocks/block/editor.css 283 B 0 B
build/block-library/blocks/button/editor-rtl.css 576 B 0 B
build/block-library/blocks/button/editor.css 577 B 0 B
build/block-library/blocks/button/style-rtl.css 552 B 0 B
build/block-library/blocks/button/style.css 552 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 345 B 0 B
build/block-library/blocks/buttons/editor.css 346 B 0 B
build/block-library/blocks/buttons/style-rtl.css 419 B 0 B
build/block-library/blocks/buttons/style.css 419 B 0 B
build/block-library/blocks/calendar/style-rtl.css 319 B 0 B
build/block-library/blocks/calendar/style.css 319 B 0 B
build/block-library/blocks/categories/editor-rtl.css 210 B 0 B
build/block-library/blocks/categories/editor.css 209 B 0 B
build/block-library/blocks/categories/style-rtl.css 208 B 0 B
build/block-library/blocks/categories/style.css 208 B 0 B
build/block-library/blocks/code/style-rtl.css 216 B 0 B
build/block-library/blocks/code/style.css 216 B 0 B
build/block-library/blocks/columns/editor-rtl.css 300 B 0 B
build/block-library/blocks/columns/editor.css 299 B 0 B
build/block-library/blocks/columns/style-rtl.css 529 B 0 B
build/block-library/blocks/columns/style.css 528 B 0 B
build/block-library/blocks/embed/editor-rtl.css 594 B 0 B
build/block-library/blocks/embed/editor.css 595 B 0 B
build/block-library/blocks/embed/style-rtl.css 489 B 0 B
build/block-library/blocks/embed/style.css 489 B 0 B
build/block-library/blocks/file/editor-rtl.css 314 B 0 B
build/block-library/blocks/file/editor.css 313 B 0 B
build/block-library/blocks/file/style-rtl.css 352 B 0 B
build/block-library/blocks/file/style.css 352 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.55 kB 0 B
build/block-library/blocks/freeform/editor.css 2.55 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 783 B 0 B
build/block-library/blocks/gallery/editor.css 783 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.17 kB 0 B
build/block-library/blocks/gallery/style.css 1.17 kB 0 B
build/block-library/blocks/group/editor-rtl.css 433 B 0 B
build/block-library/blocks/group/editor.css 432 B 0 B
build/block-library/blocks/group/style-rtl.css 190 B 0 B
build/block-library/blocks/group/style.css 190 B 0 B
build/block-library/blocks/heading/editor-rtl.css 248 B 0 B
build/block-library/blocks/heading/editor.css 248 B 0 B
build/block-library/blocks/heading/style-rtl.css 212 B 0 B
build/block-library/blocks/heading/style.css 212 B 0 B
build/block-library/blocks/html/editor-rtl.css 384 B 0 B
build/block-library/blocks/html/editor.css 385 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 277 B 0 B
build/block-library/blocks/latest-comments/editor.css 275 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 382 B 0 B
build/block-library/blocks/latest-comments/style.css 382 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 254 B 0 B
build/block-library/blocks/latest-posts/editor.css 254 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 634 B 0 B
build/block-library/blocks/latest-posts/style.css 634 B 0 B
build/block-library/blocks/list/editor-rtl.css 203 B 0 B
build/block-library/blocks/list/editor.css 203 B 0 B
build/block-library/blocks/list/style-rtl.css 201 B 0 B
build/block-library/blocks/list/style.css 201 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 311 B 0 B
build/block-library/blocks/media-text/editor.css 311 B 0 B
build/block-library/blocks/media-text/style-rtl.css 642 B 0 B
build/block-library/blocks/media-text/style.css 640 B 0 B
build/block-library/blocks/more/editor-rtl.css 545 B 0 B
build/block-library/blocks/more/editor.css 545 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 503 B 0 B
build/block-library/blocks/navigation-link/editor.css 504 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 805 B 0 B
build/block-library/blocks/navigation-link/style.css 803 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.49 kB 0 B
build/block-library/blocks/navigation/editor.css 1.48 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 289 B 0 B
build/block-library/blocks/navigation/style.css 289 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 507 B 0 B
build/block-library/blocks/nextpage/editor.css 507 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B 0 B
build/block-library/blocks/paragraph/editor.css 236 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 392 B 0 B
build/block-library/blocks/paragraph/style.css 392 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 329 B 0 B
build/block-library/blocks/post-author/editor.css 329 B 0 B
build/block-library/blocks/post-author/style-rtl.css 303 B 0 B
build/block-library/blocks/post-author/style.css 303 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 358 B 0 B
build/block-library/blocks/post-comments-form/style.css 358 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 262 B 0 B
build/block-library/blocks/post-content/editor.css 262 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 206 B 0 B
build/block-library/blocks/post-excerpt/editor.css 206 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 453 B 0 B
build/block-library/blocks/post-featured-image/editor.css 453 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 223 B 0 B
build/block-library/blocks/post-featured-image/style.css 223 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 193 B 0 B
build/block-library/blocks/preformatted/style.css 193 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 304 B 0 B
build/block-library/blocks/pullquote/editor.css 304 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 428 B 0 B
build/block-library/blocks/pullquote/style.css 428 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 217 B 0 B
build/block-library/blocks/query-loop/editor.css 216 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 427 B 0 B
build/block-library/blocks/query-loop/style.css 429 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 243 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 240 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 390 B 0 B
build/block-library/blocks/query-pagination/editor.css 379 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B 0 B
build/block-library/blocks/query-pagination/style.css 288 B 0 B
build/block-library/blocks/query/editor-rtl.css 279 B 0 B
build/block-library/blocks/query/editor.css 279 B 0 B
build/block-library/blocks/quote/editor-rtl.css 195 B 0 B
build/block-library/blocks/quote/editor.css 195 B 0 B
build/block-library/blocks/quote/style-rtl.css 284 B 0 B
build/block-library/blocks/quote/style.css 285 B 0 B
build/block-library/blocks/rss/editor-rtl.css 307 B 0 B
build/block-library/blocks/rss/editor.css 309 B 0 B
build/block-library/blocks/rss/style-rtl.css 394 B 0 B
build/block-library/blocks/rss/style.css 393 B 0 B
build/block-library/blocks/search/editor-rtl.css 285 B 0 B
build/block-library/blocks/search/editor.css 285 B 0 B
build/block-library/blocks/search/style-rtl.css 454 B 0 B
build/block-library/blocks/search/style.css 456 B 0 B
build/block-library/blocks/separator/editor-rtl.css 229 B 0 B
build/block-library/blocks/separator/editor.css 229 B 0 B
build/block-library/blocks/separator/style-rtl.css 352 B 0 B
build/block-library/blocks/separator/style.css 352 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 603 B 0 B
build/block-library/blocks/shortcode/editor.css 603 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 321 B 0 B
build/block-library/blocks/site-logo/editor.css 321 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 238 B 0 B
build/block-library/blocks/site-logo/style.css 238 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 283 B 0 B
build/block-library/blocks/social-link/editor.css 283 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 811 B 0 B
build/block-library/blocks/social-links/editor.css 810 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.48 kB 0 B
build/block-library/blocks/social-links/style.css 1.48 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 416 B 0 B
build/block-library/blocks/spacer/editor.css 416 B 0 B
build/block-library/blocks/spacer/style-rtl.css 184 B 0 B
build/block-library/blocks/spacer/style.css 184 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 223 B 0 B
build/block-library/blocks/subhead/editor.css 223 B 0 B
build/block-library/blocks/subhead/style-rtl.css 210 B 0 B
build/block-library/blocks/subhead/style.css 210 B 0 B
build/block-library/blocks/table/editor-rtl.css 593 B 0 B
build/block-library/blocks/table/editor.css 593 B 0 B
build/block-library/blocks/table/style-rtl.css 501 B 0 B
build/block-library/blocks/table/style.css 501 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 237 B 0 B
build/block-library/blocks/tag-cloud/editor.css 235 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 221 B 0 B
build/block-library/blocks/tag-cloud/style.css 221 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 220 B 0 B
build/block-library/blocks/text-columns/editor.css 220 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 283 B 0 B
build/block-library/blocks/text-columns/style.css 283 B 0 B
build/block-library/blocks/verse/editor-rtl.css 194 B 0 B
build/block-library/blocks/verse/editor.css 194 B 0 B
build/block-library/blocks/verse/style-rtl.css 215 B 0 B
build/block-library/blocks/verse/style.css 215 B 0 B
build/block-library/blocks/video/editor-rtl.css 617 B 0 B
build/block-library/blocks/video/editor.css 617 B 0 B
build/block-library/blocks/video/style-rtl.css 303 B 0 B
build/block-library/blocks/video/style.css 304 B 0 B
build/block-library/common-rtl.css 1.01 kB 0 B
build/block-library/common.css 1.01 kB 0 B
build/block-library/theme-rtl.css 860 B 0 B
build/block-library/theme.css 860 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/edit-navigation/style-rtl.css 938 B 0 B
build/edit-navigation/style.css 944 B 0 B
build/editor/editor-styles-rtl.css 543 B 0 B
build/editor/editor-styles.css 545 B 0 B
build/editor/style-rtl.css 3.89 kB 0 B
build/editor/style.css 3.89 kB 0 B
build/escape-html/index.js 735 B 0 B
build/html-entities/index.js 623 B 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/nux/style-rtl.css 731 B 0 B
build/nux/style.css 727 B 0 B

compressed-size-action

@lukewalczak lukewalczak force-pushed the rnmobile/improve-perf-block-width branch from 85f7f25 to d79b03e Compare January 19, 2021 14:27
@lukewalczak lukewalczak self-assigned this Jan 19, 2021
@lukewalczak lukewalczak requested a review from dratwas January 19, 2021 15:34
@lukewalczak lukewalczak added [Type] Performance Related to performance efforts Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Jan 22, 2021
@lukewalczak lukewalczak marked this pull request as ready for review January 25, 2021 09:13
@lukewalczak lukewalczak merged commit 1e90244 into master Jan 25, 2021
@lukewalczak lukewalczak deleted the rnmobile/improve-perf-block-width branch January 25, 2021 14:48
@github-actions github-actions bot added this to the Gutenberg 9.9 milestone Jan 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Type] Performance Related to performance efforts

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Performance] blockWidth in block and block-list-item

2 participants