web 性优化能

     不知道你们有没有这种情况，在同样的网络环境下，打开一些网页速度非常快，而有的则非常慢，超过自己的忍耐限度，于是就干脆放弃浏览，

这就是web性能对于用户体验的影响。web性能黄金准则：只有10%~20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间

花在了下载页面组件上。今天分享的就是如何提升Web性能。

    1.尽量减少HTTP请求数

      一个http请求绝大多数的时间消耗在了建立连接跟等待的时间，优化的方法是减少http请求。

      合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的。CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图

片中，然后用CSS的 background-image 和 background-position 属性来定位要显示的部分。使用这项技术的附加优点是他降低了下载量，合并后的

图片比分离的图片和更小，因为它降低了图片自身的开销（颜色表、格式信息等等）。实际项目中css sprites是一项体力活，因为开发过程中需要

对这张大图进行维护（添加、减少图片）。

     行内图片（Base64编码）用 data: URL模式 来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的）样式表中是个好办

法，而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。将内联的图片作为背景使用，并放到外部样式表中，这意味着数据

可以缓存在样式表内部。使用外部样式表虽然增加了一个http请求，但样式可以被浏览器缓存，得到额外的收获。另外一点需要注意：base64是有

损压缩。

     IconFont：图标字体，这是近年来新流行的一种以字体代替图片的技术。它可以适应任何分辨率而不会出现图片模糊问题，与图片相比它具有更

小的容量，更高的灵活性（像字体一样可以设置图标大小、颜色、透明度、hover状态、反转等），IE8以上的浏览器都支持该技术。

    减少脚本与样式表的请求主要原则就是合并。在实际开发中我们遵循模块化的原则将代码分散到许多小文件中，按照软件开发的原则这是完全正确的，

但对于上线页面来说，每一个文件都会产生一个http请求，严重影响性能。和css sprites一样，将这些小文件合并到一个文件中，可以减少http请求的

数量并缩短最终用户响应时间。在合并过程中我们还需要使用工具精简（移除不必要的字符以减小文件大小缩减下载时间）和混淆（除了移除不必要字符

外，还会改写源代码，比如函数和变量名使用更短的标量名）Javascript代码。对于采用AMD或CMD进行模块化开发的同学，在合并过程中通常会将依

赖的其他模块打包到一个文件中，而模板html通常以字符串的方式内联到Javascript文件中。

    2.使用CDN（Content Delivery Network）

    用户与服务器的物理距离对响应时间也有影响。把内容部署在多个地理位置分散的服务器上能让用户更快地载入页面。内容分发网络（CDN）是一组

分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数

（hop）最少的或者响应时间最快的服务器。

   3.减少DNS查找

   域名系统建立了主机名和IP地址间的映射，就像电话簿上人名和号码的映射一样。当你在浏览器输入www.baidu.com的时候，浏览器就会联系DNS解

析器返回服务器的IP地址。DNS是有成本的，它需要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成之前，浏览器无法从主机名下载任何东西。

DNS查找被缓存起来更高效，由用户的ISP（网络服务提供商）或者本地网络存在一个特殊的缓存服务器上，但还可以缓存在个人用户的计算机上。DNS

信息被保存在操作系统的DNS cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有独立于操作系统的自己的cache。只要浏览器在自己的

cache里还保留着这条记录，它就不会向操作系统查询DNS。如果客户端的DNS cache是空的（包括浏览器的和操作系统的），DNS查找数等于页面上

不同的主机名数，包括页面URL，图片，脚本文件，样式表，Flash对象等等组件中的主机名，减少不同的主机名就可以减少DNS查找。

   4.避免重定向   

    重定向：将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的，如：
　　　HTTP/1.1 301 Moved Permanently 
　　　
　　　Location: http://example.com/newuri 
　　　
　　　Content-Type: text/html

浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。 种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求是必须指定一些路径；如果没有路径它就会简单的使用文档根。（主机缺少结尾斜线是不会发生重定向：http://www.baidu.com）缺少结尾斜线发生重定向是很多web服务器的默认行为

   5.页面内部优化

    关于页面内部优化主要方向：样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本

    6.启用缓存 

关于缓存的使用这里介绍两套方案：expires/If-Modified-Since、Cache-Control/Etag；前者是HTTP1.0中的缓存方案，后者

是HTTP1.1中缓存方案，若http头部中同时出现二者，后者的优先级更高。