写给前端工程师的Web前端性能优化的10点建议
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入”www.xxxxxx.com”并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
HTTP协议是无状态的应用层协议，意味着每次HTTP请求都需要建立通信链路、进行数据传输，当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接并释放连接，这必定会造成资源的浪费，而在服务端，每个HTTP都需要启动独立的线程去处理，这些通信和服务的开销都很昂贵，每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。
减少HTTP的主要手段是合并CSS、合并JavaScript、合并图片。将浏览器一次访问需要的JavaScript、CSS合并成一个文件，这样浏览器只需要一次请求。图片也可以合成，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。
对一个网站而言，CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可以通过改变文件名实现，即更新JavaScript文件并不是更新JavaScript文件内容，而是生成现代战争新的JS文件并更新HTML文件中的引用。
使用浏览器缓存策略的网站在更新静态资源时，应采用分批次更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器突然大量缓存失效，集中更新缓存，造成服务器负载骤增，网络堵塞的情况。
在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。
浏览器会在下载完全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS，HTML规范清楚指出CSS要放包含在页面的区域内。JavaScript则相反，浏览器在加载JavaScript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此JavaScript最好放在页面最下面，但如果页面解析时就需要用到JavaScript，这里放在底部就不合适了。
JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>标签每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用YUICompressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。
YUICompressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUICompressor。
以我自己的yuicompressor-2.4.2.jar为例：
湘情盾-笑笑