后端程序员自己写的花哨前端页面，又慢又卡怎么办？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3159 天前的主题，其中的信息可能已经有所发展或是发生改变。

（以下链接慎点，多图预警，小屏移动端的布局错乱会看哭，加载渲染时间 20s+）

加载的资源数量比较多，特别是还有一个 Canvas 的雨滴特效，容易出现页面无响应的情况

Github Pages 搭建的个人主页： lichun.me

还弄了七牛镜像站点加速的： blog.lichun.me (好像也没有快多少...)

第 1 条附言 · 2016-04-10 12:35:21 +08:00

页面效果：

加载时间：

第 2 条附言 · 2016-04-11 19:57:13 +08:00

大家好，我已经撤掉了之前的页面了！

https://github.com/maroslaw/rainyday.js
这个雨滴特效库已经一年多没有维护了，放弃它了！

现在是抄了 Vue.js 作者的博客主题。

GitHub

页面

canvas

Pages

85 条回复 • 2016-04-12 17:36:54 +08:00

ty0716

2016-04-10 12:17:39 +08:00 via iPhone

你这用了什么？把我手机都卡了

lichun

2016-04-10 12:39:36 +08:00

@ty0716 我用了这个 https://github.com/maroslaw/rainyday.js ，在页面上画雨滴特效。挺耗资源，在手机上会特别特别卡，电脑上浏览器有时都会无响应 >_<

ByZHkc3

2016-04-10 12:42:08 +08:00

为了所谓的炫酷效果而牺牲性能，牺牲用户体验，也是醉了

Andy1999

2016-04-10 12:42:41 +08:00 via iPhone

iPhone6 已成功卡死

DennyDai

2016-04-10 12:44:05 +08:00

我这显示的时间基本都花在下载各种图片了。。。 GitHub 不能设置的话就自己压缩一下什么的吧。。。至于雨滴渲染比较卡那没主意了

hardware

2016-04-10 12:44:06 +08:00

hr 不想招愤青的

seki

2016-04-10 12:46:17 +08:00

还有一个问题，你这个雨滴效果也不够好看啊……

lichun

2016-04-10 12:48:37 +08:00

@hardware 我不大明白你这条回复的意思？

TakanashiAzusa

2016-04-10 12:51:52 +08:00 via Android

重点这雨滴效果也不好看。。 canvas 当背景我见过最合适的还是某个跟随鼠标的类星系图，不过忘记名字了， 36 氪的登录页有

jinsongzhao

2016-04-10 12:53:11 +08:00 via Android

没觉得卡呀？只是加载需要好几秒。

leejanfin

2016-04-10 12:55:02 +08:00 via iPhone

20s 的等待只换来了一个皮卡丘，于是我关掉了网页。

lichun

2016-04-10 12:55:36 +08:00

@seki 是的，有些时候渲染出来的雨滴还有锯齿。。。

yrdr

2016-04-10 12:56:15 +08:00

弄成这样有什么卵用,我 i5+8G+百兆都打不开,普通人电脑很多配置比我还差好不,建议放弃这些华而不实的东西吧,要不就自己重写,优化各个组件,这样才能体现你牛逼,否则就是负分了

eirk2004

2016-04-10 12:56:36 +08:00

散热风扇起飞了~~~ 4 核心 CPU 占用率超过 40%

lichun

2016-04-10 12:57:09 +08:00

@jinsongzhao 电脑配置不错。。。

slixurd

2016-04-10 12:58:01 +08:00

avatar 只显示 100*100px ，但是居然是原图 1100*1100px
可以 Lazyload 的数据也在一开始就加载了.....

dtysky

2016-04-10 12:58:16 +08:00 via Android

安卓 chrome 还好。。。 lz 至少做个响应式设计吧

twor2

2016-04-10 12:59:29 +08:00

目的？

weizhiyao008

2016-04-10 13:01:52 +08:00

把各个图片体积先压缩一下

jinsongzhao

2016-04-10 13:03:58 +08:00 via Android

hoho ，原来是要停留一段时间，估计是资源释放或调用类的 bug 。

ChiangDi

2016-04-10 13:04:14 +08:00

* 把所有 css 和 js 都压缩一下
* 把里面的 maxcdn 换成七牛的 cdn

xuboying

2016-04-10 13:21:30 +08:00 via Android

小米 note 晓龙 801 3g 内存版， opera 打开无压力， 5 秒加载完雨滴密集恐惧

kingcos

2016-04-10 13:24:52 +08:00

