WordPress：将内联 JS 移至延迟 jQuery 后触发

Question

尝试遵循 Google Page Insights 建议，我得到了“JS 渲染块”建议，它与

jQuery

主文件相关。

我的网站使用 WordPress 和一些插件。其中一个插件将其 JS 内联。因此，当我移动

jQuery

以在页脚中加载时，或者当我使用“延迟”模式加载它时，一旦内联代码触发，我就会得到

jQuery is not defined

。

我试图找到一个全局解决方案来“捕获”所有内联脚本并在文档末尾执行

jQuery

主文件后延迟它。

我写了一个非常适合我的解决方案。对于我的具体情况来说，这是非常直接的解决方案，但我未能将其作为

the_content

或小部件输出的过滤器。我想让它成为一个全局解决方案，这样我就不需要担心任何 JS 会在某个地方触发。

有什么想法可以让它发挥作用吗？到目前为止，对于这个特定情况，我的代码通过短代码运行：

/* Get shortcode HTML */ 
$widget_shortcode = do_shortcode($shortcode);

/* Take out all scripts into an array */
$delayed_scripts = array();
preg_match_all('#<script(.*?)</script>#is', $widget_shortcode, $match);
foreach ($match as $val){
    $delayed_script = '<script '.$val[0].'</script>';
    array_push($delayed_scripts, $delayed_script);
}

/* Remove all scripts from HTML */
$widget_shortcode = preg_replace('#<script(.*?)</script>#is', '', $widget_shortcode);

/* Echo filtered HTML */
echo $widget_shortcode;

就在结束

</body>

标签之前：

foreach ($delayed_scripts as $script) {
    echo $delayed_script;
}

Answer 1

我为同样的问题付出了很大的努力。这里有一些事情需要考虑。如果每个插件都正确地将 Wordpress 中的脚本排队，这个问题就会很容易，不幸的是，很多插件都没有，而是只是回显脚本或使用标准包含。

正如一些评论者所指出的，如果您想捕获所有内联脚本，您别无选择，只能在输出缓冲区中搜索脚本标签，因为如果插件回显脚本，那么您在 WordPress 中将无能为力，因为它被发送到缓冲。

请记住，使用 preg 语句并搜索整个 html 文档，然后操作字符串可能比让 jQuery 在头部加载要昂贵得多。这将增加 html 文档的服务器响应时间，并且这个等待时间同样糟糕，因为这也是没有发生渲染并且用户坐在空白屏幕上的时间。更不用说，将 jQuery 移至页脚意味着任何依赖于它的东西在页脚被解析之前都将不起作用。这与谷歌建议将分析代码放在头部的原因相同。如果用户在分析代码有机会解析之前就离开了怎么办？

Google Page 速度只是一个指南，而不是一个规则。不要为了获得满分而用头撞墙。