5

尝试遵循 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;
}
4

1 回答 1

1

我一直在努力解决同样的问题。这里有几件事需要考虑。如果每个插件都正确地将 Wordpress 中的脚本排入队列，这个问题将很容易，不幸的是，许多插件没有，而是只是回显脚本或使用标准包含。

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

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

谷歌页面速度是一个指南，而不是规则。不要为了获得满分而用头撞墙。

于 2016-10-21T06:27:55.687 回答