前端性能优化

时间:2021-6-12 作者:qvyue

1、开发构造阶段:在开发时每次修改代码打包需要几分钟,太慢
2、资源加载和页面渲染阶段:打开网站,等了几十秒才看到页面,太慢。
3、操作体验阶段:页面展现后,页面上动画不流畅。滚动页面或者拖拽元素卡顿感严重,甚至页面会崩溃。
一、开发构造阶段:
核心思路是:传输量要小、距离要近、并行传输、资源复用、预先加载。

传输量要小:
  • 构建时HTML压缩
  • 构建时CSS压缩合并
  • 构建时JavaScript压缩合并
  • 构建时图片的压缩
  • 使用精灵图或者字体图标代替图片ICON
  • 服务端开启Gzip,数据在传输之前再次压缩
  • 构建时是使用TreeShaking,减少不必要的代码引入
  • 单页应用路由懒加载,减少首次加载的资源体积
  • 组件懒加载,减少首次加载的资源体积
  • 图片懒加载,减少首次加载的资源体积
距离要近:
  • 静态资源部署到CDN
    CDN(cdn啥,cdn就是缓存服务器,大厂的cdn是由分布在全国各地的服务器组成的网络,也就是使用了tcp分岔,从而提高了云服务的性能(大厂的cdn节点基本上一样多,用大厂的没错))
并行传输

升级到 HTTP2.0
(常见问题:HTTP2.0相比HTTP1.x做了哪些升级?多路复用;二进制分帧;服务端推送;数据流优先级;头部压缩)

资源复用

打包时分包复用

预先加载

浏览器在空闲的时间偷偷预先加载,

页面渲染阶段

CSS在上、JS在下
加载CSS推荐用 link 少用 @import
不重要的外置引入的JS使用defer或者async属性异步加载

操作体验阶段

动画流畅

1、尽量使用 transition 和 animation来实现CSS动画,而不是JS实现动画(运行在主线程对动画的流畅度有影响)
2、动画尽量多用transfrom 和 opacity (无需重绘和回流,性能最好)
3、translateZ/translate3d 开启硬件加速
4、JS动画使用requestAnimationFrame少用setInterval

滚动/移动/操作流畅

DOM增删操作要少

密集型计算

计算密集型操作可以交给WebWorker并发处理

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。