前端性能优化

服务端

1. 动静分离

分离动态和静态请求,交由不同的服务器进行处理。比如动态使用Tomcat,静态使用Nginx

2. 动态文件压缩

nginx等服务器都支持动态gzip压缩,可以对html、js、css、图片等进行动态压缩

3. 文件缓存

启用服务器的文件缓存机制

4. 部署

使用 CDN 服务器

客户端

1. 单页面设计

将前端系统设计为单页面模式,可大大减小文件的请求次数,提高页面加载速度,优化用户操作体验

2. 分散请求

2.1 异步加载文件:可以设计模块化加载机制,页面跳转到对应模块时,再加载对应模块的文件

2.2 异步加载数据:将所有请求使用异步处理

3. 减小请求次数

3.1 样式脚本文件合并:将JS文件(CSS文件)进行合并,规则可以自定义,比如按模块,或者整个系统合并为一个

3.2 图片合并:将系统使用到图片文件合理的进行合并

3.3 使用字体图标:可有效减少图标文件大小,减少文件请求次数(其他优点:矢量图标可以随意调节大小不失真,可自定义颜色)

4. 前端缓存

4.1 缓存数据:对已经请求过的数据进行缓存,避免重复加载

4.2 缓存页面:对于已经加载的页面进行缓存,可以采用页面隐藏或内存存储的方式

5. 延迟加载

5.1. 图片(或其他媒体文件)延迟加载

推荐阅读更多精彩内容