减少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查找,避免重定向