前端性能优化方案

一、减少HTTP请求

1.图片地图的使用

2.css sprites

    将多个图片合成一张，减少网络请求数量

3.内联图片

使用data:URL(Base64)模式可以在网页中包含图片但无需额外的http请求(IE可能不支持)。这种做法图片不会被缓存,适合较小的小图标。

4.合并脚本和样式表

多个js和css文件应该合并成一个，减少请求数量

二、使用内容发布网络 CDN(content delivery network)

     内容发布网络是一组分部在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。CDN有助于缓和web流量压力。

三、添加Expires头

四、压缩组件

五、将样式表放到头部

防止白屏和闪烁，造成不好的用户体验

六、将脚本放在底部

 脚本会阻塞后面内容的呈现。脚本会阻塞后面组件的下载。如果将脚本放页面头部，整个页面的呈现和下载都会被阻塞，直到脚本加载完成。

七、避免css表达式

css表达式是动态设置css属性的一种强大(并且危险)的方式。

八、使用外部的javascript和css

纯粹而言，内联快一些。因为外部需要承担多个http请求带来的开销，但是内联无法进行缓存。

九、减少DNS查找

Internet是通过ip地址查找服务器的。由于ip地址很难记，通常使用包含主机名的url来取代它，当浏览器发送请求时，ip地址仍然是必须的。这就是Domain Name System(DNS)所处的角色。DNS将主机名映射到ip地址上，就像电话簿上面将人名映射到电话号码上一样。
通常浏览器查找一个给的的主机名的ip地址要花费20-120毫秒。在DNS查找完成之前，浏览器不能从主机那里下载到任何东西。响应时间依赖DNS解析器、它所承担的请求压力、你与它之间的距离和带宽等。
DNS查找可以被缓存起来以提高性能。

十、精简javascript

压缩合并js

十一、避免重定向

重定向是将用户从一个url重新路由到另一个url。重定向有很多种，301和302是最常用的两种。 304并不真的是重定向，它用来响应get请求，避免下载已经存在于浏览器的数据。
重定向使web页面变慢，它延迟了整个html文档的传输。

十二、移除重复脚本

重复脚本损伤性能的方式有两种：不必要的http请求和执行javascript所浪费的时间。

十三、配置ETag

ETag(Entity Tag)是web服务器和浏览器用于确认缓存组件有效性的一种机制。

十四、使AJAX可缓存