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

关于前端布局嵌套一些疑惑。

  •  
  •   whyrookie · 2023-05-26 15:45:50 +08:00 · 3263 次点击
    这是一个创建于 550 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近断断续续学习一些前端知识,在看一些视频,里面的老师写页面的时候似乎很少强调减少布局的嵌套,自己一直都是写 Android 项目,对于布局的多层嵌套特别敏感,为了提升一些性能,想尽办法减少布局嵌套。是否是因为前端这块布局嵌套对性能影响比较小?

    26 条回复    2023-05-27 19:43:18 +08:00
    crazyweeds
        1
    crazyweeds  
       2023-05-26 15:52:14 +08:00   ❤️ 2
    你可以用 react 的 chrome 插件看下阿里云效的嵌套层数,应该有 50 层吧,也有人说嵌套尽量别超过 10 层。
    所以,我感觉优先代码可维护性即可。
    flyqie
        2
    flyqie  
       2023-05-26 15:55:01 +08:00   ❤️ 1
    Android 跟浏览器在性能上的优化点是不一样的。。

    况且现代化的 JS 前端框架都会对布局嵌套这边做某些优化。
    superedlimited
        3
    superedlimited  
       2023-05-26 16:01:21 +08:00   ❤️ 1
    Android 必须减少嵌套,所以才会出现 constraint layout ,但是现在的 compose 似乎和前端一样,不用强调减少嵌套了。
    lisongeee
        4
    lisongeee  
       2023-05-26 16:42:21 +08:00
    曾经做过微博 Android 客户端的无障碍节点查询,当时用的 forEach + 递归 遍历树,直接爆栈了
    查了一下发现最深的节点是 104 层,后面就不用递归改用数组了
    retrocode
        5
    retrocode  
       2023-05-26 16:46:53 +08:00   ❤️ 1
    换个角度想就理解了, 不是什么嵌套别超过多少多少层, 而是控制整个页面的总节点数量避免影响渲染性能, 主要是初次渲染性能,
    现在配合虚拟 dom 和各种优化, 嵌套层级尽量少现在更多是"规范", 主要点是减少无用嵌套增强代码可读性, 真正需要靠较少节点优化性能的场景已经很少了
    star7th
        6
    star7th  
       2023-05-26 16:47:39 +08:00   ❤️ 1
    web 的嵌套确实对性能影响非常小。而且为了实现复杂布局,web 的嵌套可能会有很多层。
    karott7
        7
    karott7  
       2023-05-26 16:48:51 +08:00   ❤️ 1
    多年页面仔表示第一次听说要减少布局全套的,一直没想过这个问题,不过写代码肯定会下意识减少无效元素
    thinkershare
        8
    thinkershare  
       2023-05-26 16:59:33 +08:00
    Web, 不用刻意减少嵌套,只要记住标记应该是内容,而不应该是为了添加某个样式而构造,有了 flex 后,Web 的嵌套以前没有以前那么变态了。
    ixiumu
        9
    ixiumu  
       2023-05-26 17:06:47 +08:00
    现代浏览器不需要考虑这个 又不是 IE 时代 不要无限循环爆内存就行了 你找两款大型 HTML5 游戏 体会一下
    wangtian2020
        10
    wangtian2020  
       2023-05-26 17:22:25 +08:00
    学校教的和工作用的完全不是一回事,学校里的老师教的实践知识只有过时的、错误的。
    比如我上学的时候 sql 老师说一定要手写建表语句,后来发现公司里都是用图形化建表。
    前端性能问题只会出现在代码中逻辑算法层面,稍微有点常识的人都是写不出来的。
    前端安卓也有原生 Android APP 和 web APP 的区别,不明白你是指哪个。
    代码只管写只管跑,不卡就不要管
    LavaC
        11
    LavaC  
       2023-05-26 17:32:34 +08:00   ❤️ 2
    web 元素这么多,为了实现某些样式嵌套是必须的,不要有心理负担。
    不过这倒让我想起来以前 V 友做过的一个测试浏览器性能的网页,你可以借此一窥浏览器套框框的上限 t/864602
    thetbw
        12
    thetbw  
       2023-05-26 17:32:51 +08:00   ❤️ 1
    我也感觉,html 写起来好爽呀,一个布局怎么写都行,反正是那样的。反而是安卓,感觉写起来工作量好大
    Jame00001
        13
    Jame00001  
       2023-05-26 17:34:54 +08:00   ❤️ 1
    前端也强调啊,不过是要求自己的。没有必要肯定越少越好。毕竟元素越多渲染消耗越大。
    Track13
        14
    Track13  
       2023-05-26 20:41:03 +08:00 via Android
    性能影响几乎没有,而且不少人不让他多套几层就得费更多时间。
    Anarchy
        15
    Anarchy  
       2023-05-26 21:25:07 +08:00
    在 Android 也是个伪需求,我除了在面经上就没遇到过因为嵌套过多导致的性能问题,这大概率都是早年设备太渣了。或者有些 Layout 本身写的有问题导致了一些操作变成指数级上升,不过 Android 比较容易自己去改测量、布局的代码,结合这些才有这个不要过多嵌套的经验吧。
    ruoxie
        16
    ruoxie  
       2023-05-26 22:25:48 +08:00   ❤️ 3
    开发体验 > 开发速度 > 性能,也许你写的页面上线一个星期后就没人用了
    wunonglin
        17
    wunonglin  
       2023-05-26 22:29:50 +08:00
    怕不是没看过 cloued.google.com 的控制台。去看看能吓死人
    darkengine
        18
    darkengine  
       2023-05-26 22:36:46 +08:00
    业界的一个准则,不要提前优化
    ChefIsAwesome
        19
    ChefIsAwesome  
       2023-05-26 22:54:22 +08:00   ❤️ 1
    网页一样的。渲染的节点数越多,速度越慢。三个方面:
    1.dom 本身耗性能。
    2.css 计算耗性能。
    3.创建 dom 对应的 js 耗性能。

    网页现在都是拿来做电脑端的管理后台。硬件性能强不说,资源还都耗在页面首次渲染那一下,100ms 和 200ms 没什么区别。
    做移动端就不一样了。像那种 recycle view ,网页上做的性能非常差,滚过去内容渲染不出来。不去抠嵌套、节点数是不可能优化出来的。
    autoxbc
        20
    autoxbc  
       2023-05-27 01:24:14 +08:00   ❤️ 1
    @darkengine #18 减少不必要的嵌套并不算优化,只是把事情做对。两点间直线最短,走直线算优化么,挖虫洞才算
    AyaseEri
        21
    AyaseEri  
       2023-05-27 01:51:38 +08:00
    不是没影响,一般前端性能问题还轮不到需要抠嵌套层级的地步
    ivslyyy
        22
    ivslyyy  
       2023-05-27 04:14:55 +08:00   ❤️ 1
    安卓里往 activity 里拖 ui 组件
    嵌套比较少

    很久以前 html+css 时候,也是一个 html 里写一些 ui ,其实嵌套也少

    但近来的主流前端 ui 库
    讲虚拟解析树、组件化、函数式、
    这些概念就容易形成嵌套

    如果在 vue 、react 里,硬要一个文件写几千好几万行,我也见过这样的项目,
    而且他们的项目、收入还不错。
    这样写想必嵌套就少一点。
    wu67
        23
    wu67  
       2023-05-27 10:30:34 +08:00   ❤️ 2
    前端布局的少嵌套只有一个主观作用. 方便你写和读 html 代码部分的效率, 而不是优化浏览器执行的速度,
    当然我不否定精简 /优化后的代码也许执行起来更快, 但是现代浏览器以及硬件性能的提升, 使得这部分代码的优化作用几乎可以忽略不计.
    n18255447846
        24
    n18255447846  
       2023-05-27 16:14:54 +08:00   ❤️ 1
    嵌套多少层都行,真的注重性能的话,应该尽量避免重绘
    darkengine
        25
    darkengine  
       2023-05-27 16:23:13 +08:00
    @autoxbc 问题是你得先把页面做出来,再看卡顿不卡顿,是否要通过减少嵌套解决。
    lilei2023
        26
    lilei2023  
       2023-05-27 19:43:18 +08:00   ❤️ 1
    减少嵌套是没问题,不过现代浏览器性能应该足够了,只要不碰到极端情况就没问题,你看看现在的一些库,那可是好几层的嵌套。注意一下回流,dom 多了有时候会卡
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1029 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 21:41 · PVG 05:41 · LAX 13:41 · JFK 16:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.