代码之家  ›  专栏  ›  技术社区  ›  serg

我是否应该始终使用动态脚本标记注入技术来包含类似于Facebook的javascript文件?

  •  4
  • serg  · 技术社区  · 15 年前

    而不是仅仅包括 <script src="..."> 如往常一样,facebook建议以以下方式加载其sdk库:

    <div id="fb-root"></div>
    <script>
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
    

    说,那是:

    放置异步版本代码的最佳位置是在打开之后 <body> 标签。这允许Facebook初始化与页面其余部分的初始化同时进行。

    如果这很好的话,也许我应该在我所有的项目中使用这个方法来获取外部的javascript包括什么?什么时候使用这种技术是合适的?反对它的原因是什么?

    2 回复  |  直到 15 年前
        1
  •  3
  •   Andreas    15 年前

    每个脚本标记强制浏览器停止加载,直到脚本块完全加载和执行。通过动态添加脚本标记,可以在不阻塞的情况下完全加载页面。更多信息,请查看 Loading Javascript without blocking 和/或 loading scripts without blocking

        2
  •  0
  •   palswim    15 年前

    异步加载脚本听起来不错,但您是否需要在内联中这样做? <script> 标签?

    在处理时加载它怎么样? onload 页面的?

    function init() {
        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.body.appendChild(e);
        }());
    }
    
    window.addEventListener("load", init, false);
    

    也许Facebook的方法可以确保所有启用脚本的浏览器都能处理脚本,但您几乎可以确保这些浏览器使用一个不错的addEventListener/attachEvent抽象函数来处理脚本。