(以下链接慎点,多图预警,小屏移动端的布局错乱会看哭,加载渲染时间 20s+)
加载的资源数量比较多,特别是还有一个 Canvas 的雨滴特效,容易出现页面无响应的情况
Github Pages 搭建的个人主页: lichun.me
还弄了七牛镜像站点加速的: blog.lichun.me (好像也没有快多少...)
1
ty0716 2016-04-10 12:17:39 +08:00 via iPhone
你这用了什么?把我手机都卡了
|
2
lichun OP @ty0716 我用了这个 https://github.com/maroslaw/rainyday.js , 在页面上画雨滴特效。挺耗资源,在手机上会特别特别卡,电脑上浏览器有时都会无响应 >_<
|
3
ByZHkc3 2016-04-10 12:42:08 +08:00
为了所谓的炫酷效果而牺牲性能,牺牲用户体验,也是醉了
|
4
Andy1999 2016-04-10 12:42:41 +08:00 via iPhone
iPhone6 已成功卡死
|
5
DennyDai 2016-04-10 12:44:05 +08:00 1
我这显示的时间基本都花在下载各种图片了。。。 GitHub 不能设置的话就自己压缩一下什么的吧。。。 至于雨滴渲染比较卡那没主意了
|
6
hardware 2016-04-10 12:44:06 +08:00
hr 不想招愤青的
|
7
seki 2016-04-10 12:46:17 +08:00
还有一个问题,你这个雨滴效果也不够好看啊……
|
9
TakanashiAzusa 2016-04-10 12:51:52 +08:00 via Android
重点这 雨滴效果也不好看。。 canvas 当背景我见过最合适的还是某个跟随鼠标的类星系图,不过忘记名字了, 36 氪的登录页有
|
10
jinsongzhao 2016-04-10 12:53:11 +08:00 via Android 1
没觉得卡呀?只是加载需要好几秒。
|
11
leejanfin 2016-04-10 12:55:02 +08:00 via iPhone 1
20s 的等待只换来了一个皮卡丘,于是我关掉了网页。
|
13
yrdr 2016-04-10 12:56:15 +08:00
弄成这样有什么卵用,我 i5+8G+百兆都打不开,普通人电脑很多配置比我还差好不,建议放弃这些华而不实的东西吧,要不就自己重写,优化各个组件,这样才能体现你牛逼,否则就是负分了
|
14
eirk2004 2016-04-10 12:56:36 +08:00 1
散热风扇起飞了~~~ 4 核心 CPU 占用率超过 40%
|
15
lichun OP @jinsongzhao 电脑配置不错。。。
|
16
slixurd 2016-04-10 12:58:01 +08:00 1
avatar 只显示 100*100px ,但是居然是原图 1100*1100px
可以 Lazyload 的数据也在一开始就加载了..... |
17
dtysky 2016-04-10 12:58:16 +08:00 via Android 1
安卓 chrome 还好。。。 lz 至少做个响应式设计吧
|
18
twor2 2016-04-10 12:59:29 +08:00
目的?
|
19
weizhiyao008 2016-04-10 13:01:52 +08:00
把各个图片体积先压缩一下
|
20
jinsongzhao 2016-04-10 13:03:58 +08:00 via Android
hoho ,原来是要停留一段时间,估计是资源释放或调用类的 bug 。
|
21
ChiangDi 2016-04-10 13:04:14 +08:00 1
* 把所有 css 和 js 都压缩一下
* 把里面的 maxcdn 换成七牛的 cdn |
22
xuboying 2016-04-10 13:21:30 +08:00 via Android
小米 note 晓龙 801 3g 内存版, opera 打开无压力, 5 秒加载完 雨滴密集恐惧
|
23
kingcos 2016-04-10 13:24:52 +08:00
Mac Safari 能打开,不太卡,就是打开完一会风扇开始转了。。
|
24
xuboying 2016-04-10 13:25:08 +08:00 via Android
MIUI 浏览器速度也差不多,页面 5 秒加载,水滴再等 3 秒,不卡
|
25
aivier 2016-04-10 13:31:29 +08:00 1
你的雨滴我还以为是花屏了......左侧栏占得地方比右侧正文还大(1366x768
|
26
searene 2016-04-10 13:37:05 +08:00
电脑打开还好,不过左边占位太大了啊,右边的滚动条怎么没找到?
|
27
sigone 2016-04-10 13:41:52 +08:00
大道至简,多搞几次就明白了。
|
28
UnisandK 2016-04-10 13:46:56 +08:00 1
帮你压了一下背景图
http://t.cn/RqfpiiD |
29
RyuZheng 2016-04-10 13:50:01 +08:00 via Android 1
把大屏和小屏分开两个 css 来加载,手机小屏不加载这些特效,弄一个雨滴的背景图片就行,大屏就正常加载
|
31
sagnitude 2016-04-10 14:11:50 +08:00
你这 canvas 大小是固定的啊。。。
|
32
skydiver 2016-04-10 14:23:53 +08:00 via iPad
禁用 js 就好了
|
33
yuankui 2016-04-10 14:24:24 +08:00
左边的皮卡丘很好看吗?
占大半夜屏幕??? |
34
itplanes01 2016-04-10 14:34:34 +08:00 via Android
美版安卓 UC 直接崩溃
|
35
sennes 2016-04-10 14:35:54 +08:00 via iPhone
PP 鸭 可以压缩图片素材。
|
36
bibizhang 2016-04-10 14:40:50 +08:00
一片白 哪里花哨了?
|
37
yxzblue 2016-04-10 14:45:51 +08:00
搜索应该就能解决了
|
38
VmuTargh 2016-04-10 14:50:42 +08:00
Z3735f 2GiB 内存寨板毫无压力 Vivaldi 大法好
后台还放着ДДТ的无损呢 233 |
39
VmuTargh 2016-04-10 14:54:50 +08:00 1
|
40
fordawn 2016-04-10 14:59:43 +08:00 3
|
42
zts1993 2016-04-10 15:11:24 +08:00
嘿嘿 I7 4th Desktop 表示不卡
|
43
int64ago 2016-04-10 15:40:39 +08:00
你的 CDN 也太慢了,换个国内镜像吧
另外楼上也说了,图片压缩下 |
44
gouflv 2016-04-10 15:41:22 +08:00
看的是内容, 不是特效
|
45
canch 2016-04-10 15:43:28 +08:00 1
提醒下,简介里 python developer 少了个字母
|
46
momou 2016-04-10 15:44:43 +08:00
Chrome 49.0.2623.110 m (64-bit)
左边栏背景图根本不显示,所以字也看到不。。。 |
47
Khlieb 2016-04-10 15:59:33 +08:00
Core i5-3317U 表示不卡
|
48
zwh8800 2016-04-10 16:05:11 +08:00 1
rmbp 15 表示风扇狂吹
另外左边太占地方了吧,看文章脖子扭得慌 |
49
penjianfeng 2016-04-10 16:07:25 +08:00
没事儿弄那么多杀马特特效做什么-_-||
|
50
maomaomao001 2016-04-10 16:07:57 +08:00 via Android
安卓 UC 成功崩溃重启
|
51
jamesarch 2016-04-10 16:16:20 +08:00
同 pythoner
|
52
TVBG 2016-04-10 16:33:08 +08:00 1
楼主已经改过了?我测试感觉还不错啊,不过七牛的显示有问题,还有就是在小屏幕上体验不佳。
|
54
zhuangzhuang1988 2016-04-10 16:37:18 +08:00
ChromeDev 有 profile 功能..
|
55
Abirdcfly 2016-04-10 16:57:25 +08:00
我是不是偏题了...感觉左边这个太宽了吧...
|
56
xuhaoyangx 2016-04-10 17:03:12 +08:00
不好看,左边太喧宾夺主了。而且左边没有如果我拉动了窗口变了窗口大小,那个什么特效没有跟着一起变。
|
57
lichun OP @Abirdcfly 我自己也会觉得,原先写的时候两边用的同一个边框样式,设置 width: 50%; 这样就满屏了 >_<
|
58
bp0 2016-04-10 17:13:19 +08:00 1
左右分屏的方案比较适合大屏幕,用手机和笔记本直接看到一大半的图片,实际的内容看到的太少了。
还不如做成常规的上下分屏。 |
59
qgy18 2016-04-10 17:23:47 +08:00 1
|
60
lichun OP |
61
qgy18 2016-04-10 18:07:26 +08:00
|
62
SoloCompany 2016-04-10 19:00:09 +08:00
这样的用户体验绝对是负分啊,设计的再花俏也是负分啊,不说 HR 了,技术点开肯定直接就关了
|
63
LokiSharp 2016-04-10 19:16:44 +08:00
太丑了!
|
65
mentalidade 2016-04-10 21:39:45 +08:00
https://luolei.org/ 这个好,作者的 github 也在
|
66
jayyjh 2016-04-10 21:50:08 +08:00
好慢好慢 =。= 跟我网速慢也有关系。。。
|
67
moooookey 2016-04-10 22:23:03 +08:00 1
除了加载慢,资源占用过大,其他我觉得还是挺好的,雨滴的效果挺漂亮的。
我不完全赞同所谓的实用派,极简派;想象力还是要有的,总要有一些人去尝试折腾一下新东西,世界才能变得丰富多彩呀哈哈哈 GUI 界面刚鼓捣出来的时候,老派的人也是批判它华而不实的…… |
68
steven13579 2016-04-10 22:52:52 +08:00
console 已经告诉你了啊
> Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. |
69
camillo 2016-04-10 22:57:02 +08:00
非技术路人表示不能为美观服务的技术(指网页视觉效果相关的)不如没有……
还不如字体、排版合理的纯文字+超链接式博客呢…… |
70
neoblackcap 2016-04-10 23:06:17 +08:00
|
71
zi 2016-04-11 00:38:23 +08:00
@neoblackcap 广东移动,打开跟他一样,没有左边背景图
|
72
580a388da131 2016-04-11 00:56:09 +08:00
慢还好说,又慢又不好看就不对了。。。 |
73
oojiayu 2016-04-11 01:11:41 +08:00
感觉可以啊,我这里 5 秒钟就打开了,当然是开了 SS 的。特效做得不错~
|
75
jezal 2016-04-11 09:22:01 +08:00 1
试试这个,可能有效:
1 、用 JPEGmini 把左侧的图片压缩下; 2 、把 rainyday.js 放在 </body> 前面。 |
76
wubotao 2016-04-11 09:31:20 +08:00
只能看到一个皮卡丘。。
|
77
shui14 2016-04-11 10:11:15 +08:00
@TakanashiAzusa 那个很容易的 好多 canvas 教程都有
|
78
USNaWen 2016-04-11 10:38:42 +08:00
皮卡丘。。。建议雨滴换个 gif 多好。
|
79
hitmanx 2016-04-11 12:45:50 +08:00
这是用 cpu 去渲染的?你试试用 webgl 让 gpu 去渲染,不知道行不行
|
82
Zainer 2016-04-11 18:36:46 +08:00
前端是不是相对后端容易一些 不过这个水滴的效果感觉怪怪的
|