• content 方面

    • 减少 HTTP 请求：合并文件、CSS 精灵、inline Image
    • 减少 DNS 查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
    • 避免重定向：多余的中间访问
    • 使 Ajax 可缓存
    • 非必须组件延迟加载
    • 未来所需组件预加载
    • 减少 DOM 元素数量
    • 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
    • 减少iframe 数量
    • 不要 404

  • Server 方面

    • 使用 CDN
    • 添加 Expires 或者 Cache-Control 响应头
    • 对组件使用 Gzip 压缩
    • 配置 ETag
    • 尽可能早地发送缓冲区内容(Flush Buffer Early)
    • Ajax使用GET进行请求
    • 避免空 src 的img标签(iframe)

  • Cookie 方面

    • 减小 cookie 大小
    • 引入资源的域名不要包含 cookie

  • css 方面

    • 将样式表放到页面顶部
    • 不使用CSS表达式
    • 减少使用 @import
    • 不使用IE的 filter
    • 尽量避免写在HTML标签中写style属性

  • Javascript 方面

    • 将脚本放到页面底部
    • 将javascript和css从外部引入
    • 压缩javascript和css
    • 删除不需要的脚本
    • 减少DOM访问
    • 合理设计事件监听器
    • 多个变量声明合并

  • 图片方面

    • 优化图片：根据实际颜色需要选择色深、压缩
    • 优化css精灵
    • 不要在HTML中拉伸图片
    • 保证 favicon 小并且可缓存

  • 移动方面

    • 尽量使用css3动画，开启硬件加速
    • 适当使用 touch 事件代替 click 事件
    • 避免使用css3渐变阴影效果
    • 可以用transform: translateZ(0)来开启硬件加速
    • 不滥用Float，Float在渲染时计算量比较大，尽量减少使用
    • 不滥用Web字体，Web字体需要下载，解析，重绘当前页面，尽量减少使用
    • 合理使用requestAnimationFrame动画代替setTimeout
    • CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
    • PC端的在移动端同样适用