前端性能优化方案索引

下面只是简单说明一下前端性能优化的方法，每种方案具体还需要自己再去仔细推敲。

1.请求和响应

  缓存控制

设置请求头 发送If-Modified-Since以及If-None-Match来询问服务器请求内容是否更新；

设置响应头 Expires可以设置过期时间，Last-Modified最近更新时间。

GZIP压缩

请求头里可以设置Accept-Encoding告知浏览器支持的压缩方式，服务器端采用Content-Encoding作为回应 。

减少HTTP请求

使用CSS Sprites，Data Url等 。

Cookies

发送请求时，Cookies也在请求之中，所以减少Cookies也是减少请求的优化对象。

避免重定向和404

它们会浪费加载请求

CDN

根据用户能访问的最快位置加速访问

favicon.ico

浏览器默认加载的资源，最好能够缓存。

 2.HTML

减少DOM

过多的DOM会影响渲染，加载，执行

CSS和JS放置位置

CSS放在head中，JS放在body闭标签之前

脚本延迟加载

使用defer和async

3.CSS

选择器效率排行如下：

ID选择器>类选择器>标签选择器>相邻选择器>子选择器>后代选择器>通配符选择器>属性选择器>伪类选择器

4.JS

优化建议：修改className而不是Style

  不使用table布局

  修改层次较低的DOM

事件委托：将多个节点上的事件放到父节点上

内存管理：合理释放和缓存内存

5.资源：预加载、压缩大小、懒加载

6.客户端：LocalStorage缓存