前端项目渲染超级超级超级慢 VUE，大佬帮忙看下问题

超级

Vue

大佬

渲染

37 条回复 • 2023-08-18 13:45:22 +08:00

1

1423

2023-08-16 13:49:12 +08:00

OP 帖子的图片加载超级超级超级慢，OP 帮忙看下问题
如图：

2

still97

OP

2023-08-16 13:50:59 +08:00

@1423 加上了加上了，快来看一看

3

still97

OP

2023-08-16 13:53:48 +08:00

主要问题在于，不是第一次打开慢，是过了一段时间打开，或者回到首页，再进入又会特别慢了

4

lisongeee

2023-08-16 14:06:25 +08:00

贴图片链接的时候记得换行，v2 直接把你链接后面的逗号以及后面的中文字符识别为一个整体了

https://raw.githubusercontent.com/bowuL/myPic/main/%E6%80%A7%E8%83%BD.png

5

xudaxian520bsz

2023-08-16 14:12:41 +08:00

都重排了（回流）当然性能较差，你不会手动操作 DOM 了吧？？

6

LandCruiser

2023-08-16 14:17:44 +08:00

很难判断是什么问题，得看代码。重排重绘是会消耗性能，但是不至于跟你这个一样。

7

xudaxian520bsz

2023-08-16 14:19:38 +08:00

优化 Vue 应用程序的性能是一个重要的课题，它可以提升用户体验，减少资源消耗，并使应用更具响应性。下面是一些优化 Vue 应用性能的方法：

1. **使用生产环境构建：** 在部署应用程序之前，确保使用 Vue 的生产环境构建，它会自动进行代码压缩、优化和去除开发时的警告。

2. **懒加载路由：** 对于大型应用，可以考虑使用 Vue Router 的懒加载特性，按需加载路由组件，而不是一开始就加载所有组件。

3. **异步组件：** 使用 Vue 的异步组件特性，只在组件需要渲染时才加载相应的组件，减少初始加载的内容。

4. **使用 v-if 替代 v-show：** 当元素初始时不需要渲染时，使用 `v-if` 而不是 `v-show`，`v-if` 会在需要时创建或销毁元素，而 `v-show` 则只是控制显示/隐藏。

5. **避免不必要的计算属性：** 计算属性会在其依赖项变化时重新计算。确保只计算实际需要的内容，避免不必要的计算。

6. **合理使用 watch 和 computed：** 对于需要异步操作的情况，使用 `watch`，对于需要缓存结果的计算，使用 `computed`。

7. **避免在模板中使用过多的复杂表达式：** 复杂的表达式可能会导致模板渲染性能下降，考虑将复杂逻辑移到计算属性中。

8. **使用 v-for 时提供 key：** 在使用 `v-for` 进行循环渲染时，确保为每个元素提供一个唯一的 `key`，以帮助 Vue 更有效地跟踪元素的状态变化。

9. **使用 Vuex 来管理状态：** 对于大型应用，使用 Vuex 来管理状态可以更好地组织数据流，提高代码的可维护性和可预测性。

10. **使用 CDN 或静态资源服务器：** 将一些通用的库（如 Vue 、Vue Router 、axios 等）托管在 CDN 上，可以减少应用的加载时间。

11. **图片懒加载：** 对于页面中的图片，可以使用懒加载来延迟加载图片，提高初始加载速度。

12. **性能监测和分析工具：** 使用工具如 Vue Devtools 、Lighthouse 等进行性能监测和分析，以帮助你识别潜在的性能问题。

13. **使用服务端渲染（ SSR ）：** 对于需要更快的首次渲染速度和更好的 SEO 的应用，可以考虑使用 Vue 的服务端渲染。

14. **使用 Web Workers：** 对于一些计算密集型任务，可以考虑使用 Web Workers 将计算任务从主线程中分离出来，减少对界面渲染的影响。

综合考虑，性能优化是一个综合性的工作，需要结合应用的具体情况和需求来进行调整。在优化过程中，需要进行性能测试和监测，以确保改进的策略真正带来了性能提升。

8

Zzzz77

2023-08-16 14:25:55 +08:00

1

