WordPress异步加载JavaScript插件:Async JavaScript

转载   知更鸟  2017-01-06 07:33:52  235 人阅读  22 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

按惯例,所有JavaScript都放在页面的头部head中,必须等全部JavaScript代码都被下载、解析和执行完后,才能开始呈现页面的内容,对加载很多JavaScript代码的页面来说,会导致页面呈现出现明显示的延迟。我们可以通过为这些JavaScript添加“async”(异步)或“defer“(推迟)属性,加快页面呈现的速度。

至于“async”和“defer“属性的详细功能说明,大家可以网上自行搜索,两者大概的区别就是前者只有HTML5的现代浏览器支持,后者只有IE支持。

Async JavaScript插件下载地址:

Async JavaScript 是一款为WordPress主题加载JavaScript文件添加async”和“defer“属性的插件。

主要是针对使用标准的wp_deregister_script函数加载JavaScript文件的方法。

WordPress异步加载JavaScript插件:Async JavaScript

启用插件后可以选择“async”或者“defer“,如果启用后发现页面某些依赖  JQuery  运行的 Script有问题,可以在“Script Exclusion”中输入排除的 jquery.min.js

WordPress异步加载JavaScript插件:Async JavaScript 排除某些JS文件

至于具体加速效果如何,只能自己体会了。

WordPress异步加载JS代码版

如果有童鞋不喜欢用插件,可以用下面这段从插件中提取出来的代码,也能达到使用插件相似的功能。

将下面代码添加到当前主题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 = !emptyempty$zm_exclusions ) ? explode( ',', $zm_exclusions ) : array();
  7.     if ( false !== $zm_enabled && false === is_admin() ) {
  8.         if ( !emptyempty$array_exclusions ) ) {
  9.             foreach ( $array_exclusions as $exclusion ) {
  10.                 $exclusion = trim( $exclusion );
  11.                 if ( $exclusion != '' ) {
  12.                     if ( false !== strposstrtolower$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 ,并具备部分调试功能。

async属性是HTML 5新增的,只有在支持HTML 5的现代浏览器才会有效果,至于效果如何本人没实际测试过,总之,加上后感觉快多了,呵呵.....

参考资料

历史上的今天:

文章标签: ,   ,   ,  
原文地址:http://zmingcx.com/async-javascript.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 知更鸟 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. 李主席
    李主席 【秀才】 @回复

    还是直接用代码快。

  2. 纯洁博客
    纯洁博客 【状元】 @回复

    来学习一下

  3. 夏天烤洋芋
    夏天烤洋芋 【进士】 @回复

    搞不来这些。看看就好了。

  4. 网络营销推广
    网络营销推广 【秀才】 @回复

    WP就是插件多,这才是真开源的程序

  5. 励志语录
    励志语录 【进士】 @回复

    不错 ,不会用哈。 [委屈]

  6. 你的名字
    你的名字 【进士】 @回复

    看了那么多还是不会用

  7. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    哦, 需要的时候再慢慢研究

  8. 闲鱼
    闲鱼 【状元】 @回复

    这个这可以折腾一下

  9. 胡时清博客
    胡时清博客 【小白】 @回复

    不错,顶一下

  10. 动感单车
    动感单车 【尚书】 @回复

    [鼓掌] 抽空咱也试试 WordPress 异步加载JS代码版的具体效果,希望效果棒哒哒!

  11. 明月登楼的博客
    明月登楼的博客 【王爷】 @回复

    哈哈,昨天我也用上这代码了!感觉很不错呀!特别是加载百度那些代码的时候很给力!

  12. 马超金博客
    马超金博客 【举人】 @回复

    博主是技术猿吗?懂那么多代码,呵呵

  13. 爱时尚
    爱时尚 【尚书】 @回复

    有人能告诉我同步加载跟异步加载的区别吗

  14. 岷仁网
    岷仁网 【进士】 @回复

    我感觉现在wordpress比前几年版本速度快多了、

    • boke112导航
      boke112导航【村长】2017-01-06 09:37  回复

      @岷仁网我就感觉WordPress越升级越臃肿了

  15. Koolight
    Koolight 【尚书】 @回复

    之前试过,导致网站部分功能失效。估计是该排除的js没有排除。

    • 码农BTS
      码农BTS 【状元】2017-01-06 09:30  回复

      @Koolight是的,回头再试试吧

    • boke112导航
      boke112导航【村长】2017-01-06 09:37  回复

      @Koolight应该也是你所说的,没有排除一些必要的JS

  16. 网际电脑
    网际电脑 【状元】 @回复

    可是这个插件我用不了