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中的脚本排入队列，那么这个问题就很容易了，不幸的是，许多人没有，而只是回应脚本或使用标准的包含。

正如一些评论者所指出的，如果你想要捕获所有内联脚本，你别无选择，只能在输出缓冲区中搜索脚本标记，因为如果一个插件回应一个脚本，那么在发送脚本之后你就无法做任何事情了。到缓冲区。

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

Google Page speed是一个指南，而非规则。不要把头撞在墙上试图获得满分。

WordPress：移动内联JS在被保护的jQuery之后被触发

1 个答案: