(Si hace alguna diferencia, estoy trabajando en un componente web).
Si tengo lo siguiente:
<!-- Assume a decently-sized web page with lots of elements before and after all this --> <form> <input type="hidden" id="foo" name="foo" value="bar" /> </form> <script> let myForm = document.querySelector('form'); </script>…y quiero seleccionar el campo oculto, ¿cuál es más rápido/mejor?
A)
let field = document.querySelector('#foo');B)
let field = myForm.querySelector('#foo');En el caso de un selector de ID, creo que es probable que A sea más rápido.
Se supone que las ID son únicas, por lo que es casi seguro que el navegador tenga un índice de todas las ID. Buscar una ID en un document utilizará este índice para encontrar el elemento lo más rápido posible.
Pero si consulta la ID anidada en otro elemento, asumirá que está violando esta expectativa y tendrá que hacer una búsqueda real dentro de ese elemento. Esto es difícil de optimizar y hay pocos incentivos para hacerlo ya que no es un DOM válido.
Es posible que el navegador realice un seguimiento de los ID que se han duplicado. Si foo no está duplicado, B podría optimizarse para que sea equivalente a A.
Entonces B es, en el mejor de los casos, equivalente a A, pero podría ser peor.