前端性能优化

内容部分

• 尽量减少HTTP请求数
  1.合并文件
  2.CSS Sprites
  3.图像映射
  4.行内图片（Base64编码）
• 减少DNS查找
• 避免重定向
• 使ajax可缓存
  1.响应可缓存
• 延迟加载组件
• 预加载组件
• 减少dom元素的数量
• 跨域分离组件
• 尽量少用iframe

iframe
优点：引入缓慢的第三方内容、安全沙箱、并行下载脚本
缺点：代价高昂，即使是空白的iframe、阻塞页面加载、非语义

• 杜绝404

css部分

• 避免使用css表达式
• 选择<link>舍弃@import
• 避免使用滤镜
• 把样式表放在顶部

js部分

• 去除重复的脚本
• 尽量减少对dom访问
  可通过以下进行优化
  1 缓存已访问过的元素索引
  2 先“离线”更新节点，再把他们添加在dom树上
  3 避免用js修复布局问题
• 用智能事件处理器
• 把脚本放在底部

js与css

• 将css和js放在外面
• 压缩js和css

图片

• 优化图片：转化为png格式，再将图片放置在png优化工具上
• 优化css sprite
• 不要使用html缩放图片
• 用小的可缓存的favicon.ico
  缓解favicon.ico的缺点，应确保：足够小/设置合理的有效期

cookie

• 给cookie减肥：清除不必要的cookie、设置合理的有效时间、设置合适的域级别
• 把组件放在不含cookie的域下

移动端

• 所有组件都小于25k
• 组件打包到一个复合文档中

服务器

• Gzip组件
• 避免图片src属性为空
• 配置ETags
• 对Ajax用GET请求
• 尽早清空缓冲区
• 使用CDN(内容分发网络)
• 添上Expires或者Cache-Control HTTP头

详情:转自