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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

有个思路是拆成子组件

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

打开 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 响应头

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

看了一下首页
在开发者工具界面可以用 +command+P 命令调出面板，输入 Coverage 查看页面初始化渲染时的 js 、css 代码覆盖率，做分包或者延迟加载。
页面中有耗时比较久的长任务，可以分开多个。
主要思路跟楼上的几位也没什么区别

@lsk569937453
https://imgur.com/a/L2TOMpD
兄弟，是这样的，可是我不知道怎么调

@guozhigq 还有，你是怎么可以贴图的，vip?

op ，不如像楼上说的一半一半注释掉代码来看看到底是哪个组件造成问题。

你就先把首页的组件都注释掉，一个一个打开，看看到底是哪里慢

其实渲染没什么问题，时间基本就浪费在加载那些超大的 css 和 js 上面，op 去看看 element-ui 的文档，搞一下按需加载应该就能解决问题了。其他方面的微优化就参考 #21

你用的框架,不要打包进去. 去查一下如何 cdn 加载资源.

https://p.ipic.vip/1sh9yu.png

这样大的框架就用网络资源,而不是打包到自己代码里.

没有搞按需加载导致的吧，建议分析下依赖看看

@still97 #11 这个是 chatgpt 生成的，bro

1 gzip 压缩 ,让请求快点

1 gzip 压缩 ,让请求快点

@xudaxian520bsz 怎么连面试的八股文都来了

二分注释法，首先注释大部分代码，只保留简单的页面，看是不是代码的原因

你 app.js 单文件这么大，可以在 build 的时候按需加载

@kdwnil 谢谢 bro ，我找下入口，或者 bro 可以帮我看一下吗，应该不可以吧

``` Javascript
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
```
找到这个东西了，在 vue.config 里边，注释掉就很快了，这玩意有 v 友用过吗