Web性能优化总结

减少HTTP请求

页面内部优化；

启用缓存；

减少下载量

网络连接上的优化

减少HTTP请求：

CSS Sprites：将多张图片合并成一幅单独的图片，使用css的background-position属性。

内联图片：通过使用data: URL模式可以在页面包含图片而无需任何额外的请求。

iconFont：字体代替图片

减少脚本与样式表的请求主要原则就是合并。

页面内部优化：

样式表放在顶部，脚本文件放在底部，避免css表达式，把脚本的样式表放在外部，移除重复脚本。

为避免当页面变化时重绘页面元素，浏览器会阻塞页面呈现，直到样式表解析完毕。所以如果将样式表放在顶部并不会减少资源的加载时间，它减少的是页面的呈现时间。

将script标签放在底部

启用缓存：

Etag:服务器用于检查浏览器缓存有效性的机制。如果浏览器要验证一个组件是否有效他会使用If-None-Match将etag字符串传送给服务器。如果ETag是匹配的，服务器端会返回304.

Cache-Control: 使用max-age指令来指定副本被缓存多久。

减少下载量：

开启gzip压缩。HTTP1.1通过使用Accept-Encoding来标识支持的压缩，如果服务器看到这个标识，会使用请求头中的一种方式来压缩响应。并通过Content-Enconding来通知web客户端。压缩的成本在于：服务器需要耗费额外的cpu进行压缩，客户端需要解压缩。所以需要在cpu的消耗和数据块的大小之间进行取舍。

优化网络连接：

使用CDN加速，减少DNS查找，避免重定向