是否可以“缓冲”DOM 循环中发生的变化（以提高性能）？
Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?
为了弄清楚我在问什么，这是我的例子 (fiddle)。
我有一个大约 500 个随机名称的列表。我在顶部有一个具有实时搜索功能的输入。在每个 keyup 上，输入的值都被获取，列表中的每个项目都与它匹配。不匹配的项目被隐藏。
主观上，性能还可以，但不是很好。如果您快速键入，则在列表更新之前会有明显的停顿。我没有分析代码，但瓶颈几乎可以肯定是对 DOM 的更改及其导致的回流。
我想知道是否可以将这些更改“排队”并仅在循环结束时实际应用它们。所以这将是一次巨大的回流，而不是很多小回流。
在 fiddle 的另一个版本中，我使用了 RegExp 来更好地匹配和呈现。尽管我在这一个中使用了更多 DOM 操作（adding/removing 标记以启用匹配突出显示），性能 感觉 大致相同。我也尝试在 CSS 中添加 visible/hidden 类 并将元素的 className 设置为该元素，因为这应该表现更好（搜索 javascript 回流和重绘 stubgella—我不能 post 超过 2 个链接）但在我的测试中 (Firefox 54) 我发现它 更糟.所以我不知道那里发生了什么。
我想我实际上问的是：如何使这段代码更快？
为什么不使用下划线的去抖功能来限制获取新数据的调用次数？我通常对搜索输入字段使用 3-400 毫秒的延迟。这将减少 dom 更改的次数，并且如果用户打字速度较慢，还将防止搜索结果闪烁。
没有必要缓冲对 DOM 的更新，DOM 本身在 reflowing/rerendering.
之前就已经很好了
您的目标是对 DOM 进行 更少 更新，仅使用 廉价 交互，因为 尽可能少 交互（其中 "interactions" 包括吸气剂）。哦，永远不要使用强制回流的属性。
500 个元素非常可行，您的第一个 fiddle 对我来说已经很灵敏了。第二，我确定了一些问题区域和可能的改进：
innerText is bad. Really bad. It forces a reflow, as it takes into account styling and will not return invisible text (which also did break your fiddle). Use textContent instead.innerHTML 几乎一样糟糕，因为它需要调用 HTML 解析器。 500 次。有时（对于大块）这可能比手动更新 DOM 的每个部分更快，但这里不是。不要销毁并重新创建所有这些标签，而是将元素保留在 DOM.- 去抖动。您已经这样做了，但您可能想使用
requestAnimationFrame 而不是非常小的 setTimeout，这样 DOM 在呈现之前只更新一次。
- 与DOM无关，但
new RegExp也相当昂贵。您只需要调用一次，而不是为每个项目调用它。
- 不要在每次调用函数时从DOM查询
listItems，而是像对list和[=19那样在函数外缓存数组=].您还可以做得更好：同时缓存它们的内容和样式对象，这样您就不必通过 DOM. 访问它们
因此，一旦您修复了“Quick hacky way to remove <b>s”（正如您自己记录的那样），大部分问题都应该消失了。这是我的方法的要点：
var search = document.getElementById('s');
var items = Array.from(document.getElementById('l').children, function(li) {
return {
text: li.textContent,
style: li.style,
pre: li.firstChild, // the text node
match: li.appendChild(document.createElement("span"))
.appendChild(document.createTextNode("")),
post: li.appendChild(document.createTextNode(""))
};
});
function searchAction() {
var term = search.value;
var re = new RegExp(term, 'i'); // case insensitive
for (var {text, style, pre, match, post} of items) {
var m = text.match(re);
if (m) {
pre.nodeValue = text.slice(0, m.index);
match.nodeValue = m[0];
post.nodeValue = text.slice(m.index + m[0].length);
show(style);
} else {
hide(style);
}
}
}
只要您不查询 trigger an immediate reflow 浏览器已经为您批量更新的属性，并且在 javascript 完成后仅 relayouts/repaints 页面。您应该能够在浏览器开发工具中验证这一点。
但是您的代码有一个微不足道的优化：避免冗余 DOM 操作，尤其是对于无论如何都不可见的元素。
申请隐藏物品的else分支：
else {
hideItem(item);
toPlainText(item);
}
toPlainText 操纵 DOM 即使元素将被隐藏或已经被隐藏。
许多 JS mvvm 框架，如 Reactjs 和 Vuejs 已经应用了 'virtual DOM mechanism'。它会在一个事件循环中批量处理所有 DOM 更新，让你免于频繁 DOM 的惩罚operations.I 认为您可以从该实现中获益。
有时候，跳出框框思考是非常有益的...
CSS 允许您使用 "display: none" 轻松隐藏许多元素，并且浏览器在 CSS 方面得到了非常好的优化。
那么有没有一种方法可以将此 CSS 规则应用于您搜索的字词，并让浏览器为您完成这项工作？ （是的！）
var search = document.getElementById('s');
var list = document.getElementById('l');
var styling = document.getElementById('t');
var searchAction = function() {
var term = search.value;
if (term == '') styling.innerHTML = '';
else styling.innerHTML = '#l>li:not([data-name *= "' + term + '"]) {display: none}';
}
var searchActivateEvent = function() {
timeoutThing.restartSaveTimeout(searchAction);
}
search.addEventListener('keyup', searchActivateEvent, false);
var timeoutThing = {
INPUT_TIMEOUT: 00, // ms
saveTimeoutID: null,
restartSaveTimeout: function(thingToDo) {
this.cancelSaveTimeout();
var that = this;
this.saveTimeoutID = window.setTimeout(function() {
thingToDo();
}, this.INPUT_TIMEOUT);
},
cancelSaveTimeout: function() {
clearTimeout(this.saveTimeoutID);
}
}
li {
transition: heigwht .25s ease-in-out, opacity .75s ease-in-out;
}
span {
background: wheat;
border-radius: 2px;
}
li.hidden {
display: none;
}
li.visibru {
display: list-item;
}
<input id="s">
<style id="t"></style>
<ul id="l">
<li data-name='Vicente Yeates'>Vicente Yeates</li>
<li data-name='Bryant Mcmiller'>Bryant Mcmiller</li>
<li data-name='Analisa Shetterly'>Analisa Shetterly</li>
<li data-name='Dorotha Graniero'>Dorotha Graniero</li>
<li data-name='Monte Laranjo'>Monte Laranjo</li>
<li data-name='Ross Olynger'>Ross Olynger</li>
<li data-name='Antione Ruehl'>Antione Ruehl</li>
<li data-name='Shayla Lamprecht'>Shayla Lamprecht</li>
<li data-name='Latasha Sarkodie'>Latasha Sarkodie</li>
<li data-name='Duncan Kellems'>Duncan Kellems</li>
<li data-name='Ike Yanos'>Ike Yanos</li>
<li data-name='Whitley Catanese'>Whitley Catanese</li>
<li data-name='Lisa Janek'>Lisa Janek</li>
<li data-name='Lucas Ahrends'>Lucas Ahrends</li>
<li data-name='Kena Firmin'>Kena Firmin</li>
<li data-name='Doug Rardin'>Doug Rardin</li>
<li data-name='Pilar Awender'>Pilar Awender</li>
<li data-name='Melda Barlup'>Melda Barlup</li>
<li data-name='Teodoro Bartunek'>Teodoro Bartunek</li>
<li data-name='Amira Fiene'>Amira Fiene</li>
<li data-name='Kris Ormsby'>Kris Ormsby</li>
<li data-name='Digna Engelbert'>Digna Engelbert</li>
<li data-name='Chase Schingeck'>Chase Schingeck</li>
<li data-name='Marc Capraro'>Marc Capraro</li>
<li data-name='Angele World'>Angele World</li>
<li data-name='Rex Alvirez'>Rex Alvirez</li>
<li data-name='Margarett Weyer'>Margarett Weyer</li>
<li data-name='Cedric Nevils'>Cedric Nevils</li>
<li data-name='Charisse Guglielmo'>Charisse Guglielmo</li>
<li data-name='September Shedd'>September Shedd</li>
<li data-name='Charlie Buffaloe'>Charlie Buffaloe</li>
<li data-name='Andreas Totten'>Andreas Totten</li>
<li data-name='Selma Almen'>Selma Almen</li>
<li data-name='Karleen Lamarsh'>Karleen Lamarsh</li>
<li data-name='Carlton Ence'>Carlton Ence</li>
<li data-name='Laverna Cassio'>Laverna Cassio</li>
<li data-name='Veta Oblinski'>Veta Oblinski</li>
<li data-name='Mariko Oliveros'>Mariko Oliveros</li>
<li data-name='Lasandra Ellsworth'>Lasandra Ellsworth</li>
<li data-name='Jose Phinisee'>Jose Phinisee</li>
<li data-name='Jody Karlson'>Jody Karlson</li>
<li data-name='Sharice Horst'>Sharice Horst</li>
<li data-name='Joshua Collar'>Joshua Collar</li>
<li data-name='Alexander Starnaud'>Alexander Starnaud</li>
<li data-name='Arthur Bachorski'>Arthur Bachorski</li>
<li data-name='Ignacio Laubach'>Ignacio Laubach</li>
<li data-name='Lucrecia Hildago'>Lucrecia Hildago</li>
<li data-name='Natashia Barton'>Natashia Barton</li>
<li data-name='Aimee Zumot'>Aimee Zumot</li>
<li data-name='Ashley Topping'>Ashley Topping</li>
<li data-name='Ceola Rosebrough'>Ceola Rosebrough</li>
<li data-name='Steve Wellinghoff'>Steve Wellinghoff</li>
<li data-name='Brant Bintz'>Brant Bintz</li>
<li data-name='Enrique Spratley'>Enrique Spratley</li>
<li data-name='Issac Braylock'>Issac Braylock</li>
<li data-name='Odis Slingluff'>Odis Slingluff</li>
<li data-name='Kara Louth'>Kara Louth</li>
<li data-name='Columbus Delmuro'>Columbus Delmuro</li>
<li data-name='Jenniffer Moree'>Jenniffer Moree</li>
<li data-name='Mei Perfecto'>Mei Perfecto</li>
<li data-name='Terri Buren'>Terri Buren</li>
<li data-name='Andrea Figurelli'>Andrea Figurelli</li>
<li data-name='Thersa Everhardt'>Thersa Everhardt</li>
<li data-name='Raisa Rabuck'>Raisa Rabuck</li>
<li data-name='Demarcus Bodman'>Demarcus Bodman</li>
<li data-name='Javier Lovenduski'>Javier Lovenduski</li>
<li data-name='Jackie Jeck'>Jackie Jeck</li>
<li data-name='Cyrus Olivid'>Cyrus Olivid</li>
<li data-name='Timmy Lozoya'>Timmy Lozoya</li>
<li data-name='Eldridge Elton'>Eldridge Elton</li>
<li data-name='Noble Abelson'>Noble Abelson</li>
<li data-name='Marlys Cannell'>Marlys Cannell</li>
<li data-name='Sylvie Laughery'>Sylvie Laughery</li>
<li data-name='Bobbie Grahl'>Bobbie Grahl</li>
<li data-name='Katharine Gillispie'>Katharine Gillispie</li>
<li data-name='Kena Papik'>Kena Papik</li>
<li data-name='Gordon Boda'>Gordon Boda</li>
<li data-name='Dominick Moreida'>Dominick Moreida</li>
<li data-name='Josue Schellman'>Josue Schellman</li>
<li data-name='Wallace Bacho'>Wallace Bacho</li>
<li data-name='Jeffry Griffins'>Jeffry Griffins</li>
<li data-name='Stacia Corrett'>Stacia Corrett</li>
<li data-name='Theron Orey'>Theron Orey</li>
<li data-name='Pete Haering'>Pete Haering</li>
<li data-name='Stewart Gommer'>Stewart Gommer</li>
<li data-name='Delbert Thompsom'>Delbert Thompsom</li>
<li data-name='Johna Dell'>Johna Dell</li>
<li data-name='Rashad Beckham'>Rashad Beckham</li>
<li data-name='Colby Callison'>Colby Callison</li>
<li data-name='Keenan Hegan'>Keenan Hegan</li>
<li data-name='Nia Rollans'>Nia Rollans</li>
<li data-name='Marie Kahawai'>Marie Kahawai</li>
<li data-name='Luz Keib'>Luz Keib</li>
<li data-name='Yukiko Bohler'>Yukiko Bohler</li>
<li data-name='Clotilde Golightley'>Clotilde Golightley</li>
<li data-name='Franklyn Feichter'>Franklyn Feichter</li>
<li data-name='Irving Kendi'>Irving Kendi</li>
<li data-name='Willow Debettignies'>Willow Debettignies</li>
<li data-name='Arnoldo Terzian'>Arnoldo Terzian</li>
<li data-name='Billie Mancini'>Billie Mancini</li>
<li data-name='John Vanleer'>John Vanleer</li>
<li data-name='Jennell Bielke'>Jennell Bielke</li>
<li data-name='Myong Curie'>Myong Curie</li>
<li data-name='Tanesha Kirouac'>Tanesha Kirouac</li>
<li data-name='Jim Conely'>Jim Conely</li>
<li data-name='Samella Sonnek'>Samella Sonnek</li>
<li data-name='Emily Golaszewski'>Emily Golaszewski</li>
<li data-name='Homer Warsing'>Homer Warsing</li>
<li data-name='Maryalice Scotten'>Maryalice Scotten</li>
<li data-name='Kacie Seliba'>Kacie Seliba</li>
<li data-name='Carolee Bordelon'>Carolee Bordelon</li>
<li data-name='Kurt Moss'>Kurt Moss</li>
<li data-name='Vanessa Mcquigg'>Vanessa Mcquigg</li>
<li data-name='Joey Hatridge'>Joey Hatridge</li>
<li data-name='Brande Pamphile'>Brande Pamphile</li>
<li data-name='Jacelyn Floris'>Jacelyn Floris</li>
<li data-name='Christen Brownrigg'>Christen Brownrigg</li>
<li data-name='Signe Calvani'>Signe Calvani</li>
<li data-name='Lenard Dela'>Lenard Dela</li>
<li data-name='Jacob Aina'>Jacob Aina</li>
<li data-name='Jovan Dozier'>Jovan Dozier</li>
<li data-name='Alden Einhorn'>Alden Einhorn</li>
<li data-name='Milagro Moua'>Milagro Moua</li>
<li data-name='Zoe Blatti'>Zoe Blatti</li>
<li data-name='Jon Reck'>Jon Reck</li>
<li data-name='Dennis Katie'>Dennis Katie</li>
<li data-name='Jenny Dewall'>Jenny Dewall</li>
<li data-name='Lon Zable'>Lon Zable</li>
<li data-name='Winfred Rentfro'>Winfred Rentfro</li>
<li data-name='Lavette Feng'>Lavette Feng</li>
<li data-name='Stacey Beloff'>Stacey Beloff</li>
<li data-name='Earnest Hansrote'>Earnest Hansrote</li>
<li data-name='Faustino Dewaters'>Faustino Dewaters</li>
<li data-name='Jed Wears'>Jed Wears</li>
<li data-name='Cassidy Coho'>Cassidy Coho</li>
<li data-name='Frank Sparkes'>Frank Sparkes</li>
<li data-name='Ike Hechinger'>Ike Hechinger</li>
<li data-name='Carissa Labre'>Carissa Labre</li>
<li data-name='Brain Vanderhoef'>Brain Vanderhoef</li>
<li data-name='Bula Layel'>Bula Layel</li>
<li data-name='Joesph Dolman'>Joesph Dolman</li>
<li data-name='Roseanne Marcucci'>Roseanne Marcucci</li>
<li data-name='Larissa Carmer'>Larissa Carmer</li>
<li data-name='Ricki Fronek'>Ricki Fronek</li>
<li data-name='Al Massing'>Al Massing</li>
<li data-name='Stephen Baranow'>Stephen Baranow</li>
<li data-name='Phillip Espinola'>Phillip Espinola</li>
<li data-name='Emanuel Widmer'>Emanuel Widmer</li>
<li data-name='Dylan Isassi'>Dylan Isassi</li>
<li data-name='Daria Mound'>Daria Mound</li>
<li data-name='Buffy Vokes'>Buffy Vokes</li>
<li data-name='Hal Kimbril'>Hal Kimbril</li>
<li data-name='Kiera Merson'>Kiera Merson</li>
<li data-name='Trent Kravs'>Trent Kravs</li>
<li data-name='Genaro Browm'>Genaro Browm</li>
<li data-name='Kimber Reinert'>Kimber Reinert</li>
<li data-name='Jeremiah Kaduk'>Jeremiah Kaduk</li>
<li data-name='Nichelle Harney'>Nichelle Harney</li>
<li data-name='Hyun Divalerio'>Hyun Divalerio</li>
<li data-name='Ira Burlson'>Ira Burlson</li>
<li data-name='Kathie Longhenry'>Kathie Longhenry</li>
<li data-name='Shane Tierney'>Shane Tierney</li>
<li data-name='Beata Delaplane'>Beata Delaplane</li>
<li data-name='Ollie Staiger'>Ollie Staiger</li>
<li data-name='Zane Dittmar'>Zane Dittmar</li>
<li data-name='Shayne Toft'>Shayne Toft</li>
<li data-name='Tillie Haeckel'>Tillie Haeckel</li>
<li data-name='Federico Gilleland'>Federico Gilleland</li>
<li data-name='Howard Skowronek'>Howard Skowronek</li>
<li data-name='Franchesca Langley'>Franchesca Langley</li>
<li data-name='Stacy Elsa'>Stacy Elsa</li>
<li data-name='Elfreda Mckendrick'>Elfreda Mckendrick</li>
<li data-name='Madeline Reglin'>Madeline Reglin</li>
<li data-name='Keesha Mcgoogan'>Keesha Mcgoogan</li>
<li data-name='Debi Malcom'>Debi Malcom</li>
<li data-name='Carmine Finnigan'>Carmine Finnigan</li>
<li data-name='Dannie Fry'>Dannie Fry</li>
<li data-name='Eulah Skoog'>Eulah Skoog</li>
<li data-name='Weston Hanzely'>Weston Hanzely</li>
<li data-name='Jolynn Olpin'>Jolynn Olpin</li>
<li data-name='Raymundo Gossling'>Raymundo Gossling</li>
<li data-name='Eve Diflorio'>Eve Diflorio</li>
<li data-name='Mariano Leal'>Mariano Leal</li>
<li data-name='Beckie Hoh'>Beckie Hoh</li>
<li data-name='Danielle Lazenson'>Danielle Lazenson</li>
<li data-name='Ahmed Bhatti'>Ahmed Bhatti</li>
<li data-name='Inga Bilek'>Inga Bilek</li>
<li data-name='Huey Cockrel'>Huey Cockrel</li>
<li data-name='Tam Mcenery'>Tam Mcenery</li>
<li data-name='Gary Proietto'>Gary Proietto</li>
<li data-name='Karol Bussler'>Karol Bussler</li>
<li data-name='Mckinley Windisch'>Mckinley Windisch</li>
<li data-name='Celina Schroy'>Celina Schroy</li>
<li data-name='Dong Suitt'>Dong Suitt</li>
<li data-name='Jerrell Dermer'>Jerrell Dermer</li>
<li data-name='Domingo Opsahl'>Domingo Opsahl</li>
<li data-name='Nigel Nesslein'>Nigel Nesslein</li>
<li data-name='Toshia Nalty'>Toshia Nalty</li>
<li data-name='Jonas Intriago'>Jonas Intriago</li>
<li data-name='Cecila Crivaro'>Cecila Crivaro</li>
<li data-name='Bea Schulke'>Bea Schulke</li>
<li data-name='Collene Myatt'>Collene Myatt</li>
<li data-name='Kena Nepa'>Kena Nepa</li>
<li data-name='Dalia Burklow'>Dalia Burklow</li>
<li data-name='Harlan Rotherham'>Harlan Rotherham</li>
<li data-name='Connie Grosso'>Connie Grosso</li>
<li data-name='Shelton Brass'>Shelton Brass</li>
<li data-name='Yvette Hinch'>Yvette Hinch</li>
<li data-name='Elroy Barriger'>Elroy Barriger</li>
<li data-name='Earnest Henrickson'>Earnest Henrickson</li>
<li data-name='Neal Singhisen'>Neal Singhisen</li>
<li data-name='Kristofer Lunceford'>Kristofer Lunceford</li>
<li data-name='Dewey Bureau'>Dewey Bureau</li>
<li data-name='Lennie Cancro'>Lennie Cancro</li>
<li data-name='Kay Cherubini'>Kay Cherubini</li>
<li data-name='Moises Brugliera'>Moises Brugliera</li>
<li data-name='Edgardo Schoenle'>Edgardo Schoenle</li>
<li data-name='Lance Badena'>Lance Badena</li>
<li data-name='Floyd Kneedler'>Floyd Kneedler</li>
<li data-name='Adriana Gschwind'>Adriana Gschwind</li>
<li data-name='Jon Wzorek'>Jon Wzorek</li>
<li data-name='Trent Smyer'>Trent Smyer</li>
<li data-name='Nicholle Sovel'>Nicholle Sovel</li>
<li data-name='Hilda Maruschak'>Hilda Maruschak</li>
<li data-name='Jonell Schwartzberg'>Jonell Schwartzberg</li>
<li data-name='Maricela Sponsler'>Maricela Sponsler</li>
<li data-name='Janise Kleinert'>Janise Kleinert</li>
<li data-name='Domingo Atzhorn'>Domingo Atzhorn</li>
<li data-name='Fabian Talsky'>Fabian Talsky</li>
<li data-name='Mauro Mursko'>Mauro Mursko</li>
<li data-name='Arica Salemo'>Arica Salemo</li>
<li data-name='Simone Reinders'>Simone Reinders</li>
<li data-name='Desmond Scheperle'>Desmond Scheperle</li>
<li data-name='Lenora Rouhoff'>Lenora Rouhoff</li>
<li data-name='Georgette Yagues'>Georgette Yagues</li>
<li data-name='Mervin Kurkeyerian'>Mervin Kurkeyerian</li>
<li data-name='Mckinley Legate'>Mckinley Legate</li>
<li data-name='Argelia Douse'>Argelia Douse</li>
<li data-name='George Baldrey'>George Baldrey</li>
<li data-name='Brynn Hobkirk'>Brynn Hobkirk</li>
<li data-name='Cyrus Milbrodt'>Cyrus Milbrodt</li>
<li data-name='Terrance Kriete'>Terrance Kriete</li>
<li data-name='Janiece Ajello'>Janiece Ajello</li>
<li data-name='Roger Filippides'>Roger Filippides</li>
<li data-name='Zonia Mcmillion'>Zonia Mcmillion</li>
<li data-name='Sheba Kenzie'>Sheba Kenzie</li>
<li data-name='Bea Hauth'>Bea Hauth</li>
<li data-name='Jude Swets'>Jude Swets</li>
<li data-name='Queen Simar'>Queen Simar</li>
<li data-name='Armand Ruter'>Armand Ruter</li>
<li data-name='Mariana Blogg'>Mariana Blogg</li>
<li data-name='Lyle Peretti'>Lyle Peretti</li>
<li data-name='Wilhemina Basila'>Wilhemina Basila</li>
<li data-name='Kendrick Fennessy'>Kendrick Fennessy</li>
<li data-name='Lee Dorkin'>Lee Dorkin</li>
<li data-name='Monte Camba'>Monte Camba</li>
<li data-name='Lashell Stenz'>Lashell Stenz</li>
<li data-name='Waltraud Corte'>Waltraud Corte</li>
<li data-name='Krystle Giancola'>Krystle Giancola</li>
<li data-name='Raphael Bordwell'>Raphael Bordwell</li>
<li data-name='Johnny Urtiaga'>Johnny Urtiaga</li>
<li data-name='Johnie Africa'>Johnie Africa</li>
<li data-name='Blaine Scibilia'>Blaine Scibilia</li>
<li data-name='Ruben Pama'>Ruben Pama</li>
<li data-name='Annamarie Hupp'>Annamarie Hupp</li>
<li data-name='Dennis Heitland'>Dennis Heitland</li>
<li data-name='Cindy Peete'>Cindy Peete</li>
<li data-name='Jefferson Prekker'>Jefferson Prekker</li>
<li data-name='Maddie Grossnickle'>Maddie Grossnickle</li>
<li data-name='Ambrose Farahkhan'>Ambrose Farahkhan</li>
<li data-name='Launa Horrigan'>Launa Horrigan</li>
<li data-name='Cecil Obremski'>Cecil Obremski</li>
<li data-name='Delta Mccoy'>Delta Mccoy</li>
<li data-name='Shantell Bahar'>Shantell Bahar</li>
<li data-name='Tandra Pigler'>Tandra Pigler</li>
<li data-name='Lavern Banghart'>Lavern Banghart</li>
<li data-name='Maple Gramling'>Maple Gramling</li>
<li data-name='Wilma Seuss'>Wilma Seuss</li>
<li data-name='Sarita Fesperman'>Sarita Fesperman</li>
<li data-name='Aurelio Harkrader'>Aurelio Harkrader</li>
<li data-name='Art Lavezzo'>Art Lavezzo</li>
<li data-name='Lura Shaff'>Lura Shaff</li>
<li data-name='Jayme Baumer'>Jayme Baumer</li>
<li data-name='Adeline Dagraca'>Adeline Dagraca</li>
<li data-name='Nakia Benell'>Nakia Benell</li>
<li data-name='Clare Janski'>Clare Janski</li>
<li data-name='Tanja Boehmer'>Tanja Boehmer</li>
<li data-name='Eleanora Schwede'>Eleanora Schwede</li>
<li data-name='Dillon Dorrance'>Dillon Dorrance</li>
<li data-name='Alisa Kopchick'>Alisa Kopchick</li>
<li data-name='Leisha Harig'>Leisha Harig</li>
<li data-name='Dominic Gehrki'>Dominic Gehrki</li>
<li data-name='Moira Kiritsy'>Moira Kiritsy</li>
<li data-name='Brendan Avina'>Brendan Avina</li>
<li data-name='Deena Bejarano'>Deena Bejarano</li>
<li data-name='Hunter Spallina'>Hunter Spallina</li>
<li data-name='Jefferey Capes'>Jefferey Capes</li>
<li data-name='Juanita Creggett'>Juanita Creggett</li>
<li data-name='Jeffery Bielke'>Jeffery Bielke</li>
<li data-name='Rayford Klinich'>Rayford Klinich</li>
<li data-name='Ardell Vanderwege'>Ardell Vanderwege</li>
<li data-name='Jimmie Aland'>Jimmie Aland</li>
<li data-name='Junko Develbiss'>Junko Develbiss</li>
<li data-name='Nakesha Miners'>Nakesha Miners</li>
<li data-name='Alberto Muhlenkamp'>Alberto Muhlenkamp</li>
<li data-name='Alexis Vassil'>Alexis Vassil</li>
<li data-name='Normand Douthett'>Normand Douthett</li>
<li data-name='Delmar Gumz'>Delmar Gumz</li>
<li data-name='Emery Didyk'>Emery Didyk</li>
<li data-name='Marybelle Lagerberg'>Marybelle Lagerberg</li>
<li data-name='Eliseo Giblin'>Eliseo Giblin</li>
<li data-name='Ernestina Standre'>Ernestina Standre</li>
<li data-name='Burt Blanche'>Burt Blanche</li>
<li data-name='Dorsey Conyers'>Dorsey Conyers</li>
<li data-name='Edie Spires'>Edie Spires</li>
<li data-name='Agustin Wendeln'>Agustin Wendeln</li>
<li data-name='Austin Sasao'>Austin Sasao</li>
<li data-name='Deidre Otega'>Deidre Otega</li>
<li data-name='Tatiana Gata'>Tatiana Gata</li>
<li data-name='Dovie Zimmel'>Dovie Zimmel</li>
<li data-name='Freda Grzywinski'>Freda Grzywinski</li>
<li data-name='Solomon Mussell'>Solomon Mussell</li>
<li data-name='Jarod Canada'>Jarod Canada</li>
<li data-name='Bernard Missler'>Bernard Missler</li>
<li data-name='Alonzo Croom'>Alonzo Croom</li>
<li data-name='Elvin Arflack'>Elvin Arflack</li>
<li data-name='Suzann Pallazzo'>Suzann Pallazzo</li>
<li data-name='Shira Elsbury'>Shira Elsbury</li>
<li data-name='Randell Sterlin'>Randell Sterlin</li>
<li data-name='Darrick Revolorio'>Darrick Revolorio</li>
<li data-name='Dorian Mayeux'>Dorian Mayeux</li>
<li data-name='Cortney Teuteberg'>Cortney Teuteberg</li>
<li data-name='Eldon Schepis'>Eldon Schepis</li>
<li data-name='Coleman Chapnick'>Coleman Chapnick</li>
<li data-name='Bradford Andersson'>Bradford Andersson</li>
<li data-name='Rob Epperley'>Rob Epperley</li>
<li data-name='Kieth Lagman'>Kieth Lagman</li>
<li data-name='Chi Tereska'>Chi Tereska</li>
<li data-name='Celina Chantler'>Celina Chantler</li>
<li data-name='Suzanne Aguinaga'>Suzanne Aguinaga</li>
<li data-name='Madonna Boock'>Madonna Boock</li>
<li data-name='Rey Gun'>Rey Gun</li>
<li data-name='Jennie Capata'>Jennie Capata</li>
<li data-name='Zelma Brunecz'>Zelma Brunecz</li>
<li data-name='Hubert Yarrito'>Hubert Yarrito</li>
<li data-name='Ngan Crean'>Ngan Crean</li>
<li data-name='Claudie Marcou'>Claudie Marcou</li>
<li data-name='Monte Nicol'>Monte Nicol</li>
<li data-name='Lane Inacio'>Lane Inacio</li>
<li data-name='Lenny Alexis'>Lenny Alexis</li>
<li data-name='Lorene Sistek'>Lorene Sistek</li>
<li data-name='Brooks Merante'>Brooks Merante</li>
<li data-name='Rufina Krah'>Rufina Krah</li>
<li data-name='Bonnie Kieft'>Bonnie Kieft</li>
<li data-name='Luigi Wahr'>Luigi Wahr</li>
<li data-name='Brandee Noori'>Brandee Noori</li>
<li data-name='Gerard Rolson'>Gerard Rolson</li>
<li data-name='Noriko Buckman'>Noriko Buckman</li>
<li data-name='Marcella Bathrick'>Marcella Bathrick</li>
<li data-name='Harlan Michealson'>Harlan Michealson</li>
<li data-name='Julienne Fuerte'>Julienne Fuerte</li>
<li data-name='Olivia Ciliberto'>Olivia Ciliberto</li>
<li data-name='Lorenzo Pollnow'>Lorenzo Pollnow</li>
<li data-name='Eufemia Crigler'>Eufemia Crigler</li>
<li data-name='Emogene Tolar'>Emogene Tolar</li>
<li data-name='Steven Amoriello'>Steven Amoriello</li>
<li data-name='Stanford Minhas'>Stanford Minhas</li>
<li data-name='Adolfo Reddick'>Adolfo Reddick</li>
<li data-name='Michael Flight'>Michael Flight</li>
<li data-name='Teodora Axtman'>Teodora Axtman</li>
<li data-name='Takisha Metting'>Takisha Metting</li>
<li data-name='Johnnie Mullendore'>Johnnie Mullendore</li>
<li data-name='Dee Prowell'>Dee Prowell</li>
<li data-name='Joye Skarupa'>Joye Skarupa</li>
<li data-name='Bernetta Hugel'>Bernetta Hugel</li>
<li data-name='Jade Capra'>Jade Capra</li>
<li data-name='Sergio Gieringer'>Sergio Gieringer</li>
<li data-name='Lorraine Marinez'>Lorraine Marinez</li>
<li data-name='Eugenia Kreinbring'>Eugenia Kreinbring</li>
<li data-name='Karin Brackey'>Karin Brackey</li>
<li data-name='Sona Toothman'>Sona Toothman</li>
<li data-name='Tresa Sylvester'>Tresa Sylvester</li>
<li data-name='Emile Mccrate'>Emile Mccrate</li>
<li data-name='Miranda Coppage'>Miranda Coppage</li>
<li data-name='Wava Kathan'>Wava Kathan</li>
<li data-name='Euna Bate'>Euna Bate</li>
<li data-name='Reina Catalanatto'>Reina Catalanatto</li>
<li data-name='Jody Barner'>Jody Barner</li>
<li data-name='Margherita Demopoulos'>Margherita Demopoulos</li>
<li data-name='Yu Imboden'>Yu Imboden</li>
<li data-name='Irina Huppenbauer'>Irina Huppenbauer</li>
<li data-name='Forest Lowenthal'>Forest Lowenthal</li>
<li data-name='Jamar Loman'>Jamar Loman</li>
<li data-name='Maurice Kotler'>Maurice Kotler</li>
<li data-name='Renato Feldstein'>Renato Feldstein</li>
<li data-name='Dulcie Pinter'>Dulcie Pinter</li>
<li data-name='Doretta Breiner'>Doretta Breiner</li>
<li data-name='Mireille Betsinger'>Mireille Betsinger</li>
<li data-name='Jc Emerton'>Jc Emerton</li>
<li data-name='Yahaira Klee'>Yahaira Klee</li>
<li data-name='Glady Annen'>Glady Annen</li>
<li data-name='Jaime Alicandro'>Jaime Alicandro</li>
<li data-name='Branda Darnstaedt'>Branda Darnstaedt</li>
<li data-name='Christiane Kissik'>Christiane Kissik</li>
<li data-name='Lester Tartamella'>Lester Tartamella</li>
<li data-name='Nikki Shoaf'>Nikki Shoaf</li>
<li data-name='Vern Teteak'>Vern Teteak</li>
<li data-name='Albertha Vankilsdonk'>Albertha Vankilsdonk</li>
<li data-name='Greg Pesch'>Greg Pesch</li>
<li data-name='Nam Bahner'>Nam Bahner</li>
<li data-name='Korey Smit'>Korey Smit</li>
<li data-name='Brock Arview'>Brock Arview</li>
<li data-name='Robin Danos'>Robin Danos</li>
<li data-name='Jonah Shoener'>Jonah Shoener</li>
<li data-name='Bernardina Michelini'>Bernardina Michelini</li>
<li data-name='Cody Stachniw'>Cody Stachniw</li>
<li data-name='Maribeth Benner'>Maribeth Benner</li>
<li data-name='Louie Codell'>Louie Codell</li>
<li data-name='Alvera Vallarta'>Alvera Vallarta</li>
<li data-name='Amy Schmauder'>Amy Schmauder</li>
<li data-name='Doretha Megee'>Doretha Megee</li>
<li data-name='Clora Okins'>Clora Okins</li>
<li data-name='Antoine Colomba'>Antoine Colomba</li>
<li data-name='Daniell Tramel'>Daniell Tramel</li>
<li data-name='Marge Sebastian'>Marge Sebastian</li>
<li data-name='Savannah Ortic'>Savannah Ortic</li>
<li data-name='Renita Strahan'>Renita Strahan</li>
<li data-name='Elvia Deerman'>Elvia Deerman</li>
<li data-name='Kris Bonsal'>Kris Bonsal</li>
<li data-name='Lili Aulds'>Lili Aulds</li>
<li data-name='Roman Pessoa'>Roman Pessoa</li>
<li data-name='Shon Fonsecn'>Shon Fonsecn</li>
<li data-name='Elmo Mcclain'>Elmo Mcclain</li>
<li data-name='Brittni Stott'>Brittni Stott</li>
<li data-name='Byron Syndergaard'>Byron Syndergaard</li>
<li data-name='Quinn Hach'>Quinn Hach</li>
<li data-name='Joey Buissereth'>Joey Buissereth</li>
<li data-name='Benedict Giacobbe'>Benedict Giacobbe</li>
<li data-name='Merna Ihrke'>Merna Ihrke</li>
<li data-name='Chase Chryst'>Chase Chryst</li>
<li data-name='Truman Haroldsen'>Truman Haroldsen</li>
<li data-name='Carry Elswick'>Carry Elswick</li>
<li data-name='Raymonde Emrich'>Raymonde Emrich</li>
<li data-name='Isreal Kieke'>Isreal Kieke</li>
<li data-name='Fredricka Judy'>Fredricka Judy</li>
<li data-name='Brendan Brester'>Brendan Brester</li>
<li data-name='Karin Kitchell'>Karin Kitchell</li>
<li data-name='Tabitha Han'>Tabitha Han</li>
<li data-name='Dotty Vandeveer'>Dotty Vandeveer</li>
</ul>
<script src="file:///tmp/s.js"></script>
基本上：
- 使用属性存储要在其中搜索的值
- 定制一个自定义 CSS 选择器以应用 "display:none" 规则
- 使用一些 JS 来为 "style" 标签提供定制的选择器和规则
就是这样，没有更多的 JS 障碍，只是 CSS 以闪电般的速度完成它的工作。所有浏览器都支持，您只需更新页面中的 1 个隐藏元素（"script" 标签）。
我还更新了您的 JS fiddle 示例。
为了弄清楚我在问什么，这是我的例子 (fiddle)。
我有一个大约 500 个随机名称的列表。我在顶部有一个具有实时搜索功能的输入。在每个 keyup 上，输入的值都被获取，列表中的每个项目都与它匹配。不匹配的项目被隐藏。
主观上，性能还可以，但不是很好。如果您快速键入，则在列表更新之前会有明显的停顿。我没有分析代码，但瓶颈几乎可以肯定是对 DOM 的更改及其导致的回流。
我想知道是否可以将这些更改“排队”并仅在循环结束时实际应用它们。所以这将是一次巨大的回流，而不是很多小回流。
在 fiddle 的另一个版本中，我使用了 RegExp 来更好地匹配和呈现。尽管我在这一个中使用了更多 DOM 操作（adding/removing 标记以启用匹配突出显示），性能 感觉 大致相同。我也尝试在 CSS 中添加 visible/hidden 类 并将元素的 className 设置为该元素，因为这应该表现更好（搜索 javascript 回流和重绘 stubgella—我不能 post 超过 2 个链接）但在我的测试中 (Firefox 54) 我发现它 更糟.所以我不知道那里发生了什么。
我想我实际上问的是：如何使这段代码更快？
为什么不使用下划线的去抖功能来限制获取新数据的调用次数？我通常对搜索输入字段使用 3-400 毫秒的延迟。这将减少 dom 更改的次数，并且如果用户打字速度较慢，还将防止搜索结果闪烁。
没有必要缓冲对 DOM 的更新，DOM 本身在 reflowing/rerendering.
之前就已经很好了您的目标是对 DOM 进行 更少 更新，仅使用 廉价 交互，因为 尽可能少 交互（其中 "interactions" 包括吸气剂）。哦，永远不要使用强制回流的属性。
500 个元素非常可行，您的第一个 fiddle 对我来说已经很灵敏了。第二，我确定了一些问题区域和可能的改进：
innerTextis bad. Really bad. It forces a reflow, as it takes into account styling and will not return invisible text (which also did break your fiddle). UsetextContentinstead.innerHTML几乎一样糟糕，因为它需要调用 HTML 解析器。 500 次。有时（对于大块）这可能比手动更新 DOM 的每个部分更快，但这里不是。不要销毁并重新创建所有这些标签，而是将元素保留在 DOM. 中
- 去抖动。您已经这样做了，但您可能想使用
requestAnimationFrame而不是非常小的setTimeout，这样 DOM 在呈现之前只更新一次。 - 与DOM无关，但
new RegExp也相当昂贵。您只需要调用一次，而不是为每个项目调用它。 - 不要在每次调用函数时从DOM查询
listItems，而是像对list和[=19那样在函数外缓存数组=].您还可以做得更好：同时缓存它们的内容和样式对象，这样您就不必通过 DOM. 访问它们
因此，一旦您修复了“Quick hacky way to remove <b>s”（正如您自己记录的那样），大部分问题都应该消失了。这是我的方法的要点：
var search = document.getElementById('s');
var items = Array.from(document.getElementById('l').children, function(li) {
return {
text: li.textContent,
style: li.style,
pre: li.firstChild, // the text node
match: li.appendChild(document.createElement("span"))
.appendChild(document.createTextNode("")),
post: li.appendChild(document.createTextNode(""))
};
});
function searchAction() {
var term = search.value;
var re = new RegExp(term, 'i'); // case insensitive
for (var {text, style, pre, match, post} of items) {
var m = text.match(re);
if (m) {
pre.nodeValue = text.slice(0, m.index);
match.nodeValue = m[0];
post.nodeValue = text.slice(m.index + m[0].length);
show(style);
} else {
hide(style);
}
}
}
只要您不查询 trigger an immediate reflow 浏览器已经为您批量更新的属性，并且在 javascript 完成后仅 relayouts/repaints 页面。您应该能够在浏览器开发工具中验证这一点。
但是您的代码有一个微不足道的优化：避免冗余 DOM 操作，尤其是对于无论如何都不可见的元素。
申请隐藏物品的else分支：
else {
hideItem(item);
toPlainText(item);
}
toPlainText 操纵 DOM 即使元素将被隐藏或已经被隐藏。
许多 JS mvvm 框架，如 Reactjs 和 Vuejs 已经应用了 'virtual DOM mechanism'。它会在一个事件循环中批量处理所有 DOM 更新，让你免于频繁 DOM 的惩罚operations.I 认为您可以从该实现中获益。
有时候，跳出框框思考是非常有益的...
CSS 允许您使用 "display: none" 轻松隐藏许多元素，并且浏览器在 CSS 方面得到了非常好的优化。
那么有没有一种方法可以将此 CSS 规则应用于您搜索的字词，并让浏览器为您完成这项工作？ （是的！）
var search = document.getElementById('s');
var list = document.getElementById('l');
var styling = document.getElementById('t');
var searchAction = function() {
var term = search.value;
if (term == '') styling.innerHTML = '';
else styling.innerHTML = '#l>li:not([data-name *= "' + term + '"]) {display: none}';
}
var searchActivateEvent = function() {
timeoutThing.restartSaveTimeout(searchAction);
}
search.addEventListener('keyup', searchActivateEvent, false);
var timeoutThing = {
INPUT_TIMEOUT: 00, // ms
saveTimeoutID: null,
restartSaveTimeout: function(thingToDo) {
this.cancelSaveTimeout();
var that = this;
this.saveTimeoutID = window.setTimeout(function() {
thingToDo();
}, this.INPUT_TIMEOUT);
},
cancelSaveTimeout: function() {
clearTimeout(this.saveTimeoutID);
}
}
li {
transition: heigwht .25s ease-in-out, opacity .75s ease-in-out;
}
span {
background: wheat;
border-radius: 2px;
}
li.hidden {
display: none;
}
li.visibru {
display: list-item;
}
<input id="s">
<style id="t"></style>
<ul id="l">
<li data-name='Vicente Yeates'>Vicente Yeates</li>
<li data-name='Bryant Mcmiller'>Bryant Mcmiller</li>
<li data-name='Analisa Shetterly'>Analisa Shetterly</li>
<li data-name='Dorotha Graniero'>Dorotha Graniero</li>
<li data-name='Monte Laranjo'>Monte Laranjo</li>
<li data-name='Ross Olynger'>Ross Olynger</li>
<li data-name='Antione Ruehl'>Antione Ruehl</li>
<li data-name='Shayla Lamprecht'>Shayla Lamprecht</li>
<li data-name='Latasha Sarkodie'>Latasha Sarkodie</li>
<li data-name='Duncan Kellems'>Duncan Kellems</li>
<li data-name='Ike Yanos'>Ike Yanos</li>
<li data-name='Whitley Catanese'>Whitley Catanese</li>
<li data-name='Lisa Janek'>Lisa Janek</li>
<li data-name='Lucas Ahrends'>Lucas Ahrends</li>
<li data-name='Kena Firmin'>Kena Firmin</li>
<li data-name='Doug Rardin'>Doug Rardin</li>
<li data-name='Pilar Awender'>Pilar Awender</li>
<li data-name='Melda Barlup'>Melda Barlup</li>
<li data-name='Teodoro Bartunek'>Teodoro Bartunek</li>
<li data-name='Amira Fiene'>Amira Fiene</li>
<li data-name='Kris Ormsby'>Kris Ormsby</li>
<li data-name='Digna Engelbert'>Digna Engelbert</li>
<li data-name='Chase Schingeck'>Chase Schingeck</li>
<li data-name='Marc Capraro'>Marc Capraro</li>
<li data-name='Angele World'>Angele World</li>
<li data-name='Rex Alvirez'>Rex Alvirez</li>
<li data-name='Margarett Weyer'>Margarett Weyer</li>
<li data-name='Cedric Nevils'>Cedric Nevils</li>
<li data-name='Charisse Guglielmo'>Charisse Guglielmo</li>
<li data-name='September Shedd'>September Shedd</li>
<li data-name='Charlie Buffaloe'>Charlie Buffaloe</li>
<li data-name='Andreas Totten'>Andreas Totten</li>
<li data-name='Selma Almen'>Selma Almen</li>
<li data-name='Karleen Lamarsh'>Karleen Lamarsh</li>
<li data-name='Carlton Ence'>Carlton Ence</li>
<li data-name='Laverna Cassio'>Laverna Cassio</li>
<li data-name='Veta Oblinski'>Veta Oblinski</li>
<li data-name='Mariko Oliveros'>Mariko Oliveros</li>
<li data-name='Lasandra Ellsworth'>Lasandra Ellsworth</li>
<li data-name='Jose Phinisee'>Jose Phinisee</li>
<li data-name='Jody Karlson'>Jody Karlson</li>
<li data-name='Sharice Horst'>Sharice Horst</li>
<li data-name='Joshua Collar'>Joshua Collar</li>
<li data-name='Alexander Starnaud'>Alexander Starnaud</li>
<li data-name='Arthur Bachorski'>Arthur Bachorski</li>
<li data-name='Ignacio Laubach'>Ignacio Laubach</li>
<li data-name='Lucrecia Hildago'>Lucrecia Hildago</li>
<li data-name='Natashia Barton'>Natashia Barton</li>
<li data-name='Aimee Zumot'>Aimee Zumot</li>
<li data-name='Ashley Topping'>Ashley Topping</li>
<li data-name='Ceola Rosebrough'>Ceola Rosebrough</li>
<li data-name='Steve Wellinghoff'>Steve Wellinghoff</li>
<li data-name='Brant Bintz'>Brant Bintz</li>
<li data-name='Enrique Spratley'>Enrique Spratley</li>
<li data-name='Issac Braylock'>Issac Braylock</li>
<li data-name='Odis Slingluff'>Odis Slingluff</li>
<li data-name='Kara Louth'>Kara Louth</li>
<li data-name='Columbus Delmuro'>Columbus Delmuro</li>
<li data-name='Jenniffer Moree'>Jenniffer Moree</li>
<li data-name='Mei Perfecto'>Mei Perfecto</li>
<li data-name='Terri Buren'>Terri Buren</li>
<li data-name='Andrea Figurelli'>Andrea Figurelli</li>
<li data-name='Thersa Everhardt'>Thersa Everhardt</li>
<li data-name='Raisa Rabuck'>Raisa Rabuck</li>
<li data-name='Demarcus Bodman'>Demarcus Bodman</li>
<li data-name='Javier Lovenduski'>Javier Lovenduski</li>
<li data-name='Jackie Jeck'>Jackie Jeck</li>
<li data-name='Cyrus Olivid'>Cyrus Olivid</li>
<li data-name='Timmy Lozoya'>Timmy Lozoya</li>
<li data-name='Eldridge Elton'>Eldridge Elton</li>
<li data-name='Noble Abelson'>Noble Abelson</li>
<li data-name='Marlys Cannell'>Marlys Cannell</li>
<li data-name='Sylvie Laughery'>Sylvie Laughery</li>
<li data-name='Bobbie Grahl'>Bobbie Grahl</li>
<li data-name='Katharine Gillispie'>Katharine Gillispie</li>
<li data-name='Kena Papik'>Kena Papik</li>
<li data-name='Gordon Boda'>Gordon Boda</li>
<li data-name='Dominick Moreida'>Dominick Moreida</li>
<li data-name='Josue Schellman'>Josue Schellman</li>
<li data-name='Wallace Bacho'>Wallace Bacho</li>
<li data-name='Jeffry Griffins'>Jeffry Griffins</li>
<li data-name='Stacia Corrett'>Stacia Corrett</li>
<li data-name='Theron Orey'>Theron Orey</li>
<li data-name='Pete Haering'>Pete Haering</li>
<li data-name='Stewart Gommer'>Stewart Gommer</li>
<li data-name='Delbert Thompsom'>Delbert Thompsom</li>
<li data-name='Johna Dell'>Johna Dell</li>
<li data-name='Rashad Beckham'>Rashad Beckham</li>
<li data-name='Colby Callison'>Colby Callison</li>
<li data-name='Keenan Hegan'>Keenan Hegan</li>
<li data-name='Nia Rollans'>Nia Rollans</li>
<li data-name='Marie Kahawai'>Marie Kahawai</li>
<li data-name='Luz Keib'>Luz Keib</li>
<li data-name='Yukiko Bohler'>Yukiko Bohler</li>
<li data-name='Clotilde Golightley'>Clotilde Golightley</li>
<li data-name='Franklyn Feichter'>Franklyn Feichter</li>
<li data-name='Irving Kendi'>Irving Kendi</li>
<li data-name='Willow Debettignies'>Willow Debettignies</li>
<li data-name='Arnoldo Terzian'>Arnoldo Terzian</li>
<li data-name='Billie Mancini'>Billie Mancini</li>
<li data-name='John Vanleer'>John Vanleer</li>
<li data-name='Jennell Bielke'>Jennell Bielke</li>
<li data-name='Myong Curie'>Myong Curie</li>
<li data-name='Tanesha Kirouac'>Tanesha Kirouac</li>
<li data-name='Jim Conely'>Jim Conely</li>
<li data-name='Samella Sonnek'>Samella Sonnek</li>
<li data-name='Emily Golaszewski'>Emily Golaszewski</li>
<li data-name='Homer Warsing'>Homer Warsing</li>
<li data-name='Maryalice Scotten'>Maryalice Scotten</li>
<li data-name='Kacie Seliba'>Kacie Seliba</li>
<li data-name='Carolee Bordelon'>Carolee Bordelon</li>
<li data-name='Kurt Moss'>Kurt Moss</li>
<li data-name='Vanessa Mcquigg'>Vanessa Mcquigg</li>
<li data-name='Joey Hatridge'>Joey Hatridge</li>
<li data-name='Brande Pamphile'>Brande Pamphile</li>
<li data-name='Jacelyn Floris'>Jacelyn Floris</li>
<li data-name='Christen Brownrigg'>Christen Brownrigg</li>
<li data-name='Signe Calvani'>Signe Calvani</li>
<li data-name='Lenard Dela'>Lenard Dela</li>
<li data-name='Jacob Aina'>Jacob Aina</li>
<li data-name='Jovan Dozier'>Jovan Dozier</li>
<li data-name='Alden Einhorn'>Alden Einhorn</li>
<li data-name='Milagro Moua'>Milagro Moua</li>
<li data-name='Zoe Blatti'>Zoe Blatti</li>
<li data-name='Jon Reck'>Jon Reck</li>
<li data-name='Dennis Katie'>Dennis Katie</li>
<li data-name='Jenny Dewall'>Jenny Dewall</li>
<li data-name='Lon Zable'>Lon Zable</li>
<li data-name='Winfred Rentfro'>Winfred Rentfro</li>
<li data-name='Lavette Feng'>Lavette Feng</li>
<li data-name='Stacey Beloff'>Stacey Beloff</li>
<li data-name='Earnest Hansrote'>Earnest Hansrote</li>
<li data-name='Faustino Dewaters'>Faustino Dewaters</li>
<li data-name='Jed Wears'>Jed Wears</li>
<li data-name='Cassidy Coho'>Cassidy Coho</li>
<li data-name='Frank Sparkes'>Frank Sparkes</li>
<li data-name='Ike Hechinger'>Ike Hechinger</li>
<li data-name='Carissa Labre'>Carissa Labre</li>
<li data-name='Brain Vanderhoef'>Brain Vanderhoef</li>
<li data-name='Bula Layel'>Bula Layel</li>
<li data-name='Joesph Dolman'>Joesph Dolman</li>
<li data-name='Roseanne Marcucci'>Roseanne Marcucci</li>
<li data-name='Larissa Carmer'>Larissa Carmer</li>
<li data-name='Ricki Fronek'>Ricki Fronek</li>
<li data-name='Al Massing'>Al Massing</li>
<li data-name='Stephen Baranow'>Stephen Baranow</li>
<li data-name='Phillip Espinola'>Phillip Espinola</li>
<li data-name='Emanuel Widmer'>Emanuel Widmer</li>
<li data-name='Dylan Isassi'>Dylan Isassi</li>
<li data-name='Daria Mound'>Daria Mound</li>
<li data-name='Buffy Vokes'>Buffy Vokes</li>
<li data-name='Hal Kimbril'>Hal Kimbril</li>
<li data-name='Kiera Merson'>Kiera Merson</li>
<li data-name='Trent Kravs'>Trent Kravs</li>
<li data-name='Genaro Browm'>Genaro Browm</li>
<li data-name='Kimber Reinert'>Kimber Reinert</li>
<li data-name='Jeremiah Kaduk'>Jeremiah Kaduk</li>
<li data-name='Nichelle Harney'>Nichelle Harney</li>
<li data-name='Hyun Divalerio'>Hyun Divalerio</li>
<li data-name='Ira Burlson'>Ira Burlson</li>
<li data-name='Kathie Longhenry'>Kathie Longhenry</li>
<li data-name='Shane Tierney'>Shane Tierney</li>
<li data-name='Beata Delaplane'>Beata Delaplane</li>
<li data-name='Ollie Staiger'>Ollie Staiger</li>
<li data-name='Zane Dittmar'>Zane Dittmar</li>
<li data-name='Shayne Toft'>Shayne Toft</li>
<li data-name='Tillie Haeckel'>Tillie Haeckel</li>
<li data-name='Federico Gilleland'>Federico Gilleland</li>
<li data-name='Howard Skowronek'>Howard Skowronek</li>
<li data-name='Franchesca Langley'>Franchesca Langley</li>
<li data-name='Stacy Elsa'>Stacy Elsa</li>
<li data-name='Elfreda Mckendrick'>Elfreda Mckendrick</li>
<li data-name='Madeline Reglin'>Madeline Reglin</li>
<li data-name='Keesha Mcgoogan'>Keesha Mcgoogan</li>
<li data-name='Debi Malcom'>Debi Malcom</li>
<li data-name='Carmine Finnigan'>Carmine Finnigan</li>
<li data-name='Dannie Fry'>Dannie Fry</li>
<li data-name='Eulah Skoog'>Eulah Skoog</li>
<li data-name='Weston Hanzely'>Weston Hanzely</li>
<li data-name='Jolynn Olpin'>Jolynn Olpin</li>
<li data-name='Raymundo Gossling'>Raymundo Gossling</li>
<li data-name='Eve Diflorio'>Eve Diflorio</li>
<li data-name='Mariano Leal'>Mariano Leal</li>
<li data-name='Beckie Hoh'>Beckie Hoh</li>
<li data-name='Danielle Lazenson'>Danielle Lazenson</li>
<li data-name='Ahmed Bhatti'>Ahmed Bhatti</li>
<li data-name='Inga Bilek'>Inga Bilek</li>
<li data-name='Huey Cockrel'>Huey Cockrel</li>
<li data-name='Tam Mcenery'>Tam Mcenery</li>
<li data-name='Gary Proietto'>Gary Proietto</li>
<li data-name='Karol Bussler'>Karol Bussler</li>
<li data-name='Mckinley Windisch'>Mckinley Windisch</li>
<li data-name='Celina Schroy'>Celina Schroy</li>
<li data-name='Dong Suitt'>Dong Suitt</li>
<li data-name='Jerrell Dermer'>Jerrell Dermer</li>
<li data-name='Domingo Opsahl'>Domingo Opsahl</li>
<li data-name='Nigel Nesslein'>Nigel Nesslein</li>
<li data-name='Toshia Nalty'>Toshia Nalty</li>
<li data-name='Jonas Intriago'>Jonas Intriago</li>
<li data-name='Cecila Crivaro'>Cecila Crivaro</li>
<li data-name='Bea Schulke'>Bea Schulke</li>
<li data-name='Collene Myatt'>Collene Myatt</li>
<li data-name='Kena Nepa'>Kena Nepa</li>
<li data-name='Dalia Burklow'>Dalia Burklow</li>
<li data-name='Harlan Rotherham'>Harlan Rotherham</li>
<li data-name='Connie Grosso'>Connie Grosso</li>
<li data-name='Shelton Brass'>Shelton Brass</li>
<li data-name='Yvette Hinch'>Yvette Hinch</li>
<li data-name='Elroy Barriger'>Elroy Barriger</li>
<li data-name='Earnest Henrickson'>Earnest Henrickson</li>
<li data-name='Neal Singhisen'>Neal Singhisen</li>
<li data-name='Kristofer Lunceford'>Kristofer Lunceford</li>
<li data-name='Dewey Bureau'>Dewey Bureau</li>
<li data-name='Lennie Cancro'>Lennie Cancro</li>
<li data-name='Kay Cherubini'>Kay Cherubini</li>
<li data-name='Moises Brugliera'>Moises Brugliera</li>
<li data-name='Edgardo Schoenle'>Edgardo Schoenle</li>
<li data-name='Lance Badena'>Lance Badena</li>
<li data-name='Floyd Kneedler'>Floyd Kneedler</li>
<li data-name='Adriana Gschwind'>Adriana Gschwind</li>
<li data-name='Jon Wzorek'>Jon Wzorek</li>
<li data-name='Trent Smyer'>Trent Smyer</li>
<li data-name='Nicholle Sovel'>Nicholle Sovel</li>
<li data-name='Hilda Maruschak'>Hilda Maruschak</li>
<li data-name='Jonell Schwartzberg'>Jonell Schwartzberg</li>
<li data-name='Maricela Sponsler'>Maricela Sponsler</li>
<li data-name='Janise Kleinert'>Janise Kleinert</li>
<li data-name='Domingo Atzhorn'>Domingo Atzhorn</li>
<li data-name='Fabian Talsky'>Fabian Talsky</li>
<li data-name='Mauro Mursko'>Mauro Mursko</li>
<li data-name='Arica Salemo'>Arica Salemo</li>
<li data-name='Simone Reinders'>Simone Reinders</li>
<li data-name='Desmond Scheperle'>Desmond Scheperle</li>
<li data-name='Lenora Rouhoff'>Lenora Rouhoff</li>
<li data-name='Georgette Yagues'>Georgette Yagues</li>
<li data-name='Mervin Kurkeyerian'>Mervin Kurkeyerian</li>
<li data-name='Mckinley Legate'>Mckinley Legate</li>
<li data-name='Argelia Douse'>Argelia Douse</li>
<li data-name='George Baldrey'>George Baldrey</li>
<li data-name='Brynn Hobkirk'>Brynn Hobkirk</li>
<li data-name='Cyrus Milbrodt'>Cyrus Milbrodt</li>
<li data-name='Terrance Kriete'>Terrance Kriete</li>
<li data-name='Janiece Ajello'>Janiece Ajello</li>
<li data-name='Roger Filippides'>Roger Filippides</li>
<li data-name='Zonia Mcmillion'>Zonia Mcmillion</li>
<li data-name='Sheba Kenzie'>Sheba Kenzie</li>
<li data-name='Bea Hauth'>Bea Hauth</li>
<li data-name='Jude Swets'>Jude Swets</li>
<li data-name='Queen Simar'>Queen Simar</li>
<li data-name='Armand Ruter'>Armand Ruter</li>
<li data-name='Mariana Blogg'>Mariana Blogg</li>
<li data-name='Lyle Peretti'>Lyle Peretti</li>
<li data-name='Wilhemina Basila'>Wilhemina Basila</li>
<li data-name='Kendrick Fennessy'>Kendrick Fennessy</li>
<li data-name='Lee Dorkin'>Lee Dorkin</li>
<li data-name='Monte Camba'>Monte Camba</li>
<li data-name='Lashell Stenz'>Lashell Stenz</li>
<li data-name='Waltraud Corte'>Waltraud Corte</li>
<li data-name='Krystle Giancola'>Krystle Giancola</li>
<li data-name='Raphael Bordwell'>Raphael Bordwell</li>
<li data-name='Johnny Urtiaga'>Johnny Urtiaga</li>
<li data-name='Johnie Africa'>Johnie Africa</li>
<li data-name='Blaine Scibilia'>Blaine Scibilia</li>
<li data-name='Ruben Pama'>Ruben Pama</li>
<li data-name='Annamarie Hupp'>Annamarie Hupp</li>
<li data-name='Dennis Heitland'>Dennis Heitland</li>
<li data-name='Cindy Peete'>Cindy Peete</li>
<li data-name='Jefferson Prekker'>Jefferson Prekker</li>
<li data-name='Maddie Grossnickle'>Maddie Grossnickle</li>
<li data-name='Ambrose Farahkhan'>Ambrose Farahkhan</li>
<li data-name='Launa Horrigan'>Launa Horrigan</li>
<li data-name='Cecil Obremski'>Cecil Obremski</li>
<li data-name='Delta Mccoy'>Delta Mccoy</li>
<li data-name='Shantell Bahar'>Shantell Bahar</li>
<li data-name='Tandra Pigler'>Tandra Pigler</li>
<li data-name='Lavern Banghart'>Lavern Banghart</li>
<li data-name='Maple Gramling'>Maple Gramling</li>
<li data-name='Wilma Seuss'>Wilma Seuss</li>
<li data-name='Sarita Fesperman'>Sarita Fesperman</li>
<li data-name='Aurelio Harkrader'>Aurelio Harkrader</li>
<li data-name='Art Lavezzo'>Art Lavezzo</li>
<li data-name='Lura Shaff'>Lura Shaff</li>
<li data-name='Jayme Baumer'>Jayme Baumer</li>
<li data-name='Adeline Dagraca'>Adeline Dagraca</li>
<li data-name='Nakia Benell'>Nakia Benell</li>
<li data-name='Clare Janski'>Clare Janski</li>
<li data-name='Tanja Boehmer'>Tanja Boehmer</li>
<li data-name='Eleanora Schwede'>Eleanora Schwede</li>
<li data-name='Dillon Dorrance'>Dillon Dorrance</li>
<li data-name='Alisa Kopchick'>Alisa Kopchick</li>
<li data-name='Leisha Harig'>Leisha Harig</li>
<li data-name='Dominic Gehrki'>Dominic Gehrki</li>
<li data-name='Moira Kiritsy'>Moira Kiritsy</li>
<li data-name='Brendan Avina'>Brendan Avina</li>
<li data-name='Deena Bejarano'>Deena Bejarano</li>
<li data-name='Hunter Spallina'>Hunter Spallina</li>
<li data-name='Jefferey Capes'>Jefferey Capes</li>
<li data-name='Juanita Creggett'>Juanita Creggett</li>
<li data-name='Jeffery Bielke'>Jeffery Bielke</li>
<li data-name='Rayford Klinich'>Rayford Klinich</li>
<li data-name='Ardell Vanderwege'>Ardell Vanderwege</li>
<li data-name='Jimmie Aland'>Jimmie Aland</li>
<li data-name='Junko Develbiss'>Junko Develbiss</li>
<li data-name='Nakesha Miners'>Nakesha Miners</li>
<li data-name='Alberto Muhlenkamp'>Alberto Muhlenkamp</li>
<li data-name='Alexis Vassil'>Alexis Vassil</li>
<li data-name='Normand Douthett'>Normand Douthett</li>
<li data-name='Delmar Gumz'>Delmar Gumz</li>
<li data-name='Emery Didyk'>Emery Didyk</li>
<li data-name='Marybelle Lagerberg'>Marybelle Lagerberg</li>
<li data-name='Eliseo Giblin'>Eliseo Giblin</li>
<li data-name='Ernestina Standre'>Ernestina Standre</li>
<li data-name='Burt Blanche'>Burt Blanche</li>
<li data-name='Dorsey Conyers'>Dorsey Conyers</li>
<li data-name='Edie Spires'>Edie Spires</li>
<li data-name='Agustin Wendeln'>Agustin Wendeln</li>
<li data-name='Austin Sasao'>Austin Sasao</li>
<li data-name='Deidre Otega'>Deidre Otega</li>
<li data-name='Tatiana Gata'>Tatiana Gata</li>
<li data-name='Dovie Zimmel'>Dovie Zimmel</li>
<li data-name='Freda Grzywinski'>Freda Grzywinski</li>
<li data-name='Solomon Mussell'>Solomon Mussell</li>
<li data-name='Jarod Canada'>Jarod Canada</li>
<li data-name='Bernard Missler'>Bernard Missler</li>
<li data-name='Alonzo Croom'>Alonzo Croom</li>
<li data-name='Elvin Arflack'>Elvin Arflack</li>
<li data-name='Suzann Pallazzo'>Suzann Pallazzo</li>
<li data-name='Shira Elsbury'>Shira Elsbury</li>
<li data-name='Randell Sterlin'>Randell Sterlin</li>
<li data-name='Darrick Revolorio'>Darrick Revolorio</li>
<li data-name='Dorian Mayeux'>Dorian Mayeux</li>
<li data-name='Cortney Teuteberg'>Cortney Teuteberg</li>
<li data-name='Eldon Schepis'>Eldon Schepis</li>
<li data-name='Coleman Chapnick'>Coleman Chapnick</li>
<li data-name='Bradford Andersson'>Bradford Andersson</li>
<li data-name='Rob Epperley'>Rob Epperley</li>
<li data-name='Kieth Lagman'>Kieth Lagman</li>
<li data-name='Chi Tereska'>Chi Tereska</li>
<li data-name='Celina Chantler'>Celina Chantler</li>
<li data-name='Suzanne Aguinaga'>Suzanne Aguinaga</li>
<li data-name='Madonna Boock'>Madonna Boock</li>
<li data-name='Rey Gun'>Rey Gun</li>
<li data-name='Jennie Capata'>Jennie Capata</li>
<li data-name='Zelma Brunecz'>Zelma Brunecz</li>
<li data-name='Hubert Yarrito'>Hubert Yarrito</li>
<li data-name='Ngan Crean'>Ngan Crean</li>
<li data-name='Claudie Marcou'>Claudie Marcou</li>
<li data-name='Monte Nicol'>Monte Nicol</li>
<li data-name='Lane Inacio'>Lane Inacio</li>
<li data-name='Lenny Alexis'>Lenny Alexis</li>
<li data-name='Lorene Sistek'>Lorene Sistek</li>
<li data-name='Brooks Merante'>Brooks Merante</li>
<li data-name='Rufina Krah'>Rufina Krah</li>
<li data-name='Bonnie Kieft'>Bonnie Kieft</li>
<li data-name='Luigi Wahr'>Luigi Wahr</li>
<li data-name='Brandee Noori'>Brandee Noori</li>
<li data-name='Gerard Rolson'>Gerard Rolson</li>
<li data-name='Noriko Buckman'>Noriko Buckman</li>
<li data-name='Marcella Bathrick'>Marcella Bathrick</li>
<li data-name='Harlan Michealson'>Harlan Michealson</li>
<li data-name='Julienne Fuerte'>Julienne Fuerte</li>
<li data-name='Olivia Ciliberto'>Olivia Ciliberto</li>
<li data-name='Lorenzo Pollnow'>Lorenzo Pollnow</li>
<li data-name='Eufemia Crigler'>Eufemia Crigler</li>
<li data-name='Emogene Tolar'>Emogene Tolar</li>
<li data-name='Steven Amoriello'>Steven Amoriello</li>
<li data-name='Stanford Minhas'>Stanford Minhas</li>
<li data-name='Adolfo Reddick'>Adolfo Reddick</li>
<li data-name='Michael Flight'>Michael Flight</li>
<li data-name='Teodora Axtman'>Teodora Axtman</li>
<li data-name='Takisha Metting'>Takisha Metting</li>
<li data-name='Johnnie Mullendore'>Johnnie Mullendore</li>
<li data-name='Dee Prowell'>Dee Prowell</li>
<li data-name='Joye Skarupa'>Joye Skarupa</li>
<li data-name='Bernetta Hugel'>Bernetta Hugel</li>
<li data-name='Jade Capra'>Jade Capra</li>
<li data-name='Sergio Gieringer'>Sergio Gieringer</li>
<li data-name='Lorraine Marinez'>Lorraine Marinez</li>
<li data-name='Eugenia Kreinbring'>Eugenia Kreinbring</li>
<li data-name='Karin Brackey'>Karin Brackey</li>
<li data-name='Sona Toothman'>Sona Toothman</li>
<li data-name='Tresa Sylvester'>Tresa Sylvester</li>
<li data-name='Emile Mccrate'>Emile Mccrate</li>
<li data-name='Miranda Coppage'>Miranda Coppage</li>
<li data-name='Wava Kathan'>Wava Kathan</li>
<li data-name='Euna Bate'>Euna Bate</li>
<li data-name='Reina Catalanatto'>Reina Catalanatto</li>
<li data-name='Jody Barner'>Jody Barner</li>
<li data-name='Margherita Demopoulos'>Margherita Demopoulos</li>
<li data-name='Yu Imboden'>Yu Imboden</li>
<li data-name='Irina Huppenbauer'>Irina Huppenbauer</li>
<li data-name='Forest Lowenthal'>Forest Lowenthal</li>
<li data-name='Jamar Loman'>Jamar Loman</li>
<li data-name='Maurice Kotler'>Maurice Kotler</li>
<li data-name='Renato Feldstein'>Renato Feldstein</li>
<li data-name='Dulcie Pinter'>Dulcie Pinter</li>
<li data-name='Doretta Breiner'>Doretta Breiner</li>
<li data-name='Mireille Betsinger'>Mireille Betsinger</li>
<li data-name='Jc Emerton'>Jc Emerton</li>
<li data-name='Yahaira Klee'>Yahaira Klee</li>
<li data-name='Glady Annen'>Glady Annen</li>
<li data-name='Jaime Alicandro'>Jaime Alicandro</li>
<li data-name='Branda Darnstaedt'>Branda Darnstaedt</li>
<li data-name='Christiane Kissik'>Christiane Kissik</li>
<li data-name='Lester Tartamella'>Lester Tartamella</li>
<li data-name='Nikki Shoaf'>Nikki Shoaf</li>
<li data-name='Vern Teteak'>Vern Teteak</li>
<li data-name='Albertha Vankilsdonk'>Albertha Vankilsdonk</li>
<li data-name='Greg Pesch'>Greg Pesch</li>
<li data-name='Nam Bahner'>Nam Bahner</li>
<li data-name='Korey Smit'>Korey Smit</li>
<li data-name='Brock Arview'>Brock Arview</li>
<li data-name='Robin Danos'>Robin Danos</li>
<li data-name='Jonah Shoener'>Jonah Shoener</li>
<li data-name='Bernardina Michelini'>Bernardina Michelini</li>
<li data-name='Cody Stachniw'>Cody Stachniw</li>
<li data-name='Maribeth Benner'>Maribeth Benner</li>
<li data-name='Louie Codell'>Louie Codell</li>
<li data-name='Alvera Vallarta'>Alvera Vallarta</li>
<li data-name='Amy Schmauder'>Amy Schmauder</li>
<li data-name='Doretha Megee'>Doretha Megee</li>
<li data-name='Clora Okins'>Clora Okins</li>
<li data-name='Antoine Colomba'>Antoine Colomba</li>
<li data-name='Daniell Tramel'>Daniell Tramel</li>
<li data-name='Marge Sebastian'>Marge Sebastian</li>
<li data-name='Savannah Ortic'>Savannah Ortic</li>
<li data-name='Renita Strahan'>Renita Strahan</li>
<li data-name='Elvia Deerman'>Elvia Deerman</li>
<li data-name='Kris Bonsal'>Kris Bonsal</li>
<li data-name='Lili Aulds'>Lili Aulds</li>
<li data-name='Roman Pessoa'>Roman Pessoa</li>
<li data-name='Shon Fonsecn'>Shon Fonsecn</li>
<li data-name='Elmo Mcclain'>Elmo Mcclain</li>
<li data-name='Brittni Stott'>Brittni Stott</li>
<li data-name='Byron Syndergaard'>Byron Syndergaard</li>
<li data-name='Quinn Hach'>Quinn Hach</li>
<li data-name='Joey Buissereth'>Joey Buissereth</li>
<li data-name='Benedict Giacobbe'>Benedict Giacobbe</li>
<li data-name='Merna Ihrke'>Merna Ihrke</li>
<li data-name='Chase Chryst'>Chase Chryst</li>
<li data-name='Truman Haroldsen'>Truman Haroldsen</li>
<li data-name='Carry Elswick'>Carry Elswick</li>
<li data-name='Raymonde Emrich'>Raymonde Emrich</li>
<li data-name='Isreal Kieke'>Isreal Kieke</li>
<li data-name='Fredricka Judy'>Fredricka Judy</li>
<li data-name='Brendan Brester'>Brendan Brester</li>
<li data-name='Karin Kitchell'>Karin Kitchell</li>
<li data-name='Tabitha Han'>Tabitha Han</li>
<li data-name='Dotty Vandeveer'>Dotty Vandeveer</li>
</ul>
<script src="file:///tmp/s.js"></script>
基本上：
- 使用属性存储要在其中搜索的值
- 定制一个自定义 CSS 选择器以应用 "display:none" 规则
- 使用一些 JS 来为 "style" 标签提供定制的选择器和规则
就是这样，没有更多的 JS 障碍，只是 CSS 以闪电般的速度完成它的工作。所有浏览器都支持，您只需更新页面中的 1 个隐藏元素（"script" 标签）。
我还更新了您的 JS fiddle 示例。