jquery - WordPress:将内联 JS 移至延迟 jQuery 后触发

Question

尝试遵循 Google Page Insights 建议，我收到了“JS 渲染 block ”建议，它与 jQuery 相关。主文件。

我的网站使用 WordPress 和一些插件。其中一个插件将其 JS 内联。所以当我搬家时jQuery在页脚中加载，或者当我使用“延迟”模式加载它时，我得到 jQuery is not defined一旦内联代码被触发。

我试图找到一个全局解决方案来“捕获”所有内联脚本并将其延迟到jQuery之后main 文件在文档末尾执行。

我编写了一个非常适合我的解决方案。对于我的具体情况来说，这是非常直接的解决方案，但我未能将其作为 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 页面速度只是一个指南，而不是规则。不要为了获得满分而用头撞墙。