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

[still97]

如图： https://raw.githubusercontent.com/bowuL/myPic/main/%E6%80%A7%E8%83%BD.png,贴上图了，谢谢大家，帮忙看一下，基本属于前端小白

[1423]

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

[still97]

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

[still97]

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

[lisongeee]

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

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

[xudaxian520bsz]

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

[LandCruiser]

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

[xudaxian520bsz]

优化 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 将计算任务从主线程中分离出来，减少对界面渲染的影响。

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

[Zzzz77]

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

[Zzzz77]

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

[still97]

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

[still97]

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

[asdjgfr]

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

[godmiracle]

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

[gadfly3173]

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

[lopda]

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

[Aloento]

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

[ljtfdt]

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

[retrocode]

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

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

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

[dongtingyue]

有个思路是拆成子组件

[Livid]

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