前端性能优化的常见方式

一、资源加载优化

1、减少资源大小

• 代码压缩——webpack
• Gzip
• 图片压缩：京东发明的DPG格式和谷歌发明的webp格式

2、减少请求次数

• 强缓存expires和cache-control
• 使用base64对小图转码
• localStorage
• 精灵图
• 使用splitChunk提取公共代码

3、加快请求速度

• 协商缓存：last-modified和etag
• CDN部署静态资源
• DNS prefetch：将DNS保存到系统缓存中
• HTTP2：头信息压缩、多路复用、主动推流

4、优化加载时机

• Vue组件懒加载
• 图片懒加载
• 组件库按需加载

二、页面渲染优化

1、优化html代码

• css代码外链放在顶部（不阻塞DOM解析），js代码外链放在底部（阻塞DOM解析，加了defer/async不会）

2、优化css、js代码

• 不要使用代价高昂的属性，比如calc和filter
• 减少重绘和回流
  • 通过修改类名批量修改属性
  • 下线操作：display设置为none再修改属性
  • offset、scroll、client等属性读写分离
  • position使用absolute和fixed使元素脱标
  • 使用css3硬件加速，使transform、opacity、filters等动画不会引起重绘和回流
  • ....
• 使用web worker在后台运行复杂的js代码
• 降低css选择器的复杂度
• 优化长列表（使用虚拟列表）
• 滚动事件等使用防抖和节流优化

3、使用服务端渲染（SSR）