页面是一个表单,里面有大量的选择框、输入框、按钮 radio|checkbox 。这些都有一个 id ,下拉选择的选项基本都有 1000 个选项。有没有办加速页面渲染的技术?
![]() | 1 BeijingBaby 2024-05-23 10:36:27 +08:00 ![]() "下拉选择的选项基本都有 1000 个选项",异步加载这些选项。 |
![]() | 2 monokuma88 2024-05-23 10:47:28 +08:00 ![]() 整这么大的表单用户用起来也很难受的,需求重新想想吧。可以考虑分割为多个 step 的方式,多次提交。 |
![]() | 3 sentinelK 2024-05-23 11:16:36 +08:00 ![]() 没有,因为你的 dom 元素复杂度在这里。 所以就像楼上说的,应该从渲染复杂度,或者产品设计流程上下手去优化。 |
![]() | 4 mogita 2024-05-23 11:18:13 +08:00 ![]() 下拉改为带模糊搜索的下拉,候选项异步加载 |
![]() | 5 menglizhi2333 2024-05-23 11:32:43 +08:00 ![]() 选择框不用 UI 框架提供的,而是使用浏览器原生选择器,这样也能避免渲染过多 dom 节点 |
![]() | 6 winglight2016 2024-05-23 11:46:40 +08:00 ![]() 1000 个选项居然直接放下拉框?这产品经理是咋想的,combobox 或者弹出框更用户友好吧 |
7 chenliangngng 2024-05-23 13:36:58 +08:00 ![]() 懒加载 |
![]() | 8 potatowish 2024-05-23 13:42:04 +08:00 via iPhone ![]() 1000 个下拉选项有实际意义吗,解决办法一个是 remote search ,模糊搜索,一个是将选项进行多级分类,级联加载 |
9 cnhothandx 2024-05-23 13:57:28 +08:00 ![]() Chrome Dev Tools 有个 Lighthouse ,能测量页面加载性能并给出评分和修改建议生成 Report ,优化后再跑到 90 分以上优秀就可以了。 |
![]() | 10 shakaraka PRO ![]() |
![]() | 11 NerbraskaGuy 2024-05-23 14:45:35 +08:00 1000 个下拉选项不会是页面加载的时候也生成了吧,这种得做分页或者改成模糊搜索 |
![]() | 12 frozenway OP @NerbraskaGuy 是页面上的 ``` <body> ... <select id="aa" name="xx"> <option value="1">1</option> ... <option value="1001">1001</option> </select> ... </body> ``` 这样的 |
13 runlongyao2 2024-06-13 15:27:12 +08:00 虚拟列表了解下 |