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

今天处理了一个奇葩的 IE 性能问题,可能我以前低估了 IE 的性能多差

  •  
  •   murmur · 2020-11-23 22:11:04 +08:00 · 6775 次点击
    这是一个创建于 1221 天前的主题,其中的信息可能已经有所发展或是发生改变。

    需求很简单,一个 50 行左右的简单表格,每行有三四个文本框可以编辑,做了表列锁定,用的饿了么 UI,用户说 IE11 卡,按理说都是这几年买的电脑,win10 也装了,IE11 性能怎么也不可能这么差

    分析过程略,直接给结果,我们来做题

    每行 4 个文本框,50 行,那么一页就有 200 个文本框

    因为饿了么的列锁定是 2 个重叠表格实现的,也就是同样的文本框渲染了 2 次,所以一页现在就有 400 个文本框

    关键来了,IE11 下,饿了么的 input 会计算自己的高度(我们知道,老一点的浏览器在获取计算长宽这样的属性时会把所有缓存的东西算一下得到正确值),这样一次 patch 需要 20-30ms

    所以这 400 个文本框的总耗时会超过 10 秒,虽然性能分析模式慢一些,但是实际上也要 6 秒以上了

    50 条回复    2020-11-25 15:56:12 +08:00
    ke1vin
        1
    ke1vin  
       2020-11-24 01:04:16 +08:00
    说得跟 chrome 就不会卡一样,没记错的话 Element UI 的 input 进来就会执行一个触发重绘的函数
    charlie21
        2
    charlie21  
       2020-11-24 01:30:23 +08:00 via iPhone
    大概这就是大佬吧
    aaronlam
        3
    aaronlam  
       2020-11-24 01:56:14 +08:00
    之前做过一个公司的内部系统也是表格,也是 Element-UI,但是我的表格有 10-20 个列,并且有编辑模式,编辑模式下有些列还需要转为 Input 和 Select 组件。然后以至于在 IE 下奇卡无比,但是在 Chrome 和 Firefox 就表现良好。后面把表格折腾成了虚拟滚动才算是解决卡顿问题,但是体验感觉就没有原来的真实滚动来的好。IE 的性能真的不能直视。。
    secondwtq
        4
    secondwtq  
       2020-11-24 01:58:14 +08:00
    Safari 就不会有这个问题(
    PopRain
        5
    PopRain  
       2020-11-24 07:46:39 +08:00 via Android
    以前用 IE 打开谷歌的在线电子表格感觉不出性能问题,这个列更多
    jorneyr
        6
    jorneyr  
       2020-11-24 09:05:34 +08:00   ❤️ 1
    @PopRain 这么看来,根源在 Element Ui 上
    wdhwg001
        7
    wdhwg001  
       2020-11-24 09:06:00 +08:00
    没有苹果的 WebKit 项目的话,那就是你现在能用的最好的浏览器了。
    murmur
        8
    murmur  
    OP
       2020-11-24 09:06:17 +08:00
    @jorneyr 是的,他们再 issue 里明确表态用两个表格重叠实现列固定是设计,不属于 bug,虽然我也想不到更好的本法
    murmur
        9
    murmur  
    OP
       2020-11-24 09:10:22 +08:00
    @wdhwg001 微软的 edge 虽然不稳定性能也不差,firefox 和 opera 我记得以前也是自研引擎
    ragnaroks
        10
    ragnaroks  
       2020-11-24 09:13:51 +08:00
    做法没问题,问题出在一次计算居然要 20ms 以上,1ms 都足够大型游戏刷写十几次
    loading
        11
    loading  
       2020-11-24 09:14:22 +08:00 via Android
    从 ie5.5 走过来的表示:习惯了。
    loading
        12
    loading  
       2020-11-24 09:16:08 +08:00 via Android   ❤️ 1
    现在更快的计算机,代码性能问题很容易被掩盖,现在的手机性能能登多少次月了,如果让现在的人去写,可能都不能离地。
    eitomomobaohua
        13
    eitomomobaohua  
       2020-11-24 09:22:00 +08:00
    @murmur Edge 是 Chrome 内核啊,Chrome 也是 Webkit 的分支
    no1xsyzy
        14
    no1xsyzy  
       2020-11-24 09:26:16 +08:00   ❤️ 1
    @ragnaroks 你说的这个大型游戏,它现场排版吗?
    no1xsyzy
        15
    no1xsyzy  
       2020-11-24 09:26:41 +08:00
    @eitomomobaohua 老 Edge 不是 Chromium 内核
    xiyuesaves
        16
    xiyuesaves  
       2020-11-24 09:28:44 +08:00
    @eitomomobaohua edge 转成 Chromium 内核也只是今年年初的事情啊,在此之前用的是自研 EdgeHTML
    idealhs
        17
    idealhs  
       2020-11-24 09:42:19 +08:00
    @wdhwg001 现代内核有很多,不要哪里都吹果
    wdhwg001
        18
    wdhwg001  
       2020-11-24 09:45:19 +08:00 via iPhone
    @murmur 但是它们之中只有火狐有在推行标准,最大的贡献就是逼着 IE 实现了完整的 CSS3 支持,但是直到 WebKit 普及之前,JScript 和 ActiveX 都是浏览器的金标准。
    wdhwg001
        19
    wdhwg001  
       2020-11-24 10:01:38 +08:00 via iPhone
    @idealhs 就连 IE 11 都是果时代的结果了,你看 IE 11 里有多少对-webkit-的支持就知道了。
    ruanimal
        20
    ruanimal  
       2020-11-24 10:09:11 +08:00
    @wdhwg001 WebKit 的 HTML 及 JavaScript 代码源自 KDE 的 KHTML 及 KJS 库的一个分支, 别把苹果抬那么高
    wdhwg001
        21
    wdhwg001  
       2020-11-24 10:17:06 +08:00 via iPhone
    @ruanimal 它们关系早就远到够不着了,不要血统论了。
    sandman511
        22
    sandman511  
       2020-11-24 10:17:27 +08:00
    不懂就问,表列锁定是什么意思
    murmur
        23
    murmur  
    OP
       2020-11-24 10:20:42 +08:00
    @sandman511 就是固定几列,后面的列可以随便拖动,比如你看人员信息表,我就把姓名这列固定
    Lemeng
        24
    Lemeng  
       2020-11-24 10:21:11 +08:00
    ie 主要比较轻便,实用性确实差
    BarZu
        25
    BarZu  
       2020-11-24 12:15:59 +08:00
    惊讶,现在做的系统竟然还要支持 IE 。。。我都是指定用户用哪个浏览器的[手动狗头]
    Torpedo
        26
    Torpedo  
       2020-11-24 12:20:22 +08:00
    IE 的问题是就是持续维护迭代的太少了
    IE6 的问题就是从业界领先,到业界毒瘤
    IE11 后面就是 edge 、chrome edge 了。
    本身代码还是可以,关键看投了多少人持续迭代维护
    royzxq
        27
    royzxq  
       2020-11-24 12:36:46 +08:00
    都是指定用户使用 chrome 70+的
    royzxq
        28
    royzxq  
       2020-11-24 12:38:33 +08:00
    另外为什么会有 200 个文本框呢... 每一个表格节点都渲染了一个文本框?
    redtea
        29
    redtea  
       2020-11-24 12:40:41 +08:00 via iPhone
    IE 已死
    murmur
        30
    murmur  
    OP
       2020-11-24 12:42:53 +08:00
    @royzxq 因为是编辑模式,每一行都有几个单元格可以改,所以行少架不住可以编辑的框框多
    JJstyle
        31
    JJstyle  
       2020-11-24 13:03:38 +08:00
    做过类似的需求,但是我们的项目要求用 chrome 才能打开,进首页就已经拦截了,哈哈哈
    Dogergo
        32
    Dogergo  
       2020-11-24 13:59:27 +08:00
    Element Ui 数据表格,尤其是列固定的情况下性能贼差,曾经在一个项目中用过,layui 会好上很多,虽然不知道 layui 的具体实现是什么样的,没有具体研究。
    darknoll
        33
    darknoll  
       2020-11-24 14:20:53 +08:00
    IE 的问题有啥可分析的,强制用户使用 chrome 呗
    jmyz0455
        34
    jmyz0455  
       2020-11-24 14:29:10 +08:00
    五年前吧好像,兼容 IE 的一个工单系统,那时候欧朋火狐还是自研引擎的时代,包括微软自家的 Edge 。做出来之后,其他浏览器都是非常完美的。IE11 就是无法正常使用树控件,要求不高数据也不多,就是异步加载然后展示更多,老是在加载的时候卡,要么是展开的时候卡,换了好多插件都不行,晕。
    eitomomobaohua
        35
    eitomomobaohua  
       2020-11-24 14:41:17 +08:00
    @no1xsyzy 不好意思,我给忘了 233
    eitomomobaohua
        36
    eitomomobaohua  
       2020-11-24 14:43:20 +08:00
    @xiyuesaves 我错了,你不说我都忘了...
    murmur
        37
    murmur  
    OP
       2020-11-24 14:45:12 +08:00
    @darknoll 用户出钱做 IE 兼容当然是要做的
    reus
        38
    reus  
       2020-11-24 14:47:19 +08:00
    @ragnaroks 你什么游戏一秒过万帧?
    darknoll
        39
    darknoll  
       2020-11-24 15:05:26 +08:00
    @murmur 那就没办法了,你自己接的活,含着泪也要干完。如果换做我,我肯定是不会接这个兼容 IE 的活
    ragnaroks
        40
    ragnaroks  
       2020-11-24 18:46:30 +08:00
    @reus 正在玩的过万的没有,csgo 5800x-smt,rtx3080,fpsbenchmark 工坊图 1047fps
    ragnaroks
        41
    ragnaroks  
       2020-11-24 18:50:41 +08:00
    @reus get 到你的点了,是我搞错进制,我把秒和毫秒搞成 100 了
    sagaxu
        42
    sagaxu  
       2020-11-24 18:57:19 +08:00 via Android
    @wdhwg001 firefox 可没用 webkit
    ofooo
        43
    ofooo  
       2020-11-24 22:41:07 +08:00
    所以这就是产品设计问题啊。50 个问题,一气输入完,万一刷新一下没了。。。。。

    用户不得气死?得是什么用户,才会一气输入 50 个问题啊。。。。是产品的儿子么
    bojackhorseman
        44
    bojackhorseman  
       2020-11-24 23:50:27 +08:00 via iPhone
    编辑表格用弹窗实现呢,会不会减少不必要的渲染
    laminux29
        45
    laminux29  
       2020-11-25 00:42:28 +08:00
    七八年前,用.net webform,推过一个 10*20 的简单表格,浏览器卡了 47 秒。
    autoxbc
        46
    autoxbc  
       2020-11-25 01:20:30 +08:00
    @wdhwg001 #18 其实 Opera 也在积极推动标准,当年 W3C 的 CSS 专家组很多是 Opera 的雇员,CSS 测试套件 Acid2 只有 Opera 能通过
    murmur
        47
    murmur  
    OP
       2020-11-25 08:10:52 +08:00
    @ofooo 打分,填表,而且都是加分项,选填得,现在得技术 blur 得时候做一个保存又不难,局域网内网速还是随便用得
    krixaar
        48
    krixaar  
       2020-11-25 08:35:45 +08:00
    @ragnaroks Valve:好的,那服务器就设置成 64tick 吧🤣
    imn1
        49
    imn1  
       2020-11-25 10:16:48 +08:00
    400 个文本框……不知道怎么接话
    murmur
        50
    murmur  
    OP
       2020-11-25 15:56:12 +08:00
    @imn1 是 200 个文本框,因为设计问题被渲染 2 次所以是 400 个,你可以理解成 50 个人,每个人 4 个分数项,你是领导给他们打分,这个场景就好理解了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2897 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 13:58 · PVG 21:58 · LAX 06:58 · JFK 09:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.