在打开一个站点的时候，浏览器会去加载各种资源。现在对JS的使用非常普遍，任何一个站点都会请求大量的JS脚本，而加载和执行的方式也是各不相同，希望读完这篇文章可以对常用的加载和执行方式有一个整体的认识。
首先介绍的是html中直接使用<script>标签。这也是我们最常见的一种加载脚本的方式。
// 直接使用script内嵌脚本// 使用script的src属性引用外部脚本
这种方式在主流的浏览器可以是并行加载的，但是执行脚本的顺序还是同步的，再加上浏览器是顺序解析页面，所以对于脚本的位置是有一定讲究的：
- 如果脚本B需要使用到脚本A中的数据(比如fn或者变量),那脚本B必须放在脚本A后面。
- 因为执行引擎是单线程的，所以在执行JS的时候会阻塞DOM的渲染，导致页面长时间空白。如果不想的话可以考虑把JS放在文档的后面（比如body标签的底部）。
- 一个外链脚本就涉及到一个请求，再小的请求肯定都会有性能开销，比如请求头，网络时延等等。所以在优化站点性能的时候减少外链也是要考虑的一个点。
【注】：可并行加载的浏览器包括：IE8+、firefox3.5+、safari4+和chrome2+。不同浏览器对于同一个域名下的最大连接数有不同的限制，基本在6个左右。具体可以参见 。
在程序的世界中，很多场景下同步阻塞就意味着性能问题。在这些场景下其实无阻塞脚本就可以搞定，主进程还是去干当前最主要的事情，即加载和渲染DOM，而无阻塞的脚本可以等到页面加载完再去加载执行，这些场景正是性能优化的点。
这就引申出来了几种无阻塞脚本的方案。
方案一：defer属性 【】【】
这个属性的是承诺用src引的脚本中不会修改DOM。放心的让这个脚本延迟执行吧。具体延迟到文档完成解析后，触发 DOMContentLoaded 事件前执行。
【注1】执行是被延迟了，但是下载还是根据script在页面中的位置。解析到时会去并行下载，但是不会执行。 【注2】由上述定义可以看出来需由src的存在，对于内嵌的脚本是无效的。 【注3】配了defer属性的脚本之间是按照顺序执行的【】 chrome 64.0.3282.119
// demo.jsconsole.log('inner demo.js');
结果：
方案二：async属性 【】【】
配置了async属性是告诉浏览器，这个脚本异步去并行加载，加载完立即异步执行，但是加载的时机是不确定的，所以这个属性比defer更开放。
【注1】因为异步加载完就立即异步执行，所以配了这个属性的脚本之间的关系也是不确定的。所以 不能存在依赖async脚本内容的情况。 【注2】执行的时机智能确定在load事件之前，和DOMContentLoaded的时机不能确定 【注3】优先级是高于defer的 【注4】和defer一样，对内嵌脚本无效；不能有document.write改写dom的代码
方案三：动态脚本
动态脚本是我们比较常用的异步加载和执行JS的方式。这种实现要特别注意浏览器的兼容性。简单的实现方式如下：
function loadJs(url,callback) { var callback = callback || (() => {}); var script = document.createElement('script'); script.type = "text/javascript"; script.src = url; if(script.readyState){ //IE script.onreadystatechange = function () { if(script.readyState == "loaded" || script.readyState == 'complete'){ console.log('inner onreadystatechange'); script.onreadystatechange = null; callback(); } }; } else { script.onload = function () { console.log('inner onload'); callback(); }; } document.getElementsByTagName("head")[0].appendChild(script); // 开始下载并执行}loadJs("./server.js"); 这种创建的方式，文件在该元素被添加到页面时开始下载，加载完开始执行，并且文件的下载和执行过程不会阻塞其它进程。可以认为这种创建默认加了async属性。我们还可以通过设置async = false的方式取消异步的特性。正因为这个特性，绝大多数场景下都是有益的，但是当我们想使用这种方式去加载多个JS时，并且有先后顺序的时候，可以尝试在callbak里去迭代发请求。
loadJs('f1.js',()=>{ loadJs('f2.js',()=>{ loadJs(xxx); })}); 方案四：注入脚本
搞过Ajax的对XHR应该都很熟悉了，在这就不详细介绍了，需要的去Google一把。
XHR主要是请求脚本，然后我们可以控制请求回来的脚本，在我们需要的时候通过上述动态创建脚本的方式注入到页面中。这种方式最大的好处就是兼容性好。弊端也很明显，必须同源。下面是一个简单实现，没有考虑在创建xhr的兼容性，比如ActiveXObject，有需要的可以去google一把：
var xhr = new XMLHttpRequest(); // 创建xhr对象xhr.open("get",'./server.js',true); // 初始化一个请求, 支持CRUDxhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 3000 || xhr.status == 304){ var script = document.createElement('script'); script.type = 'text/javascript'; script.text = xhr.responseText; document.body.appendChild(script); } }}xhr.send(null); // 发送请求 这地方说明一下xhr.status:
| 值 | 状态 | 描述 |
|---|---|---|
| 0 | UNSENT (未打开) | open()方法还未被调用. |
| 1 | OPENED (未发送) | open()方法已经被调用. |
| 2 | HEADERS_RECEIVED (已获取响应头) | send()方法已经被调用, 响应头和响应状态已经返回 |
| 3 | LOADING (正在下载响应体) | 响应体下载中; responseText中已经获取了部分数据. |
| 4 | DONE (请求完成) | 整个请求过程已经完毕. |
其它方案：
document.write
对于document.write，一般都不推荐使用的，主要是因为存在write方法的脚本可能会在解析的过程中修改DOM，导致一些脚本无法预加载，甚至会导致一些已经预解析和预加载失效。网上也很多关于为什么要避免使用document.write的文章，感兴趣的可以去google一把。
innerHtml
对于innerHtml和outerHTML, 只会以字符串的形式来承载，不会去执行对应的脚本的。
总结：上文主要介绍了动态创建脚本和XHR的方式去创建异步加载和执行脚本的方式。在某些性能调优的情况下还是很有用的，而XHR更是Ajax的核心。
参考
高性能Javascript