兄弟重点搞错了，这和 V 不 Vue 没关系，就绝大部分业务而言，当你出现非自愿加载的性能问题时，先考虑业务逻辑是否有问题，其次看看是否存在 bug 。
前者你得说出来大家才好帮你判断，后者不看代码我们也帮不了你，你要实在不会排查的话，可以使用终极 debug 大法：二分注释法

9

Zzzz77

2023-08-16 14:27:12 +08:00

@Zzzz77 #8 ‘非自愿加载’ --> ‘非资源加载’

10

still97

OP

2023-08-16 15:13:52 +08:00

@Zzzz77 重点不是 Vue ，写出 Vue 只是说明一个语言环境，方便 V 友分析问题，你说的这种方式，跟业务逻辑有关系吗？这个图片上写的是`强制重排`，具体会是什么问题呢？

11

still97

OP

2023-08-16 15:14:28 +08:00

@xudaxian520bsz 我可以怎么排查问题呢？ bro

12

asdjgfr

2023-08-16 15:26:34 +08:00

排查一下代码逻辑的实现
https://gist.github.com/paulirish/5d52fb081b3570c81e3a
翻译版： https://github.com/Godiswill/blog/issues/3

13

godmiracle

2023-08-16 15:27:55 +08:00

浏览器性能分析啊，看是哪块消耗时间比较多

14

gadfly3173

2023-08-16 15:29:12 +08:00 via Android

首先你没用 gzip/brotli ，导致我访问的时候花了四秒多来加载你的巨大的 css 和 vendors 。
其次，考虑到你的 vendors 大小，你是不是没有做组件按需加载，即访问不到组件的页面不加载对应的 js 。

15

lopda

2023-08-16 15:29:41 +08:00

你的这个图，让人如何排查😂。盲猜吗

16

Aloento

2023-08-16 15:35:12 +08:00

1

xudaxian520bsz #7
@Livid @Kai @Olivia @GordianZ @sparanoid GPT

17

ljtfdt

2023-08-16 15:35:15 +08:00

代码中应该有比较耗时的 js 执行代码

18

retrocode

2023-08-16 15:48:01 +08:00

检查下页面的 vue 文件中是否有 activated() 和 destroy() 函数, 其中是否有重新加载类操作, 把某些数据干掉或者重新读取了, 同时这些数据在页面上有展示

重排是布局页面(页面内容/div 长宽有变化)重新计算了, 你这 5 秒有点过分了, 盲猜是全 flex 布局, 局部页面重新加载导致整个页面重新渲染了

具体需要根据得代码和情况走, 你可以在控制台打开渲染页面, 把突出显示绘制区域勾选上, 闪烁的地方就是重新渲染的, 你看下是否有不该重新渲染的重新渲染了

19

dongtingyue

2023-08-16 15:58:29 +08:00

有个思路是拆成子组件

20

Livid

MOD

2023-08-16 16:04:39 +08:00

2

@Aloento 谢谢，7 楼那个用 AI 灌水的账号已经被彻底 ban 。

21

karott7

2023-08-16 16:16:21 +08:00

打开 network 面板，点击 all 查看所有资源加载情况，有一个 514kb 的 js 文件，一个 3.7M 的 css 文件，一个 2.6M 的 js 文件，这三个文件平均要 2.5s ，还有一个 449kb 的 css 文件
盲猜用了饿了么组件库，没有按需加载，还有一些 js 库应该引入方式有问题导致全部加在，比如你只用了几个 lodash 方法，但是打包了所有 lodash 方法，引入 lodash 相关方法最好用 import debounce from 'lodash/debounce'

先从按需引入开始吧，这个做好了至少解决了一半的问题，然后图片换成 webp 格式，所有 js/css/woff2/图片等资源文件增加响应头 Cache-Control: public, max-age=31536000 ，html 文件增加 Cache-Control: no-cache 响应头

22

lsk569937453

2023-08-16 16:16:42 +08:00

100%是前端代码有 bug ，找个前端大佬可能几分钟就能定位到了。。。
上次我把 styled-components 的 css 定义写在 react hooks 里面，导致界面一直重绘，卡的一 P 。我自己看了半天也不知道什么错误。找了个前端大佬，看源代码调试一把，10 分钟不到就定位到问题了。