前端性能优化实用方案总结 --- 【B站三十的前端课】

138 阅读1分钟

首屏速度包含哪些内容

大部分情况,电脑执行速度是很快的,所以渲染页面这部分的时间会很短,而加载时间主要是花在从服务器里面请求的资源这段时间。所以首屏加载速度一般卡在白屏时间。而白屏时间占比最大的是资源加载时间。(而且资源加载完成才做JS?)

image.png

优化首屏速度的操作

image.png

缩小首屏资源的体积(立竿见影)

  1. 打包工具的压缩 -> 不需要写代码,直接利用工具压缩
  2. 异步加载 -> 考虑项目中适合做异步加载的,比如体积大但不是马上就需要的功能

例子:项目用到一个图片压缩的功能,这个功能涉及的第三方库比较大,但是这个功能只有当用户点击上传图片并且成功上传之后才会进行压缩,那么完全可以做异步加载。

  1. 更新新版本的库或者按需引入 -> 利用打包工具的tree-shaking(对于不用到的方法不进行打包,旧版本功能可能不支持tree-shaking)

  2. 第三方库少用 -> 比如一些时间格式化,自己写其实不麻烦,不必偷懒

  3. 去除大的base64体积 -> 会扩大JS文件的体积

对于操作卡顿和渲染慢的优化

image.png

image.png

对于vue与react的渲染优化

image.png

利用数据缓存

image.png

具体参考B站“三十的前端课”,这个up主确实还不错的。连接在下面

前端性能优化实用方案总结_哔哩哔哩_bilibili