各位同行前辈，你们开发的时候，有特别关注浏览器（代码）性能问题么

[lilei2023]

起因：最近换了大台式机，主要硬件：AMD3600 + 2060 显卡，查看之前做的一个功能，无论 4k 1k ，显示 dialog 都很流畅，

之前环境： 硬件：nuc8 i5beh ，外接 4K + 1k 两个显示器 软件：chrome 109

当时基于 headlessui + tailwindcss 写了一个 react dialog 组件，在一个 dom 比较多（ 1w 标签）的页面，4k 显示器中，dialog 显示的时候，会有轻微的卡顿，但是 1k 下很流畅

后来通过 chrome 性能分析工具发现，是由于 dialog 显示的时候，会给 html 添加样式禁止滚动，style="overflow: hidden; padding-right: 17px;"，这个过程会很耗时，技术有限没弄明白为啥，个人猜测是回流 /重绘导致的，外加 GPU 性能不够。因为是个玩具项目，也懒得继续研究。

从事前端也差不多快 8 年了，技术一般，目前就是混日子养老的状态，都懒得学习提升自己了。

[cannedPineapple]

是不是列表的操作 每个都有一个对应的 dialog ， 可以在父组件写一个 dialog ，或者使用单例模式 只打开一个组件，应该会减少 dom 吧，或者关闭禁止 hmtl 滚动，或者滚动不冒到 html ，方法很多一个个试试呗

[wu67]

个人认为, 在当代浏览器环境下, 基本被三大框架统治的前端, 不涉及循环 /表格 /列表等大量数据的情况下, 基本不用考虑性能问题

[lilei2023]

@cannedPineapple 就是一个登录框，其实 和 v2 的页面结构大体类似， 顶部是一个导航菜单，还有一个登录按钮，点击按钮，弹出一个登录框。

[lilei2023]

@wu67 me too

[74123gzy]

只关注过一次，tob 项目 但是测试提了，内存占用过高，把几个下拉框改成懒加载了