Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Editor performance issues when trying to load complex ACF groups on blocks

未关闭
  • 哪里不对？
#973 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
42/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript, jquery, php, wordpress
领域
frontend, performance

调研方向

使用链接 gist 中的 theme functions.php 块、字段组和文章内容重现该情况，然后分析块在侧边栏中打开时的初始化过程。先从报告中描述的 true_false 渲染路径和基于 Select2 的 select 初始化开始，重点关注重复的样式重新计算。完成标准是：复杂的 ACF 块字段能够初始化，且不会导致浏览器阻塞数秒。

由索引模型根据 Issue 内容生成。

描述

Describe the bug
ACF is blocking the browser when attempting to initialize the editor fields for ACF block with complex field group and a lot of content inside of it.

This "blocking" is only happening when trying to initialize the block's fields after the page was already loaded. Also, blocking time is way smaller on Firefox.

To Reproduce
Reproduction requires the ACF & ACF Pro plugins to be installed.

  1. Register the dummy block inside the theme's functions.php using the snippet in the gist
  2. Import the field group from the gist
  3. Create the new page and insert the content provided in the gist
  4. Once page is saved, switch the block to the "preview" mode.
  5. Reload the page, wait for the editor page to load
  6. Click on the block to open its editor in the right sidebar
  7. Field group will try to initialize, blocking the browser for several seconds (~6s on my machine).
  8. After this initial blocking, editor functions normally

Expected behavior
Block fields groups should load near-instantly without blocking the whole browser for several seconds.

Screenshots or Video
Video preview of the lag when clicking on the ACF block and loading the field group:

https://github.com/user-attachments/assets/7ae1f0e8-45b2-41f3-a45c-099ed211700b

Using Chrome DevTools, I've captured the following monstrosity of the "Long Task":

Image

Code
ACF field group, code for creating the dummy block and the content of the page required for reproduction can be found in this gist: https://gist.github.com/koloml/00a529c3ce935753c5e481b0c1898ab3

Version Information:

  • WordPress Version: 6.8.1
  • PHP Version: 8.2.27
  • ACF PRO Version: 6.5.0.1
  • Browser: Chrome 139

Additional context
I've tried to analyze the profile results. As you might have seen, the issue lies in the styles recalculation constantly being triggered while field group is rendering itself. Some fields are editing the styles, invalidating the browser internal caches related to styling. Then other fields are requesting the browser to calculate some properties which are dependent on the styling. Browser then recalculates styles and fields are invalidating the styles again.

Here are my attempts to pin-point the causes of the issues from the reproduction.

Checkbox (true_false) on render() is trying to calculate width of .acf-switch-on and .acf-switch-off. JQuery then attempts to get this width and causes browser to recalculate styles. Resulting width is added to inline styles.

Image

Selector (select) with stylized UI enabled is initializing Select2 instance. During dropdown initialization, Select2 tries to subscribe to mousewheel events. This triggers special hook which calculates the line height for the options. During the calculation, it tries to request the font size on one of the parent elements.

Image

I'm pretty sure this does not cover all blocks that cause this issue. I think, at least the fields which are based on Select2 or which are using jQuery in some way might also trigger unnecessary styling recalculations.

主要语言
PHP
星标
948
派生
198
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

AdvancedCustomFields/acf 的其他 Issue

查看 AdvancedCustomFields/acf 的全部 Issue

相似的 Issue

更多 PHP Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。