上篇 《WordPress异步加载JavaScript插件:Async JavaScript》推荐了一款异步加载JavaScript的插件,如果有童鞋不喜欢用插件,可以用下面这段从插件中提取出来的代码,也能达到使用插件相似的功能。

将下面代码添加到当前主题functions.php中:

  1. // 异步加载JS
  2. add_filter( 'script_loader_tag', 'async_script', 10, 3 );
  3. function async_script( $tag, $handle, $src ) {
  4.     $zm_method = 'async';// 可将“async”改为“defer”
  5.     $zm_exclusions = 'jquery.min.js,script.js';// 排除的JS
  6.     $array_exclusions = !empty( $zm_exclusions ) ? explode( ',', $zm_exclusions ) : array();
  7.     if ( false !== $zm_enabled && false === is_admin() ) {
  8.         if ( !empty( $array_exclusions ) ) {
  9.             foreach ( $array_exclusions as $exclusion ) {
  10.                 $exclusion = trim( $exclusion );
  11.                 if ( $exclusion != '' ) {
  12.                     if ( false !== strpos( strtolower( $src ), strtolower( $exclusion ) ) ) {
  13.                         return $tag;
  14.                     }
  15.                 }
  16.             }
  17.         }
  18.         $tag = str_replace( 'src=', $zm_method . "='" . $zm_method . "' src=", $tag );
  19.         return $tag;
  20.     }
  21.     return $tag;
  22. }

代码版只是将 Async JavaScript 插件核心功能提取出来,原插件其实用起来更加方便,能兼容著名网页压缩插件:Autoptimize ,并具备部分调试功能。

WordPress异步加载JS代码版

async属性是HTML 5新增的,只有在支持HTML 5的现代浏览器才会有效果,至于效果如何本人没实际测试过。

提示

需要说明的是:这个异步或推迟加载JS,并不会对网页实际打开速度产生影响,只是让网页内容在JS文件加载完之前,呈现给浏览者,让用户有个更好的体验,并不能真的提高网页加载速度。

 

 

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
avatar
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:25   其中:访客  25   博主:  0

    • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信 7

      虽然我不知道异步加载是什么,也只是在百度统计,Google adsense里面见过,但是我感觉是个新技术,我也要学习。

        • avatar 肉球 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省邵阳市 网宿科技电信CDN节点 2

          @Win7en乐园 小婊砸,怎么又是你,丫的是不是天天监控着鸟叔的站

        • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信 7

          不管怎么说,鸟哥今天一口气发了三篇文章,已经让我感觉到很激动了,一口气学了三篇文章,一天没有白活。

          • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信 7

            鸟哥,一起努力,一起奋斗吧!!我还能有什么好说的呢。

            • avatar 肉球 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省邵阳市 网宿科技电信CDN节点 2

              鸟叔带来了惊喜,加油,虽然我知道你一定不会回复,就是这么清高。嗯哼,我喜欢,但是还请鸟叔不要吝啬持续更新,我们跟着好好学习。

                • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市 电信 7

                  @肉球 你厉害

                    • avatar 动感单车 来自天朝的朋友 谷歌浏览器 Windows XP 湖北省孝感市 电信 7

                      @Win7en乐园 :cool: 其实,你们俩都很厉害,难道你们自己没发觉吗?!呵呵……

                        • avatar 肉球 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省邵阳市 网宿科技电信CDN节点 2

                          @动感单车 小婊砸,我只发现楼上的那个家伙每次都是第一楼,为啥

                    • avatar 动感单车 来自天朝的朋友 谷歌浏览器 Windows XP 湖北省孝感市 电信 7

                      个人觉得这个比插件好,咱就用这个方法了。

                        • avatar Koolight 来自天朝的朋友 谷歌浏览器 Windows Server 2003 湖北省孝感市 电信 4

                          @动感单车 用这个要设置好排除的js,不然可能会有副作用。

                        • avatar 无作为 来自天朝的朋友 Safari浏览器  Android 6.0 ALE-UL00 Build/HuaweiALE-UL00 广西南宁市 电信 2

                          你博客最近出问题了,电脑端很多人打不开,手机可以.持续几天了,希望早日修复

                            • avatar Zay 来自天朝的朋友 谷歌浏览器  MZ-MI NOTE LTE Build/LMY48B) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/45.0.2454.94 Mobile Safari/537.36 山东省泰安市 联通 1

                              @无作为 电脑端打不开应该是因为你是联通的线路吧

                            • avatar 无作为 来自天朝的朋友 Safari浏览器  Android 6.0 ALE-UL00 Build/HuaweiALE-UL00 广东省佛山市 电信 2

                              还有能不能把你博客的评论功能教程分享一下,比如滑动验证和刷新页面重新编辑,还有可以自定义有邮件回复通知。

                              • avatar 雅兮网 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信 4

                                其实更希望是让某几个js异步加载

                                • avatar 龙笑天 来自天朝的朋友 火狐浏览器 Windows 7 广西南宁市 电信 4

                                  我就对几个js主动加了这个属性~~ :oops:

                                  • avatar 明月登楼的博客 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省孝感市 电信 4

                                    嗯,不错,我先在博客上试试!

                                    • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省兰州市 电信 7

                                      鸟哥,又是新的一天,新的一天应该有新的感悟,鸟哥把你的感悟写出来吧,大家一起学习。

                                      • avatar 随谈网 来自天朝的朋友 谷歌浏览器 Windows 10 上海市静安区 电信 0

                                        都在学习拍马屁,我也要学学 :grin: :grin: :grin:

                                        • avatar 励志语录 来自天朝的朋友 谷歌浏览器 Windows 7 河南省新乡市 联通 5

                                          学习了 :oops:

                                          • avatar 6K影视 来自天朝的朋友 QQ浏览器 Windows 7 广东省佛山市 电信 0

                                            不错,谢谢鸟叔的技术

                                            • avatar Win7en乐园 来自天朝的朋友 谷歌浏览器  Nexus 5X Build/N4F26I) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36 山东省泰安市 联通 7

                                              鸟哥,又是新的一天!

                                              • avatar 励志语录 来自天朝的朋友 谷歌浏览器 Windows 7 河南省新乡市 联通 5

                                                啊啊啊啊啊啊啊啊啊啊

                                                • avatar 丁春华 来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 迅雷离线服务器 2

                                                  其实没辣么复杂,打个比方:原来js是单通道执行,现在可以多通道执行,js后台执行效率要高很多。 :oops: