页面异步加载javascript文件

昨天听一同事说的异步加载js文件,可以提高页面加载速度。具体方法如下:
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = 'http://www.test.com/myjs.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
我亲自试验了,果然有效果,不过有一个问题。如果要加载多个的话,而且他们有相互依赖的关系,比如js1文件要调用js2里的函数或使用js2里的框架,那就有问题了。可能会报未定义的错误。因为他们是异步加载的,顺序不能保证。
解决的方法一个是把他们合并到一个文件里,另一个是吧那个需要先加载的 ga.async 设置为false。当然最好的还是第一个方法。
后来搜了下这里有更详细的介绍。
http://lifesinger.org/blog/2010/03/script-async-attribute/

还有就是最好在文件的最后才加载js文件。

原文地址:https://www.cnblogs.com/wayne173/p/3747312.html