<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Quick Performance Tip: jQuery and addClass</title>
	<atom:link href="http://www.zachleat.com/web/2009/06/30/quick-performance-tip-jquery-and-addclass/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zachleat.com/web/2009/06/30/quick-performance-tip-jquery-and-addclass/</link>
	<description></description>
	<lastBuildDate>Tue, 20 Jul 2010 23:06:58 +0000</lastBuildDate>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
	<item>
		<title>By: Zach Leatherman</title>
		<link>http://www.zachleat.com/web/2009/06/30/quick-performance-tip-jquery-and-addclass/comment-page-1/#comment-1475</link>
		<dc:creator>Zach Leatherman</dc:creator>
		<pubDate>Thu, 13 Aug 2009 23:24:25 +0000</pubDate>
		<guid isPermaLink="false">http://www.zachleat.com/web/?p=226#comment-1475</guid>
		<description>Richard,
I&#039;m surprised you&#039;re seeing performance issues inside callbacks for hover events.  How many nodes are in the DOM tree you&#039;re modifying the className for?

Actually, it looks like the removeClass method is optimized, and only sets the string once, instead of multiple times.  It shouldn&#039;t need any changes.

&lt;pre lang=&quot;javascript&quot;&gt;
elem.className = classNames !== undefined ?
	jQuery.grep(elem.className.split(/\s+/), function(className){
		return !jQuery.className.has( classNames, className );
	}).join(&quot; &quot;) :
	&quot;&quot;;
&lt;/pre&gt;</description>
		<content:encoded><![CDATA[<p>Richard,<br />
I&#8217;m surprised you&#8217;re seeing performance issues inside callbacks for hover events.  How many nodes are in the DOM tree you&#8217;re modifying the className for?</p>
<p>Actually, it looks like the removeClass method is optimized, and only sets the string once, instead of multiple times.  It shouldn&#8217;t need any changes.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">elem.<span style="color: #660066;">className</span> <span style="color: #339933;">=</span> classNames <span style="color: #339933;">!==</span> undefined <span style="color: #339933;">?</span>
	jQuery.<span style="color: #660066;">grep</span><span style="color: #009900;">&#40;</span>elem.<span style="color: #660066;">className</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/\s+/</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>className<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #339933;">!</span>jQuery.<span style="color: #660066;">className</span>.<span style="color: #660066;">has</span><span style="color: #009900;">&#40;</span> classNames<span style="color: #339933;">,</span> className <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot; &quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
	<span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
	</item>
	<item>
		<title>By: Richard Neil Ilagan</title>
		<link>http://www.zachleat.com/web/2009/06/30/quick-performance-tip-jquery-and-addclass/comment-page-1/#comment-1429</link>
		<dc:creator>Richard Neil Ilagan</dc:creator>
		<pubDate>Wed, 12 Aug 2009 07:36:45 +0000</pubDate>
		<guid isPermaLink="false">http://www.zachleat.com/web/?p=226#comment-1429</guid>
		<description>Great insight, and kudos to you for actually delving into the underlying source code.

I, myself, have been writing some code that dynamically modifies classes of some HTML elements as part of an event procedure (namely, hover in and out). As you can imagine, the performance load on this can get pretty hefty; it increases proportionally the more classes you add in and the more elements you modify in one go. This is most notable in Internet Explorer too.

While your aforementioned workaround for the .addClass() procedure would definitely work better in my opinion, I also wanted to ask if there was a better way to implement .removeClass() as well. Manually doing this meant string splitting and concatenation, which, I assume, is what the function already does.

Good work, and definitely bookmarking this.</description>
		<content:encoded><![CDATA[<p>Great insight, and kudos to you for actually delving into the underlying source code.</p>
<p>I, myself, have been writing some code that dynamically modifies classes of some HTML elements as part of an event procedure (namely, hover in and out). As you can imagine, the performance load on this can get pretty hefty; it increases proportionally the more classes you add in and the more elements you modify in one go. This is most notable in Internet Explorer too.</p>
<p>While your aforementioned workaround for the .addClass() procedure would definitely work better in my opinion, I also wanted to ask if there was a better way to implement .removeClass() as well. Manually doing this meant string splitting and concatenation, which, I assume, is what the function already does.</p>
<p>Good work, and definitely bookmarking this.</p>
]]></content:encoded>
	</item>
</channel>
</rss>
