We did an application using rails(2.3.4), ruby(1.8.2), MySQL, JavaScript, jQuery. This is handling minimum 6000 records. We showing those records detail in table. In the beginning Mozilla taking 2m to load the whole page. We did the cache, eager loading, indexes. Now Mozilla taking 25s to load the whole page. But IE-7 taking 1m30s to load the page.
We don't know why IE-7 taking too much of time.
Any one can help us to detect the running time in IE-7 and tell your guidelines to improve performance in IE-7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
Use partial loading. Don't try to load the 6000 records at once, load them in smaller segments, when needed. Even 5 second loading is too long, not to mention the 25 seconds or 1m 30s.
Oh and yeah, IE 7's JS engine just sucks.
From Table Rendering - IE Blog:
When Internet Explorer encounters a table it measures all the content
of the table before rendering so that it knows what the widths of the
columns are to render the content correctly. On the other hand Firefox
uses a different algorithm in that it renders the table contents
progressively before it has all been passed.
You can improve performance by setting the CSS rule table-layout: fixed. The renderer will then calculate the layout based on the first row of the table.
IE7 is slow, there's no real way of getting around that basic fact.
I'm going to answer your second question (about debugging tools for IE7) because I don't think I can give any useful advice on your main point about actually speeding up IE7.
Any add-on is available in IE7 to see the AJAX request time taken as like Firebug add on.
The first thing to try is IE8 or IE9. These browsers have a Developer Tools window (accessible via F12, just like Firebug). It isn't as good as Firebug, but it does do quite a bit, and it is a useful debugging tool. It also has a feature which allows you to switch the browser into IE7-compatibility mode. The idea is that you can test IE7 from the relative comforts of IE8 or IE9.
The down side is that it isn't actually IE7. It's just a pretend ID7, and not a particularly good one at that. It may or may not replicate the speed issues you're having with IE7, and it certainly has known bugs and quirks of its own which don't appear either in a real IE7 or in IE8 in normal mode.
But all that said, it might be good enough for you to run some tests and get some answers.
A second suggestion might be to try Firebug Lite. This is a cut-down version of Firebug which runs as a bookmarklet in any browser (but generally IE). It doesn't have all the features of the full version of Firebug, because there's only so much you can do without writing a browser plug-in, but it does do a surprising amount. If nothing else, it does give you the console functions, which can be a life saver for debugging.
I hope that helps.
Related
Hello StackOverflow 😀​
I'm having a strange problem with a react app when switching tabs in chrome (the app is already loaded). example : (Link to video if the gif is too low quality)
You can see there is a small white flash before it shows the site itself (something like 0.2 sec), the thing is my app is a little heavier I guess and it's sometimes 0.5-0.75 sec of white screen flash like that which is annoying customers.
Some of them describe it: 'the web page being blank for a 0.5 sec every time we go to another tab in the web browser and we get back to your app.'
I have seen some sites that have the same issue, for example, instacart.com, some of them have 0.1-sec white flash, and some of them have longer flash.
My question is how can I improve this? and what is related to this?
Most of the questions here are related to some stuff that is in react-native, but my app is react web.
I have read about FOUC but I'm not really sure if it's the issue.
btw I don't think it's related to the power of the computer (I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram).
Thanks for help.
Also, this problem seems to only exist in chrome, in firefox it doesn't have any white flash. I guess it's related to this (see the first answer). How can I improve it?
The reason may vary. There are several ways to assess and solve performance issue(or flickering issue) with your web app.
Here's what comes to my mind:
Environment check before troubleshooting an web app
I'm getting this on a ryzen9 PC and M1 pro mac with 32 GB ram
The machine spec only holds some portion of performance assessment. It may or may not matter. because,
OS can slow down the performance due to its update issue. what OS are you using?
Web browser can cause the slowness as well. what internet browser are you using? and what version of browser is it? are you using any specific plugin or extension that may cause trouble?
So when assessing or QAing an web app, it is necessary to describe every little detail. When I was developing a Vue web app back in 2019 in a startup, there actually have been some real performance issues in production deployed environment that are bound to specific version of browser; not just that, one time I had a chrome extension causing a crash for my web app as well. Always make the reproducible environment clear unless it is exact which code section is causing the problem.
Once made the details clear, try to reproduce the problem. Does it reproduce in different browser, different machine, different OS? if not, environment is clearly not an issue.
Finding Problem with (any) Web App
If these little details are not causing the problem, it's time to get metrics inside browser.
I had no choice but to skip the environment assessment because the setting isn't clear in the question. But please do not skip that part; it is crucial. The problem might be fixable in current environment but it can remain in different environment.
Somebody already mentioned React devtool profiling in comment but I also recommend these tools:
Chrome Performance Tab
Chrome Lighthouse(previously Chrome Audit Tab)
Please try run a performance check with these tools first.
I've run a performance recording from Chrome Performance Tab and limited the scope to the flashing moment - and a slight moment afterwards.
(screenshots inside red lines are indicating white screen flashing moment)
Most Probable Reasons at the Moment
according to Chrome Performance Tab + Lighthouse audit, these problems are existing in that flashing moment.
treeshaking/code splitting is not used properly: whopping 40000 lines of code in a one file!(content.js) it should served in smaller chunks, so that the codes not important at first rendering must be loaded only when needed. check your code splitting setting first.
lighthouse also highlighted unused codes in a big chunk of single file are the biggest reason for performance dragging in your site before FCP(First Contentful Paint).
too many third party scripts: every third party code is casually lying around in the page with <script /> tag, without any performance tweaks. there are far too many third party libs running. they are not blocking the main thread as they are in async mode, but loading too many of them in parallel is definitely slowing the app. try load third party libs only when needed by inserting them dynamically.
this is most probable reason to my eyes but we need to dive deeper before drawing any conclusions.
Is it possible that this is related to Hardware Acceleration? I usually turn this off in my browsers, and I do not experience what you're explaining on the site you provided (I'm running Chrome on a Macbook Pro 2020 13" intel).
Perhaps turning Hardware Acceleration off will fix the issue?
You said that the issue only appears in Chrome, do you have any extensions that could affect the page when switching tabs? I'm thinking any extensions that reads or edits the page in any form or way.
I guess you have already tried this, but if not: could re-installing chrome and testing the sites with a fresh install (no extensions, no profile logged in...) work?
So in the end the solution was pretty crazy, we had a picture with the logo of our company in the navbar (which is appearing on each page of the app).
The problem with the picture was - whopping 35,000 px width and 5,000 px height.
You couldn't see it because it was inside a div with a fixed height and width.
The way I found that - opened dev tools, and started to delete the divs.
for example, we have:
<div id="root">
<div>1</div>
<div>2</div>
</div>
So I delete div 1, then check if the problem is still there. if the problem is still there I go delete div 2. And continue like that till you find something crazy like a 32,000px picture.
Very 'old school' but it is what it is (:
I'm trying to debug an intermittent, possibly timing-related drawing problem with JavaScript in Internet Explorer (IE9 including in IE8 mode).
Using the Developer Tools, I'm stepping through the lines that create, style, and display elements, but the actual browser window remains unchanged (and shows the Windows "Not Responding" title text much of the time), so I can't see what happens when.
With Firefox and Firebug, I can see the main window update at each step. But regrettably this problem doesn't occur in FF, so I can't debug there.
I've web-searched and looked at the MS articles on using the Developer Tools, but I can't find any discussion about single-stepping through JavaScript and seeing the results of each step. Is something wrong on my system, or is this just not possible?
32-bit IE9 on 64-bit Windows 7, in case that's relevant.
If you are able to step through the javascript code but the browser is not refreshing and crashing your best bet to debug it might be to isolate the problem. Say you are doing five things on a certain piece of code. Reduce that to just one thing and gradually pile up different process on top.
Not sure if this is the answer you are looking, but I have run into similar problem with IE 9 before so if you provide some code snippet which can be replicated I could help you further.
Update
If you are running into intermittent issues with IE make sure to add a meta tag so that IE doesn't load quirks mode after encountering something on your code. Add the following tag. More information here
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?
LINK TO THE PAGE NO LONGER ACTIVE, THANKS FOR VISITING, Rene
Hi,
I have a page here and I can't understand why is IE8 rendering this page so slowly.
Originally I thought it was the scrolling text at the top but it's not as I commented it out with no progress. So then I profiled with developer tools for IE8 and it shows a lot of anonymous functions running which I suspect come from jquery (which is not loaded by me directly) but the developer tools cannot show me the source code for those functions. So I can't pin down the problem on what are those phantom functions running from or why as I have no experience with jquery. I noticed that those functions do not run in FF when I profiled it with FireBug so maybe something is running for IE but not for FF ? I am a bit lost.
Any help/suggestions is greatly appreciated!
Thanks so much,
Rene
I was able to see the process jumping between 79MB and 65MB off and on. It may be an issue of memory not being freed up or perhaps an inefficient background operation that is hanging everything up.
I would go with meder5's advice. I would comment any and all unnecessary code and start with the bare minimum and track performance till you find the bottleneck as you add pieces back in.
Hi I also tested in Chrome 8. Frankly, the page is neither fast in IE nor FF nor Chrome. But its relatively faster in FF and Chrome much than IE. I suppose it has something to do with the different mechanisms of FF/Chrome and IE use handling contents.
By the way, I appreciate that you guys can do very nice animation with javascript&jquery,
In IE Java-script load slower than Firefox, Safari and Chrome?
Is there a way to load JavaScript quickly in IE also?
General best practice is to keep JavaScript at bottom of the page, does it make Js rendering more slow in IE?
Edit:
When we apply any jquery plugin to website to make any usable or interactivity then in IE effect shows slower than Other browsers.
We can easily identify the effect of condition on the page, before and after loading JS, which looks odd.
The IE8 or below JavaScript engine sucks, it's better in IE8, but comparatively, it's still way behind...there's not a ton you can do about this if you're doing any heavy operations.
JavaScript is loaded and parsed each page, so the slower the engine, the slower the load...and that's the case with IE. Keeping JavaScript at the bottom of the <body> is one option, to prevent blocking, but likely your issue is not the loading (as this would be from cache, if your headers are set correctly), but the execution.
If it's any consolation, it seems IE9 is a major step forward, over IE8 at least.
It's a bit more general, but if you're looking to speed up your pages there are a few things to consider, Google has a good list for this and Yahoo does too.
Not IE specific, but BetterExplained has some good points on how to increase load times or in some cases, Web page response times.
In terms of today's browsers, IE8's JS engine is slow, but IE9's will perform much better.
It's execution time that's slowing you down. Unfortunately, there's not a whole lot you can do about it.
I believe your talking about the unsightly FOUC (flash of un-styled content).
Paul Irish has some tips to avoid this which is more prevalent in ie.
You really shouldn't see that much of a difference for most interactive uses of JavaScript, which is the kind you find on most websites. However, if you have a lot of loops or do a lot of computation in your script, then you'll see a huge difference between various JS engines. In my experience, Chrome > Firefox > IE in terms of JS engine speed.