前端优化

react || vue

• 路由懒加载
• vue 组件异步加载

页面内容

1.减少HTTP
* 通过 webpack 合并JS CSS文件
* 使用 CSS Sprite 合并图片
* 使用 Base64 行内图片
* 用 icon 替换图标

2. 避免重定向

* URL末尾添加 / 例如 http://www.baidu.com/

3. 缓存Ajax请求

* 设置 Cache-Control (相对过期时间)

4. 减少页面元素数量

Javascript

1. JS代码尽量放在页面底部, 避免阻塞页面加载
2. 使用外部的CSS 可以缓存CSS
3. webpack 压缩 js代码

图片

1. CSS Sprite 合并图片
2. Webp 图片
3. 不在HTML中缩放图片
4. 非 webp 图片都要压缩后再使用
5. 使用 Base64 内嵌图片

CSS

1. react vue 可以实现css样式按需加载, 减少每次加载CSS的大小
2. 压缩CSS
3. 使用CSS3属性 例如动画使用 transform transiton animtion

服务器

1. 使用 CDN(内容分发网络CDN是一组分散在不同地理位置的web服务器)
2. 添加 Cache-Control 缓存头
3. 启用 Gzip 压缩 (图片不要gzip压缩)
4. Ajax 尽可能使用 get方法, post方法会多一次请求
5. 避免 空图片标签

移动端

1. 保证所有组件都小于25K