Is it possible to “buffer” DOM changes that happen in a loop (to increase performance)?

前端未结

关注

 5  2029

轻奢々 2021-01-06 10:50

To make it clear what I\'m asking, here is my example (fiddle).

I have a list of ~500 random names. I have an input at the top that has live-style searching. On ever

5条回答

遥遥无期 (楼主)

2021-01-06 11:20

Sometimes, thinking outside the box can be very rewarding...

CSS allows you to easily hide many elements with "display: none" and browsers are exceptionally well optimized when it comes to CSS.

So is there a way to apply this CSS rule to your searched term and let the browser do the job for you? (yes!)

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




    Vicente Yeates
    Bryant Mcmiller
    Analisa Shetterly
    Dorotha Graniero
    Monte Laranjo
    Ross Olynger
    Antione Ruehl
    Shayla Lamprecht
    Latasha Sarkodie
    Duncan Kellems
    Ike Yanos
    Whitley Catanese
    Lisa Janek
    Lucas Ahrends
    Kena Firmin
    Doug Rardin
    Pilar Awender
    Melda Barlup
    Teodoro Bartunek
    Amira Fiene
    Kris Ormsby
    Digna Engelbert
    Chase Schingeck
    Marc Capraro
    Angele World
    Rex Alvirez
    Margarett Weyer
    Cedric Nevils
    Charisse Guglielmo
    September Shedd
    Charlie Buffaloe
    Andreas Totten
    Selma Almen
    Karleen Lamarsh
    Carlton Ence
    Laverna Cassio
    Veta Oblinski
    Mariko Oliveros
    Lasandra Ellsworth
    Jose Phinisee
    Jody Karlson
    Sharice Horst
    Joshua Collar
    Alexander Starnaud
    Arthur Bachorski
    Ignacio Laubach
    Lucrecia Hildago
    Natashia Barton
    Aimee Zumot
    Ashley Topping
    Ceola Rosebrough
    Steve Wellinghoff
    Brant Bintz
    Enrique Spratley
    Issac Braylock
    Odis Slingluff
    Kara Louth
    Columbus Delmuro
    Jenniffer Moree
    Mei Perfecto
    Terri Buren
    Andrea Figurelli
    Thersa Everhardt
    Raisa Rabuck
    Demarcus Bodman
    Javier Lovenduski
    Jackie Jeck
    Cyrus Olivid
    Timmy Lozoya
    Eldridge Elton
    Noble Abelson
    Marlys Cannell
    Sylvie Laughery
    Bobbie Grahl
    Katharine Gillispie
    Kena Papik
    Gordon Boda
    Dominick Moreida
    Josue Schellman
    Wallace Bacho
    Jeffry Griffins
    Stacia Corrett
    Theron Orey
    Pete Haering
    Stewart Gommer
    Delbert Thompsom
    Johna Dell
    Rashad Beckham
    Colby Callison
    Keenan Hegan
    Nia Rollans
    Marie Kahawai
    Luz Keib
    Yukiko Bohler
    Clotilde Golightley
    Franklyn Feichter
    Irving Kendi
    Willow Debettignies
    Arnoldo Terzian
    Billie Mancini
    John Vanleer
    Jennell Bielke
    Myong Curie
    Tanesha Kirouac
    Jim Conely
    Samella Sonnek
    Emily Golaszewski
    Homer Warsing
    Maryalice Scotten
    Kacie Seliba
    Carolee Bordelon
    Kurt Moss
    Vanessa Mcquigg
    Joey Hatridge
    Brande Pamphile
    Jacelyn Floris
    Christen Brownrigg
    Signe Calvani
    Lenard Dela
    Jacob Aina
    Jovan Dozier
    Alden Einhorn
    Milagro Moua
    Zoe Blatti
    Jon Reck
    Dennis Katie
    Jenny Dewall
    Lon Zable
    Winfred Rentfro
    Lavette Feng
    Stacey Beloff
    Earnest Hansrote
    Faustino Dewaters
    Jed Wears
    Cassidy Coho
    Frank Sparkes
    Ike Hechinger
    Carissa Labre
    Brain Vanderhoef
    Bula Layel
    Joesph Dolman
    Roseanne Marcucci
    Larissa Carmer
    Ricki Fronek
    Al Massing
    Stephen Baranow
    Phillip Espinola
    Emanuel Widmer
    Dylan Isassi
    Daria Mound
    Buffy Vokes
    Hal Kimbril
    Kiera Merson
    Trent Kravs
    Genaro Browm
    Kimber Reinert
    Jeremiah Kaduk
    Nichelle Harney
    Hyun Divalerio
    Ira Burlson
    Kathie Longhenry
    Shane Tierney
    Beata Delaplane
    Ollie Staiger
    Zane Dittmar
    Shayne Toft
    Tillie Haeckel
    Federico Gilleland
    Howard Skowronek
    Franchesca Langley
    Stacy Elsa
    Elfreda Mckendrick
    Madeline Reglin
    Keesha Mcgoogan
    Debi Malcom
    Carmine Finnigan
    Dannie Fry
    Eulah Skoog
    Weston Hanzely
    Jolynn Olpin
    Raymundo Gossling
    Eve Diflorio
    Mariano Leal
    Beckie Hoh
    Danielle Lazenson
    Ahmed Bhatti
    Inga Bilek
    Huey Cockrel
    Tam Mcenery
    Gary Proietto
    Karol Bussler
    Mckinley Windisch
    Celina Schroy
    Dong Suitt
    Jerrell Dermer
    Domingo Opsahl
    Nigel Nesslein
    Toshia Nalty
    Jonas Intriago
    Cecila Crivaro
    Bea Schulke
    Collene Myatt
    Kena Nepa
    Dalia Burklow
    Harlan Rotherham
    Connie Grosso
    Shelton Brass
    Yvette Hinch
    Elroy Barriger
    Earnest Henrickson
    Neal Singhisen
    Kristofer Lunceford
    Dewey Bureau
    Lennie Cancro
    Kay Cherubini
    Moises Brugliera
    Edgardo Schoenle
    Lance Badena
    Floyd Kneedler
    Adriana Gschwind
    Jon Wzorek
    Trent Smyer
    Nicholle Sovel
    Hilda Maruschak
    Jonell Schwartzberg
    Maricela Sponsler
    Janise Kleinert
    Domingo Atzhorn
    Fabian Talsky
    Mauro Mursko
    Arica Salemo
    Simone Reinders
    Desmond Scheperle
    Lenora Rouhoff
    Georgette Yagues
    Mervin Kurkeyerian
    Mckinley Legate
    Argelia Douse
    George Baldrey
    Brynn Hobkirk
    Cyrus Milbrodt
    Terrance Kriete
    Janiece Ajello
    Roger Filippides
    Zonia Mcmillion
    Sheba Kenzie
    Bea Hauth
    Jude Swets
    Queen Simar
    Armand Ruter
    Mariana Blogg
    Lyle Peretti
    Wilhemina Basila
    Kendrick Fennessy
    Lee Dorkin
    Monte Camba
    Lashell Stenz
    Waltraud Corte
    Krystle Giancola
    Raphael Bordwell
    Johnny Urtiaga
    Johnie Africa
    Blaine Scibilia
    Ruben Pama
    Annamarie Hupp
    Dennis Heitland
    Cindy Peete
    Jefferson Prekker
    Maddie Grossnickle
    Ambrose Farahkhan
    Launa Horrigan
    Cecil Obremski
    Delta Mccoy
    Shantell Bahar
    Tandra Pigler
    Lavern Banghart
    Maple Gramling
    Wilma Seuss
    Sarita Fesperman
    Aurelio Harkrader
    Art Lavezzo
    Lura Shaff
    Jayme Baumer
    Adeline Dagraca
    Nakia Benell
    Clare Janski
    Tanja Boehmer
    Eleanora Schwede
    Dillon Dorrance
    Alisa Kopchick
    Leisha Harig
    Dominic Gehrki
    Moira Kiritsy
    Brendan Avina
    Deena Bejarano
    Hunter Spallina
    Jefferey Capes
    Juanita Creggett
    Jeffery Bielke
    Rayford Klinich
    Ardell Vanderwege
    Jimmie Aland
    Junko Develbiss
    Nakesha Miners
    Alberto Muhlenkamp
    Alexis Vassil
    Normand Douthett
    Delmar Gumz
    Emery Didyk
    Marybelle Lagerberg
    Eliseo Giblin
    Ernestina Standre
    Burt Blanche
    Dorsey Conyers
    Edie Spires
    Agustin Wendeln
    Austin Sasao
    Deidre Otega
    Tatiana Gata
    Dovie Zimmel
    Freda Grzywinski
    Solomon Mussell
    Jarod Canada
    Bernard Missler
    Alonzo Croom
    Elvin Arflack
    Suzann Pallazzo
    Shira Elsbury
    Randell Sterlin
    Darrick Revolorio
    Dorian Mayeux
    Cortney Teuteberg
    Eldon Schepis
    Coleman Chapnick
    Bradford Andersson
    Rob Epperley
    Kieth Lagman
    Chi Tereska
    Celina Chantler
    Suzanne Aguinaga
    Madonna Boock
    Rey Gun
    Jennie Capata
    Zelma Brunecz
    Hubert Yarrito
    Ngan Crean
    Claudie Marcou
    Monte Nicol
    Lane Inacio
    Lenny Alexis
    Lorene Sistek
    Brooks Merante
    Rufina Krah
    Bonnie Kieft
    Luigi Wahr
    Brandee Noori
    Gerard Rolson
    Noriko Buckman
    Marcella Bathrick
    Harlan Michealson
    Julienne Fuerte
    Olivia Ciliberto
    Lorenzo Pollnow
    Eufemia Crigler
    Emogene Tolar
    Steven Amoriello
    Stanford Minhas
    Adolfo Reddick
    Michael Flight
    Teodora Axtman
    Takisha Metting
    Johnnie Mullendore
    Dee Prowell
    Joye Skarupa
    Bernetta Hugel
    Jade Capra
    Sergio Gieringer
    Lorraine Marinez
    Eugenia Kreinbring
    Karin Brackey
    Sona Toothman
    Tresa Sylvester
    Emile Mccrate
    Miranda Coppage
    Wava Kathan
    Euna Bate
    Reina Catalanatto
    Jody Barner
    Margherita Demopoulos
    Yu Imboden
    Irina Huppenbauer
    Forest Lowenthal
    Jamar Loman
    Maurice Kotler
    Renato Feldstein
    Dulcie Pinter
    Doretta Breiner
    Mireille Betsinger
    Jc Emerton
    Yahaira Klee
    Glady Annen
    Jaime Alicandro
    Branda Darnstaedt
    Christiane Kissik
    Lester Tartamella
    Nikki Shoaf
    Vern Teteak
    Albertha Vankilsdonk
    Greg Pesch
    Nam Bahner
    Korey Smit
    Brock Arview
    Robin Danos
    Jonah Shoener
    Bernardina Michelini
    Cody Stachniw
    Maribeth Benner
    Louie Codell
    Alvera Vallarta
    Amy Schmauder
    Doretha Megee
    Clora Okins
    Antoine Colomba
    Daniell Tramel
    Marge Sebastian
    Savannah Ortic
    Renita Strahan
    Elvia Deerman
    Kris Bonsal
    Lili Aulds
    Roman Pessoa
    Shon Fonsecn
    Elmo Mcclain
    Brittni Stott
    Byron Syndergaard
    Quinn Hach
    Joey Buissereth
    Benedict Giacobbe
    Merna Ihrke
    Chase Chryst
    Truman Haroldsen
    Carry Elswick
    Raymonde Emrich
    Isreal Kieke
    Fredricka Judy
    Brendan Brester
    Karin Kitchell
    Tabitha Han
    Dotty Vandeveer

Basically:

use an attribute to store the value to search within
tailor a custom CSS selector to apply the "display:none" rule
use a bit of JS to feed a "style" tag with your tailored selector and rule

That's it, no more JS hurdle, only CSS doing it's job at lightning speed. Supported in all browsers and you only update 1 hidden element in the page (the "script" tag).

I also have updated your JS fiddle for the example.

0 讨论(0)

查看其它5个回答