前端开发页面的性能优化方案总结

前端优化的根本其实就是减少页面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  }

View Code

使用 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会开始一个全新的缓存版本，让你在使用远期缓存日期时无需担心

....持续更新....