Question

为了说明我在问什么，这是我的例子（fiddle）。

我有一个约500个随机名称的列表。我在顶部有一个输入，具有实时搜索功能。在每个keyup上，输入值，并且列表中的每个项目都与之匹配。隐藏不匹配的项目。

主观上，表现好，但不是很好。如果您快速键入，则列表更新前会有明显的暂停。我还没有对代码进行分析，但瓶颈几乎肯定是DOM的变化及其引起的回流。

我想知道是否可以“排队”这些更改，并且只在循环结束时实际应用它们。所以这将是一个巨大的回流，而不是很多小的。

在fiddle的另一个版本中，我使用RegExp来获得更多的匹配和演示。即使我在这个中使用了更多的DOM操作（添加/删除标记以启用匹配突出显示），但的性能感觉大致相同。我也尝试在CSS中添加可见/隐藏类，只是设置元素＆＃39; className因为那应该是更好的表现（搜索 javascript reflows＆amp; repaints stubbornella - 我不能发布超过2个链接）但是在我的测试中（Firefox） 54）我发现它更糟。所以我不知道那里发生了什么。

我猜我实际的问题是：如何让这段代码更快？

Answer 1

缓存DOM的更新毫无意义，DOM本身在回流/重新渲染之前已经做好了。

您必须瞄准的是，只使用便宜的交互，对DOM进行更少更新，尽可能少数交互（其中＆＃34;互动＆＃34;包括吸气者）。哦，永远不要使用强制回流的属性。

500个元素是相当可行的，你的第一个小提琴已经对我很敏感。在第二部分中，我发现了一些问题区域和可能的改进：

innerText很糟糕。 Really bad。 It forces a reflow，因为它考虑了样式并且不会返回隐形文本（这也确实打破了你的小提琴）。 Use textContent instead。
innerHTML几乎一样糟糕，因为它需要调用HTML解析器。 500次。有时候（对于大块）比手动更新DOM的每个部分要快，但在这里不行。而不是销毁和重新创建所有这些标签，而是将元素保留在DOM中。
去抖。您已经这样做了，但是您可能希望使用requestAnimationFrame而不是非常小的setTimeout，这样DOM在呈现之前只会更新一次。
与DOM无关，但new RegExp也相当昂贵。您只需要调用一次，而不是每个项目。
每次调用函数时都不要从DOM中查询listItems，而是像在list和search一样将数组缓存到函数之外。你可以做得更好：同时缓存他们的内容和样式对象，这样你就不必通过DOM访问它们。

因此，一旦您修复了＆＃34; Quick hacky way to remove <b>s ＆＃34; （正如你自己记录的那样），大多数问题都应该消失。这是我的方法的要点：

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);
    }
  }
}

请参阅updated fiddle。

Answer 2

有时候，跳出框框思考可能会非常有益...

CSS 使您可以使用“显示：无”轻松隐藏许多元素，并且在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使用定制的选择器和规则来填充“样式”标签

就是这样，没有更多的JS障碍，只有CSS以闪电般的速度完成了它的工作。所有浏览器都支持，并且您只更新页面中的1个隐藏元素（“ script”标签）。

我还为示例更新了您的JS fiddle。

Answer 3

为什么不使用下划线的去抖功能来限制获取新数据的调用次数？我通常使用3-400毫秒的延迟搜索输入字段。这将减少dom更改的次数，并且如果用户是慢打字员，也会阻止搜索结果的闪烁。

Find details of debounce here

Answer 4

只要您不查询trigger an immediate reflow浏览器已经为您批量更新的属性，并且只有在您的javascript完成后重新启动/重新绘制页面。您应该能够在浏览器devtools中验证这一点。

但是对于您的代码有一个简单的优化：避免冗余的DOM操作，尤其是对于无论如何都不可见的元素。

申请隐藏物品的else分支：

else {
  hideItem(item);
  toPlainText(item);
}

toPlainText操纵DOM，即使元素将被隐藏或已被隐藏。

Answer 5

许多JS mvvm框架（如Reactjs和Vuejs）已经应用了“虚拟DOM机制”。它将在一个事件循环中批量处理所有DOM更新，并使您免于经常进行DOM操作的惩罚。我想你可以在那种实施中获得战利品。

是否可以“缓冲”循环中发生的DOM更改（以提高性能）？

5 个答案: