JS性能优化详细

(1)减少http请求次数 (2) 减少DNS查询次数 (3) 避免页面跳转 (4) 缓存Ajax (5) 延迟加载 (6) 提前加载  (7) 减少DOM元素数量  (8) 根据域名划分内容
(9)减少iframe数量 (10) 避免404 (11) 服务器 (12) 使用CDN (13) 添加Expires 或Cache-Control报文头 (14) Gzip压缩传输文件 (15) 配置ETags

(16)尽早flush输出 (17)使用GET Ajax请求 (18)避免空的图片src  (19)减少Cookie大小 (20)页面内容使用无cookie域名 (21)将样式表置顶

(22)避免CSS表达式  (23)用<link>代替@import  (24)避免使用Filters  (25)精简Javascript和CSS  (26)减少DOM访问  (27)优化CSS Sprite

详细解释：

（1）避免页面跳转
当客户端收到服务器的跳转回复时，客户端再次根据服务器回复中的location指定的地址再次发送请求，用户只能等待客户端再次发送请求，有的网站甚至会一直跳n次，跳到他想带你去的地方…当然在这个时候用户看不到任何页面内容，只有浏览器的进度条一直在刷新。
（2）缓存Ajax
Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度。
（3）提前加载
与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型
无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。
（4）有条件加载：根据用户的输入推断需要加载的内容
（5）有预期的的加载：这种情况一般发生在网页重新设计时，由于用户经常访问旧网页，本地对旧的网页内容缓存充分从而显得旧网页速度很快，而新的网页内容却没有缓存，设计者可以在旧网页的内容中预先加载一些新网页中可能用到的内容，这样新的网页就会生下来一些需要下载的资源。
（6）减少DOM元素数量
网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。
想知道你的网页中有多少元素，通过在浏览器中的一条简单命令就可以算出，
document.getElementsByTagName('*').length
（7）根据域名划分内容
浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接，
一般网站规划会将静态资源放在类似于static.example.com，动态内容放在www.example.com上。这样做还有一个好处是可以在静态的域名上避免使用cookie。后面我们会在cookie的规则中提到。   
（8）减少iframe数量
使用iframe要注意理解iframe的优缺点
优点：可以用来加载速度较慢的内容，例如广告。
安全沙箱保护。浏览器会对iframe中的内容进行安全控制。
脚本可以并行下载
缺点：即使iframe内容为空也消耗加载时间，会阻止页面加载，没有语义
（9）避免404
404我们都不陌生，代表服务器没有找到资源，我们要特别要注意404的情况不要在我们提供的网页资源上，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了。
更糟糕的是我们网页中需要加载一个外部脚本，结果返回一个404，不仅阻塞了其他脚本下载，下载回来的内容(404)客户端还会将其当成Javascript去解析。
（10）服务器使用CDN
再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。如果你的网站上有大量的静态内容，世界各地的用户都在访问，那CDN是必不可少的。事实上大多数互联网中的巨头们都有自己的CDN。我们自己的网站可以先通过免费的CDN供应商来分发网页资源。

（11）尽量使用GET Ajax请求
浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。

（12）避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。

（13）减少Cookie大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度，
去除没有必要的cookie，如果网页不需要cookie就完全禁掉
将cookie的大小减到最小
注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
设置合适的过期时间，比较长的过期时间可以提高响应速度。
大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。
（14）样式表置顶
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
（15）避免CSS表达式
CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略
（16）用<link>代替@import
避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。
（17）精简Javascript和CSS
精简就是将Javascript或CSS中的空格和注释全去掉，
（18）优化图
当美工完成了网站的图片设计后，我们可以在上传图片之前对其做以下优化
检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
（19）优化CSS Sprite