前端优化的根本其实就是减少页面http请求、用最小的开销达到最快的响应速度；当我们持续把web的能力发挥到极致的时候，让网页在最小开销或等待时间下可用依然是同样重要的问题。下面我们就对此做了一些总结说明如何优化网页使用户满意。
一. 优化CSS 和 Javascript传输，在生产环境传输CSS和Javascript，必须采用很多优化措施：
1） 对图片进行无损压缩优化；以及针对项目中的css、js也要做相应的压缩处理，CSS 和 JavaScript 都必须以最小化方式加载，尽可能的减少项目的大小
2） 不要在HTML中写内联脚本 <script> 块。 它们会阻塞页面渲染操作，对页面加载时间带来破坏性的影响
3） 适当地设置缓存标题；针对静态资源，考虑单独配置一个无cookie的子域
4） CSS 必须放在文档的 <head> 部分, Javascript 必须正好放在 </body> 标签的前面
5） CSS 必须串接在一起。显然，只有具备相同媒体类型（例如屏幕或打印）的文件才能合在一起。这里的总体目标是在加载页面的时候减少因为依赖关系而产生的HTTP连接数
6） JavaScript 必须串接在一起。虽然用一个AJAX脚本依赖性管理器（类似于 YUI 3 Loader）可能会比较理想，但实施起来还是挺复杂的。 在这里我还是想推荐单次下载站点用到的所有脚本
二. 优化 JavaScript 执行，在页面加载的时候，通常会有很多脚本等待执行，但你可以设定优先级。下面的顺序就是基于用户反馈设定的优先级：
- 改变页面视觉习性的脚本绝对要首先执行。这包括任何的字体调整、盒子布局、或IE6 pngfix。
- 页面内容初始化
- 页面标题、顶部导航和页脚的初始化
- 绑定事件处理器
- 网页流量分析、Doubleclick，以及其他第三方脚本
三. 图片借助雪碧图形式显示，CSS 精灵（Sprites） 基本上就是把一批图片资源合并成单个图片文件。然后每个部分用 CSS background-position 来展现。典型的 CSS 看起来是这样的：
1 a.expandbox { 2 display:block; 3 width: 75px; 4 height: 15px; 5 text-indent: -999px; 6 overflow:hidden; 7 background: url(../img/sprite.png) no-repeat -50px -5px; 8 }
使用 sprites 可以减少页面大小，也减少了HTTP连接数，这会加速页面加载，有个注意事项就是别把sprite弄得太大，不管是高还是宽超过1000px都会导致用掉大量内存。
四. 对于静态内容，浏览器应该把文件在本地缓存，在合理的前提下，保留尽可能长的时间。应该较长远期缓存的内容包括：
- CSS 和 JavaScript
- 产品图片
- 主题图形
- favicon.ico
- flash .swf's
- 优惠信息图片（可能缓存时间会略短）
为了最佳缓存效果，利用http头部的Expires。下面是一个远期的Expires头，它告诉浏览器这个响应在2015年5月15日之前都无需更新：
Expires: Thu, 15 Apr 2015 20:00:00 GMT
如果你的服务器是Apache，可以使用 ExpiresDefault 指令设置相对当前日期的失效日期。下面的例子设置失效日期为请求时间的一年之后：
ExpiresDefault "access plus 1 year"
http头部的 Expires 必须设为据现在一个月到一年（远期）之间的值。缓存只适用于那个指定的URL，所以文件名或任何资源的改变都会产生一个新的拷贝。很多开发者使用build过程来给它们的资源增加一个版本号或时间戳。每个随后的build会开始一个全新的缓存版本，让你在使用远期缓存日期时无需担心
....持续更新....