前端优化的建议

80 阅读1分钟

1.http相关

减少http请求,采用http2请求。

2.cdn相关

去离用户最近的一个服务器获取资源

3.图片相关

图片过大:
a.将图片通过 tinypng.com/ 进行压缩。
b.多用jpg,少用png。
c.图片加载慢: 使用图片懒加载,如vant框架,只有滚动到对应位置才显示图片
d.webpack中配置url-loader去解析图片,对于小于20kb的图片采用base64格式,可以减少图片请求 配置image-webpack-loader对图片体积进行压缩

4.动画相关

卡顿:
使用requestAnimationFrame,代替setTimeout

5.vue相关

组件加载:使用路由懒加载,只加载当前页面的组件。
dom的显示隐藏:用v-if作用于少更新的dom,用v-show用于频繁更新的dom
对于ui框架:我们只需要按需引入组件。
对于可复用的数据可以用componsition api定义,减少代码体积。

6.dom 操作

减少回流操作,若要操作,多用class或者批量d

7.存储

对于固定数据我们缓存在cookie或者localstorage中避免过多的请求接口。
比如:用户手机号,用户头像,默认的界面风格等等等