В этом блоге объясняется небольшая разница между статическими и живыми NodeLists
и упоминается, как реализованы живые коллекции.
Живая коллекция не имеет доступа к DOM, покавы получаете доступ к его элементам.В это время он создает актуальную коллекцию и кэширует ее.Нет никаких накладных расходов на будущие обращения, если DOM не изменится.
Изменение DOM не должно вызывать немедленное обновление каких-либо коллекций.Скорее, это должно просто сделать недействительными их кэши.В следующий раз, когда вы получите доступ к одной из коллекций, она будет регенерирована.
Так что если вы создаете живую коллекцию и обращаетесь к ней нечасто по сравнению с модификациями DOM, издержки должны быть относительно небольшими.В худшем случае вы перебираете живую коллекцию и изменяете DOM во время цикла - каждая итерация должна обновлять коллекцию.
Возможно, что могут быть дополнительные оптимизации, которые могли бы смягчить это.Для некоторых типов живых коллекций механизм JavaScript может определить, может ли конкретная модификация DOM повлиять на него;если нет, это не должно сделать недействительной коллекцию.Например, коллекция, созданная с помощью document.getElementsByClassName()
, не будет затронута модификацией, которая нигде не добавляет и не удаляет указанный класс.Однако, если вы сделаете что-то вроде удаления элемента, он должен будет проверить, появился ли класс где-нибудь в поддереве, возглавляемом этим элементом, поэтому не очевидно, что это действительно лучше, чем просто аннулирование кэшей.