前端优化

• 加载优化

  • 减少HTTP请求数
  • 缓存一切可以缓存的静态资源，使用长Cache
  • 小图片的合并，形成CSS Sprite，并优化图片
  • 合并CSS、JavaScript
  • 压缩HTML、CSS、JavaScript
  • 使用外链式引用CSS、JavaScript
  • 启用GZip
  • 使用首屏加载
  • 使用按需加载
  • 使用滚屏加载
  • 通过Media Query加载
  • 增加Loading进度条
  • 模块的异步加载
  • 图片的懒加载
  • 缩小cookie
  • 避免重定向
  • 异步加载第三方资源

• 脚本优化

  • 减少重绘和回流
  • 缓存DOM选择与计算
  • 缓存列表length
  • 尽量使用事件代理，避免批量绑定事件
  • 对未生成和批量元素使用事件委托，利用冒泡机制
  • 使用文档片段DocumentFragment和innerHTML再appendChild或insertBefor动态添加大量节点到DOM树
  • 使用className和cssText改变样式
  • 尽量使用ID选择器
  • 使用touchstart、touchend代替click

• 渲染优化

  • HTML使用Viewport
  • 减少DOM操作
  • 尽量使用CSS3动画
  • 合理使用requestAnimationFrame动画代替setTimeout
  • 适当使用Canvas动画
  • Touchmove、Scroll事件会导致多次渲染
  • 使用（CSS3 transition、CSS3 3D、transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染

• CSS优化

  • CSS写在头部，JavaScript写在尾部或异步
  • 避免使用图片和iFrame等空的src
  • 尽量避免重设图片大小
  • 图片尽量避免使用DataURL
  • 尽量避免写在HTML标签中写style属性
  • 避免CSS表达式
  • 移除空的CSS规则
  • 正确使用Display的属性
  • 不滥用Float
  • 不滥用Web字体
  • 不声明过多的Font-size
  • 值为0时不需要任何单位
  • 标准化各种浏览器前缀
  • 避免让选择符看起来像正则表达式

• 图片优化

  • 使用智图http://zhitu.tencent.com/
  • 使用（CSS3、SVG、IconFont）代替图片
  • 使用Srcset
  • webP优于JPG
  • PNG8优于GIF
  • 首次加载不大于1048K（基于3秒联通平均网速所能达到值）
  • 图片不宽于640
  • 加载图片注册 Img的onerror事件