前端性能优化小技巧

154 阅读1分钟

项目在迭代的过程中,经过不断的完善,常常会出现卡顿、启动慢之类的问题。归纳一下,我常用的一些性能优化小技巧。

资源压缩

开启GZIP,注意GZIP需要本地和ng一起配置才有用。

懒加载

图片懒加载,滚动到可视区域再渲染图片。 JS懒加载,组件懒加载。

使用缩略图

文件多的页面,用懒加载和缩略图展示,预览的时候用再展示大图。 缩略图我用华为云自带的压缩。

长列表优化

如果列表太长,可以使用分页加载或者使用虚拟dom列表(只渲染可视区域内的内容)。

CDN

把一些静态资源放公司服务器上面,静态加载。

网上也有很多免费的CDN,但是公司用的话,最好自己搭。我曾经遇见过第三方挂了,公司系统崩溃的生产BUG,所以不太推荐使用第三方,最好还是用自己的。

防抖节流

防抖和节流是两个不同的动作。

防抖:将高频率触发的请求降低为只执行最后一个函数。

节流:将原来的高频率的执行,调整为稳定的低频执行。

像页面的搜索,可以用防抖去触发方法,降低不必要的HTTP请求频次。


面试过程中,面试官也很喜欢问如何性能优化或者首页白屏时间怎么优化,所以还是要多学习一下,怎么优化。有备无患。