前端性能优化
1.网络请求
DNS 查询优化
- 减少请求域名数量
减少请求数
- 合并文件 css
- 合并 js
-
Sprites（精灵图）
spirits.png
spirit.png
- 小图标进行 base64转换
减小请求体积
-
压缩 HTML CSS JS
-
浏览器同域并发限制（增加请求域名量）
-
Cookie 隔离
本域.png
非本域.png
非本域图片请求头中默认携带的无用信息数量明显少了很多
- 开启gzip
- 使用更小体积的图片（svg, webp）
- 减少cookie大小
2.静态资源
懒加载
- vue 路由懒加载
- 图片懒加载
预加载
- 预加载相关资源
- 公共数据抽离，缓存
3.首页渲染
减少等待时间
- 页面占位符
- 预览图片
减少使用拖慢页面的元素
- iframe标签
- eval
- @import
非当前页面元素在渲染完页面后加载
- 埋点
- 图片预渲染
- 相关页面预渲染
4.页面交互
减少操作页面的次数
- 合并修改页面的操作
- 合并css修改
- 采用更合适的事件绑定模式
减少重绘回流范围
- 避免页面跳转
- 只更新相关元素
网友评论