web前端优化

移动端性能陷阱和硬件加速
1.尽可能减少http请求

80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。

　　减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。

　　合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比较麻烦的工作了，但把这个作为站点发布过程的一部分确实可以提高响应时间。

　　CSS Sprites 是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的background-image和background-position属性来定位要显示的部分。

　　图像映射可以把多张图片合并成单张图片，总大小是一样的，但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用，比如导航条。给image map设置坐标的过程既无聊又容易出错，用image map来做导航也不容易，所以不推荐用这种方式。

　　行内图片（Base64编码）用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的）样式表中是个好办法，而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。

　　减少页面的HTTP请求数是个起点，这是提升站点首次访问速度的重要指导原则。

1. 使用CDN（内容分发网络）(其实就是靠钱)

3.添加Expire/Cache-Control头

Http头介绍:Expires,Cache-Control,Last-Modified,ETag

4.启用Gzip压缩

5.将css放在页面最上面

6.将script放在页面最下面

避免在CSS中使用Expressions
把JavaScript和CSS都放到外部文件中
减少DNS查询
压缩 JavaScript 和 CSS
避免重定向
移除重复的脚本
配置实体标签（ETag）
使 AJAX 缓存

工具
YSlow插件
百度统计

参考

雅虎前端优化的35条军规
Yahoo军规