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

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

  •  2
     
  •   lichun · 2016-04-10 12:00:49 +08:00 · 11041 次点击
    这是一个创建于 3147 天前的主题,其中的信息可能已经有所发展或是发生改变。

    (以下链接慎点,多图预警,小屏移动端的布局错乱会看哭,加载渲染时间 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 作者的博客主题。

    85 条回复    2016-04-12 17:36:54 +08:00
    ty0716
        1
    ty0716  
       2016-04-10 12:17:39 +08:00 via iPhone
    你这用了什么?把我手机都卡了
    lichun
        2
    lichun  
    OP
       2016-04-10 12:39:36 +08:00
    @ty0716 我用了这个 https://github.com/maroslaw/rainyday.js , 在页面上画雨滴特效。挺耗资源,在手机上会特别特别卡,电脑上浏览器有时都会无响应 >_<
    ByZHkc3
        3
    ByZHkc3  
       2016-04-10 12:42:08 +08:00
    为了所谓的炫酷效果而牺牲性能,牺牲用户体验,也是醉了
    Andy1999
        4
    Andy1999  
       2016-04-10 12:42:41 +08:00 via iPhone
    iPhone6 已成功卡死
    DennyDai
        5
    DennyDai  
       2016-04-10 12:44:05 +08:00   ❤️ 1
    我这显示的时间基本都花在下载各种图片了。。。 GitHub 不能设置的话就自己压缩一下什么的吧。。。 至于雨滴渲染比较卡那没主意了
    hardware
        6
    hardware  
       2016-04-10 12:44:06 +08:00
    hr 不想招愤青的
    seki
        7
    seki  
       2016-04-10 12:46:17 +08:00
    还有一个问题,你这个雨滴效果也不够好看啊……
    lichun
        8
    lichun  
    OP
       2016-04-10 12:48:37 +08:00
    @hardware 我不大明白你这条回复的意思?
    TakanashiAzusa
        9
    TakanashiAzusa  
       2016-04-10 12:51:52 +08:00 via Android
    重点这 雨滴效果也不好看。。 canvas 当背景我见过最合适的还是某个跟随鼠标的类星系图,不过忘记名字了, 36 氪的登录页有
    jinsongzhao
        10
    jinsongzhao  
       2016-04-10 12:53:11 +08:00 via Android   ❤️ 1
    没觉得卡呀?只是加载需要好几秒。
    leejanfin
        11
    leejanfin  
       2016-04-10 12:55:02 +08:00 via iPhone   ❤️ 1
    20s 的等待只换来了一个皮卡丘,于是我关掉了网页。
    lichun
        12
    lichun  
    OP
       2016-04-10 12:55:36 +08:00
    @seki 是的,有些时候渲染出来的雨滴还有锯齿。。。
    yrdr
        13
    yrdr  
       2016-04-10 12:56:15 +08:00
    弄成这样有什么卵用,我 i5+8G+百兆都打不开,普通人电脑很多配置比我还差好不,建议放弃这些华而不实的东西吧,要不就自己重写,优化各个组件,这样才能体现你牛逼,否则就是负分了
    eirk2004
        14
    eirk2004  
       2016-04-10 12:56:36 +08:00   ❤️ 1
    散热风扇起飞了~~~ 4 核心 CPU 占用率超过 40%
    lichun
        15
    lichun  
    OP
       2016-04-10 12:57:09 +08:00
    @jinsongzhao 电脑配置不错。。。
    slixurd
        16
    slixurd  
       2016-04-10 12:58:01 +08:00   ❤️ 1
    avatar 只显示 100*100px ,但是居然是原图 1100*1100px
    可以 Lazyload 的数据也在一开始就加载了.....
    dtysky
        17
    dtysky  
       2016-04-10 12:58:16 +08:00 via Android   ❤️ 1
    安卓 chrome 还好。。。 lz 至少做个响应式设计吧
    twor2
        18
    twor2  
       2016-04-10 12:59:29 +08:00
    目的?
    weizhiyao008
        19
    weizhiyao008  
       2016-04-10 13:01:52 +08:00
    把各个图片体积先压缩一下
    jinsongzhao
        20
    jinsongzhao  
       2016-04-10 13:03:58 +08:00 via Android
    hoho ,原来是要停留一段时间,估计是资源释放或调用类的 bug 。
    ChiangDi
        21
    ChiangDi  
       2016-04-10 13:04:14 +08:00   ❤️ 1
    * 把所有 css 和 js 都压缩一下
    * 把里面的 maxcdn 换成七牛的 cdn
    xuboying
        22
    xuboying  
       2016-04-10 13:21:30 +08:00 via Android
    小米 note 晓龙 801 3g 内存版, opera 打开无压力, 5 秒加载完 雨滴密集恐惧
    kingcos
        23
    kingcos  
       2016-04-10 13:24:52 +08:00
    Mac Safari 能打开,不太卡,就是打开完一会风扇开始转了。。
    xuboying
        24
    xuboying  
       2016-04-10 13:25:08 +08:00 via Android
    MIUI 浏览器速度也差不多,页面 5 秒加载,水滴再等 3 秒,不卡
    aivier
        25
    aivier  
       2016-04-10 13:31:29 +08:00   ❤️ 1
    你的雨滴我还以为是花屏了......左侧栏占得地方比右侧正文还大(1366x768
    searene
        26
    searene  
       2016-04-10 13:37:05 +08:00
    电脑打开还好,不过左边占位太大了啊,右边的滚动条怎么没找到?
    sigone
        27
    sigone  
       2016-04-10 13:41:52 +08:00
    大道至简,多搞几次就明白了。
    UnisandK
        28
    UnisandK  
       2016-04-10 13:46:56 +08:00   ❤️ 1
    帮你压了一下背景图
    http://t.cn/RqfpiiD
    RyuZheng
        29
    RyuZheng  
       2016-04-10 13:50:01 +08:00 via Android   ❤️ 1
    把大屏和小屏分开两个 css 来加载,手机小屏不加载这些特效,弄一个雨滴的背景图片就行,大屏就正常加载
    lichun
        30
    lichun  
    OP
       2016-04-10 13:52:13 +08:00
    @UnisandK 3Q 我把背景图换掉了, 少了 200KB >_<
    sagnitude
        31
    sagnitude  
       2016-04-10 14:11:50 +08:00
    你这 canvas 大小是固定的啊。。。
    skydiver
        32
    skydiver  
       2016-04-10 14:23:53 +08:00 via iPad
    禁用 js 就好了
    yuankui
        33
    yuankui  
       2016-04-10 14:24:24 +08:00
    左边的皮卡丘很好看吗?

    占大半夜屏幕???
    itplanes01
        34
    itplanes01  
       2016-04-10 14:34:34 +08:00 via Android
    美版安卓 UC 直接崩溃
    sennes
        35
    sennes  
       2016-04-10 14:35:54 +08:00 via iPhone
    PP 鸭 可以压缩图片素材。
    bibizhang
        36
    bibizhang  
       2016-04-10 14:40:50 +08:00
    一片白 哪里花哨了?
    yxzblue
        37
    yxzblue  
       2016-04-10 14:45:51 +08:00
    搜索应该就能解决了
    VmuTargh
        38
    VmuTargh  
       2016-04-10 14:50:42 +08:00
    Z3735f 2GiB 内存寨板毫无压力 Vivaldi 大法好
    后台还放着ДДТ的无损呢 233
    VmuTargh
        39
    VmuTargh  
       2016-04-10 14:54:50 +08:00   ❤️ 1

    这是图
    fordawn
        40
    fordawn  
       2016-04-10 14:59:43 +08:00   ❤️ 3
    lichun
        41
    lichun  
    OP
       2016-04-10 15:10:52 +08:00
    @fordawn 我的电脑打开 3FPS 。。。
    zts1993
        42
    zts1993  
       2016-04-10 15:11:24 +08:00
    嘿嘿 I7 4th Desktop 表示不卡
    int64ago
        43
    int64ago  
       2016-04-10 15:40:39 +08:00
    你的 CDN 也太慢了,换个国内镜像吧
    另外楼上也说了,图片压缩下
    gouflv
        44
    gouflv  
       2016-04-10 15:41:22 +08:00
    看的是内容, 不是特效
    canch
        45
    canch  
       2016-04-10 15:43:28 +08:00   ❤️ 1
    提醒下,简介里 python developer 少了个字母
    momou
        46
    momou  
       2016-04-10 15:44:43 +08:00
    Chrome 49.0.2623.110 m (64-bit)
    左边栏背景图根本不显示,所以字也看到不。。。
    Khlieb
        47
    Khlieb  
       2016-04-10 15:59:33 +08:00
    Core i5-3317U 表示不卡
    zwh8800
        48
    zwh8800  
       2016-04-10 16:05:11 +08:00   ❤️ 1
    rmbp 15 表示风扇狂吹
    另外左边太占地方了吧,看文章脖子扭得慌
    penjianfeng
        49
    penjianfeng  
       2016-04-10 16:07:25 +08:00
    没事儿弄那么多杀马特特效做什么-_-||
    maomaomao001
        50
    maomaomao001  
       2016-04-10 16:07:57 +08:00 via Android
    安卓 UC 成功崩溃重启
    jamesarch
        51
    jamesarch  
       2016-04-10 16:16:20 +08:00
    同 pythoner
    TVBG
        52
    TVBG  
       2016-04-10 16:33:08 +08:00   ❤️ 1
    楼主已经改过了?我测试感觉还不错啊,不过七牛的显示有问题,还有就是在小屏幕上体验不佳。
    lichun
        53
    lichun  
    OP
       2016-04-10 16:36:54 +08:00
    @TVBG 是的,按楼上几位说的改了一些问题! 七牛那个镜像同步估计要一些时间。
    zhuangzhuang1988
        54
    zhuangzhuang1988  
       2016-04-10 16:37:18 +08:00
    ChromeDev 有 profile 功能..
    Abirdcfly
        55
    Abirdcfly  
       2016-04-10 16:57:25 +08:00
    我是不是偏题了...感觉左边这个太宽了吧...
    xuhaoyangx
        56
    xuhaoyangx  
       2016-04-10 17:03:12 +08:00
    不好看,左边太喧宾夺主了。而且左边没有如果我拉动了窗口变了窗口大小,那个什么特效没有跟着一起变。
    lichun
        57
    lichun  
    OP
       2016-04-10 17:03:24 +08:00
    @Abirdcfly 我自己也会觉得,原先写的时候两边用的同一个边框样式,设置 width: 50%; 这样就满屏了 >_<
    bp0
        58
    bp0  
       2016-04-10 17:13:19 +08:00   ❤️ 1
    左右分屏的方案比较适合大屏幕,用手机和笔记本直接看到一大半的图片,实际的内容看到的太少了。

    还不如做成常规的上下分屏。
    qgy18
        59
    qgy18  
       2016-04-10 17:23:47 +08:00   ❤️ 1
    左边太宽了,完全没法看内容。

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

    另外,发现跟楼主同姓。
    lichun
        60
    lichun  
    OP
       2016-04-10 17:39:37 +08:00
    @qgy18 在大屏幕效果会好很多,小屏幕就显得很突兀了。

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

    这个姓氏的是不是都有被叫蛐蛐的外号 >_<
    qgy18
        61
    qgy18  
       2016-04-10 18:07:26 +08:00
    @lichun 嗯,我在用 13 寸的 rMBP ,实际宽度只有 1280px ,所以右边特别小。

    我们这个姓氏相对小众,能遇上同姓同行也是不容易。
    SoloCompany
        62
    SoloCompany  
       2016-04-10 19:00:09 +08:00
    这样的用户体验绝对是负分啊,设计的再花俏也是负分啊,不说 HR 了,技术点开肯定直接就关了
    LokiSharp
        63
    LokiSharp  
       2016-04-10 19:16:44 +08:00
    太丑了!
    lichun
        64
    lichun  
    OP
       2016-04-10 20:52:44 +08:00
    @LokiSharp 真是抱歉,碍着你的眼了,谢谢提出这么有实质性的意见!
    mentalidade
        65
    mentalidade  
       2016-04-10 21:39:45 +08:00
    https://luolei.org/ 这个好,作者的 github 也在
    jayyjh
        66
    jayyjh  
       2016-04-10 21:50:08 +08:00
    好慢好慢 =。= 跟我网速慢也有关系。。。
    moooookey
        67
    moooookey  
       2016-04-10 22:23:03 +08:00   ❤️ 1
    除了加载慢,资源占用过大,其他我觉得还是挺好的,雨滴的效果挺漂亮的。
    我不完全赞同所谓的实用派,极简派;想象力还是要有的,总要有一些人去尝试折腾一下新东西,世界才能变得丰富多彩呀哈哈哈
    GUI 界面刚鼓捣出来的时候,老派的人也是批判它华而不实的……
    steven13579
        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/.
    camillo
        69
    camillo  
       2016-04-10 22:57:02 +08:00
    非技术路人表示不能为美观服务的技术(指网页视觉效果相关的)不如没有……
    还不如字体、排版合理的纯文字+超链接式博客呢……
    neoblackcap
        70
    neoblackcap  
       2016-04-10 23:06:17 +08:00
    2015 13 inch rmbp,广州电信 50M ,打开花费时间 5.12s

    [Imgur]( ?1)

    天下武功唯快不破
    zi
        71
    zi  
       2016-04-11 00:38:23 +08:00
    @neoblackcap 广东移动,打开跟他一样,没有左边背景图
    580a388da131
        72
    580a388da131  
       2016-04-11 00:56:09 +08:00




    慢还好说,又慢又不好看就不对了。。。
    oojiayu
        73
    oojiayu  
       2016-04-11 01:11:41 +08:00
    感觉可以啊,我这里 5 秒钟就打开了,当然是开了 SS 的。特效做得不错~
    oojiayu
        74
    oojiayu  
       2016-04-11 01:14:06 +08:00
    @fordawn 大神,请接受我的膜拜~ 绚死了~ 简直不能更爱~
    jezal
        75
    jezal  
       2016-04-11 09:22:01 +08:00   ❤️ 1
    试试这个,可能有效:
    1 、用 JPEGmini 把左侧的图片压缩下;
    2 、把 rainyday.js 放在 </body> 前面。
    wubotao
        76
    wubotao  
       2016-04-11 09:31:20 +08:00
    只能看到一个皮卡丘。。
    shui14
        77
    shui14  
       2016-04-11 10:11:15 +08:00
    @TakanashiAzusa 那个很容易的 好多 canvas 教程都有
    USNaWen
        78
    USNaWen  
       2016-04-11 10:38:42 +08:00
    皮卡丘。。。建议雨滴换个 gif 多好。
    hitmanx
        79
    hitmanx  
       2016-04-11 12:45:50 +08:00
    这是用 cpu 去渲染的?你试试用 webgl 让 gpu 去渲染,不知道行不行
    kingwang
        80
    kingwang  
       2016-04-11 17:48:14 +08:00
    @VmuTargh 字体怎么渲染的,很好看的样子。
    VmuTargh
        81
    VmuTargh  
       2016-04-11 18:32:13 +08:00
    @kingwang MacType 默认配置懒得改
    Zainer
        82
    Zainer  
       2016-04-11 18:36:46 +08:00
    前端是不是相对后端容易一些 不过这个水滴的效果感觉怪怪的
    fordawn
        83
    fordawn  
       2016-04-11 20:18:14 +08:00
    @oojiayu 并不是我做的。。
    kingwang
        84
    kingwang  
       2016-04-12 17:36:05 +08:00
    @VmuTargh intelij idea 下有些字体会出现显示不全的问题,还有这个软件会引起其它软件一些莫名其妙的错误,你见过么?
    VmuTargh
        85
    VmuTargh  
       2016-04-12 17:36:54 +08:00
    @kingwang 目前没有
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3418 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 57ms · UTC 10:51 · PVG 18:51 · LAX 02:51 · JFK 05:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.