WordPress：将内置JS转移到jQuery延迟后被解雇

Question

为了遵循Google Page Insights的建议，我得到了“ JS渲染块”建议，该建议与jQuery主文件有关。

我的网站使用WordPress和一些插件。其中一个插件将其JS内联。因此，当我移动jQuery到页脚中进行加载时，或者使用“ defer”模式进行加载时，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 速度只是一个指南，而不是规则。不要为了得到满分而把头撞在墙上。