V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
still97
V2EX  ›  程序员

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

  •  
  •   still97 · 188 天前 · 3212 次点击
    这是一个创建于 188 天前的主题,其中的信息可能已经有所发展或是发生改变。
    37 条回复    2023-08-18 13:45:22 +08:00
    1423
        1
    1423  
       188 天前
    OP 帖子的图片加载超级超级超级慢 ,OP 帮忙看下问题
    如图:
    still97
        2
    still97  
    OP
       188 天前
    @1423 加上了加上了,快来看一看
    still97
        3
    still97  
    OP
       188 天前
    主要问题在于,不是第一次打开慢,是过了一段时间打开,或者回到首页,再进入又会特别慢了
    lisongeee
        4
    lisongeee  
       188 天前
    贴图片链接的时候记得换行,v2 直接把你链接后面的逗号以及后面的中文字符识别为一个整体了

    https://raw.githubusercontent.com/bowuL/myPic/main/%E6%80%A7%E8%83%BD.png
    xudaxian520bsz
        5
    xudaxian520bsz  
       188 天前
    都重排了(回流)当然性能较差,你不会手动操作 DOM 了吧??
    LandCruiser
        6
    LandCruiser  
       188 天前
    很难判断是什么问题,得看代码。重排重绘是会消耗性能,但是不至于跟你这个一样。
    xudaxian520bsz
        7
    xudaxian520bsz  
       188 天前
    优化 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
        8
    Zzzz77  
       188 天前   ❤️ 1
    兄弟重点搞错了,这和 V 不 Vue 没关系,就绝大部分业务而言,当你出现非自愿加载的性能问题时,先考虑业务逻辑是否有问题,其次看看是否存在 bug 。
    前者你得说出来大家才好帮你判断,后者不看代码我们也帮不了你,你要实在不会排查的话,可以使用终极 debug 大法:二分注释法
    Zzzz77
        9
    Zzzz77  
       188 天前
    @Zzzz77 #8 ‘非自愿加载’ --> ‘非资源加载’
    still97
        10
    still97  
    OP
       188 天前
    @Zzzz77 重点不是 Vue ,写出 Vue 只是说明一个语言环境,方便 V 友分析问题,你说的这种方式,跟业务逻辑有关系吗?这个图片上写的是`强制重排`,具体会是什么问题呢?
    still97
        11
    still97  
    OP
       188 天前
    @xudaxian520bsz 我可以怎么排查问题呢? bro
    asdjgfr
        12
    asdjgfr  
       188 天前
    godmiracle
        13
    godmiracle  
       188 天前
    浏览器性能分析啊,看是哪块消耗时间比较多
    gadfly3173
        14
    gadfly3173  
       188 天前 via Android
    首先你没用 gzip/brotli ,导致我访问的时候花了四秒多来加载你的巨大的 css 和 vendors 。
    其次,考虑到你的 vendors 大小,你是不是没有做组件按需加载,即访问不到组件的页面不加载对应的 js 。
    lopda
        15
    lopda  
       188 天前
    你的这个图,让人如何排查😂。 盲猜吗
    Aloento
        16
    Aloento  
       188 天前   ❤️ 1
    xudaxian520bsz #7
    @Livid @Kai @Olivia @GordianZ @sparanoid GPT
    ljtfdt
        17
    ljtfdt  
       188 天前
    代码中应该有比较耗时的 js 执行代码
    retrocode
        18
    retrocode  
       188 天前
    检查下页面的 vue 文件中是否有 activated() 和 destroy() 函数, 其中是否有重新加载类操作, 把某些数据干掉 或者 重新读取了, 同时这些数据在页面上有展示

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

    具体需要根据得代码和情况走, 你可以 在控制台 打开 渲染 页面, 把 突出显示绘制区域 勾选上, 闪烁的地方就是重新渲染的, 你看下是否有不该重新渲染的重新渲染了
    dongtingyue
        19
    dongtingyue  
       188 天前
    有个思路是拆成子组件
    Livid
        20
    Livid  
    MOD
       188 天前   ❤️ 2
    @Aloento 谢谢,7 楼那个用 AI 灌水的账号已经被彻底 ban 。
    karott7
        21
    karott7  
       188 天前
    打开 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 响应头
    lsk569937453
        22
    lsk569937453  
       188 天前
    100%是前端代码有 bug ,找个前端大佬可能几分钟就能定位到了。。。
    上次我把 styled-components 的 css 定义写在 react hooks 里面,导致界面一直重绘,卡的一 P 。我自己看了半天也不知道什么错误。找了个前端大佬,看源代码调试一把,10 分钟不到就定位到问题了。
    guozhigq
        23
    guozhigq  
       188 天前

    看了一下首页
    在开发者工具界面可以用 ⬆️+command+P 命令调出面板,输入 Coverage 查看页面初始化渲染时的 js 、css 代码覆盖率,做分包或者延迟加载。
    页面中有耗时比较久的长任务,可以分开多个。
    主要思路跟楼上的几位也没什么区别🤣
    still97
        24
    still97  
    OP
       188 天前
    @lsk569937453
    https://imgur.com/a/L2TOMpD
    兄弟,是这样的,可是我不知道怎么调
    still97
        25
    still97  
    OP
       188 天前
    @guozhigq 还有,你是怎么可以贴图的,vip?
    liangtao927190
        26
    liangtao927190  
       188 天前
    op ,不如像楼上说的一半一半注释掉代码来看看到底是哪个组件造成问题。

    你就先把首页的组件都注释掉,一个一个打开,看看到底是哪里慢
    kdwnil
        27
    kdwnil  
       188 天前 via Android
    其实渲染没什么问题,时间基本就浪费在加载那些超大的 css 和 js 上面,op 去看看 element-ui 的文档,搞一下按需加载应该就能解决问题了。其他方面的微优化就参考 #21
    M003
        28
    M003  
       188 天前
    你用的框架,不要打包进去. 去查一下如何 cdn 加载资源.

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

    这样大的框架就用网络资源,而不是打包到自己代码里.
    grit136907108
        29
    grit136907108  
       188 天前
    没有搞按需加载导致的吧,建议分析下依赖看看
    morgan1freeman
        30
    morgan1freeman  
       188 天前
    @still97 #11 这个是 chatgpt 生成的,bro
    luvxy
        31
    luvxy  
       188 天前
    1 gzip 压缩 ,让请求快点
    luvxy
        32
    luvxy  
       188 天前
    1 gzip 压缩 ,让请求快点
    xinchao
        33
    xinchao  
       188 天前
    @xudaxian520bsz 怎么连面试的八股文都来了
    huangqihong
        34
    huangqihong  
       188 天前
    二分注释法,首先注释大部分代码,只保留简单的页面,看是不是代码的原因
    caosen
        35
    caosen  
       188 天前
    你 app.js 单文件这么大,可以在 build 的时候按需加载
    still97
        36
    still97  
    OP
       187 天前
    @kdwnil 谢谢 bro ,我找下入口,或者 bro 可以帮我看一下吗,应该不可以吧
    still97
        37
    still97  
    OP
       186 天前
    ``` javascript
    postcss: {
    plugins: [require("tailwindcss"), require("autoprefixer")],
    },
    ```
    找到这个东西了,在 vue.config 里边,注释掉就很快了,这玩意有 v 友用过吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4079 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:12 · PVG 13:12 · LAX 21:12 · JFK 00:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.