一、代码性能
1. JavaScript 性能优化
（1）控制页面数据储存
- 合理设置全局变量
- 减少声明不必要的变量
//减少
fn(){
let a = 1
let b = 2
return a+b
}
//使用
fn(){
return 1+2
}
- 最少化语句数
//减少
fn(){
let a = 1;
let b = 2;
return a+b
}
//使用
fn(){
let a = 1,
b = 2
return a+b
}
- 合理使用闭包
（2）控制数据处理流程
- 合理选择for循环等循环语句
- 因为需要调用外部函数，forEach() 会明显慢
- 合理选择if-else等条件语句
- 条件数量越大，应该越倾向于使用switch，易读性强且速度快
（3）减少重绘和重排
- 触发重排的条件（常见）
- 添加或删除可见的DOM元素
- 元素位置改变：如，添加动画效果
- 元素尺寸改变：如，改变边框宽高、内外边距等
- 内容改变：如，改变段落文字行数、图片替换等
- 浏览器Resize窗口(移动端不会出现)
- 修改默认字体
- 出现滚动条
- 完成重排后，浏览器会根据渲染树重新绘制受影响的部分到页面中。
- 方法
- 合并DOM和样式的修改
- 使用不同类名控制样式切换
- 减少offset等布局信息的获取次数，可一次性获取后保存使用
（4）优化事件使用
- 使用事件委托机制
- 批量或合并添加DOM节点
2. CSS 性能优化
(1) 避免过度层级嵌套
一般情况下，元素的嵌套层级不超过3级。过度的嵌套不止会导致css文件体积变大，影响渲染速度，维护起来还很麻烦，如果要覆盖样式可能需要使用!important。
(2) 提取公共样式
将常用样式提取出来封装成公共样式。
（3）减少页面中空的href和src
二、缓存
1. 本地数据缓存
使用本地储存数据实现缓存，缓存方式包括 localStorage、sessionStorage。
2. HTTP 缓存
（1）强缓存
-
Expires
在 Expires 上可以设置一个过期时间，浏览器通过将其与当前本地时间对比，判断资源是否过期，未过期则直接从本地取即可。
-
Cache-Control
则可以通过给它设置一个 max-age，来控制过期时间。例如，max-age=300 就是表示在响应成功后 300 秒内，资源请求会走强缓存。
（2）协商缓存
协商缓存就是希望能通过先“问一问”服务器资源到底有没有过期，来避免无谓的资源下载。这伴随的往往会是 HTTP 请求中的 304 响应码。
三、页面资源处理
1. JavaScript
- 减少不必要的请求
- 代码拆分和按需加载
- 代码合并
- 减少代码体积
- 压缩代码
- 精简代码书写
2. CSS
- 请求优先级排序
- 代码拆分和按需加载
- 代码合并
- 压缩代码
- 精简代码书写
3. 图片
- 减少请求数量
- 雪碧图
- 懒加载
- 转Base64字符串
- 减小图片尺寸
- 使用合适的图片格式和大小
- 使用svg
- 缓存
