web前端性能优化

1、减少HTTP请求次数

• 图片地图
• css  sprites 合并图片，通过制定css的background-image和background-position来显示元素。
• 合并脚本和样式表

2、使用内容分发网络

3、添加Expires头

4、压缩组件

• 压缩html，js，css，xml

5、网站样式和脚本

• 讲样式表放在顶部
  • 可视性回馈的重要性（->用户）
  • 将没有立即使用的css放在底部是错误的做法
  • 无样式内容的闪烁
  • css的最佳位置link放在文档head中
• 将脚本放在底部
  • 并行下载
  • 脚本阻塞下载
• 使用外部javascript和css

6、减少DNS查找、避免重定向

7、精简js移除重复脚本

• 压缩js，减少js文件大小
• 除了压缩js，还会修改代码，把函数变量名改为更短的字符串。（缺点容易引入错误，难以阅读，难以调试）
• 除去重复脚本（在没有缓存情况下IE7将产生2次HTTP请求，IE8以上则不会）

8、配置ETag（http://www.chinaz.com/web/2015/0417/399752.shtml）

• 什么是ETag？
  • 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。

9、图像和Cookie优化

• 图像基础知识
  • gif：适用于动画，eg：loading图片
  • jpg：可以设置0-100，数字越小质量越差
  • png：png8，png24，png32；png8表示支持2-8种颜色，是最通用的web图片格式
  • 选择jpg还是png：图片较大png比jpg大；图片较小颜色单一的，可以使用png
• 优化cookie
  • 浏览器对单个cookie大小不超过4KB，同一域名下cookie数量不超过50个
  • 减少cookie的体积

参照http://www.chinaz.com/tags/Webqianduanxingnengyouhua.shtml