[6.x]: Entry edit page takes ~0.4s longer to first paint for every Matrix block

Đang mở
  • Có gì không ổn?
#20,401 3 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@riasvdv đang làm issue này rồi.

Từ ngày 5/11/2026.

  • #20403 của @riasvdv — đang mở

Đánh giá

Issue này chưa được đánh giá.

Mô tả

bug repo:cms
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
  1. 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).
  2. Open it in the control panel (/admin/entries/<section>/<id>) in Chrome at a desktop window size.
  3. 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-menu and 31 craft-tooltip elements build their overlay controller on connect. That reads --c-layer-popover with getComputedStyle (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-textarea sets its height from scrollHeight on every update. Markdown fields add ~0.2s doing the same.
  • Button accessible name: ~0.47s. craft-button runs computeAccessibleName() (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 from rows/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
Ngôn ngữ chính
PHP
Star
3.6k
Fork
714
Merge trung bình
13 giờ 9 phút
Pull request đã merge (30 ngày)
378

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của craftcms/cms

Tất cả issue của craftcms/cms

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.