V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
abcbuzhiming
V2EX  ›  前端开发

这 5 年 web 前端领域到底发生了什么,我怎么感觉性能变差了?

  •  
  •   abcbuzhiming · 2017-09-21 21:56:31 +08:00 · 6415 次点击
    这是一个创建于 2649 天前的主题,其中的信息可能已经有所发展或是发生改变。
    5 年前那个时候,flash 还没死绝,各个浏览器核心还在持续优化,H5 还没有形成优势地位。5 年过去了,flash 基本死绝,H5 称霸业界,浏览器发展了 5 年,可我觉得我的电脑打开页面越来越慢了,按理说甩开了 flash 的历史包袱,全新的 ES6,ES7 标准,加上 5 年时间对 js 引擎的优化,网页应该打开的更快才对,到底为什么,这 5 年 web 页面的复杂度在不知不觉中发生了变化了吗?
    69 条回复    2020-08-09 19:20:41 +08:00
    p64381
        1
    p64381  
       2017-09-21 22:05:35 +08:00 via Android   ❤️ 1
    你的感觉没错,最快的时候是在刚出 chrome 那几天
    Rubicker666
        2
    Rubicker666  
       2017-09-21 22:10:28 +08:00 via Android
    明显页面复杂度提升可不止一个档次
    wzw
        3
    wzw  
       2017-09-21 22:12:10 +08:00 via Android
    说得好,页面越来越复杂,难回简洁的时代了。
    SuperMild
        4
    SuperMild  
       2017-09-21 22:12:15 +08:00
    由于前端功能越来越完善,以前迫不得已需要在服务器处理的东西,现在几乎都能转到前端来做了,消耗的客户端的性能,但服务器减负啊。
    abcbuzhiming
        5
    abcbuzhiming  
    OP
       2017-09-21 22:46:17 +08:00
    @Rubicker666
    @wzw
    举个例子吧,复杂在何处
    saran
        6
    saran  
       2017-09-21 22:49:47 +08:00   ❤️ 9
    为什么会这样呐,完全就是 ng\raect\vue 之些带歪了节奏,明明一个脚本,搞成了一个巨大的世界,然而实际上还是只干了脚本那点事。
    Quaintjade
        7
    Quaintjade  
       2017-09-21 22:56:08 +08:00 via Android
    现在越来越多的东西都让浏览器处理了(此处该 @海盗湾)
    还有就是虽然有优化,但不同浏览器优化不同,比如 chrome 的 for 嵌套特别快,另一些 function 则比较慢; Firefox 可能相反。
    OctoCat
        8
    OctoCat  
       2017-09-21 23:00:33 +08:00   ❤️ 1
    前端轮子越来越多了,帮派也很多,喜欢撕逼搞事。编程界的演艺圈。
    a87150
        9
    a87150  
       2017-09-21 23:02:17 +08:00 via Android
    乱七八糟的特效太多。
    remon
        10
    remon  
       2017-09-21 23:08:00 +08:00
    @abcbuzhiming #5 简单来说就是:以前后端渲染模式,访问一个页面---浏览器发出请求,服务器后台读取数据,渲染模板,浏览器拿到 HTML 开始渲染,请求图片等资源,用户看到一个完整网页;
    现在浏览器渲染模式,访问一个页面---浏览器发出请求,从 CDN 或服务器得到静态页面(此页面只包含极少部分页面内容),浏览器开始渲染,看到部分静态内容,请求静态资源,解析 js 脚本,发出请求,服务器响应请求,返回数据,js 拿到数据,拼装内容,浏览器渲染,用户看到完整网页
    roychan
        11
    roychan  
       2017-09-21 23:08:26 +08:00
    都是戏。
    rogwan
        12
    rogwan  
       2017-09-21 23:11:07 +08:00 via Android
    还有各种第三方 API 加载 js,拼装,渲染,不慢才怪呀
    chinvo
        13
    chinvo  
       2017-09-21 23:42:54 +08:00
    因为 “ H5 ” 这个 PM 们造出来的假概念

    至今不能理解 H5 到底是什么

    仔细想想,大概 H5 约等于 大量冗余 JS 代码+大量 JS 动画+大量冗余 CSS 代码+大量 CSS 动画+大量冗余 HTML 内容+大量垃圾第三方资源

    不慢才怪
    duola
        14
    duola  
       2017-09-21 23:46:00 +08:00   ❤️ 3
    你的电脑换了没有。
    dixeran
        15
    dixeran  
       2017-09-21 23:46:11 +08:00 via Android
    服务器减少的任务丢给浏览器了
    lightening
        16
    lightening  
       2017-09-21 23:54:32 +08:00
    @abcbuzhiming 比如各种页面内的交互。
    SilentDepth
        17
    SilentDepth  
       2017-09-22 01:05:22 +08:00 via iPad
    @saran 哪点事?
    tonghuashuai
        18
    tonghuashuai  
       2017-09-22 01:05:33 +08:00 via iPhone
    因为页面承载了过多的前端繁荣。
    prolic
        19
    prolic  
       2017-09-22 01:25:29 +08:00
    感觉离完全的前后端分离也不远了,nginx 做路由调静态 html+js,后台只提供 RESTful 接口
    wangjie
        20
    wangjie  
       2017-09-22 01:26:31 +08:00 via iPhone
    同想问你电脑换了没
    t6attack
        21
    t6attack  
       2017-09-22 02:08:02 +08:00
    javascript 变成浏览器的汇编了。
    markocen
        22
    markocen  
       2017-09-22 04:13:27 +08:00 via Android
    你用的是 5 年前的电脑吗
    carlclone
        23
    carlclone  
       2017-09-22 04:42:59 +08:00 via Android   ❤️ 9
    v2 也那么多傻逼帖了吗
    ChefIsAwesome
        24
    ChefIsAwesome  
       2017-09-22 08:18:45 +08:00   ❤️ 1
    张嘴就来,说慢的倒是举个例子说说哪家网站你打开慢了?五年前你家宽带多少兆,现在多少兆,脚本体积的增长赶得上宽带的增长速度?就拿淘宝那首页讲,那么多图,首页初次加载也就只有 600k 左右,还不是 js 做的懒加载的功劳。换五年前你开个图片都费劲吧。
    fuxkcsdn
        25
    fuxkcsdn  
       2017-09-22 08:55:54 +08:00 via iPhone
    @ChefIsAwesome 5 年前淘宝就使用上懒加载技术了
    maddot
        26
    maddot  
       2017-09-22 09:13:35 +08:00
    简历驱动编程
    明明 jquery 可以搞定,但为了简历上写上各种框架项目经验,就上框架了
    这些框架也创造出了更多的职位,是有利于我们这个行业的.....
    dsg005
        27
    dsg005  
       2017-09-22 09:15:17 +08:00
    10 年前的一些 flash 动画效果,至今 html5 还实现不了,就算模仿出来了,一眼就能看出不是 flash
    XueSeason
        28
    XueSeason  
       2017-09-22 09:37:24 +08:00
    5 年前 iPhone 4s 运行 iOS 6 也很快啊,5 年前我老家 10 年前的电脑还能带动 LOL。
    fulvaz
        29
    fulvaz  
       2017-09-22 09:38:19 +08:00
    是啊.

    不然你以为为啥前端这么贵了.
    DT27
        30
    DT27  
       2017-09-22 09:46:16 +08:00
    前端不安分,动不动就造新轮子。。。
    whypool
        31
    whypool  
       2017-09-22 09:46:19 +08:00
    前端承担了 6 成以上的数据逻辑,交互逻辑,加上各种框架自己的事件循环,所以慢是浏览器处理这些东西要花时间
    ruimz
        32
    ruimz  
       2017-09-22 09:58:33 +08:00 via Android
    前端换了电脑而你没有😂😂

    https://zhuanlan.zhihu.com/p/27827321
    abcbuzhiming
        33
    abcbuzhiming  
    OP
       2017-09-22 11:40:05 +08:00
    @wangjie
    @duola
    @wangjie
    没换啊,就是因为没换所以才有比较啊
    abcbuzhiming
        34
    abcbuzhiming  
    OP
       2017-09-22 11:40:16 +08:00
    @carlclone 你才傻逼
    abcbuzhiming
        35
    abcbuzhiming  
    OP
       2017-09-22 11:43:06 +08:00   ❤️ 3
    @ChefIsAwesome 什么叫张嘴就来,你自己没体验吧,就拿淘宝来说,现在的淘宝首页打开的时候比 5 年前费劲多了,5 年前的淘宝首页打开无论速度还是 CPU 占有率都没现在这么高,现在我的宽带是 5 年前的 25 倍,CPU 停留在 I5 3570,可是打开淘宝首页不仅明显感觉页面载入变慢了,而且 CPU 转的茫茫快
    Sapp
        36
    Sapp  
       2017-09-22 15:30:53 +08:00
    @abcbuzhiming 刚试了试,我的淘宝是秒进去的,就是图片出来需要个 1-2 秒才能全出来。几年前淘宝什么样我已经忘了,但是我估摸着能比淘宝这个速度快,也就百度首页那种了。
    abcbuzhiming
        37
    abcbuzhiming  
    OP
       2017-09-22 15:36:30 +08:00
    @Sapp 你有没有注意这个过程中你的 CPU 占用率,尤其是此时如果你往下滚动一下页面会发现你的 CPU 占用率飙升,这个可是 5 年前绝对没有的现象
    Tunar
        38
    Tunar  
       2017-09-22 15:37:50 +08:00 via Android
    忙着吵架😓
    Sapp
        39
    Sapp  
       2017-09-22 15:41:34 +08:00
    @abcbuzhiming 我又去试了一下,cpu 除了刚进去 cpu 升高了,后面一直保持着稳稳地没动,几秒之后就跌回来了,使用率从 5% 升到了 10%, 还有 90% 多闲置着。
    EchoChan
        40
    EchoChan  
       2017-09-22 16:00:04 +08:00 via iPhone
    麻烦把性能定义清楚。
    abcbuzhiming
        41
    abcbuzhiming  
    OP
       2017-09-22 16:02:13 +08:00
    @Sapp 对啊,就是刚进去的时候,这个现象在 5 年前是没有的,载入页面 DOM 树时浏览器对 CPU 的占用飙升,这种现象在 5 年前只出现在无节制的在页面上的堆 flash 的网页。而且 5 年前的淘宝是没有这种载入时 CPU 占用飙升的情况的,而且淘宝还算比较好的了,有的网站居然能把 I5 飚到 80%以上,这在 5 年前是没有的
    abcbuzhiming
        42
    abcbuzhiming  
    OP
       2017-09-22 16:05:12 +08:00
    @EchoChan 从按下回车,浏览器下载页面并最终完成页面渲染的这段时间,CPU 的占用率比 5 年前高出了许多,渲染的平均时间慢于 5 年前,而这 5 年时间 Html5 和 js 的变化并没有太大,唯一的变化就是少了吃资源大户 flash,所以我觉得这很不合理
    longaiwp
        43
    longaiwp  
       2017-09-22 16:16:36 +08:00   ❤️ 1
    恕我直言,你这就是无视历史的进程,5 年前桌面客户端都还是 cpp/C#之流,安装包不超过 30M 的比比皆是。现在那些 Electron 耗费的资源比以前多得多了,也没人管了,因为他们用上了高贵的 mac,那些还在用 HDD 和 5 年前电脑的人都不是人你懂吗?前端的道理一模一样
    codermagefox
        44
    codermagefox  
       2017-09-22 16:26:53 +08:00   ❤️ 1
    也就楼主会来做这种吐槽了,为啥不尝试用 5 年前的电脑玩游戏呢?现在网页的复杂度和五年前的也没法比了吧?
    EchoChan
        45
    EchoChan  
       2017-09-22 16:38:03 +08:00 via iPhone
    @abcbuzhiming 那不叫“性能变差”。
    em84
        46
    em84  
       2017-09-22 17:09:41 +08:00
    5 年来楼主的头像越来越色情啦
    expy
        47
    expy  
       2017-09-22 17:35:22 +08:00
    硬件进步,软件要求也高了。Windows10 不用 ssd 卡成🐶
    UnPace
        48
    UnPace  
       2017-09-22 17:52:11 +08:00
    @chinvo PM 不背这个锅
    santree
        49
    santree  
       2017-09-22 17:56:26 +08:00
    所以嘛,网页就该回到五年前那种简单的样子,要不然哪来那么多屁事。(滑稽
    sunber
        50
    sunber  
       2017-09-22 18:21:22 +08:00
    你应该骂淘宝,IE8 居然都不支持了,搞毛线啊
    hantsy
        51
    hantsy  
       2017-09-22 18:53:00 +08:00
    @sunber 从编程角度考虑兼容 IE 都是受罪,Angular 之类好像不支持 IE 9 了,IE 10 也需要 Polyfills。
    bbsteel
        52
    bbsteel  
       2017-09-22 19:01:18 +08:00 via Android
    笑看前端同学发飙
    ChefIsAwesome
        53
    ChefIsAwesome  
       2017-09-22 19:13:33 +08:00
    还滚动的时候 cpu 转。。。网页上的图片滚动了才加载,它 cpu 能不能转吗?也不动动脑子想想你提的那些词有哪几个跟加载速度有关系的。
    gouflv
        54
    gouflv  
       2017-09-22 19:31:11 +08:00
    已楼主目前的认知和需求, 放心用 jquery 就好了
    FYK
        55
    FYK  
       2017-09-22 20:27:59 +08:00
    不好意思,被头像吸引了。。。
    bookit
        56
    bookit  
       2017-09-22 20:38:27 +08:00
    同感。

    浏览器应该全面禁止 js
    punchx
        57
    punchx  
       2017-09-22 20:46:37 +08:00
    后端业务前移,时势所趋,规模不同,前端也要负责项目的业务而非纯展现.
    Zora
        58
    Zora  
       2017-09-22 20:46:57 +08:00
    看来,用旧机子的。。不配做某些人的客户,呵呵
    生意原来是这样做的。。
    est
        59
    est  
       2017-09-22 21:46:24 +08:00
    html5 css3 做同样的炫酷效果比 flash 卡的多。还得手撸动画代码没法可视化编辑。canvas 缩放不行。最后最关键的还她妈没法禁用。

    而且。。。还有浏览器兼容性问题

    当时喷 flash 的纯属无脑。
    Martox
        60
    Martox  
       2017-09-22 21:49:51 +08:00
    看你的发帖纪录,我大概就知道了,你为什么会这样问了。
    wineway
        61
    wineway  
       2017-09-22 23:25:40 +08:00 via Android
    有性能冗余就一定会有功能填补上来,很简单的道理
    SilentDepth
        62
    SilentDepth  
       2017-09-23 23:51:18 +08:00
    @est #59 那,继续用起 Flash ?
    wdlth
        63
    wdlth  
       2017-09-24 12:37:25 +08:00
    因为现在有部分网站都放到前端渲染了
    zachguo
        64
    zachguo  
       2017-12-18 13:00:36 +08:00 via Android
    @saran 黑错了,很多网页慢就是乱七八糟脚本多 Dom 操作多 tracker 多。
    现在业务逻辑都从后端移到前端了,前端 app 都能上几十万行代码,这些框架才之所以存在,后端放云上后也就是些增查改删的 API,ETL 和些胶水 microservices。
    saran
        65
    saran  
       2017-12-18 13:22:54 +08:00
    @zachguo 没错吧,vue\ng\raect 不都是 JS 吗,到头来不还是干了脚本的事~ 嘻嘻[二哈]
    zachguo
        66
    zachguo  
       2017-12-18 13:31:39 +08:00 via Android
    @saran 看不懂你回的什么。。。
    kfll
        67
    kfll  
       2018-03-09 08:54:21 +08:00 via iPhone
    以前前端没事做,天天搞性能,还有指标。

    现在有事做了。
    gs139
        68
    gs139  
       2018-03-15 21:35:31 +08:00
    因为所谓的前端技术,让一个页面需要调用 n 个 api 接口,才能显示出来,以前都是在服务器一股脑渲染好了再输出的。
    lybtongji
        69
    lybtongji  
       2020-08-09 19:20:41 +08:00
    怎么这样的纯探讨帖楼上这么多来吵架的……

    我感觉除了前端各种接口外,阿里系的 js 还各种混淆,解密就花了不少系统资源……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2701 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:04 · PVG 23:04 · LAX 07:04 · JFK 10:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.