Web性能优化方法

如何提高web性能？

1、减少HTTP请求

一般来说要减少http请求通常从两个方面下手：减少图片的请求、减少脚本文件与样式表的请求

图片的减少通常有两种方式：css sprites、内联图片、IconFont。

CSS Sprites：将多张图片合并成一幅单独的图片，使用css的background-position属性，将html元素的背景图片放到 sprites 图片中的期望位置上。使用这项技术的附加优点是他降低了下载量，合并后的图片比分离的图片和更小，因为它降低了图片自身的开销（颜色表、格式信息等等）。 

内联图片：通过使用data:URL模式可以再页面中包含图片而无需任何额外的请求。缺点就是IE8以下的浏览器不支持这种方式，而IE8在数 据大小上有限制，只能支持23kb以内的数据。对于较小的图片来说可以直接内联到web页面中，但对于大图片内联到页面里会导致页面变大，聪明的做法是使 用css，将内联的图片作为背景使用，并放到外部样式表中，这意味着数据可以缓存在样式表内部。使用外部样式表虽然增加了一个http请求，但样式可以被 浏览器缓存，得到额外的收获。另外一点需要注意：base64是有损压缩。

IconFont：<图标<字 体，这是近年来新流行的一种以字体代替图片的技术。它可以适应任何分辨率而不会出现图片模糊问题，与图片相比它具有更小的容量，更高的灵活性（像字体一样 可以设置图标大小、颜色、透明度、hover状态、反转等），IE8以上的浏览器都支持该技术。在使用IconFont之前，你首先要确定你选则的字体库 是否是收费。

减少脚本与样式表的请求主要原则就是合并。 在实际开发中我们遵循模块化的原则将代码分散到许多小文件中，按照软件开发的原则这是完全正确的，但对于上线页面来说，每一个文件都会产生一个http请 求，严重影响性能。和css sprites一样，将这些小文件合并到一个文件中，可以减少http请求的数量并缩短最终用户响应时间。在合并过程中我们还需要使用工具精简（移除不必 要的字符以减小文件大小缩减下载时间）和混淆（除了移除不必要字符外，还会改写源代码，比如函数和变量名使用更短的标量名）Javascript代码。对 于采用AMD或CMD进行模块化开发的同学，在合并过程中通常会将依赖的其他模块打包到一个文件中，而模板html通常以字符串的方式内联到 Javascript文件中。

2、页面内部优化

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

关心性能的工程师都希望页面能否尽快的展现在用户面前，对于页面中很多内容 的页面我们都希望内容能够逐步加载，为用户提供可视化回馈。而将样式表放在底部会导致浏览器阻止内容逐步呈现。为避免当页面变化时重绘页面元素，浏览器会 阻塞页面呈现，直到样式表解析完毕。所以如果将样式表放在顶部并不会减少资源的加载时间，它减少的是页面的呈现时间。小米主页曾经犯过这样的错误：

将样式表放在底部会阻塞页面的逐步呈现，而将script文件放在页面顶部同样会阻塞页面的逐步呈现。script元素会阻塞后续内容的解析， 因为script中可以同过document.write来更改页面。解决的办法就是将script标签放在页面底部。这样既可以让内容逐步呈现，也可以 提高下载的并行度。如果我们确定不需要document.write那可以为script标签加上asyn属性（Ie中要加上defer）提高并行下载 度。

CSS表达式是ie支持的可以用来动态更改css属性的一种方式，我们不需要了解太多，她的书写方式如下，一旦在产品中发现expression关键字就要彻底消灭。

使用外部脚本和样式这一条，我想凡是有点经验的工程师都会这么干。

移除重复脚本：这条说的主要是避免在页面中多次加入同一份Javascript代码，如果我们的开发中有依赖管理的方式比如AMD、CMD，基本不会出现这种情况。

3、启用缓存

关于缓存的使用这里介绍两套方案：expires/If-Modified-Since、Cache-Control/Etag；前者是HTTP1.0中的缓存方案，后者是HTTP1.1中缓存方案，若http头部中同时出现二者，后者的优先级更高。

If-modified-since的方式通常被称为条件Get。浏览器缓存中保存了一个文件的副本，但需要向服务器询问此副本是否可用。 If-Modified-Since是浏览器将最后修改时间发送给服务器，服务器相应头中Last-Modified进行对比；若If- Modified-Since <= Last-Modified 则浏览器读取本地副本。此时响应状态为304 Not Modified, 并不在发送响应体。

Expries：虽然使用条件GET和304响应能够节省时间，但浏览器跟服务器端仍然要发送一次请求进行确认。通过明确设置副本的过期时间可 以避免条件GET。当浏览器发现响应头中的expires时，会将过期时间和文件一起保存到缓存中去。在过期之前一直从缓存中读取。expires头使用 一个特定的时间来指定缓存的有效期，他要求浏览器与服务器时间完全一致。而且一旦过期，服务器端配置中需要重新设顶一个过期时间。

ETag（实体标签）：是服务器用于检查浏览器缓存有效性的一种机制。ETag在HTTP1.1中引入，ETag是唯一标识了一个组件的一个特 定版本的字符串。唯一的格式约束是这个字符串必须使用双引号。如果浏览器要验证一个组件是否有效他会使用If-None-Match将etag字符串传送 给服务器。如果ETag是匹配的，服务器端会返回304.（如果实体数据需要根据User-Agent或Accept-Language来改变 时，ETag提供了更高的灵活性）。对于使用服务器集群的网站来说，从一台服务器到另一台服务器，ETag通常是无法匹配的。这是ETag的问题。而且即 便同时使用If-Modified-Since和If-None-Match也并不能达到预期效果。解决方法总是有的：自定义Etag格式

　4、减少下载量

减少下载量最有效的方式就是开启gzip压缩，

5、优化网络连接

网络连接的优化主要有三个规则：使用CDN加速、减少DNS查找、避免重定向

CDN：CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的web server。 这缩短了资源的传输响应时间，有效提高web性能。

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。浏览器会首先根据页面的主机名进行域名解析，在有ISP返回结果之前页面不会加载任何内容，所以减少DNS查找可以有效降低等待时间。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching server，本地机器操作系统的缓存（如windows上的DNS Client Service），浏览器。IE的缺省DNS缓存时间为30分钟，Firefox的缺省缓冲时间是1分钟。 我们能做的是尽量减少一个页面的主机名，但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究，最好将主机名控制在2-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服务器的默认行为。需要在服务器端设置方可消除。以下图片是豆瓣的一 个url请求：

雅虎的14条优化规则在很长的一段时间里发挥着重要作用，随着技术的发展，单单这十四条原则已经不能够满足前端性能优化。在一些大公司出现了前端工程化这一概念，详细内容可以参考一下这篇文章：前端性能优化工程化进阶

原文：http://developer.51cto.com/art/201506/481161_1.htm