前端性能优化

一、图片

1. 图片地图

2. css sprites

3. 图片格式的选择（png 、jpg 、webp 、gif 、apng 、svg……）

4. 内联图片（数据量小的图片）

5. 图片懒加载、图片占位符

6. 对图片进行无损优化（删除没有出现或很少出现的颜色，合并相近的颜色）、有损优化（删除无用数据信息）

二、CSS部分

1. 精简代码（删除重复代码、空格、换行符）、压缩代码

2. 选择器层级不要太复杂（CSS是从右往左解析的）

3. 尽量不要使用多个样式表（即合并样式表）

4. 将外部样式文件放在文档开头，避免白屏现象

三、JS部分

1. 精简代码（删除重复代码、空格、换行符）、压缩代码

2. 控制作用域的深度（eg. 延长作用域）

3. 流控制（条件判断、高效的循环）

4. 事件委托

5. 条件允许的情况下，合并脚本文件

6. 异步加载脚本，防止阻塞页面渲染（放在文档最后、defer/async、XHR + eval 、动态生成标签），但要保证脚本的执行顺序，即要考虑脚本之间的依赖情况

7. 避免对DOM的过多操作 、过多的循环 、过多的递归

8. 注意数据的存储和读取方式（主要是对象和数组）

9. 注意对无用变量的主动清除，例如用 delete 关键字删除对象中的无用变量

三、网络部分

1. 资源上CDN（内容发布网络）

2. 提供两个主机名，提高并行下载量，加快资源的下载

3. 尽可能减少HTTP请求次数（合并样式表、脚本）

4. 资源缓存（cache-controls: max-age / expires | Last-Modefied / If-Modefied-Since、Etag / If-none-match）

5. 避免重定向

6. 减少DNS的查找

7. 在请求、相应头中设置对应的压缩格式，对传输数据进行压缩

8. 减小cookies的大小