w3h5

web前端优化,减少http请求,提高页面加载速度

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

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

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

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

web前端优化,减少http请求,提高页面加载速度 经验总结 第1张

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

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

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

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

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

web前端优化,减少http请求,提高页面加载速度 经验总结 第2张

web前端优化,减少http请求,提高页面加载速度 经验总结 第3张

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军规


赞 (0)
分享到: +More |

评论 沙发

换个身份