多个JS文件性能优化

一个页面加载多个js,有一定影响的，加载速度会慢。js过多既延长了用户的等待时间，又大量消耗cpu。而且放在页面的前面的话，会影响页面渲染造成用户体验很差，用户会感觉东西迟迟没有出来 。最好压缩一下js或者把多个 js 文件合成一个，尽量减少客户端与服务器的交互。

页面中引入的JS文件是阻塞式加载的，这样会影响页面性能。以下是JS文件性能优化方法：

一：将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面完成了渲染
　　由于JS文件是阻塞式加载，当加载JS文件时，页面停止渲染，这样页面会出现不完整状态。将JS文件的<script>放在页面底部，这样能在加载JS文件时确保页面渲染完成。
二：尽可能的合并脚本文件。页面中<script>标签越少，加载也就越快，响应速度就越快。无论是外链脚本还是内嵌脚本都是如此。
　　　　通常一个大型网站或应用需要依赖多个JS文件。可以把多个文件合并成一个，这样只需要引用一个<script>标签，就可以减少性能消耗。文件合并的工作可通过离线的打包工具或者一些实时的在线服务来实现。
　　注意：内嵌脚本放在引用的外链样式表的<link>之后会导致阻塞去等待样式表单下载。这样做事为了确保内嵌脚本在执行时能获得最精确的样式信息。因此，建议不要把内嵌脚本紧跟在<link>标签后面
三：采用无阻塞下载JS脚本的方法。
　　较少JS文件大小并限制HTTP请求数在功能丰富的WEB应用或大型网站上并不是总可行。WEB应用的功能越丰富，所需要的JS代码就越多，尽管下载单个较大的JS文件只产生一个HTTP请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载JS文件，这样做在某种程度上说不会阻塞浏览器。
　　无阻塞加载脚本的本质：在页面加载完成后才加载JS代码。这就意味着在window.onload事件触发后再下载脚本。实现方法
1.延迟加载脚本：
　　HTML5为<script>标签定义了一个扩展属性：defer。如果浏览器支持defer属性，可以这样写：
 
 

  
  
1 <script type="text/javascript" src="script1.js" defer="defer"></script>
 
 
　　带有defer属性的<script>标签可以放置在文档的任何位置。对应的JS文件将在页面解析到<script>标签时开始下载，但不会执行。直到DOM加载完成，即onload事件触发前才会执行。
　　当带有defer属性的JS文件下载时，不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起下载。
2.异步加载JS文件：async属性:使用所有浏览器
　　HTML5为<script>标签定义了一个新的扩展属性：async。作用和defer一样，能够异步加载和执行脚本，不因为加载脚本而阻塞页面渲染。但是：使用async，JS脚本一旦下载好了就好执行，所以很有可能不是按照原本的顺序来执行。如果JS脚本前后有依赖性，使用async和有可能会出错。
 
 

  
  
1 <script type="text/javascript" src="script1.js" async="true"></script>
 
 
四：动态脚本元素
　文档对象模型（DOM）允许您使用 JavaScript 动态创建 <script>元素。
 
 

  
  
1 var script = document.createElement ("script");
2    script.type = "text/javascript";
3    script.src = "script1.js";
4    document.getElementsByTagName("head")[0].appendChild(script);
 
 

合并多个js文件补充

在平时开发的时候，我们都会有一些js文件的积累，大部份场合是不需要重新写的。

但我们会把js文件的功能尽可能的细分，以便引入的时候不引入无用的代码，但这样造成的问题是在jsp文件
中要写大量的这样的句子
<script language='JavaScript' src="two.js" charset="utf-8"></script>
如果你有100个jsp文件，都用到10个js文件，这个时候每个jsp文件写10句引入，这个是个麻烦的事情
现在，通过js文件的引入可以解决这个问题。定义一个js文件用来引入一些组合，jsp文件则只需要引入1个

这样的js文件就可以了。js代码少了100*99行

js集合引入：一个js中引入其他常用的js文件，达到精简代码的目的。

不常用的js文件，单独引入。

第一个js文件(被引入的js文件)，文件名one.js，内容如下

function alertInOne(){
    alert('in one');
}

第二个js文件，文件名two.js，内容如下

//注意这个地方
document.write("<script language='javascript' src='one.js'></script>");
function alertInTwo(){
    alert("in Two");
}

调用的html文件，只需要引入two.js，就能引入one.js了

<script language='javascript' src="two.js"></script>
<script language="javascript">
    alertInOne();
    alertInTwo();
</script>

http://www.cnblogs.com/ymwangel/p/5980373.html