Web性能优化：雅虎35条

对web性能优化，一直知道是个很重要的方面，平时有注意到，但是对于雅虎35条是第一次听说，查了一下，发现平时都有用过，只是没有总结到一块，今天就总结一下吧。 雅虎35条： 1.[内容]尽量减少HTTP请求数 2.[服务器]使用CDN（Content Delivery Network） 3.[服务器]添上Expires或者Cache-Control HTTP头 4.[服务器]Gzip组件 5.[css]把样式表放在顶部 6.[js]把脚本放在底部 7.[css]避免使用CSS表达式 8.[js, css]把JavaScript和CSS放到外面 9.[内容]减少DNS查找 10.[js, css]压缩JavaScript和CSS 11.[内容]避免重定向 12.[js]去除重复脚本 13.[服务器]配置ETags 14.[内容]让Ajax可缓存 15.[服务器]尽早清空缓冲区 16.[服务器]对Ajax用GET请求 17.[内容]延迟加载组件 18.[内容]预加载组件 19.[内容]减少DOM元素的数量 20.[内容]跨域分离组件 21.[内容]尽量少用iframe 22.[内容]杜绝404 23.[cookie]给Cookie减肥 24.[cookie]把组件放在不含cookie的域下 25.[js]尽量减少DOM访问 26.[js]用智能的事件处理器 27.[css]选择 舍弃@import 28.[css]避免使用滤镜 29.[图片]优化图片 30.[图片]优化CSS Sprite 31.[图片]不要用HTML缩放图片 32.[图片]用小的可缓存的favicon.ico（P.S. 收藏夹图标） 33.[移动端]保证所有组件都小于25K 34.[移动端]把组件打包到一个复合文档里 35.[服务器]避免图片src属性为空 35条原则的详细分析 1.减少http请求，使用的最多的就是css雪碧图，图像映射，行内编码（base64编码），雪碧图也要考虑到适量大小，如果页面背景图片过多完全整合到一张图片上导致图片过大也会影响到响应时间；图像映射的话可以用来做导航条；行内图片是使用URL模式把图片嵌入页面，这样会增加html文件的大小，把行内图片放在（缓存的）的样式表中可以避免页面变重，遗憾的是目前主流浏览器不能很好的支持 (后续补充) 参考文章：http://www.tuicool.com/articles/J3uyaa http://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html