Mac Safari 能打开，不太卡，就是打开完一会风扇开始转了。。

xuboying

2016-04-10 13:25:08 +08:00 via Android

MIUI 浏览器速度也差不多，页面 5 秒加载，水滴再等 3 秒，不卡

aivier

2016-04-10 13:31:29 +08:00

你的雨滴我还以为是花屏了......左侧栏占得地方比右侧正文还大(1366x768

searene

2016-04-10 13:37:05 +08:00

电脑打开还好，不过左边占位太大了啊，右边的滚动条怎么没找到？

sigone

2016-04-10 13:41:52 +08:00

大道至简，多搞几次就明白了。

UnisandK

2016-04-10 13:46:56 +08:00

帮你压了一下背景图
http://t.cn/RqfpiiD

RyuZheng

2016-04-10 13:50:01 +08:00 via Android

把大屏和小屏分开两个 css 来加载，手机小屏不加载这些特效，弄一个雨滴的背景图片就行，大屏就正常加载

lichun

2016-04-10 13:52:13 +08:00

@UnisandK 3Q 我把背景图换掉了，少了 200KB >_<

sagnitude

2016-04-10 14:11:50 +08:00

你这 canvas 大小是固定的啊。。。

skydiver

2016-04-10 14:23:53 +08:00 via iPad

禁用 js 就好了

yuankui

2016-04-10 14:24:24 +08:00

左边的皮卡丘很好看吗？

占大半夜屏幕？？？

itplanes01

2016-04-10 14:34:34 +08:00 via Android

美版安卓 UC 直接崩溃

sennes

2016-04-10 14:35:54 +08:00 via iPhone

PP 鸭可以压缩图片素材。

bibizhang

2016-04-10 14:40:50 +08:00

一片白哪里花哨了？

yxzblue

2016-04-10 14:45:51 +08:00

搜索应该就能解决了

VmuTargh

2016-04-10 14:50:42 +08:00

Z3735f 2GiB 内存寨板毫无压力 Vivaldi 大法好
后台还放着ДДТ的无损呢 233

VmuTargh

2016-04-10 14:54:50 +08:00

这是图

fordawn

2016-04-10 14:59:43 +08:00

来这个 http://shuaizhu.com/

lichun

2016-04-10 15:10:52 +08:00

@fordawn 我的电脑打开 3FPS 。。。

zts1993

2016-04-10 15:11:24 +08:00

嘿嘿 I7 4th Desktop 表示不卡

int64ago

2016-04-10 15:40:39 +08:00

你的 CDN 也太慢了，换个国内镜像吧
另外楼上也说了，图片压缩下

gouflv

2016-04-10 15:41:22 +08:00

看的是内容, 不是特效

canch

2016-04-10 15:43:28 +08:00

提醒下，简介里 python developer 少了个字母

momou

2016-04-10 15:44:43 +08:00

Chrome 49.0.2623.110 m (64-bit)
左边栏背景图根本不显示，所以字也看到不。。。

Khlieb

2016-04-10 15:59:33 +08:00

Core i5-3317U 表示不卡

zwh8800

2016-04-10 16:05:11 +08:00

rmbp 15 表示风扇狂吹
另外左边太占地方了吧，看文章脖子扭得慌

penjianfeng

2016-04-10 16:07:25 +08:00

没事儿弄那么多杀马特特效做什么-_-||

maomaomao001

2016-04-10 16:07:57 +08:00 via Android

安卓 UC 成功崩溃重启

jamesarch

2016-04-10 16:16:20 +08:00

同 pythoner

TVBG

2016-04-10 16:33:08 +08:00

楼主已经改过了？我测试感觉还不错啊，不过七牛的显示有问题，还有就是在小屏幕上体验不佳。

lichun

2016-04-10 16:36:54 +08:00

@TVBG 是的，按楼上几位说的改了一些问题！七牛那个镜像同步估计要一些时间。

zhuangzhuang1988

2016-04-10 16:37:18 +08:00

ChromeDev 有 profile 功能..

Abirdcfly

2016-04-10 16:57:25 +08:00

我是不是偏题了...感觉左边这个太宽了吧...

xuhaoyangx

2016-04-10 17:03:12 +08:00

不好看，左边太喧宾夺主了。而且左边没有如果我拉动了窗口变了窗口大小，那个什么特效没有跟着一起变。

lichun

2016-04-10 17:03:24 +08:00

@Abirdcfly 我自己也会觉得，原先写的时候两边用的同一个边框样式，设置 width: 50%; 这样就满屏了 >_<

bp0

2016-04-10 17:13:19 +08:00

左右分屏的方案比较适合大屏幕，用手机和笔记本直接看到一大半的图片，实际的内容看到的太少了。

还不如做成常规的上下分屏。

qgy18

2016-04-10 17:23:47 +08:00

左边太宽了，完全没法看内容。

你还不如老老实实弄成我这样的： https://imququ.com/

另外，发现跟楼主同姓。

lichun

2016-04-10 17:39:37 +08:00

@qgy18 在大屏幕效果会好很多，小屏幕就显得很突兀了。

自己对前端还不是很熟悉，这个页面是自己学习过程中慢慢做的

这个姓氏的是不是都有被叫蛐蛐的外号 >_<

qgy18

2016-04-10 18:07:26 +08:00

@lichun 嗯，我在用 13 寸的 rMBP ，实际宽度只有 1280px ，所以右边特别小。

我们这个姓氏相对小众，能遇上同姓同行也是不容易。

SoloCompany

2016-04-10 19:00:09 +08:00

这样的用户体验绝对是负分啊，设计的再花俏也是负分啊，不说 HR 了，技术点开肯定直接就关了

LokiSharp

2016-04-10 19:16:44 +08:00

太丑了！

lichun

2016-04-10 20:52:44 +08:00

@LokiSharp 真是抱歉，碍着你的眼了，谢谢提出这么有实质性的意见！

mentalidade

2016-04-10 21:39:45 +08:00

https://luolei.org/ 这个好，作者的 github 也在

jayyjh

2016-04-10 21:50:08 +08:00

好慢好慢 =。= 跟我网速慢也有关系。。。

moooookey

2016-04-10 22:23:03 +08:00

除了加载慢，资源占用过大，其他我觉得还是挺好的，雨滴的效果挺漂亮的。
我不完全赞同所谓的实用派，极简派；想象力还是要有的，总要有一些人去尝试折腾一下新东西，世界才能变得丰富多彩呀哈哈哈
GUI 界面刚鼓捣出来的时候，老派的人也是批判它华而不实的……

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/.

camillo

2016-04-10 22:57:02 +08:00

非技术路人表示不能为美观服务的技术（指网页视觉效果相关的）不如没有……
还不如字体、排版合理的纯文字+超链接式博客呢……

neoblackcap

2016-04-10 23:06:17 +08:00

2015 13 inch rmbp,广州电信 50M ，打开花费时间 5.12s

[Imgur](

?1)

天下武功唯快不破

2016-04-11 00:38:23 +08:00

@neoblackcap 广东移动，打开跟他一样，没有左边背景图

580a388da131

2016-04-11 00:56:09 +08:00

慢还好说，又慢又不好看就不对了。。。

oojiayu

2016-04-11 01:11:41 +08:00

感觉可以啊，我这里 5 秒钟就打开了，当然是开了 SS 的。特效做得不错~

oojiayu

2016-04-11 01:14:06 +08:00

@fordawn 大神，请接受我的膜拜~ 绚死了~ 简直不能更爱~

jezal

2016-04-11 09:22:01 +08:00

试试这个，可能有效：
1 、用 JPEGmini 把左侧的图片压缩下；
2 、把 rainyday.js 放在 </body> 前面。

wubotao

2016-04-11 09:31:20 +08:00

只能看到一个皮卡丘。。

shui14

2016-04-11 10:11:15 +08:00

@TakanashiAzusa 那个很容易的好多 canvas 教程都有

USNaWen

2016-04-11 10:38:42 +08:00

皮卡丘。。。建议雨滴换个 gif 多好。

hitmanx

2016-04-11 12:45:50 +08:00

这是用 cpu 去渲染的？你试试用 webgl 让 gpu 去渲染，不知道行不行

kingwang

2016-04-11 17:48:14 +08:00

@VmuTargh 字体怎么渲染的，很好看的样子。

VmuTargh

2016-04-11 18:32:13 +08:00

@kingwang MacType 默认配置懒得改

Zainer

2016-04-11 18:36:46 +08:00

前端是不是相对后端容易一些不过这个水滴的效果感觉怪怪的

fordawn

2016-04-11 20:18:14 +08:00

@oojiayu 并不是我做的。。

kingwang

2016-04-12 17:36:05 +08:00

@VmuTargh intelij idea 下有些字体会出现显示不全的问题，还有这个软件会引起其它软件一些莫名其妙的错误，你见过么？

VmuTargh

2016-04-12 17:36:54 +08:00

@kingwang 目前没有