探讨web性能优化方法，一直是前端开发者不懈努力的事情，获得总结的方法也很多，看了几位大牛的总结，特此与大家共同分享一下。
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
1）用户角度：优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2）服务商角度：优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
1、减少http请求
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。
减少 HTTP请求数的主要途径包括：
（1） 资源合并与压缩：合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
（2）设置 HTTP缓存：缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。
2、请减少对DOM的操作
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
网页中元素过多对网页的加载和脚本的执行都是沉重负担，500个元素和5000个元素在加载速度上会有很大差别。
解决办法：
（1）修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
（2）减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
3、使用JSON格式来进行数据交换
基本原理：
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
4、精简Javascript和CSS，注意引用位置
精简就是将js和css中空格和注释全部去掉，统计表明，精简后的文件平均减少了21%。
可使用常见的压缩工具对js，css文件压缩为min版本。
CSS制定，Js至底：
css放在网页head中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已经下载的网页内容，这对内容多的网页很重要，用户不用一直等在一个白屏上，而是可以先看到已经下载的内容，如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器起在实现时都会努力避免重绘
5、使用CDN（内容分发网络）
减少网页下载的内容，提高下载速度可以通过内容分发网络-CDN来提升，CDN通过部署在不同地区的服务器来提升客户的下载速度，可以通过免费的CDN供应商来分发网页资源。
6、压缩图片和使用图片Sprite技术
基本原理:
注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
1.缩小图片分辨率；
2.改变图片格式；
3.降低图片保存质量。
7、减小cookie大小
cookie被用来做认证或个性化设置，其信息被包含在http报文当中，对于cookie我们要注意以下几点，来提高请求响应速度
1）将cookie大小减到最小
2）注意cookie设置的domain级别，没有必要情况下不要影响到sub-domian
3）注意设置合适的过期时间，比较长的过期时间可以提高响应速度
8、图片延迟加载
延迟加载时提高网页首屏显示速度的有效办法，当图片元素进入窗口可视区域的时候，它就会改变图像的src属性，从服务端加载所需的图片，这也是一个异步的过程。
对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
9、缓存ajax
ajax可以帮助我们异步下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表，所以我们还是要注意应用一些规则提高ajax的响应速度。
解决方法：
1）添加Expires或Cache-Control报文头使回复可以被客户端缓存
2）压缩回复内容
3）减少DNS查询
4）避免跳转
5）配置Etags