前端极限性能优化合集

Back-End

1. 使用Nignx做转发

• 负载均衡
• 限制对于资源路径的访问
• 对静态资源自启动开启GZip压缩
• 配合分布式服务器架构

2. Redis，Vamish做缓存

• 减少对数据库层面的读写操作
• 缓存静态数据，配置，资源
• 并发量大时，减少服务器压力

3. 字段加密，字段压缩
4. 静态资源分离，发布自动化

Front-End

1. JS CSS文件极简化，减少文件大小
2. 真正意义上将样式，配置逻辑embed到页面中，从而减少http请求
3. 图片的压缩，静态资源CDN化

• WebP格式（Web图片格式的未来趋势）

4. 视图层使用js模板，或者完整的View框架（React），以Lazyload的形式分块加载
5. CSS JS选择器ID化
6. PC站点和移动端完全分开，拒绝响应式

• 基本没有大公司选择用响应式
• 多余的HTML结构和CSS样式
• 同样的图片需要两套
• 没人闲的蛋疼去缩放屏幕
• 两套事件绑定
• 资源体积文件过大，不利于优化

7. 使用LocalStorage，存储用户状态，组件状态，非JS或者模板
8. 给视图根本元素定义固定的Height和Width
9. DNS网络解析加速，利用好站长工具