This is a very bizarre any very frustrating issue so please bear with me for the full explanation.
PREEMPTIVE NOTE: This is not a question of how to improve DOM/CSS for performance. You will see when you read the frustrations.
We have recently re-worked out website to be cross-browser (e.g. < !DOCTYPE html >)
After all the pain HTML and CSS re-factoring, we thought things were fine. However our website which has a pretty heavy DOM is incredibly sluggish to the point of being unusable. Example: clicking to select a row takes 10 seconds until it is highlighted and its check-box is checked.
Frustrations:
1) This sluggishness is not universal. Only IE9 suffers from this. IE8, IE10, FireFox, Chrome are all speedy!
2) IE9 itself if changed in debugger to IE8 documents mode becomes speedy! But not in its own IE9 mode.
3) While we are noticing the some sluggishness, the SUPER sluggishness (to the point of unusable) is only on specific machines.
4) Of course, one of those machines is a client.
The Question:
What could possibly unique about specific machines to cause super sluggishness? What could cause these machines to suffer more than others?
Things we've checked:
1) Windows 7 fully updated.
2) We do not have Windows update KB2976627 installed
3) We do not have Windows update KB2670838 installed
4) Disabled all Add-ons
5) Stress again that we disabled Shockwave Flash Object.
6) Tried disabling "Software Rendering" in Internet Options so that the GPU is used.
7) Reduced Windows display quality settings to run for maximum performance.
Additional Edvidence:
When the display area gets smaller, responsiveness increases. This happens when the browser window itself is made smaller or when dragged partly outside the screen boundaries. Also when performance improves as DOM elements removed/hidden.
DynaTrace shows a huge amount of time spent on rendering.
Webpage content:
There is ONLY: HTML, CSS2, JavaScript, JQuery, simple images.
JqGrid 4.5.2
JQuery 1.4.2
JQuery-UI 1.8.2
There is NONE of the following: Flash, video, CSS3, loaded third-party web content.
Machines tried:
OS: Windows 7 Enterprise N 64bit
RAM: 2 GB
CPU: 2.53 Ghz (2 processors)
OS: Windows 7 Enterprise 64bit
RAM: 8 GB
CPU: 2.67 Ghz (2 processors)
IE9 Version:
9.0.8112.16421 64-bit
IE9 Update Version: 9.0.31 (KB2977629)
We tried uninstalling update KB2977629 with no improvement.
Repeat of Question:
What could possibly unique about specific machines to cause super sluggishness? What could cause these machines to suffer more than others?
I discovered the explanation. As I feared when I phrased the original question JQGrid was a distraction (red herring). The real cause was answered in another stack overflow article.
In short, our page contains a lot of rounded corners (i.e. border-radius) styling. And there is a bug in IE9 that causes the rendering engine to choke on this. Once this styling was removed, everything was speedy again!
This also explains why IE8 browsers and even using IE9 with IE8 documents mode were fast. IE8 does not support border-radius so it didn't fall into this issue.
Related
This is going to sound ridiculous, but if I'm going to find someone who has even the foggiest clue about this, StackOverflow will be the place.
First, the platform I'm developing on: Motorola Handscanners. Running Windows CE 5 and/or 6. Running a web app on the mobile version of Internet Explorer 5.5. (I know, I know, but keep reading). Specifically the MC3190, MC9090 and MC3090. The 3090 has 64MB of ram, and the other two have 128.
Are you cringing? You should be. Read on anyways, it only gets more fun.
We made an update. Increased a font size slightly, and changed it's colour from black to blue. Wild, I know. All of our tests showed no issues at all, everyone loved the change, and it even seemed to increase user efficiency (industrial application).
Then we rolled it out to China, where the MC3090 is still used, with a Chinese installation of the OS with Chinese fonts. Immediately, rendering of text slowed to a crawl. We're talking 4 seconds to load an 8kb webpage. Networking is fine, the page is downloaded, but rendering seems to reach a standstill- and that is killing user efficiency. Also, it's pretty annoying for our users.
Potential solutions:
Upgrade hardware (in the works, but potentially years away, and expensive)
Don't make this change (considered, but we want to have our cake and eat it too)
Quit my job, because IE 5.5 (I look at it like working with special needs children)
So I come to you StackOverflow to ask: Does anyone have a clue why a slight font change on Chinese Fonts could result in such a huge change in rendering time on IE 5.5 and Windows CE 5?
We've got an application on GWT 2.5.0 + GXT 3.0.4 with one main page, containing a big table (like Excel) and a couple of heavy popups (implemented using GXT Windows).
It works reasonably good at Chrome, FF, and IE9 but is incredibly slow in IE8.
Memory consumption on opening the main page and the most heavy popup is as follows:
FF ~250Mb
IE9 ~230 Mb
IE8 ~600-700 Mb (!!) I don't think it's a memory leak, because memory stayed stable and didn't increase overnight.
Compiler settings are 'use closure compiler + max optimization'.
I'm at a loss where to start, and how to fix this problem.
One idea was that rendering is fast in IE9 but not in IE8 because of a GPU acceleration, but that doesn't explain amount of memory needed for the IE8. Why then IE9 is okay, but not IE8 ?
We're currently profiling our application with dynatrace, but that doesn't help with memory usage. Any ideas greatly appreciated, thank you !
So far our customers used IE6, so our system is compatible with IE6 only. Now, we want to support IE8 too. What differences are we going to experience while adapting our system to IE8? ( in the context of CSS and JS )
Thanks in advance.
See this, http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/.
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
If you have coded specifically against IE 6 (working around issues, using non-standard features), it may be a little rough, but IE 8 is infinitely better in terms of stability and standards support.
Along with moving to IE 8, consider supporting other reasonably compliant browsers such as Firefox, Opera, Safari, or Chrome. IE 8 isn't a bad product, but other browsers will "keep you honest" and help you avoid hacks and also expose you to features not supported by IE 8.
It's also worth noting that pretty much any framework you may already be using (if it's still being maintained) will have equal or better support for IE 8. Same goes for any third party components which render HTML/script.
Lastly, I would also spend some time with IE 9 to understand the direction that Microsoft is going with the product. Most IE 8 apps will work fine with IE 9, but there are some subtle differences (mostly fixing/reinterpreting style and layout implementations in IE 8).
Edit: Here's an excellent, free tool I use for running different versions of IE side by side:
http://www.my-debugbar.com/wiki/IETester/HomePage
Here are several things off the top of my head that are non-standard IE extensions. These will probably still work in IE 8, but keep in mind that Microsoft is making a big push towards standards compliance, and they aren't guaranteed to work in the future. Also, other browsers don't support them at all.
Proprietary filter syntax
CSS expressions (I really wish this WAS a standard)
DHTML behaviors (.htc files)
VBScript
Data islands (http://www.w3schools.com/Xml/xml_dont.asp)
HTML Apps (http://msdn.microsoft.com/en-us/library/ms536496(VS.85).aspx)
Again, to my knowledge none of these things have been removed from IE 8 but they are all red flags for future maintainability.
I tried this sample here:
http://9elements.com/io/projects/html5/canvas/
After a few minutes, Firefox slows down so much I can't even popup any menu. When I closed the tab, Firefox comes back to normal again.
So is HTML 5 really a good choice now ?
it ran very well for me - both firefox and chrome, saying that - chrome was smooother, although you'd expect it with the weight of FF on your system.
But you bring up a good point. I've heard some people say Flash is dead and HTML5 is the new Flash - and I'm not sure how they consider the new HTML5 as a comparison.
I've also heard this is due to flash being closed and proprietary. But how does this differ than HTML5 in act?
Perhaps a little off topic but it is relative to the point, HTML5 is a wonderful magic and with it allows a greatly wanted upgrade to the now flagging HTML markup. It'll take some time before browsers catch up but thats only an issue now.
When was the last time HMTL got an upgrade? 97? 1998? so roughly 10 years since HTML caught up, so Browsers have 10 years toget to grips with HTML5
So ya. HTML5 is wonderful and I love and its good to get to know it, cus in 2 years - it'll be the standard.
Yes, now is the time for HTML5. Browser support is good and growing very quickly. The power of the average computer is such that creating web applications that implement the more resource intensive HTML5 features is perfectly reasonable.
Also, as a point of correctness, you can't use the smoothness of one company's HTML5 experiment as a way of validating whether HTML5 is ready for wider use. I could create a C program that would repeatedly print out "Hello World", and do it so badly that after 5 mins your entire system grinds to a halt. Does that mean C isn't ready yet?
You also have to remember that when new technologies first come in, there are no widely established "best practices" or cunning tricks to squeeze every last bit of performance out of the new features. Even if computers / browser weren't ready for HTML5 yet (which I think they are), it needs to be released, adopted, and it's use refined so that those best practice patterns can emerge.
What's your environment? I tried that page with Firefox 3.6.3 on a PowerBook G4/1.67GHz, 2G RAM (a nice laptop when I bought it six years ago, but hardly a powerhouse by today's standards) and it ran fine for several minutes with no performance issues whatsoever. It actually ran smoother than the typical youtube video does on this machine...
Is there any significant difference in behavior (HTML, CSS, Javascript, ...) with Internet Explorer 8 on different operating systems?
In other words, will a web page work the same way across IE8+XP, IE8+Vista and IE8+Win7, or are there some significant differences?
(I'm aware that installed plugins and fonts will have an impact, but that's a bit outside my scope at the moment; assuming compatibility mode X-UA-Compatible: IE=8 or edge)
Although The IEBlog contains very useful information, I haven't found this data there - so I'm assuming that there should not be any difference. However, search has turned up this (vague) question: "IE8 on XP: looks great! IE8 on Vista: looks terrible". Will have to check IE8+{XP,V,7} in VM in the meantime.
There are at least 6 versions of MSIE 8 and there are likely differences in layout due to bug fixes in the latter releases. A list of versions is available on Microsoft's support site:
http://support.microsoft.com/kb/969393
MSIE8 on Windows XP is version 8.00.6001.18702 and on Windows 7 is version 8.00.7600.16385.
There are some differences regarding css. When I used two divs, the first floated left and the second overflow:hidden; width:auto; IE8 on windows 7 rendered it correctly whereas IE8 on xp sp2 rendered the second div giving it incorrect width. Wierd!
I have had significant problems on IE8, working from a windows 7 machine I tested the site in IE8 using the standard mode the quirks mode and the IE7 standards mode and had no issues, however my client was using IE8 on an XP machine and told me that there were issues with the layout. I checked the site and it had displayed with significantly different styles.
So yes, there is a difference between IE8 on XP and IE8 on Windows 7.... though I have yet to find out how these differences are happening and how to solve them.
At least Wikipedia claims that Server Name Indication only works in Vista/Win7 versions of IE8. There might be other differences like this - after all, the system libraries IE uses might have differences between the different OS versions.
I also found an other rather stunning difference between IE8 on Vista(64) and IE8 on XP(sp3). The way the value attribute on the button tag is treated.
When you use <button value='10'>calculate 10%</button> the value submitted or extracted with javascript comes up with "calculate 10%" instead of 10 (the result on other major browsers) on older IE browsers (known issue) but also on IE8 on Vista. IE8 on XP on the other hand seems to comply to the standard behaviour the other browsers already embraced. Meaning it actually returns 10. Weird
There are bizarre behavioural differences in IE8 on XP also
for instance when tabbing between input controls in a table layout (think excel)
it wraps when the focus reaches the last visible control - instead of the last control in the row. Luckily I haven't found any serious problems - so customers can still work.
Absolutely different rendering is possible. My project has differents view in IE8+XP and IE8+Win7. In IE8+XP CSS rendering has significant differences with Windows 7.