图片

使用 CSS Sprites 对图片优化 简单的说就是”利用 CSSbackground相关元素进行背景图绝对定位”，把多次HTTP 调用变为一次调用：因为CSS Sprites
不要在 HTML 中缩放图片
用工具压缩图片
尽可能的使用PNG格式的图片，因为和GIF相比，PNG有更多的功能和更小的体积
选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)
DNSlookup是很耗费时间的 减少DNS 查找
使用智图( http://zhitu.tencent.com/ )
使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
尽量避免重设图片大小 ，多次重设图片大小会引发图片的多次重绘，影响性能
DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长 合理使用
字体图标
内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
使用cdn，例如七牛
浏览器对单个域名下的请求并发数是有限制的，如果是图片量很多的页面，需要考虑使用多域名。
尽量使用png格式的图片来代替滤镜效果，因为开启滤镜会加大浏览器的开销。
方向代理nginx缓存静态文件
不要对image和pdf等二进制文件进行gzip压缩

css

把 CSS 放到代码页上端
避免 CSS 表达式 凡是只有IE能用的东西，都不是好东西。
使用而不是 @import
避免使用CSS Filter
页面样式尽量交给CSS完成 能不用js就不用js
GPU加速 CSS中以下属性(transitions、transforms、Opacity、Canvas、WebGL、Vide来触发GPU渲染，请合理使用
高级选择器执行耗时长且不易读懂，避免使用
Web字体需要下载，解析，重绘当前页面，尽量减少使用
值为0时不需要任何单位
避免CSS表达式
避免行内样式
CSS写在头部 下载与解析同步
压缩合并
CDN内容分发
空Src会重新加载当前页面，影响速度和效率
移除空的CSS规则　　
Float在渲染时计算量比较大，尽量减少使用
Repaint就是在一个元素的外观被改变，但没有改变布局宽高的情况下发生，如改变visibility、outline、背景色等等。Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，
不要使用frameset，少使用iframe

js

AJAX优化缓存AJAX：异步并不等于即时。请求使用GET：当使用XMLHttpRequest时，而URL长度不到2K，可以使用GET请求数据，GET相比POST更快速。POST类型请求要发送两个TCP数据包，先发送文件头。再发送数据。GET类型请求只需要发送一个TCP数据包
使用cloneNode在外部更新节点然后再通过replace与原始节点互换。
多个节点插入操作，即使在外面设置节点的元素和风格再插入，由于多个节点还是会引发多次reflow。
减少DOM元素数量
别用js操作css样式 或一次操作 别多次 多用更改元素的className。
使用事件委托来减少事件处理器的数量。
保存需要的变量
底部插入script 外部引用script
合并压缩
某些方法的使用， 多用innerHTML 少document.write()。。。
CDN内容分发
动态加载
使用touchstart、touchend代替click，因快影响速度快。但应注意Touch响应过快，易引发误操作
DOM操作触发频繁的reflow和repaint。layout发生在repaint之前，所以reflow相对来说会造成更多性能损耗。reflow就是计算页面元素的几何信息。repaint就是绘制页面元素。对DOM进行操作会导致浏览器执行回流reflow。
使用速度更快的API，比如querySelectorAll和firstElementChild
合理使用requestAnimationFrame动画代替setTimeout