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

页面卡顿

效果过多

用户体验

65 条回复 • 2025-09-11 18:41:34 +08:00

1

potatowish

20 小时 41 分钟前 via iPhone

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

2

gscsnm

20 小时 13 分钟前

mbp 上 chrome 开你页面，gpu 100%

3

jimmyC

OP

20 小时 8 分钟前

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

4

jimmyC

OP

20 小时 8 分钟前

@gscsnm 好滴，我回头看看

5

Pipecraft

20 小时 2 分钟前

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

6

Pipecraft

19 小时 56 分钟前

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

7

renmu

19 小时 13 分钟前 via Android

肉眼可见的卡和掉帧

8

evan1

PRO

19 小时 5 分钟前

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

9

zaunist

17 小时 30 分钟前

很卡

10

noahhhh

16 小时 59 分钟前 via Android

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

11

zhucelws

16 小时 45 分钟前

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

12

leic4u

15 小时 28 分钟前

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

13

supuwoerc

11 小时 5 分钟前

滚动掉帧明显，m1 的 mbp

14

jackOff

10 小时 58 分钟前

很卡

15

yeelone

10 小时 45 分钟前

卡，好卡。打回重做

16

ladypxy

10 小时 42 分钟前

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

17

villivateur

PRO

10 小时 34 分钟前

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

18

devinww

10 小时 33 分钟前

卡。

19

caiqichang

10 小时 14 分钟前

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

20

b821025551b

10 小时 8 分钟前

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

21

JoeJoeJoe

PRO

10 小时 3 分钟前

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

22

InDom

10 小时 2 分钟前

4

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

23

crocoBaby

10 小时 0 分钟前

卡成 ppt

24

6j1A6v70lEv5n2U2

9 小时 50 分钟前

前端不是堆特效……

25

Akuta

9 小时 43 分钟前

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

26

ramcasky

9 小时 39 分钟前

花里胡哨吃 GPU 吃满了~

27

youyouzi

9 小时 34 分钟前

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

28

jimmyC

OP

9 小时 29 分钟前

@youyouzi 好的，听劝

29

jimmyC

OP

9 小时 29 分钟前

@noahhhh 液态玻璃效果，好的

30

zepc007

9 小时 25 分钟前

iOS26 效果让你玩明白了

31

Akuta

9 小时 24 分钟前

1

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

32

gmfan

9 小时 14 分钟前

卡成 ppt 了

33

nightcatsama

9 小时 7 分钟前

卡得一

34

meetguardian

9 小时 7 分钟前

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

35

lswlray

9 小时 0 分钟前

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

36

bigtear

8 小时 59 分钟前

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

37

jimmyC

OP

8 小时 57 分钟前

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

38

jimmyC

OP

8 小时 56 分钟前

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

39

nekoneko

8 小时 54 分钟前

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

40

qxmqh

8 小时 43 分钟前

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

41

jimmyC

OP

8 小时 42 分钟前

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

42

ZColin

8 小时 35 分钟前

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

43

youyouzi

8 小时 31 分钟前

@jimmyC #28

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

44

coolcoffee

8 小时 29 分钟前

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

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

45

ODESZA

8 小时 21 分钟前

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

46

kokerkov

8 小时 18 分钟前

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

47

nestao

8 小时 8 分钟前

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

48

jimmyC

OP

7 小时 30 分钟前 via Android

@nestao 谢谢你，我试出来了

49

surbomfla

7 小时 27 分钟前

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

50

KillPaul

6 小时 2 分钟前

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

51

asdjgfr

5 小时 22 分钟前

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

52

yifeia

4 小时 28 分钟前

滑动有点不流畅

53

saltedFish666

4 小时 5 分钟前

你这个 GPU 直接 100%

54

sadyx

4 小时 4 分钟前

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

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