请求优化WordPress分页页面隐藏区块代码的执行速度

你的问题根源是JS要等DOM完全加载完成（DOMContentLoaded触发）才执行隐藏操作，导致页面渲染时元素先显示再隐藏，出现明显的闪烁（FOUC，Flash Of Unstyled Content）。下面是几个彻底解决的方案，按优先级排序：

方案1：用Elementor原生条件显示（无需代码，最优） #

Elementor自带条件显示功能，直接让分页页面不渲染目标区块，从根源避免问题：

• 打开Elementor编辑器，选中要隐藏的区块
• 切换到「高级」选项卡，找到「条件」设置
• 添加规则：选择「页面」→「分页页面」，设置为「不显示」
• 保存设置即可，分页页面上不会出现这些区块，完全无延迟

方案2：服务器端输出内联CSS（代码实现，高效） #

利用WordPress的服务器端判断（is_paged()），直接在页面头部输出CSS规则，浏览器解析CSS时就会隐藏元素，不会有任何显示过程：
修改你子主题functions.php里的函数为：

function hide_elements_on_paginated_pages() {
    if (is_paged()) {
        echo '<style>';
        // 用!important确保优先级高于Elementor默认样式
        echo '.elementor-column-gap-default > .elementor-column > .elementor-element-populated { display: none !important; }';
        echo '</style>';
    }
}
add_action('wp_head', 'hide_elements_on_paginated_pages', 999);

说明：!important用来覆盖Elementor的默认样式，如果测试发现不需要可以去掉。

方案3：优化JS执行时机（仅当必须用JS时） #

如果因为某些原因必须用JS控制（比如需要后续动态显示元素），可以去掉DOMContentLoaded监听，改用立即执行的脚本+MutationObserver监听元素出现，一出现就隐藏：

function hide_elements_on_paginated_pages() {
    if (is_paged()) {
        echo '<script type="text/javascript">';
        echo '// 监听目标元素的出现，立即隐藏';
        echo 'const observer = new MutationObserver((mutations) => {';
        echo '  mutations.forEach((mutation) => {';
        echo '    if (mutation.addedNodes.length) {';
        echo '      const elements = document.querySelectorAll(".elementor-column-gap-default > .elementor-column > .elementor-element-populated");';
        echo '      elements.forEach(el => el.style.display = "none");';
        echo '      // 找到元素后停止监听';
        echo '      observer.disconnect();';
        echo '    }';
        echo '  });';
        echo '});';
        echo '// 监听整个文档的DOM变化';
        echo 'observer.observe(document.body, { childList: true, subtree: true });';
        echo '</script>';
    }
}
add_action('wp_head', 'hide_elements_on_paginated_pages', 999);

不过这个方案的效率不如前两个，仅作为备选。

内容的提问来源于stack exchange，提问作者codeblue001