javascript的性能优化
(1) 如何加载JS，JS文件应放在什么位置
外部JS的阻塞下载
所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
有人会问：为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，
当 浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或 者 IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返 回后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的 返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使 用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改 DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.
嵌入JS是指直接写在HTML文档中的JS代码。上面说了引用外 部的JS会阻塞其后的资源下载和其后的内容呈现，哪嵌入的JS又会是怎样阻塞的了，拿两段代码运行后，对比。会发现代码1中，在前5秒中页面上是一篇空 白，5秒中后页面全部显示。 代码2中，前5秒中blogjava,csdn等先显示出来，5秒后MSN才显示出来。
可以看出嵌入JS会阻塞所有内容的呈现，而外部JS只会阻塞其后内容的显示，2种方式都会阻塞其后资源的下载。
根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。
嵌入JS应该放在什么位置
1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。
2、如果嵌入JS放在head中，请把嵌入JS放在CSS头部。
3、使用defer
4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用
(2) 为什么要减少请求数，如何减少请求数!
http连接的开销
相比request头部多余的数据，http连接的开销则更加严重。先看看从用户输入1个URL到下载内容到客户端需要经过哪些阶段：
1. 域名解析
2. 开启TCP连接
3. 发送请求
4. 等待(主要包括网络延迟和服务器处理时间)
5. 下载资源
可能很多人认为每次请求大部分时间都花在下载资源上，让我们看看blogjava资源下载瀑布图(每种颜色代表的阶段与上面5个阶段对应)：
如何减少请求数
1、合并文件
合并文件就是把很多JS文件合并成1个文件，很多CSS文件合并成1个文件，这种方法应该很多人用到过，这里不做详细介绍，
只推荐1个合并的工具：yuiCompressor 这个工具yahoo提供的。 http://developer.yahoo.com/yui/compressor/
2、合并图片
这是利用css sprite，通过控制背景图片的位置来显示不同的图片。这种技术也是大家都用过的，不做详细介绍，推荐1个在线合并图片的网站:http://csssprites.com/
3、把JS、CSS合并到1个文件
上面第1种方法说的只是把几个JS文件合并成1个JS文件，几个CSS文件合并成1个CSS文件，哪如何把CSS和JS都合并到1个文件中.
4、使用Image maps
Image maps 是把多个图片合并成1个图片，然后使用html中的<map>标签连接图片，并实现点击图片不同的区域执行不同的动作，image map在导航条中比较容易使用到。
image map的使用方法见： http://www.w3.org/TR/html401/struct/objects.html#h-13.6
5、data嵌入图片
项目中的处理方案：
为了解决上面讨论过的问题，在下写了1个如下的组件，组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号，虽然在文件修改很小(比如把字符a改成b)，可能文件大小并没有变，导致版本号也不会变。
但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你，只需要修改一行代码就行，下面看下这个组件的处理流程(本来想用流程图表达，最后还是觉的文字来的直白写)：
1. 程序启动(contextInitialized)
2. 搜索程序目录下的所有merge.txt文件，根据merge.txt文件的配置合并文件, merge.txt文件实例如下：
# 文件合并配置文件,多个文件以|隔开，以/开头的表示从根目录开始,
# 空格之后的文件名表示合并之后的文件名
# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目录下所有JS，CSS文件(包括合并后的)，每个文件都压缩后生成对应的1个新文件。
4. 搜索程序目录下所有JSP,html文件，把所有JS,css的引用代码改成压缩后并加了版本号的引用。
(3) 减少请求，响应的数据量
如何减少请求、响应的数据量(即在网络中传输的数据量)，减少传输的数据量不仅仅可以加快页面加载速度，更可以节约服务器带宽，为你剩不少钱(好像很多机房托管都是按流量算钱的)。
GZIP压缩
gzip是目前所有浏览器都支持的一种压缩格式，IE6需要SP1及以上才支持(别说你还在用IE5,~_~)。gzip可以说是最方便而且也是最大减少响应数据量的1种方法。
说它方便，是因为你不需要为它写任何额外的代码，只需要在http服务器上加上配置都行了，现在主流的http服务器都支持gzip，各种服务器的配置这里就不一一介绍(其实是我不知道怎么配)，
别对图片启用gzip
在知道了gzip强大的压缩能力后，你是否想对服务器上的所有文件启用gzip了，先让我们看看图片中启用gzip后会是什么情况。
比较适合启用gzip压缩的文件有如下这些：
1. javascript
2. CSS
3. HTML，xml
4、plain text
别乱用cookie
现 在几乎没有哪个网站不使用cookie了，可是该怎么使用cookie比较合适了，cookie有几个重要的属性:path(路 径),domain(域),expires(过期时间)。浏览器就是根据这3个属性来判断在发送请求的时候是否需要带上这个cookie。
cookie使用最好的方式，就是当请求的资源需要cookie的时候才带上该cookie。其他任何请求都不带上cookie。
妙用204状态
http 中200,404,500状态大家都很清楚，但204状态大家可能用的比较少，204状态是指服务器成功处理了客户端请求，但服务器无返回内容。204是 HTTP中数据量最少的响应状态，204的响应中没有body，而且Content-Length=0。很多人在使用ajax提交一些数据给服务器，而不 需要服务器返回的时候，常常在服务端使用下面的代码：response.getWriter().print("")，这是返回1个空白的页面，是1个 200请求。它还是有body，而且Content-Length不会等于0。其实这个时候你完全可以直接返回1个204状 态 (response.setStatus(204))。
(4) 如何加载google-analytics(或其他第三方)的JS
很 多网站为了获取用户访问网站的统计信息，使用了google-analytics或其他分析网站(下面的讨论中只提google- analytics, 简称ga)。注册ga后，ga就会生成一段js脚本，很多人直接把这段js复制到<body>的最后面就完事(包 括 博客园、CSDN、BlogJava)。可是ga自动生成的这段JS真的就是最合理的吗？
哪怎么样才算是合理，怎样才是不合理了？因ga只是1个分析工具，它的使用绝对不能影响到我们的程序，如果影响了，则是不合理的。不影响则是合理的。
使用document.write来加载JS，注意了，这样加载js是阻塞加载的，就是这个js没加载完，后面的所有资源和JS都不能下载和执行。可能你会觉的这段代码在body的最后面，后没已经没内容，没什么会阻塞的了。
还 有一些你忽略了，相信很多人在写JS的时候需要在页面加载完毕后执行一些JS或AJAX，一般写在window.onload 事件，或者写入 jquery的$(document).ready()方法中。这些JS就会被阻塞。如果我们的页面上很多数据在 window.onload中使用 AJAX加载，而偏偏这个时候ga因为某些原因(和谐和谐)不能访问，或者访问很慢的时候。问题就来，我们自己的JS一直在等待ga的JS加载完，只有等 ga的js加载超时后才会执行我们的JS。
(5) 疯狂的HTML压缩
(6) 页面呈现、重绘、回流。
页面呈现流程
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
1. 浏 览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对 象 (<html> tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的html结构， 里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
2. 浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，而firefox会去掉_开头的样式。
3、 dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很 大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如 display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。注 意 visibility:hidden隐藏的元素还是会包含到render tree中的，因为visibility:hidden 会影响布局 (layout)，会占有空间。根据css2的标准，render tree中的每个节点都称为box(Box dimensions)，box所有属 性：width,height,margin,padding,left,top,border等。
4. 一旦render tree构建完毕后，浏览器就可以根据render tree来绘制页面了。
回流与重绘
1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(其实我觉得叫重新布局更简单明了些)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
注：从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。
什么操作会引起重绘、回流
其实任何对render tree中元素的操作都会引起回流或者重绘，比如：
1. 添加、删除元素(回流+重绘)
2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)
3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)
4. 对style的操作(对不同的属性操作，影响不一样)
5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
如何减少回流、重绘
减少回流、重绘其实就是需要减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：
1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变
2. 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在于render tree中，比如：
a) 使用documentFragment或div等元素进行缓存操作，这个主要用于添加元素的时候，大家应该都用过，就是先把所有要添加到元素添加到1个div(这个div也是新加的)，
最后才把这个div append到body中。
b) 先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回流。
3 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了
4. 考虑你的操作会影响到render tree中的多少节点以及影响的方式，影响越多，花费肯定就越多。
(6) 了解CSS的查找匹配原理，让CSS更简洁、高效
匹配原理：
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：
先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
简洁、高效的CSS:
所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误(也是我以前常常犯的错误，还老以为这样写才是高效的)：
1.不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。
2.不要再class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释： 同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3.尽量少使用层级关系
一般写法：#divBox p .red{color:red;}
更好写法：.red{..}
4.使用class代替层级关系
一般写法：#divBox ul li a{display:block;}
更好写法：.block{display:block;}
感觉可以，值得学习一下，就转了。转自www.zhihaijiangku.com
