ClientWidth Performance in IE8

Question

I have some old javascript that freezes the tfoot / thead tables and allows me to scroll through the body, it works fine, except for IE8, it is very slow.

I traced the problem of reading the clientWidth property of a cell in tfoot / thead ... in ie6 / 7 and FireFox 1.5-3 it takes about 3 ms to read the clientWidth property ... in IE8 it takes more than 200 ms and longer when the number of cells in the table increases.

Is this a known bug? is there any work or solution?

Answer 1

I solved this problem if you are still interested. The solution is quite complicated. Basically, you need to attach a simple element to the element and cache its clientWidth / Height.

A simple HTC looks like this:

<component lightweight="true"> <script> window.clientWidth2[uniqueID]=clientWidth; window.clientHeight2[uniqueID]=clientHeight; </script> </component> 

You need to connect HTC using CSS:

 .my-table td {behavior: url(simple.htc);} 

Remember that you only need to attach behavior for IE8!

Then you use JavaScript to create getters for cached values:

 var WIDTH = "clientWidth", HEIGHT = "clientHeight"; if (8 == document.documentMode) { window.clientWidth2 = {}; Object.defineProperty(Element.prototype, "clientWidth2", { get: function() { return window.clientWidth2[this.uniqueID] || this.clientWidth; } }); window.clientHeight2 = {}; Object.defineProperty(Element.prototype, "clientHeight2", { get: function() { return window.clientHeight2[this.uniqueID] || this.clientHeight; } }); WIDTH = "clientWidth2"; HEIGHT = "clientHeight2"; } 

Note that I created the WIDTH / HEIGHT constants. You should use them to get the width / height of your elements:

 var width = element[WIDTH]; 

It is complicated, but it works. I had the same problem as you, access to clientWidth was incredibly slow. This solves the problem very well. It is still not so fast with IE7, but it can be used again again.

Answer 2

I could not find the documentation that this is a known bug. To improve performance, why not cache the clientWidth property and update the cache periodically? I.E. if you code:

 var someValue = someElement.clientWidth + somethingElse; 

Change this to:

 // Note the following 3 lines use prototype // To do this without prototype, create the function, // create a closure out of it, and have the function // repeatedly call itself using setTimeout() with a timeout of 1000 // milliseconds (or more/less depending on performance you need) var updateCache = function() { this. clientWidthCache = $('someElement').clientWidth; }; new PeriodicalExecuter(updateCache.bind(this),1); var someValue = this.clientWidthCache + somethingElse 

Answer 3

Your problem may be related to something else (and not just to calling the client-wide): is anyhting updated / resized in your DOM when this function is called?

Your browser might be busy reflowing on IE8, which makes client speed slower?

Answer 4

IE 8 has the ability to switch between versions of IE, as well as compatibility mode. Have you tried switching to compatibility mode? Does it matter?

Answer 5

I noticed that while reading width properties I noticed slow performance. And it can be very good.

However, I found that the main performance impact in our application was that a function that was bound to the resize event window itself caused another resize, which caused a cascading effect, but not an infinite loop. I realized this when I saw that the call counter for the function was an order of magnitude larger in IE8 than in IE7 (I love the IE Developer Tool). I think the reason is that some actions on the elements, for example, setting the width of the element, now lead to skew in IE8, which did not do this in IE7.

I fixed it by setting a window resize event: resize = "return myfunction ();" instead just resize = "myfunction ();" and make sure myfunction is returning false;

I understand that the initial question is a few months, but I decided that I would publish my findings in case anyone else could win.