当前位置:首页 > 科技  > 软件

Vue3 中如何做高性能的拼音搜索,提高用户体验?

来源: 责编: 时间:2024-05-24 17:25:20 139观看
导读下拉框搜索最近页面中需要一个下拉框,并且支持搜索功能(搜索选项文本和拼音),这是一个挺普通的小功能,代码如下:request.ts 先准备一些假的下拉框数据,并模拟请求:图片Index.vue 中进行请求,并渲染下拉框,配置一些属性,支持搜索

下拉框搜索

最近页面中需要一个下拉框,并且支持搜索功能(搜索选项文本和拼音),这是一个挺普通的小功能,代码如下:4Pn28资讯网——每日最新资讯28at.com

request.ts 先准备一些假的下拉框数据,并模拟请求:4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

Index.vue 中进行请求,并渲染下拉框,配置一些属性,支持搜索选项文本:4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

可以看到实现了搜索文本,但是产品说还得支持搜索拼音呢~可以看到当前是不支持搜索拼音的。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

拼音搜索

拼音搜索其实也不难,用一些库即可,比如 pinyin-pro。4Pn28资讯网——每日最新资讯28at.com

pnpm i pinyin-pro

我可以使用 pinyin-pro 这个库,在获取数据的时候为每一项的文本进行拼音翻译,并放到字段 keywords 中。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

现在可以看到每一项都有一个 keywords 字段,里面存了每一项的文本和拼音。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

接着,在页面中配置一下 Select 的搜索过滤函数。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

现在就支持了文本搜索和拼音搜索了。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

多个下拉框拼音搜索

上面例子是只有一个,那如果有多个下拉框呢?比如有两个下拉框,我准备了两个下拉框的假数据。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

接着在页面中展示两个下拉框:4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

可以看到两个下拉框的拼音数据耗时情况,其实当时页面上不止两个下拉框,大概有十几个下拉框,且数据都很巨大,如果每一个下拉框都要接近200ms的耗时的话,那用户体验会很不好。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

性能优化

根据观察,我发现我这个页面的十几个下拉框其实都有很多下拉项是相同的,这意味着,有一些项存在重复翻译的问题。4Pn28资讯网——每日最新资讯28at.com

就比如这个“放米”,options1翻译过一遍了,options2还翻译一遍,这就导致了性能损耗。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

所以其实可以使用缓存来进行优化,思路就是:4Pn28资讯网——每日最新资讯28at.com

1、准备一个对象,key 是文本,value 是拼音4Pn28资讯网——每日最新资讯28at.com

2、每次翻译的时候4Pn28资讯网——每日最新资讯28at.com

先检测对象里是否能匹配到。4Pn28资讯网——每日最新资讯28at.com

能匹配到直接用,不能匹配到才调用 pinyin-pro 进行翻译。4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

这样的话,能避免文本的重复翻译,从而提升性能,由于 options2 有很多跟 options1 相同的项,所以 options2 很多项的翻译都是直接取缓存的,数据处理的速度大大提升!4Pn28资讯网——每日最新资讯28at.com

图片图片4Pn28资讯网——每日最新资讯28at.com

其实这种方式也是有局限性的,如果每一个 options 的数据重合度都不高的话,那么这种优化方式也就没啥意义了4Pn28资讯网——每日最新资讯28at.com

所以最好的方式还是叫后端翻译好拼音,传给前端。4Pn28资讯网——每日最新资讯28at.com

类似的场景

其实不止是上面举的例子,还有其他项目中类似的场景,需要用到这种优化方式,比如:复杂的翻译、复杂的数据处理。4Pn28资讯网——每日最新资讯28at.com

例子终究是例子,重要的是能举一反三。4Pn28资讯网——每日最新资讯28at.com

本文链接://www.dmpip.com//www.dmpip.com/showinfo-26-90669-0.htmlVue3 中如何做高性能的拼音搜索,提高用户体验?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 来自 Rust 生态的强烈冲击?谈谈 Leptos 在语法设计上的精妙之处

下一篇: 分享七个.NET开源、功能强大的快速开发框架

标签:
  • 热门焦点
  • 直屏旗舰来了 iQOO 12和K70 Pro同台竞技

    直屏旗舰来了 iQOO 12和K70 Pro同台竞技

    旗舰机基本上使用的都是双曲面屏幕,这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰,这次,你们等到了。据博主数码闲聊站带来的最新爆料称,Redmi下代旗舰K70 Pro和iQOO 12两款手
  • 摸鱼心法第一章——和配置文件说拜拜

    摸鱼心法第一章——和配置文件说拜拜

    为了能摸鱼我们团队做了容器化,但是带来的问题是服务配置文件很麻烦,然后大家在群里进行了“亲切友好”的沟通图片图片图片图片对比就对比,简单对比下独立配置中心和k8s作为配
  • 得物效率前端微应用推进过程与思考

    得物效率前端微应用推进过程与思考

    一、背景效率工程随着业务的发展,组织规模的扩大,越来越多的企业开始意识到协作效率对于企业团队的重要性,甚至是决定其在某个行业竞争中突围的关键,是企业长久生存的根本。得物
  • 一篇文章带你了解 CSS 属性选择器

    一篇文章带你了解 CSS 属性选择器

    属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。一、了解属性选择器CSS属性选择器提供了一种简单而
  • “又被陈思诚骗了”

    “又被陈思诚骗了”

    作者|张思齐 出品|众面(ID:ZhongMian_ZM)如今的国产悬疑电影,成了陈思诚的天下。最近大爆电影《消失的她》票房突破30亿断层夺魁暑期档,陈思诚再度风头无两。你可以说陈思诚的
  • 消费结构调整丨巨头低价博弈,拼多多还卷得动吗?

    消费结构调整丨巨头低价博弈,拼多多还卷得动吗?

    来源:征探财经作者:陈香羽随着流量红利的退潮,电商的存量博弈越来越明显。曾经主攻中高端与品质的淘宝天猫、京东重拾“低价”口号。而过去与他们错位竞争的拼多多,靠
  • 品牌洞察丨服务本地,美团直播成效几何?

    品牌洞察丨服务本地,美团直播成效几何?

    来源:17PR7月11日,美团App首页推荐位出现“美团直播”的固定入口。在直播聚合页面,外卖“神枪手”直播间、美团旅行直播间、美团买菜直播间等均已上线,同时
  • AMD的AI芯片转单给三星可能性不大 与台积电已合作至2nm制程

    AMD的AI芯片转单给三星可能性不大 与台积电已合作至2nm制程

    据 DIGITIMES 消息,英伟达 AI GPU 出货逐季飙升,接下来 AMD MI 300 系列将在第 4 季底量产。而半导体业内人士表示,近日传出 AMD 的 AI 芯片将转单给
  • Windows 11发布,微软一改往常对老机型开放的态度

    Windows 11发布,微软一改往常对老机型开放的态度

    距离 Windows 11 发布已经过去一周,在过去一周里,很多数码爱好者围绕其对 Android 应用的支持、对老机型的升级问题展开了激烈讨论。与以往不同的是,在这次大
Top
Baidu
map