[6.x]: Entry edit page takes ~0.4s longer to first paint for every Matrix block
メンテナーはふだん 1 日以内に返信
評価
この issue はまだ評価されていません。
説明
What happened?
Description
Follow-up to #20333. Since that PR, the server responds in about 0.25s even for Matrix entries, so the remaining time is in the browser. Opening an entry blocks the main thread in one long task before anything is drawn, and that task grows with each Matrix block: about 0.43s more per block. An entry with 7 blocks takes 4.6s to first paint.
Steps to reproduce
- Create an entry with a Matrix field holding 7 blocks (a mix of block types with plain text, Markdown and relation fields, in blocks view).
- Open it in the control panel (
/admin/entries/<section>/<id>) in Chrome at a desktop window size. - Record a Performance trace of the page load.
Expected behavior
Each block adds only the cost of rendering its fields, so first paint grows slowly with the number of blocks.
Actual behavior
Medians of 5 loads; the server response is 0.2–0.3s in all cases:
| Entry | Matrix blocks | First paint | Main thread blocked |
|---|---|---|---|
| Blog post | 0 | 1.61s | 1.41s |
| Page | 2 | 1.98s | 1.94s |
| Page | 5 | 3.08s | 3.13s |
| Home | 7 | 4.60s | 4.53s |
On the 7-block entry, the page load is one 4.75s task. 3.25s of it is 495 forced style or layout recalculations, each costing 8–16ms because each one recalculates the whole page.
Cause
Components read layout while the form is still rendering, and each block adds more of them (7-block entry, one trace):
- Menu and tooltip setup: ~2.0s. 41
craft-action-menuand 31craft-tooltipelements build their overlay controller on connect. That reads--c-layer-popoverwithgetComputedStyle(packages/craftcms-ui/src/components/popover/popover.ts:79, 73 forced recalculations, ~1.1s) and builds and measures the<dialog>wrapper (71 forced layouts, ~0.75s). - Textarea autosize: ~0.5s.
craft-textareasets its height fromscrollHeighton every update. Markdown fields add ~0.2s doing the same. - Button accessible name: ~0.47s.
craft-buttonrunscomputeAccessibleName()(button/button.ts:372) after first render, and again from the content MutationObserver (button.ts:116) on every content change during load.
Suggested fix
- Set up menu, popover and tooltip overlays on first hover, focus, key press or open instead of on connect. Caching the z-index read alone doesn't help: the forced layout just moves to the next read.
- Size textareas with CSS
field-sizing: content(min and max height fromrows/max-rows) instead of measuring them. - Run the accessible-name check, including the MutationObserver recheck, when the browser is idle, not during render.
Notes
The numbers are partly browser and machine dependent. I only measured in Chrome 155. How much a forced style or layout recalculation costs depends on the browser engine and the CPU, so Firefox and Safari (untested) may show different totals, and slower machines will be slower in proportion. The number of forced recalculations comes from the CP code and should be the same in every browser. field-sizing: content isn't supported in every browser yet, so textareas would need the current script as a fallback.
In some local tests with rough versions of all three, first paint went from 4.60s to 1.72s on the 7-block entry and from 1.61s to 1.00s on the entry without Matrix. Each block then added about 0.10s instead of 0.43s. Caveat: delaying tooltip setup also delays the tooltip that names icon-only buttons such as the header Search and Ask AI buttons, so they have no accessible name until first hovered. A real fix would need to name those buttons without setting up the tooltip.
Craft CMS version
6.x-dev 8b5bdb3
PHP version
No response
Operating system and version
No response
Database type and version
No response
Image driver and version
No response
Installed plugins and versions
- 主要言語
- PHP
- スター
- 3.6k
- フォーク
- 712
- 平均マージ
- 13時間 13分
- マージ済み PR（30日）
- 372
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
craftcms/cms のほかの issue
-
bug repo:cms
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
craftcms/cms#20205 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
bug repo:cms
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
craftcms/cms#20203 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
[5.x]: MCP returns `[]` for CKEditor field values対応中かも @i-just が 1 日前に担当しました。 オープンrepo:cms
craftcms/cms#20404 · コメント 2 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
[6.x]: Custom entry source with a single-section condition shows another source's entries対応中かも @brandonkelly が 1 日前に担当しました。 オープンbug
craftcms/cms#20388 · コメント 1 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
[6.x]: settings icon not rending with admin changes disabled対応中かも @brandonkelly が 2 日前に担当しました。 オープンbug repo:cms
craftcms/cms#20338 · コメント 1 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
似ている issue
-
sync-en
難易度 1/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
feature-request-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
Codeinwp/wp-menu-icons#360 ·
-
[Type] Bug
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 5 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
Automattic/blocks-engine#4874 ·
メンテナーはふだん 1 日以内に返信
-
Visual COBOL: missing 11.0 and 12.0, and 9.0 date differs from Rocket Software's lifecycle pageオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
endoflife-date/endoflife.date#11561 ·
メンテナーはふだん 1 日以内に返信