Interesting find: myfunction('value') vs myfunction(this.myval)

page rendering slows considerably

[XtendScott]

I develop Intranet apps with IE as the supported browser, so how other browsers are effected are unknown.

I had an app that displays 1000+ lines on a single page and each line had an inline function "myfunction('valueID')" and would render to the page much slower than the actual querry would take to return the data. At first we thought there was just a lot of data and it just took time to render.
Example 1: <img src="img.gif" onclick="myfunction('456-12')">

Recently we found that if we put the "valueID" in an attribute and referenced it through this.attrName it display much faster.

Example 2: <img src="img.gif" onclick="myfunction(this.valueID)" valueID="456-12">

Further testing revealed that if the variable remained constant in the functions it was also very fast, but when they were all unique it slowed down again.

We concluded: (atleast in IE) The browser has to allocate memory for the variables in the functions as it tries to display the page, but not for the attributes.

[httpwebwitch]

fascinating!
So is this yet another reason for embracing Unobtrusive Javascript.

Putting data in an attribute is faster than putting it in a function... I would have guessed it'd be the other way around. This is directly applicable to something I am building right now.

thanks for sharing this XtendScott.

[daveVk]

with example 1 1000+ anon functions will be created of the form
function () { myfunction('456-12') } and these functions assigned one to one to the onclicks.

with example 2 ( or constant ID ) assumable only one anon function is created and assigned to all onclicks

[XtendScott]

one of the pages with "ALL" results, returned over 5000 records. This page went from a nearly 2 minute query-load-display time down to a 25-30 second time to display.

I just could NOT have imagined that it would have made such a significant difference.