<divid="optimizaci&#243;n-de-selectores">

<h2><ahref="#TOC"><spanclass="header-section-number">9.5</span> Optimización de Selectores</a></h2>

<p>La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de<code>document.querySelectorAll()</code>, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.</p>

<p>La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de<code>document.querySelectorAll()</code>, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.</p>

<divid="selectores-basados-en-id">

<h3><ahref="#TOC"><spanclass="header-section-number">9.5.1</span> Selectores basados en ID</a></h3>

<p>Siempre es mejor comenzar las selecciones con un ID.</p>

<divid="especificidad">

<h3><ahref="#TOC"><spanclass="header-section-number">9.5.2</span> Especificidad</a></h3>

<p>Trate de ser especifico para el lado derecho de la selección ymenosespecifico para el izquierdo.</p>

<p>Trate de ser especifico para el lado derecho de la selección ymenos específico para el izquierdo.</p>

<preclass="brush: js"><code>// no optimizado

$('div.data .gonzalez');

// optimizado

$('.data td.gonzalez');

<p>Use en lo posible<code>etiqueta.clase</code> del lado derecho de la selección, ysolo<code>etiqueta</code> o<code>.clase</code> en la parte izquierda.</p>

<p>Evite especificidad excesiva.</p>

<p>Use en lo posible<code>etiqueta.clase</code> del lado derecho de la selección, y solo<code>etiqueta</code> o<code>.clase</code> en la parte izquierda.</p>

<preclass="brush: js"><code>$('.data table.attendees td.gonzalez');

// mucho mejor: eliminar la parte media de ser posible

<divid="evitar-el-selector-universal">

<h3><ahref="#TOC"><spanclass="header-section-number">9.5.3</span> Evitar el Selector Universal</a></h3>

<p>Selecciones en donde se especifica de forma implícita oexplicita unaselección universal puede resultar muy lento.</p>

<p>Selecciones en donde se especifica de forma implícita oexplícita una selección universal puede resultar muy lento.</p>

<preclass="brush: js"><code>$('.buttons &gt; *'); // muy lento

$('.buttons').children(); // mucho mejor

<divid="utilizar-la-delegaci&#243;n-de-eventos">

<h2><ahref="#TOC"><spanclass="header-section-number">9.6</span> Utilizar la Delegación de Eventos</a></h2>

<p>La delegación de eventos permite vincular un controlador de evento aunelementocontenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQueryrealizaeste trabajofácila través de<code>$.fn.live</code> y<code>$.fn.delegate</code>. En lo posible, es recomendable utilizar<spanclass="math">$.fn.delegateenlugar de`$</span>.fn.live`, ya que elimina la necesidad de una selecciónysucontextoexplicito reduce la carga en aproximadamente un 80%.</p>

<p>La delegación de eventos permite vincular un controlador de evento aun elementocontenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQueryhace fácileste trabajo a través de<code>$.fn.live</code> y<code>$.fn.delegate</code>. En lo posible, es recomendable utilizar<code>$.fn.delegate</code> enlugar de<code>$.fn.live</code>, ya que elimina la necesidad de una seleccióny sucontextoexplícito reduce la carga en aproximadamente un 80%.</p>

<p>Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.</p>

<preclass="brush: js"><code>// mal (si existen muchos items en la lista)

$('li.trigger').click(handlerFn);

<divid="no-actuar-en-elementos-no-existentes">

<h2><ahref="#TOC"><spanclass="header-section-number">9.10</span> No Actuar en Elementos no Existentes</a></h2>

<p>jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.</p>

<preclass="brush: js"><code>// MAL: elcodigo a continuación ejecuta tres funciones

<preclass="brush: js"><code>// MAL: elcódigo a continuación ejecuta tres funciones

// sin comprobar si existen elementos

// en la selección

$('#nosuchthing').slideUp();

La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de`document.querySelectorAll()`, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.

La optimización de selectores es menos importante de lo que solía ser,debido a la implementación en algunos navegadores de`document.querySelectorAll()`, pasando la carga de jQuery hacia el navegador. Sin embargo, existen algunos consejos que debe tener en cuenta.

Trate de ser especifico para el lado derecho de la selección ymenosespecifico para el izquierdo.

Trate de ser especifico para el lado derecho de la selección ymenos específico para el izquierdo.

~~~~{.brush: .js}

Use en lo posible`etiqueta.clase` del lado derecho de la selección, ysolo`etiqueta` o`.clase` en la parte izquierda.

Evite especificidad excesiva.

Use en lo posible`etiqueta.clase` del lado derecho de la selección, y solo`etiqueta` o`.clase` en la parte izquierda.

~~~~{.brush: .js}

Selecciones en donde se especifica de forma implícita oexplicita unaselección universal puede resultar muy lento.

Selecciones en donde se especifica de forma implícita oexplícita una selección universal puede resultar muy lento.

~~~~{.brush: .js}

La delegación de eventos permite vincular un controlador de evento aunelementocontenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQueryrealizaeste trabajofácila través de`$.fn.live` y`$.fn.delegate`. En lo posible, es recomendable utilizar $.fn.delegateenlugar de`$.fn.live`, ya que elimina la necesidad de una selecciónysucontextoexplicito reduce la carga en aproximadamente un 80%.

La delegación de eventos permite vincular un controlador de evento aun elementocontenedor (por ejemplo, una lista desordenada) en lugar de múltiples elementos contenidos (por ejemplo, los ítems de una lista).jQueryhace fácileste trabajo a través de`$.fn.live` y`$.fn.delegate`. En lo posible, es recomendable utilizar`$.fn.delegate` enlugar de`$.fn.live`, ya que elimina la necesidad de una seleccióny sucontextoexplícito reduce la carga en aproximadamente un 80%.

Además, la delegación de eventos permite añadir nuevos elementos contenedores a la página sin tener que volver a vincular sus controladores de eventos.

jQuery no le dirá si esta tratando de ejecutar código en una selección vacía — esta se ejecutará como si nada estuviera mal. Dependerá de usted comprobar si la selección contiene elementos.

~~~~{.brush: .js}