JavaScript 在浏览器中的性能，可以认为是开发者所面临得最严重的可用性问题。这个问题因JavaScript的阻塞特性变得复杂，
也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情
多数浏览器使用单一进程来处理用户界面（UI）的刷新和JavaScript脚本执行，所以同一时刻只能做一件事。
JavaScript执行过程耗时越久，浏览器等待响应的时间就越长。
每次<script>标签出现都霸道的让页面等待脚本的解析和执行。
脚本位置
将脚本放在底部：推荐将所有的<script>标签尽可能的放到<body>标签的底部，以尽量减少对整个页面下载的影响
脚本数量
限制内嵌脚本的数量：由于每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。这不仅仅针对外链脚本，内嵌脚本的数量也同样需要显示。浏览器在解析HTML页面的过程中没遇到一个<script>标签，都会因执行脚本而导致一定的延时。因此最小化延迟时间将会明显改善页面的总体性能。
同时Steve Souder还发现，把一段内嵌脚本放在引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载。因此永远不要把内嵌脚本紧跟在<link>标签后面
另外，下载一个100KB的文件将比下载4个25KB的文件更快。也就是说，减少页面中外链脚本文件的数量将会改善性能。可以把多个文件合并成一个，这样只需要引用一个<script>标签，减少性能消耗。
无阻塞的脚本
减少JavaScript文件大小和限制HTTP请求数有时候远远不够，WEB功能越丰富，所需要的JavaScript代码就越多，所以精简源代码并不总是可行，尽管下载单个较大的JavaScript文件只产生了一次HTTP请求，却会锁死浏览器一大段时间。这种情况下需要向页面上逐步的加载JavaScript文件，这样做在某种程度上来说不会阻塞浏览器。
无阻塞脚本：在页面加载完成后才加载JavaScript代码。意味着在window对象的load事件触发后再下载脚本【defer和async】
延迟的脚本
HTML4为<script>标签定义了扩展属性：defer。Defer属性指明本元素所含的脚本不会修改DOM，因此代码能安全的执行。该属性只有IE4和Firefox3.5+的浏览器支持，所以它不是一个理想的跨浏览器解决方案。其他浏览器中defer会被直接忽略。
defer受限：低版本IE浏览器不支持，如今所有的主流浏览器都已经实现对defer属性的支持，W3C规定：defer属性仅当src属性声明时才生效。
使用方法：
<script type = "text/javascript" src = "file1.js" defer></script>
或者
<body>
<script defer>
alert("defer");
</script>
<script>
alert("script");
</script>
<script>
window.onload = function(){
alert("load");
}
</script>
</body>
//在支持defer的浏览器中，弹出的顺序是“script”，“defer”，“load”。注意：带有defer属性<script>元素不是跟在第二个后边执行，而是在onload事件处理器执行之前被调用
async：HTML5中引入的async属性，用于异步加载脚本。async与defer都是采用并行下载，在下载过程中不会产生阻塞。
区别在于执行时机，async是加载完成后自动执行，而defer是需要等待页面完成后执行。
动态脚本元素
由于文档对象模型DOM的存在，可以用JavaScript动态创建HTML中的几乎所有内容。
<script>的元素下载过程中，readyState属性有五种取值，其中“loaded”和“complete”是最常用的状态。
IE在标识最终状态的readyState的值时并不一致，有时候达到loaded状态 ，有时候达到complete状态。所以使用readystatechange事件的最靠谱方式就是同时检查这两种状态，只要触发其中一个就删除事件处理器。（以确保事件不会被处理两次）
下边的函数封装了标准及IE特有的实现方法：
function loadScript(url,callback){ var script = document.creatElement("script"); script.type = "text/script"; if(script.readyState){ //IE script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
} }else{ //其他浏览器
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script); }
如果需要你可以动态加载尽可能多的javaScript文件到页面上，但是一定要考虑文件的加载顺序。在所有主流浏览器中，只有Firefox和Opera能保证脚本会按照你指定的顺序执行，其他浏览器将会按照从服务端返回的顺序下载和执行代码，你可以将下载操作串联起来以保证下载顺序：
loadScript("file1",function(){ loadScript("file2",function(){ loadScript("file3",function(){ alert("All files are loaded!!"); }) }) })
弊端：如果需要下载很多的文件，这个方案就会带来一点管理上的麻烦。
如果多个文件的下载顺序很重要，最好的做法就是把他们按正确的顺序合并成一个文件。下载这个文件就能一次获得所有的代码（这个过程是异步的，文件大一点也不会有影响）
动态脚本加载凭借着它在浏览器兼容性和易用的优势，成为最通用的无阻塞加载解决方案。
XMLHttpResquest脚本注入：
另一种无阻塞加载脚本的方法是使用XMLHttpResquest(XHR)对象获取脚本并注入页面中。
var xhr = new XMLHttpRequest(); xhr.open("get","file1.js",true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement("script"); script.type = "text/javascript"; script.text = xhr.reaponseText; document.body.appendChild(script); } } }
xhr.send(null);
发送get请求获取“file1.js”文件，事件处理函数onReadyStateChange检查readyState是否为4，同时校验HTTP状态码是否有效（2XX表示有效响应，304意味着是从缓存读取）
然后创建<script>元素，并设置属性。一旦新创建的元素被添加到页面，代码会立刻执行然后准备就绪。
优点：你可以下载JavaScript代码但不立即执行，由于代码是在<script>标签之外返回的，因此它下载之后不会自动执行，这使得你可以把脚本的执行推迟到你准备好的时候，
同样的代码在所有主流浏览器中无一例外都能正常工作。
局限性：JavaScript文件必须与所请求的页面处于相同的域，这意味着JavaScript文件不能从CDN上下载，因此大型Web应用不会采用XHR脚本注入技术
推荐的无阻塞模式：
向页面添加大量JavaScript的推荐做法只需两步：先添加动态加载所需的代码，然后加载初始化页面所需的剩下的代码。因为第一部分的代码尽量精简，甚至可能只包含loadScript()函数，它下载执行都很快，所以不会对页面有太多影响。一旦初始代码就位，就用它来加载剩余的JavaScript。
<script type="text/javascript" src = "loader.js"> <script type="text/javascript"> loadScript("the-rest.js",function(){ Application.init(); }); </script>
把这段代码放在</body>闭合标签之前。
好处：确保了JavaScript执行过程中不会阻碍页面其他内容的显示。其次，当第二个JavaScript文件完成下载时，应用所需的所有DOM结构已经创建完毕，并做好了交互准备，从而避免了需要另一个事件（比如window.onload）来检测页面是否准备好。
当然可以把loadScript()函数直接嵌入页面，省去了加载<script type="text/javascript" src = "loader.js">时的一次http请求。
YUI3的方法：没看明白...
LazyLoad类库：
雅虎的工程师创建了一个更为通用的延迟加载工具：LazyLoad(源代码：http://github.com/rgrove/lazyload/)。LazyLoad是loadScript()函数的增强版。
<script type="text/javascript" src = "lazyload.min.js"> <script type="text/javascript"> LazyLoad.js("the-rest.js",function(){ Application.init(); }); </script> //LazyLoad支持下载多个JavaScript文件，需要传入一个URL数组 <script type="text/javascript" src = "lazyload.min.js"> <script type="text/javascript"> LazyLoad.js(["the-rest.js","last-file.js"],function(){ Application.init(); }); </script>
分析：尽管这种无阻塞的方式可以动态加载很多文件，但是建议尽量减少文件数。因为每个文件的下载都是一个独立的http请求，而且回调函数会等待所有文件都下载完成后才会执行
LABjs：
LABjs（http://labjs.com）可以进行链式调用
<script type="text/javascript" src = "lab.js"> <script type="text/javascript"> $LAB.script("first-file.js")
.script("the-rest.js")
.wait(function(){
Application.init();
});
</script>
为了保证first-file.js在the-rest.js的代码前执行，需要再第一个script()方法后调用wait()：
<script type="text/javascript" src = "lab.js"> <script type="text/javascript"> $LAB.script("first-file.js").wait() .script("the-rest.js") .wait(function(){ Application.init(); }); </script>
尽管是并行下载，但是first-file.js中的代码肯定能在the-rest.js前面执行。
小结：
1、</body>闭合标签之前，将所有的<script>标签放在页面底部。能确保在脚本执行前页面已经完成了渲染
2、合并脚本，页面中的<script>标签越少，加载也就越快，响应也就越迅速。无论外链文件还是内嵌脚本都是如此。
3、有多种无阻塞下载JavaScript的方法
使用<script>标签的defer属性
使用动态创建的<script>元素来下载并执行代码
使用XHR对象下载JavaScript代码并注入页面中
通过以上策略，可以极大的提高那些需要使用大量JavaScript的Web应用的实际性能