这是一个创建于 319 天前的主题，其中的信息可能已经有所发展或是发生改变。
起因：最近换了大台式机，主要硬件：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 年了，技术一般，目前就是混日子养老的状态，都懒得学习提升自己了。
 |
1
cannedPineapple 319 天前
是不是列表的操作 每个都有一个对应的 dialog ， 可以在父组件写一个 dialog ，或者使用单例模式 只打开一个组件，应该会减少 dom 吧，或者关闭禁止 hmtl 滚动，或者滚动不冒到 html ，方法很多一个个试试呗
|
 |
2
wu67 319 天前  1
个人认为, 在当代浏览器环境下, 基本被三大框架统治的前端, 不涉及循环 /表格 /列表等大量数据的情况下, 基本不用考虑性能问题
|
 |
3
lilei2023 OP @cannedPineapple 就是一个登录框，其实 和 v2 的页面结构大体类似， 顶部是一个导航菜单，还有一个登录按钮，点击按钮，弹出一个登录框。
|
 |
5
74123gzy 308 天前
只关注过一次，tob 项目 但是测试提了，内存占用过高，把几个下拉框改成懒加载了
|
Select Language