一、减少网络请求数量
1. 图片处理
使用精灵图，但首次渲染时，加载一张大图较慢。
base64编码，但会扩大大小
字体图标代替图片
2. 合并文件
合并公共包文件、不同页面单独合并
3. 减少重定向
如果一定要使用重定向，则使用301永久重定向。
4. 使用缓存
5. 避免使用css的@import
6. 避免使用空的src和href
a标签的空的href会重定向到当前页面
form元素空的method会提交表单到当前页面
二、减小资源大小
1. 资源压缩
html压缩
css压缩
js压缩
三、资源加载优化
1. 优化加载位置
css文件放在head标签中，先加载外链，后加载内置
js文件放在body的底部，先加载外链，后加载内置
处理页面和页面样式的js文件，放在head中
body中尽量不写style和script
2. 优化加载时机
异步加载js：defer和async
预加载和懒加载
按需加载
四、优化网络请求
1. CDN分发网络
2. DNS预解析
3. 持久连接、管道连接、并发连接
五、减少重绘回流
1. 样式处理
避免使用层级较深的选择器，或较复杂的选择器
避免使用css表达式
图片设置大小，否则会从0渲染到图片真实大小
元素适当设置高度和最小高度，避免动态渲染时，页面跳动
避免使用table布局
批量处理css
2. DOM处理
批量处理DOM
DOM离线加载
缓存DOM
避免使用嵌套很深的DOM结构
3. 事件代理
同一个父级元素可处理多个子元素事件
4. 防抖和节流
六、webpack优化
1. 动态导入和按需加载
2. 打包公共文件
3. tree shaking
七、性能更好的API
1. 性能更好的选择器
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）