在web产品优化准则中，很重要的一条是针对js脚本的加载和执行方式的优化。本篇文章简单描述一下其中的优化准则。
1. 脚本加载优化
1.1 脚本位置对性能的影响
优化页面加载性能的原则之一是将script标签放在body底部，这跟浏览器的渲染原理有关：
- js脚本的下载和执行会阻塞浏览器的解析。在较早时期，浏览器不支持并行下载的时候，js脚本的下载执行按照在html文档中的位置依次进行，可以想象当页面有大量js脚本时页面的加载有多慢；
- js脚本的下载会阻塞其他资源的下载，比如图片、外链css等。虽然目前大多数浏览器支持并行下载，外链js文件可以并行下载，但是在下载js的过程中，其他资源的加载仍然会被阻塞。
综上所述，除非业务需求必须将js脚本放在指定位置，最佳的优化准则是将js放于body底部。
1.2 合并脚本文件
每个script标签都会阻塞页面的解析和其他资源的加载，可以通过合并js脚本文件进行优化。虽然目前大多数浏览器支持并行下载，但是随着web产品越来越庞大，浏览器支持的并行数量明显不能满足需求，随意js文件的合并打包是很有必要的。
目前较流行的grunt/gulp/webpack等编译工具都支持文件的打包合并，webpack甚至可以将css文件也一并打包到js文件里。我们先不去评价这种模式的好坏，单从减少文件数量这个角度来看，这是为了减少http请求数目、script标签数量以提高页面的加载性能。
其实这种理念很早就有，有后端开发经验的朋友可能接触过，这是Yahoo YUI团队开发的一个Apacha模块。combo handler可以支持浏览器使用一个url请求多个文件，比如我们页面中需要两个js文件，常规情况下使用2个script标签请求：
使用combo handler可以通过以下形式：
a.js和b.js在服务器是独立存在的，combo handler可以通过一个http请求将两者合并为一起返回，减少了http请求数目，提高了页面加载性能。
2. 无阻塞脚本
2.1 defer和async
defer和async都是针对外链的js脚本文件，如下：
的作用都是令指定的js文件异步加载，不影响html文档其他内容的解析，也就是说带有defer和async的js文件和html文档的解析是并行的。但是两者的运行机制有稍许差别。
defer在IE4就引入了，目前几乎所有浏览器都支持。defer的js文件在并行下载结束后并不立即执行，其执行时机是在文档加载完毕后window.onload触发之前。
async是HTML5引入的新规范，目前获得了大多数浏览器的支持。async的js文件在并行下载结束后立即执行。
比较defer和async的区别可以得到以下结论：
- 两者都是并行下载，不影响html文档的解析；
- defer文件的执行时机是在window.onload之前，所以defer文件的位置任意；
- async文件下载结束后立即执行，是乱序的。所以并不适用于有依赖关系的js脚本；
- defer和async的脚本中应当避免使用
document.wirte，否则会清空页面原有的内容。
2.2 动态脚本
所谓动态脚本的意思是使用JavaScript创建一个script，指定其src并将此script标签插入文档的head中。
之所以将动态script标签插入head而不是body中是因为在低版本IE中如果在html文档未解析完毕时，body中插入script标签会抛出“操作已终止”的错误信息。具体可参考。
动态脚本请求到的js脚本是立即执行的。
动态创建script标签时，某些业务场景下需要监听被请求的js脚本是否加载完毕。大多数浏览器都支持script.onload事件：
script.onload = function(){} IE浏览器没有实现onload事件，而是会触发readystatechange事件。当readyState的状态为loaded或complete时便可以认为js脚本文件已加载完毕。兼容所有浏览器的loadScript函数如下：
function loadScript(url,callbakc){ var script = document.createElement('script'); script.type = 'text/javascript'; //低版本IE下必须制定type，其他浏览器可以不写 if(script.readtState){ //IE script.onreadystatechange = function(){ if(script.readyState === 'loaded' || script.readyState === 'complete'){ script.readyState === 'null'; callback(); } }; }else{ //其他浏览器 script.onload = function(){ callbakc(); } } script.src = url; document.getElementByTagName('head')[0].appendChild(script);} 2.3 使用XHR注入js脚本
使用XHR注入脚本是比较偏门并且应用面很小的一门技术，原理就是用Ajax去get请求一个js文件，监听xhr.status，获取到的响应信息是js文件的代码。然后动态创建一个script标签，将获取到的js代码注入script标签内，最后将script标签插入文档中。
这种方式注入的js脚步并不会立即执行。缺点是无法跨域，因此很少得到应用。