页面加载只耗时 53ms 但是浏览器接收到 html 页面数据渲染显示出页面却需要 1.5s 左右，有没有什么插件可以加速页面渲染的？

2024-05-23 10:34:21 +08:00
 frozenway

页面是一个表单，里面有大量的选择框、输入框、按钮 radio|checkbox 。这些都有一个 id ，下拉选择的选项基本都有 1000 个选项。有没有办法加速页面渲染的技术？

1863 次点击
所在节点    前端开发
13 条回复
BeijingBaby
2024-05-23 10:36:27 +08:00
"下拉选择的选项基本都有 1000 个选项",异步加载这些选项。
monokuma88
2024-05-23 10:47:28 +08:00
整这么大的表单用户用起来也很难受的，需求重新想想吧。可以考虑分割为多个 step 的方式，多次提交。
sentinelK
2024-05-23 11:16:36 +08:00
没有，因为你的 dom 元素复杂度在这里。
所以就像楼上说的，应该从渲染复杂度，或者产品设计流程上下手去优化。
ck65
2024-05-23 11:18:13 +08:00
下拉改为带模糊搜索的下拉，候选项异步加载
menglizhi2333
2024-05-23 11:32:43 +08:00
选择框不用 UI 框架提供的，而是使用浏览器原生选择器，这样也能避免渲染过多 dom 节点
winglight2016
2024-05-23 11:46:40 +08:00
1000 个选项居然直接放下拉框？这产品经理是咋想的，combobox 或者弹出框更用户友好吧
chenliangngng
2024-05-23 13:36:58 +08:00
懒加载
potatowish
2024-05-23 13:42:04 +08:00
1000 个下拉选项有实际意义吗，解决办法一个是 remote search ，模糊搜索，一个是将选项进行多级分类，级联加载
cnhothandx
2024-05-23 13:57:28 +08:00
Chrome Dev Tools 有个 Lighthouse ，能测量页面加载性能并给出评分和修改建议生成 Report ，优化后再跑到 90 分以上优秀就可以了。
wunonglin
2024-05-23 14:14:53 +08:00
虚拟滚动不都是标配了吗？

https://material.angular.io/cdk/scrolling/overview#creating-items-in-the-viewport
NerbraskaGuy
2024-05-23 14:45:35 +08:00
1000 个下拉选项不会是页面加载的时候也生成了吧，这种得做分页或者改成模糊搜索
frozenway
2024-05-23 15:27:23 +08:00
@NerbraskaGuy 是页面上的
```
<body>
...
<select id="aa" name="xx">
<option value="1">1</option>
...
<option value="1001">1001</option>
</select>
...
</body>
```
这样的
runlongyao2
2024-06-13 15:27:12 +08:00
虚拟列表了解下

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1043181

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX