时间戳

首页 > 解决方案 > Inputosaurus / jQuery 加载时间

javascript - Inputosaurus / jQuery 加载时间

问题描述

我正在使用Inputosaurus向我的客户管理系统添加一些精美的自动完成标签。就化妆品和生产力而言，这是一个漂亮的系统。

问题是大量的加载时间。

HTML 页面加载了几个图像（有时数百个），每个图像都有自己的相同自动完成术语列表的实例。生成的 JavaScript 在最终的 HTML 文件中如下所示：

<script>
$('#tags_0001').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0002').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
$('#tags_0003').inputosaurus({
    width : '100%',
    autoCompleteSource : ["A Midsummer Night's Dream","A Modest Proposal","A Particular Entertainment","A Tale of a Tub","A Yorkshire Tragedy","A.G. Werner","Abbasid","Abbe de la Roque","Abel Berland","Aborigines","Abou Mandour","Aboukir","Abraham Munting","Abraham van Diepenbeeck","Absalom and Achitophel","Abu Mandour","Abukir","Abyssinia Map","Academie Royale des Sciences","Accipies","Accounting","Achaean","Achitecture","Acts of Parliament","Admiral Mendoza portrait","Aegean Sea","Aeneid","Aeneis","Aesop","Aethiopia","Aetiis","Afghanistan"],
    activateFinalResult : true});
</script>

现在考虑这个例子截断了“autoCompleteSource”列表。实际上，它通过 1,000 多个术语（每个实例）产生超过 19-20 百万的 HTML 字符数！

这似乎是 jQuery 引用这些术语的数组（或变量字符串）的理想情况，但我真的不确定 HTML 是否支持这一点。

我很惊讶在 Web 上没有看到太多关于此的内容。我希望这仅仅是我缺乏用于糟糕搜索的 JS 词典，而不是根本没有解决方案。

我敢肯定，这里的其他人以前也遇到过这种情况——在这种情况下我应该使用什么替代方法？

如果我遗漏了任何重要的诊断信息，请告诉我。

提前谢谢你。

标签： javascriptjqueryperformance

解决方案

用户将输入一个单词，在他实际输入任何内容之前向客户发送数千个可能的单词是多余的。相反，您应该等待用户输入前几个字符，然后将它们发送到服务器，查询并过滤所有可能的术语，并且只将匹配的那些返回，然后将该小列表发送回客户端，再次过滤它在用户已经输入的其他字符上。

谷歌的话：AJAX 和fetch().

推荐阅读