Javascript加载执行方法总结

摘要：区别在于执行时机，是加载完成后自动执行，，而需要等待页面完成后执行。一旦新的元素被添加到文档，代码将会被执行。这样的好处是，可以下载但不是立即执行代码，还有一个好处是兼容性好。最好无论文件是以什么样的方式加载的。

Javascript在浏览器性能中，这可能是所有开发者比较关注的问题，因为Javascript有阻塞的特征，也就是当Javascript运行的时候，浏览器不会处理其他的任务。但是浏览器不可能只运行一个任务，但是同一时间又只能执行单个任务。

不管Javascript代码是内联的还是包含在一个外部文件中的，页面的下载和解析就必须等待脚本完成，才能继续向下执行，这样的原因是因为脚本的执行可能会重新渲染页面UI。我们典型的脚本函数是这样的。如：

当浏览器遇到一个

但是这样的写法理论上是没有任何问题的，但是这里就存在了性能和体验的问题。上面的代码加载了3个外部文件，每个文件在加载的过程中阻塞了页面的解析，浏览器只有等待它们下载并运行了Javascript代码之后，页面才能继续，这我们在上面已经提到过了。最致命的问题就是，把Javascript文件放在顶部，在加载Javascript文件比较慢的时候会出现空白页，以至于用户看不到页面，更不要说交互网页，推荐的办法就是，把所有的Javascript文件，包括外链的文件挡在标签底部位置，减少对整个页面加载的影响。这里就不列出例子了。

2、延迟脚本

这个时候就 ## 标题文字 ##

如果浏览器不支持defer属性，上面的代码的运行顺序是: 延迟-》当前-》加载完成。如果浏览器支持defer属性，那么运行顺序是：当前-》延迟-》加载完成。应该很直观的就能看出区别。目前defer标签目前已被所有主流浏览器支持

另外这不能不提的还有一个属性：async。用于加载异步脚本，async和defer的相同点是采用并行下载，在下载的过程中都是不会产生阻塞。区别在于执行时机，async是加载完成后自动执行，，而defer需要等待页面完成后执行。

3、动态脚本元素

DOM允许使用Javascript动态创建HTML支持的全部内容。如：

var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "file1.js"; document.getElementsByTagName_r("head")[0].appendChild(script);

上面新的

LazyLoad也可以同时下载多个Javascript文件，并保证它们在所有浏览器上都能以正确的顺序远行，要加载多个Javascript文件，只需要在执行LazyLoad()函数时传递一个数组即可，如：

当然还有其他类库，比如 LABjs 这里就不一一介绍了。

总结

将所有的