加载异步脚本的艺术

Posted 2021-03-02 baimeishaoxia

由于javascript脚本的加载会阻塞页面上其他元素的载入，以异步非阻塞的方式加载脚本文件对网页性能而言就显得尤为重要，甚至可以说很关键。
Facebook JavaScript SDK配置示例如下：

<script>(function(d,s,id){
    var js,fjs = d.getElementByTagName(s)[0];
    if(d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js,fjs);
}(document,‘script‘,‘facebook-jssdk‘));</script>

这是一个自执行函数，确保了所有临时变量都处于局部作用于内，而不会污染到全局的命名空间。
如果你拥有宿主页面的控制权，一切将变的更加简单：

<script>(function(d){
    var js = d.createElement(‘script‘);
    js.src = "http://example.com/my.js";
    (d.head || d.getElementByTagName(‘head‘)[0]).appendChild(js);
}(document));</script>

以异步非阻塞方式加载脚本对网页的性能有很大的帮助。