前端优化

前端优化

网络请求方面

1. 减少http请求：

• 合并js文件
• 合并css文件
• 使用 icon图片
• 使用base64表示简单的图片

2. 减小资源体积

• gzip压缩
• js压缩
• css压缩
• 图片压缩

3. 缓存

• DNS缓存
• CDN部署与缓存
• http缓存

渲染和DOM操作方面

1. 优化网页渲染

• css的文件放在头部，js文件放在尾部或者异步
• 尽量避免內联样式

2. DOM操作优化

• 避免在document上直接进行频繁的DOM操作
• 使用classname代替大量的内联样式修改
• 对于复杂的UI元素，设置position为absolute或fixed
• 尽量使用css动画
• 使用requestAnimationFrame代替setInterval操作
• 适当使用canvas
• 尽量减少css表达式的使用
• 使用事件代理

数据方面

1. 图片加载处理

• 图片预加载
• 图片懒加载
• 首屏加载时进度条的显示
  2.异步请求的优化
• 使用正常的json数据格式进行交互
• 部分常用数据的缓存
• 数据埋点和统计