[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
The markup look like this:
li class=MenuItem processMenuItem id=MENUID-D
a href=processing/x/XbrProcessing/a
ul
li class=Intro
h4If you recieve 20,000 invoices per year, you can save at least
$100,000/h4
pLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua./p
/li
li class=News Disabled
a href=processing/x/news/ title=News summary.News text.../a
/li
li class=Splash Disabled
a href=processing/x/splash/ title=Splash summary.Splash text.../
a
img src=media/splashImage.jpg
/li
li class=Anchora href=processing/x/#OverviewOverview/a/li
li class=Anchora href=processing/x/#Introduction title=We are
experts in sorting.Introduction/a/li
li class=Anchora href=processing/x/#ArticleArticle/a/li
li class=Anchora href=processing/x/#FeaturesFeatures/a/li
li class=Anchora href=processing/x/#References title=IKEA,
Porsche, Pfizer, SAS, Tetra Pak, Carlsberg, DaimlerChrysler, LEGO,
Bosch, DFDS transport, Canon...References/a/li
li class=Anchora href=processing/x/#TechnicalTechnical/a/
li
li class=Anchora href=processing/x/#Integration title=Lorem
ipsum dolor sit amet.Integration/a/li
li class=Anchora href=processing/x/#DownloadsDownloads/a/
li
/ul
/li
The timer looks like this:
var timer = {
time: 0,
now: function(){ return (new Date()).getTime(); },
start: function(){ this.time = this.now(); },
since: function(){ return this.now()-this.time; }
};
...and I start the timer in the last row of the last script being
loaded...
Yes, I know there are many ways to improve and optimize my methods,
BUT that's not my main issue right now, becuse any improvment like the
one Ricardobeat suggests still ends up with less speed in 1.3.1 vs
1.2.6.
Thanks,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
A lot has changed with regard to the selector engine in 1.3.1 - it
this case it looks like these type of selections didn't benefit. One
thing that would change that, though, would be caching the selectors
that you do run. Right now you run a couple of these over-and-over
again. I'd probably rewrite your method like this:
// COLLECTOR
function getProcessMenuItem(li) {
var type = processMenuItem;
var first = $(li).find('a:first'),
news = $(li).find('li.News a'),
splash = $(li).find('li.Splash a');
var item = {
id : $(li).attr('id'),
type : type,
title : first.text(),
URI: first.attr('href'),
preamble : $(li).find('h4').text(),
body : $(li).find('p').text(),
news : {
title : news.text(),
URI : news.attr('href'),
summary : news.attr('title')
},
splash : {
title : splash.text(),
URI : splash.attr('href'),
summary : splash.attr('title'),
media : splash.next().attr('src')
},
links : getAnchorLinks(li)
};
return item;
};
I'm not sure what's in your getAnchorLinks method - but that could
probably be optimized as well.
--John
On Fri, Feb 20, 2009 at 5:02 AM, Sjoland jo...@sjoland.com wrote:
The markup look like this:
li class=MenuItem processMenuItem id=MENUID-D
a href=processing/x/XbrProcessing/a
ul
li class=Intro
h4If you recieve 20,000 invoices per year, you can save at least
$100,000/h4
pLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua./p
/li
li class=News Disabled
a href=processing/x/news/ title=News summary.News text.../a
/li
li class=Splash Disabled
a href=processing/x/splash/ title=Splash summary.Splash text.../
a
img src=media/splashImage.jpg
/li
li class=Anchora href=processing/x/#OverviewOverview/a/li
li class=Anchora href=processing/x/#Introduction title=We are
experts in sorting.Introduction/a/li
li class=Anchora href=processing/x/#ArticleArticle/a/li
li class=Anchora href=processing/x/#FeaturesFeatures/a/li
li class=Anchora href=processing/x/#References title=IKEA,
Porsche, Pfizer, SAS, Tetra Pak, Carlsberg, DaimlerChrysler, LEGO,
Bosch, DFDS transport, Canon...References/a/li
li class=Anchora href=processing/x/#TechnicalTechnical/a/
li
li class=Anchora href=processing/x/#Integration title=Lorem
ipsum dolor sit amet.Integration/a/li
li class=Anchora href=processing/x/#DownloadsDownloads/a/
li
/ul
/li
The timer looks like this:
var timer = {
time: 0,
now: function(){ return (new Date()).getTime(); },
start: function(){ this.time = this.now(); },
since: function(){ return this.now()-this.time; }
};
...and I start the timer in the last row of the last script being
loaded...
Yes, I know there are many ways to improve and optimize my methods,
BUT that's not my main issue right now, becuse any improvment like the
one Ricardobeat suggests still ends up with less speed in 1.3.1 vs
1.2.6.
Thanks,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
It's the calls to $(li).find('li.News a') that make for most of the
difference. Without that 1.3.1 is up to 20% faster.
Apparently a simple descendant selector in 1.3 is terribly slower i.e.
$(el).find('div a') if any as exist (even outside the context). Also
'.someclass a' is faster than 'li.someclass a' which doesn't make any
sense. I put a test case at
http://jquery.nodnod.net/cases/142
Guess it has to do with the bottom up traversing approach in Sizzle.
cheers,
- ricardo
On Feb 20, 7:02 am, Sjoland jo...@sjoland.com wrote:
The markup look like this:
li class=MenuItem processMenuItem id=MENUID-D
a href=processing/x/XbrProcessing/a
ul
li class=Intro
h4If you recieve 20,000 invoices per year, you can save at least
$100,000/h4
pLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua./p
/li
li class=News Disabled
a href=processing/x/news/ title=News summary.News text.../a
/li
li class=Splash Disabled
a href=processing/x/splash/ title=Splash summary.Splash text.../
a
img src=media/splashImage.jpg
/li
li class=Anchora href=processing/x/#OverviewOverview/a/li
li class=Anchora href=processing/x/#Introduction title=We are
experts in sorting.Introduction/a/li
li class=Anchora href=processing/x/#ArticleArticle/a/li
li class=Anchora href=processing/x/#FeaturesFeatures/a/li
li class=Anchora href=processing/x/#References title=IKEA,
Porsche, Pfizer, SAS, Tetra Pak, Carlsberg, DaimlerChrysler, LEGO,
Bosch, DFDS transport, Canon...References/a/li
li class=Anchora href=processing/x/#TechnicalTechnical/a/
li
li class=Anchora href=processing/x/#Integration title=Lorem
ipsum dolor sit amet.Integration/a/li
li class=Anchora href=processing/x/#DownloadsDownloads/a/
li
/ul
/li
The timer looks like this:
var timer = {
time: 0,
now: function(){ return (new Date()).getTime(); },
start: function(){ this.time = this.now(); },
since: function(){ return this.now()-this.time; }
};
...and I start the timer in the last row of the last script being
loaded...
Yes, I know there are many ways to improve and optimize my methods,
BUT that's not my main issue right now, becuse any improvment like the
one Ricardobeat suggests still ends up with less speed in 1.3.1 vs
1.2.6.
Thanks,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
Ok, first of all thank you everyone in the jQuery team, it's a
fantastic tool!!!
I did all the recommended changes in my methods and these are the
results:
Sample:
$this.getProcessMenuItem = function(li) {
var type = processMenuItem;
var first = li.find('a:first');
var news = li.find('.News a');
var splash = li.find('.Splash a');
var item = {
id : li.attr('id'),
type : type,
title : first.text(),
URI: first.attr('href'),
preamble : li.find('h4').text(),
body : li.find('p').text(),
news : {
title : news.text(),
URI : news.attr('href'),
summary : news.attr('title')
},
splash : {
title : splash.text(),
URI : splash.attr('href'),
summary : splash.attr('title'),
media : splash.next().attr('src')
},
links : $this.getAnchorLinks(li)
};
return item;
};
The results:
1.2.6
FF: 310ms
Safari: 75ms
IE7: 485ms
1.3.1 (rev6170)
FF: 280ms
Safari: 75ms
IE7: 500ms
That's fantastic news! I guess I just have to improve my coding skills
to benefit from the new engine, which is not a problem for me at all
=)
Thanks again for the fast answers,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
Do you have some sample markup? It's kind of hard to determine from
just the code.
--John
On Thu, Feb 19, 2009 at 2:18 PM, Sjoland jo...@sjoland.com wrote:
Hi!,
When switching between 1.3.1 and 1.2.6 i get a serious drop in speed
when collection a JSON object from static HTML content.
1.2.6
FF: 325ms
Safari: 75ms
IE7: 450ms
1.3.1
FF: 1205ms
Safari: 415ms
IE7: 1550 ms
The javascript collects data into a JSON object with a few methods
like this:
// MAIN
function getMenuItems(menu) {
var menuItems = [];
$(menu).find('.MenuItem').each(function(){
var item = false;
if ($(this).hasClass('processMenuItem')) item =
getProcessMenuItem($
(this)[0]);
if ($(this).hasClass('softwareMenuItem')) item =
getSoftwareMenuItem
($(this)[0]);
if ($(this).hasClass('listMenuItem')) item =
getListMenuItem($(this)
[0]);
if ($(this).hasClass('aboutMenuItem')) item =
getAboutMenuItem($
(this)[0]);
menuItems.push(item);
});
return menuItems;
};
// COLLECTOR
function getProcessMenuItem(li) {
var type = processMenuItem;
var item = {
id : $(li).attr('id'),
type : type,
title : $(li).find('a:first').text(),
URI: $(li).find('a:first').attr('href'),
preamble : $(li).find('li.Intro h4').text(),
body : $(li).find('li.Intro p').text(),
news : {
title : $(li).find('li.News a').text(),
URI : $(li).find('li.News a').attr('href'),
summary : $(li).find('li.News a').attr('title')
},
splash : {
title : $(li).find('li.Splash a').text(),
URI : $(li).find('li.Splash a').attr('href'),
summary : $(li).find('li.Splash a').attr('title'),
media : $(li).find('li.Splash img').attr('src')
},
links : getAnchorLinks(li)
};
return item;
};
Anyone else experiencing drops in speed with 1.3.1 doing simple stuff
like this?
Sure, I was not expecting any major speed increase since the code is
not optimized yet, but an 80% drop is just crazy...
Please advice,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
No idea about the performance drop, but you can improve your main
function:
// MAIN
function getMenuItems(menu) {
var menuItems = [];
$(menu).find('.MenuItem').each(function(){
var t = $(this), item = false;
if (t.hasClass('processMenuItem')) item = getProcessMenuItem
(this);
else if (t.hasClass('softwareMenuItem')) item =
getSoftwareMenuItem(this);
else if (t.hasClass('listMenuItem')) item = getListMenuItem
(this);
else if (t.hasClass('aboutMenuItem')) item = getAboutMenuItem
(this);
item = t.hasClass('processMenuItem')
? getProcessMenuItem(this)
: t.hasClass('softwareMenuItem')
? getSoftwareMenuItem(this)
: t.hasClass('listMenuItem')
? getListMenuItem(this)
: t.hasClass('aboutMenuItem')
? getAboutMenuItem(this)
: false;
menuItems.push(item);
});
return menuItems;
};
On Feb 19, 4:18 pm, Sjoland jo...@sjoland.com wrote:
Hi!,
When switching between 1.3.1 and 1.2.6 i get a serious drop in speed
when collection a JSON object from static HTML content.
1.2.6
FF: 325ms
Safari: 75ms
IE7: 450ms
1.3.1
FF: 1205ms
Safari: 415ms
IE7: 1550 ms
The javascript collects data into a JSON object with a few methods
like this:
// MAIN
function getMenuItems(menu) {
var menuItems = [];
$(menu).find('.MenuItem').each(function(){
var item = false;
if ($(this).hasClass('processMenuItem')) item =
getProcessMenuItem($
(this)[0]);
if ($(this).hasClass('softwareMenuItem')) item =
getSoftwareMenuItem
($(this)[0]);
if ($(this).hasClass('listMenuItem')) item =
getListMenuItem($(this)
[0]);
if ($(this).hasClass('aboutMenuItem')) item =
getAboutMenuItem($
(this)[0]);
menuItems.push(item);
});
return menuItems;
};
// COLLECTOR
function getProcessMenuItem(li) {
var type = processMenuItem;
var item = {
id : $(li).attr('id'),
type : type,
title : $(li).find('a:first').text(),
URI: $(li).find('a:first').attr('href'),
preamble : $(li).find('li.Intro h4').text(),
body : $(li).find('li.Intro p').text(),
news : {
title : $(li).find('li.News a').text(),
URI : $(li).find('li.News a').attr('href'),
summary : $(li).find('li.News a').attr('title')
},
splash : {
title : $(li).find('li.Splash a').text(),
URI : $(li).find('li.Splash a').attr('href'),
summary : $(li).find('li.Splash a').attr('title'),
media : $(li).find('li.Splash img').attr('src')
},
links : getAnchorLinks(li)
};
return item;
};
Anyone else experiencing drops in speed with 1.3.1 doing simple stuff
like this?
Sure, I was not expecting any major speed increase since the code is
not optimized yet, but an 80% drop is just crazy...
Please advice,
/Johan
[jQuery] Re: Lower speed with 1.3.1 vs 1.2.6 with simple parsing
dang. accidentally pressed send while writing, please ignore my last
message.
No idea about the performance drop, but you can improve your main
function. $(this)[0] is unnecessary, you're creating a new jQuery
object and throwing it away.
// MAIN
function getMenuItems(menu) {
var menuItems = [];
$(menu).find('.MenuItem').each(function(){
var t = $(this), item = false;
if (t.hasClass('processMenuItem'))
item = getProcessMenuItem(this);
else if (t.hasClass('softwareMenuItem'))
item = getSoftwareMenuItem(this);
else if (t.hasClass('listMenuItem'))
item = getListMenuItem(this);
else if (t.hasClass('aboutMenuItem'))
item = getAboutMenuItem(this);
menuItems.push(item);
});
return menuItems;
};
- ricardo
On Feb 19, 4:18 pm, Sjoland jo...@sjoland.com wrote:
Hi!,
When switching between 1.3.1 and 1.2.6 i get a serious drop in speed
when collection a JSON object from static HTML content.
1.2.6
FF: 325ms
Safari: 75ms
IE7: 450ms
1.3.1
FF: 1205ms
Safari: 415ms
IE7: 1550 ms
The javascript collects data into a JSON object with a few methods
like this:
// MAIN
function getMenuItems(menu) {
var menuItems = [];
$(menu).find('.MenuItem').each(function(){
var item = false;
if ($(this).hasClass('processMenuItem')) item =
getProcessMenuItem($
(this)[0]);
if ($(this).hasClass('softwareMenuItem')) item =
getSoftwareMenuItem
($(this)[0]);
if ($(this).hasClass('listMenuItem')) item =
getListMenuItem($(this)
[0]);
if ($(this).hasClass('aboutMenuItem')) item =
getAboutMenuItem($
(this)[0]);
menuItems.push(item);
});
return menuItems;
};
// COLLECTOR
function getProcessMenuItem(li) {
var type = processMenuItem;
var item = {
id : $(li).attr('id'),
type : type,
title : $(li).find('a:first').text(),
URI: $(li).find('a:first').attr('href'),
preamble : $(li).find('li.Intro h4').text(),
body : $(li).find('li.Intro p').text(),
news : {
title : $(li).find('li.News a').text(),
URI : $(li).find('li.News a').attr('href'),
summary : $(li).find('li.News a').attr('title')
},
splash : {
title : $(li).find('li.Splash a').text(),
URI : $(li).find('li.Splash a').attr('href'),
summary : $(li).find('li.Splash a').attr('title'),
media : $(li).find('li.Splash img').attr('src')
},
links : getAnchorLinks(li)
};
return item;
};
Anyone else experiencing drops in speed with 1.3.1 doing simple stuff
like this?
Sure, I was not expecting any major speed increase since the code is
not optimized yet, but an 80% drop is just crazy...
Please advice,
/Johan
