这是一个创建于 581 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近断断续续学习一些前端知识，在看一些视频，里面的老师写页面的时候似乎很少强调减少布局的嵌套，自己一直都是写 Android 项目，对于布局的多层嵌套特别敏感，为了提升一些性能，想尽办法减少布局嵌套。是否是因为前端这块布局嵌套对性能影响比较小？
 |
1
crazyweeds 2023-05-26 15:52:14 +08:00  2
你可以用 react 的 chrome 插件看下阿里云效的嵌套层数，应该有 50 层吧，也有人说嵌套尽量别超过 10 层。
所以，我感觉优先代码可维护性即可。 |
 |
2
flyqie 2023-05-26 15:55:01 +08:00 1
Android 跟浏览器在性能上的优化点是不一样的。。
况且现代化的 JS 前端框架都会对布局嵌套这边做某些优化。 |
 |
3
superedlimited 2023-05-26 16:01:21 +08:00 1
Android 必须减少嵌套，所以才会出现 constraint layout ，但是现在的 compose 似乎和前端一样，不用强调减少嵌套了。
|
 |
4
lisongeee 2023-05-26 16:42:21 +08:00
曾经做过微博 Android 客户端的无障碍节点查询，当时用的 forEach + 递归 遍历树，直接爆栈了
查了一下发现最深的节点是 104 层，后面就不用递归改用数组了 |
 |
5
retrocode 2023-05-26 16:46:53 +08:00 1
换个角度想就理解了, 不是什么嵌套别超过多少多少层, 而是控制整个页面的总节点数量避免影响渲染性能, 主要是初次渲染性能,
现在配合虚拟 dom 和各种优化, 嵌套层级尽量少现在更多是"规范", 主要点是减少无用嵌套增强代码可读性, 真正需要靠较少节点优化性能的场景已经很少了 |
 |
6
star7th 2023-05-26 16:47:39 +08:00 1
web 的嵌套确实对性能影响非常小。而且为了实现复杂布局，web 的嵌套可能会有很多层。
|
 |
7
karott7 2023-05-26 16:48:51 +08:00 1
多年页面仔表示第一次听说要减少布局全套的，一直没想过这个问题，不过写代码肯定会下意识减少无效元素
|
 |
8
thinkershare 2023-05-26 16:59:33 +08:00
Web, 不用刻意减少嵌套，只要记住标记应该是内容，而不应该是为了添加某个样式而构造，有了 flex 后，Web 的嵌套以前没有以前那么变态了。
|
 |
9
ixiumu 2023-05-26 17:06:47 +08:00
现代浏览器不需要考虑这个 又不是 IE 时代 不要无限循环爆内存就行了 你找两款大型 HTML5 游戏 体会一下
|
 |
10
wangtian2020 2023-05-26 17:22:25 +08:00
学校教的和工作用的完全不是一回事，学校里的老师教的实践知识只有过时的、错误的。
比如我上学的时候 sql 老师说一定要手写建表语句，后来发现公司里都是用图形化建表。 前端性能问题只会出现在代码中逻辑算法层面，稍微有点常识的人都是写不出来的。 前端安卓也有原生 Android APP 和 web APP 的区别，不明白你是指哪个。 代码只管写只管跑，不卡就不要管 |
 |
11
LavaC 2023-05-26 17:32:34 +08:00 2
web 元素这么多，为了实现某些样式嵌套是必须的，不要有心理负担。
不过这倒让我想起来以前 V 友做过的一个测试浏览器性能的网页，你可以借此一窥浏览器套框框的上限 t/864602 |
 |
12
thetbw 2023-05-26 17:32:51 +08:00 1
我也感觉，html 写起来好爽呀，一个布局怎么写都行，反正是那样的。反而是安卓，感觉写起来工作量好大
|
 |
13
Jame00001 2023-05-26 17:34:54 +08:00 1
前端也强调啊，不过是要求自己的。没有必要肯定越少越好。毕竟元素越多渲染消耗越大。
|
 |
14
Track13 2023-05-26 20:41:03 +08:00 via Android
性能影响几乎没有，而且不少人不让他多套几层就得费更多时间。
|
 |
15
Anarchy 2023-05-26 21:25:07 +08:00
在 Android 也是个伪需求，我除了在面经上就没遇到过因为嵌套过多导致的性能问题，这大概率都是早年设备太渣了。或者有些 Layout 本身写的有问题导致了一些操作变成指数级上升，不过 Android 比较容易自己去改测量、布局的代码，结合这些才有这个不要过多嵌套的经验吧。
|
 |
16
ruoxie 2023-05-26 22:25:48 +08:00 3
开发体验 > 开发速度 > 性能，也许你写的页面上线一个星期后就没人用了
|
 |
17
wunonglin 2023-05-26 22:29:50 +08:00
怕不是没看过 cloued.google.com 的控制台。去看看能吓死人
|
 |
18
darkengine 2023-05-26 22:36:46 +08:00
业界的一个准则，不要提前优化
|
 |
19
ChefIsAwesome 2023-05-26 22:54:22 +08:00 1
网页一样的。渲染的节点数越多，速度越慢。三个方面：
1.dom 本身耗性能。 2.css 计算耗性能。 3.创建 dom 对应的 js 耗性能。 网页现在都是拿来做电脑端的管理后台。硬件性能强不说，资源还都耗在页面首次渲染那一下，100ms 和 200ms 没什么区别。 做移动端就不一样了。像那种 recycle view ，网页上做的性能非常差，滚过去内容渲染不出来。不去抠嵌套、节点数是不可能优化出来的。 |
 |
20
autoxbc 2023-05-27 01:24:14 +08:00 1
@darkengine #18 减少不必要的嵌套并不算优化，只是把事情做对。两点间直线最短，走直线算优化么，挖虫洞才算
|
 |
21
AyaseEri 2023-05-27 01:51:38 +08:00
不是没影响，一般前端性能问题还轮不到需要抠嵌套层级的地步
|
 |
22
ivslyyy 2023-05-27 04:14:55 +08:00 1
安卓里往 activity 里拖 ui 组件
嵌套比较少 很久以前 html+css 时候，也是一个 html 里写一些 ui ，其实嵌套也少 但近来的主流前端 ui 库 讲虚拟解析树、组件化、函数式、 这些概念就容易形成嵌套 如果在 vue 、react 里，硬要一个文件写几千好几万行，我也见过这样的项目， 而且他们的项目、收入还不错。 这样写想必嵌套就少一点。 |
 |
23
wu67 2023-05-27 10:30:34 +08:00 2
前端布局的少嵌套只有一个主观作用. 方便你写和读 html 代码部分的效率, 而不是优化浏览器执行的速度,
当然我不否定精简 /优化后的代码也许执行起来更快, 但是现代浏览器以及硬件性能的提升, 使得这部分代码的优化作用几乎可以忽略不计. |
 |
24
n18255447846 2023-05-27 16:14:54 +08:00 1
嵌套多少层都行，真的注重性能的话，应该尽量避免重绘
|
|
25
darkengine 2023-05-27 16:23:13 +08:00
@autoxbc 问题是你得先把页面做出来，再看卡顿不卡顿，是否要通过减少嵌套解决。
|
 |
26
lilei2023 2023-05-27 19:43:18 +08:00 1
减少嵌套是没问题，不过现代浏览器性能应该足够了，只要不碰到极端情况就没问题，你看看现在的一些库，那可是好几层的嵌套。注意一下回流，dom 多了有时候会卡
|
Select Language