码迷,mamicode.com
首页 > 其他好文 > 详细

加载异步脚本的艺术

时间:2020-03-31 12:02:02      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:||   其他   作用   get   tag   func   data-   示例   node   

由于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>

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

加载异步脚本的艺术

标签:||   其他   作用   get   tag   func   data-   示例   node   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12604083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!