有朋自远方来,不亦乐乎。
让js文件自动移到页脚
原创 龙砚庭  发布于 1个月前 ( 03-14 ) 阅读: 303 次 评论: 4 条 A+

喜欢折腾网站的人,都知道许多功能的实现离不开强大js。

可是js文件越多,加载就越多,从而导致网站的打开速度被拖垮了。

解决这个问题的办法有很多,比如有钱任性——升级服务器配置。当然还有穷人操作指南——减少js文件或移动到页脚加载。

打开姿势如下:

functions

将以下代码放到functions文件:

function theme_strip_tags_content($text, $tags = '', $invert = false) {

preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags );
$tags = array_unique( $tags[1] );

if ( is_array( $tags ) AND count( $tags ) > 0 ) {
if ( false == $invert ) {
return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text );
}
else {
return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
}
}
elseif ( false == $invert ) {
return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text );
}

return $text;
}

function theme_insert_js($source) {

$out = '';

$fragment = new DOMDocument();
$fragment->loadHTML( $source );

$xp = new DOMXPath( $fragment );
$result = $xp->query( '//script' );

$scripts = array();
$scripts_src = array();
foreach ( $result as $key => $el ) {
$src = $result->item( $key )->attributes->getNamedItem( 'src' )->value;
if ( ! empty( $src ) ) {
$scripts_src[] = $src;
} else {
$type = $result->item( $key )->attributes->getNamedItem( 'type' )->value;
if ( empty( $type ) ) {
$type = 'text/javascript';
}

$scripts[$type][] = $el->nodeValue;
}
}

foreach ( $scripts as $key => $value ) {
$out .= '<script type="'.$key.'">';

foreach ( $value as $keyC => $valueC ) {
$out .= "\n".$valueC;
}

$out .= '</script>';
}

foreach ( $scripts_src as $value ) {
$out .= '<script src="'.$value.'"></script>';
}

return $out;
}

 替换头部

打开header.php文件,找到wp_head()并且替换成:

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );

$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
?>

页脚调用

在footer.php里面添加以下代码:

<?php theme_insert_js( HEAD_CONTENT ); ?>

剩下的就是刷新站点,看看是否生效。

目前评论:4   其中:访客  2   博主  2

发表评论

请稍候,正在加载新评论...
  1. 西枫里博客
    西枫里博客2 ( 2018.03.20 13:58:06 )  板凳

    某些框架js必须先行加载,丢文档末尾就尴尬了。哈哈

  2. 懿古今
    懿古今3 ( 2018.03.15 14:03:59 )  沙发

    这个功能还是非常实用的。PS:看了原文说不得转载,像这种直接使用他的代码算不算转载或者侵权?

    • 龙砚庭
      龙砚庭博主 ( 2018.03.15 19:10:50 )

      @懿古今 xiu主题默认的文章声明好像都是禁止转载来着。Ps:直接搬运对方的代码,确实算转载或者伪“原创”。所以,突然意识到有些尴尬了。