web前端性能优化总结

前段时间作了个web前端性能分享，利用周末整理总结下。web前端性能优化主要手段有减小http请求、减小cookie传输、使用浏览器缓存、启用压缩、调整css和javascript引用顺序等。

一、减小http请求

当请求的页面包含大量图片、css、javascript等资源时，致使浏览器创建大量socket链接和关闭，在某种程度上会形成必定资源浪费，加剧服务器负荷。http协议是无状态的应用层协议，每次http请求都会创建socket链接，从而进行数据传输，服务器对于每一个请求也会创建独立的线程去处理（每线程每请求），socket及线程创建开销是很是昂贵。减小http请求数量可有效提升系统访问性能。

常看法决方法是合并css、合并js、合并图片在同一个文件中，浏览器只须一次请求可下载这资源。

二、减小cookie传输

熟识http协议同窗都知道每次的请求都会带上cookie信息，太大的cookie会影响数据传输效率,因此不要写过多的数据到cookie，可以使用html5存储的特性；另一些资源请求，如css、js、图片等，发送cookie是没有任何做用，注意过taobao页面加载过程的同窗可能会发现，一些静态资源会使用独立的域名，这是巧妙利用cooki跨域问题。因为cookie设计存在安全性问题，随着新户追踪技术成熟，cookie早晚会消失，推荐你们看下这文章http://lucb1e.com/rp/cookielesscookies/

三、启用压缩

现代的浏览器都已经支持数据压缩编码(http有关头Accept-Language和Content-Encoding)，数据通过压缩传输可减小在链路的时间，缩短总体的响应时间。普通的文件压缩效率能够达到80%左右，最经常使用gzip压缩可能会有更高的压缩效果。在服务器开户压缩也是至关简单，不管nginx或是tomcat都提供设置选项。可是开启压缩对服务器会增长必定的额外的性能开销，在带宽良好，服务器压力自己比较大的状况须要认真考虑下。

四、使用浏览器缓存

相信你们都有这样的体验，当咱们第一次打开一个网站的，须要等待较长的时间页面才出现，可是以后再打开较第一次会快不少。其实，这主要归功于浏览器缓存能力，不是每次的请求都到服务器获取，而是会检查本地缓存是否存在且有效，才做出是否发送http请求。大部的静态资源，如css、js、图片等，更新的几率是不多的，若是把这些资源缓存到浏览器中，能够很好提升用户的体验和改善性能。经过设置http头信息，可设定浏览器缓存。

Date: Sun, 29 Dec 2013 08:24:41 GMT 

Expires: Sun, 29 Dec 2013 09:24:41 GMT

Cache-Control: max-age=3600

ETag: "20b1add7ec1cd1:0"

五、调整css和javascript引用顺序

把css放在页面的头部，页面则放在页面的尾部。其缘由是浏览器会等待全部的css下载完毕才进行页面的渲染，放在头部可加快页面渲染时间；而javascript则加载完毕会立刻执行，如何执行时间过长会致使假死，由于执行javascript会致使其它相关线程阻塞等待，没法响应用户事件，因此javascript最好放到页面最下面。最好解决方案是延迟加载，用到才真正加载进来。

参加资料

http://velocity.oreilly.com.cn/2013/index.php?func=session&id=14

http://www.oschina.net/translate/fantastic-front-end-performance