大家帮忙看看我做的页面是不是有点卡，感觉效果加的有点多了...

[jimmyC]

起因是有人说网站很卡，但是我在自己设备测试没有问题，真的不想删掉太多效果，有点难平衡了

https://about.jimmy-blog.top/

[potatowish]

ai 做的吧…… 链接点不开，渐变色加圆角，花里胡哨的

[gscsnm]

mbp 上 chrome 开你页面，gpu 100%

[jimmyC]

@potatowish 链接可以点开吧，确实有点花了，在考虑精简了

[jimmyC]

@gscsnm 好滴，我回头看看

[Pipecraft]

确实很卡，滚动条往下滚不动 😳

[Pipecraft]

浏览器的 GPU process 干到 600% 以上

[renmu]

肉眼可见的卡和掉帧

[evan1]

我的显卡是 5070ti ，感觉很丝滑。但是你这个 gpu 占用确实高。

[zaunist]

很卡

[noahhhh]

手机浏览卡爆了，我把底栏删了好一点，不知道你这用的是啥，网页没必要上实时模糊

[zhucelws]

很奇怪，我这里怎么一点也不卡，非常流畅，设备是 macbook air M2

[leic4u]

打开前：一个博客而已
打开后：（ 2060 被拉到 100%，风扇声瞬间起飞）你搁这帮我烤机呢？

[supuwoerc]

滚动掉帧明显，m1 的 mbp

[jackOff]

很卡

[yeelone]

卡，好卡。 打回重做

[ladypxy]

何止是卡。。。简直是谋杀浏览器

[villivateur]

Windows + Firefox + 2060 移动版显卡，滚动很流畅不卡，但是风扇呼呼呼的

[devinww]

卡。

[caiqichang]

不卡，但是 gpu 上 70%-80%

[b821025551b]

我的 3080 占用 20%，可以加大力度

[JoeJoeJoe]

M4Max 倒是不卡, 但是有个 bug, 我点关于, 指示器跳到了作品

[InDom]

不卡啊, 不要听他们乱说, 网上发声的都是少数人的声音被放大了. 没问题的是不会说话的, 我觉得做的挺好的, 上面这些说卡的估计是看你做了这么好眼红了, 现在谁不是人手一个 5090, 打开个网页都卡还玩个锤子 3A 大作. 所以, 请加大力度, 以后我买显卡测试性能就靠你了.

[crocoBaby]

卡成 ppt

[6j1A6v70lEv5n2U2]

前端不是堆特效……

[Akuta]

我只能说想要做出这效果是不需要这么高的性能的

[ramcasky]

花里胡哨 吃 GPU 吃满了~

[youyouzi]

把你那该死的 canvas 删了吧：
position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; z-index: -1;

[jimmyC]

@youyouzi 好的，听劝

[jimmyC]

@noahhhh 液态玻璃效果，好的

[zepc007]

iOS26 效果让你玩明白了

[Akuta]

可以优化的点：
1. canvas
2. requestAnimationFrame 的计算
3. 几个 infinity 的 animate 包括 bounce 、pulse 、shine

[gmfan]

卡成 ppt 了

[nightcatsama]

卡得一

[meetguardian]

reactbits 里的背景动画大多都很吃性能。

[lswlray]

GPU 使用率从 3%上升到 35%左右
温度从 55 上升到 65 左右

[bigtear]

很卡，你用了啥，这个效果不用 GPU 都能做出来吧

[jimmyC]

@bigtearreactbits 组件库，这个液态玻璃，加上背景动画，还有自己搞的卡片毛玻璃，拉满啦！！！！

[jimmyC]

@bigtear 这个：reactbits 组件库，这个液态玻璃，加上背景动画，还有自己搞的卡片毛玻璃，拉满啦！！！！考虑转成 GPU 性能测试网站了🤣

[nekoneko]

windows 系统 , 没感觉卡, 但是响应稍微有些慢
CPU 14700KF 没动静, GPU 4070S 没动静

[qxmqh]

你顶部的哪个菜单颜色 灰色的 叠加你背景色之后 直接看不清楚。

[jimmyC]

@qxmqh 换成谷歌浏览器看看，有的浏览器不支持

[ZColin]

肉眼可见的卡爆，对于轻薄本集成显卡完全是核打击

[youyouzi]

@jimmyC #28 惨不忍睹，页面酷炫的前提是性能啊，基本盘都丢了

[coolcoffee]

M1 Max 表示还行，就是 GPU 使用率从 0%升到了 65%而已。

看了楼主的页面，我才明白为啥苹果官网各种花里胡哨的效果都使用的是背景视频了。不是不能做，而是用户还没换电脑就被卡的关页面了。

[ODESZA]

我建议你直接做成烤鸡软件得了。

[kokerkov]

我很老的机器都不卡，为啥呢？ E5-2660, 750Ti.

[nestao]

@JoeJoeJoe #21 这个 bug 我点了一下，是任何两个标签在往复点击时，会出现绿色标识不切换的问题

[jimmyC]

@nestao 谢谢你，我试出来了

[surbomfla]

20 帧左右的样子，卡死倒是不至于，i5 12 代核显

[KillPaul]

我看过比你这个炫酷有设计感得多的，都没你这个卡

[asdjgfr]

都快 5 年的笔记本了打开以后 cpu 0% gpu 0%，风扇一点反应都没有，看来 x86+英伟达还是强啊

[yifeia]

滑动有点不流畅

[saltedFish666]

你这个 GPU 直接 100%

[sadyx]

看了一下源码，目测卡顿的原因是这里 https://github.com/Lily-404/about/blob/main/src/components/ui/Prism.tsx#L92-L207

这个 shader 里用到了 raymarching ，会消耗极大的 GPU （可以去 shadertoy 里搜素 raymarching ，里面的很多例子都会导致网页卡），解决办法就是优化一下 shader ，或者更直接点，换一个简单点的

[helloeather]

打开你这个网站，我的最新 17pro 都差点烧坏了

[SirYuxuan]

博客的风格好看，复制一个，https://oofo.cc

[dosmlp]

电脑炸了，得赔我

[lscexpress]

我现在打开不卡，不知道是否优化你。硬件 m1 max ，软件 chrome 最新版。

[Chicagoake]

加载没问题，Chrome 浏览器打开 CPU 占用率 14%，内存倒是不高。
iMac M3

[www12222]

一个破首页，把我的 mac 干的风扇呼呼响

[freeup]

m1 gpu 100%

[lianxiben]

这是真的卡。。。。

[GotKiCry]

我这没显卡的电脑滑动页面都是延迟的

[DT27]

电脑风扇嗷嗷的转。。。
但是比网页上挂 live2d 那个二次元玩偶强，那个会导致我浏览器卡死。
你这个只是 cpu+10%，gpu+30%。会卡，但是不会卡死。

[evan9527]

背景删掉就好了

[roding]

公司老电脑，原地爆炸