We have an application which displays a (complex) table of (~500) rows which can be edited via a modal dialog (PrimeFaces). Displaying the table (or doing any ajaxy things like changing some status on save buttons) takes much more time in IE9+ (5-6s) than in Chrome or Firefox (< 1s).
In the Internet Explorer's profiler, I see that most of the time is taken by the JQuery.attr() method which is called by PrimeFaces' updateFormStateInput().
I really don't know how to go deeper in identifying the cause of this problem or if this bad performance is considered normal for IE.
Switching to Chrome/Firefox is not an option as our users have other applications that only work with IE (sharepoint).
So, is there anything I can do to solve/identify the problem? (Except removing each component one by one and see if this improves performances.)
Related
I have an html page which shows many rows of data which the user needs to be able to edit. So, a lot of input fields.
In every browser except for MacOS Safari there is no problem at all. In Safari however there are problems: clicking (focussing) on an input takes sometimes a few seconds. Typing....has some serious lag.
Having read a lot of topics i still do not have a working solution.
The one that somewhat works is wrapping EVERY individual input inside tags. But, while typing then works without any lag, focussing still takes several seconds.
This solution, mentioned by Roman:
Why does Safari Mobile have trouble handling many input fields on iOS 8
I do not use any extensions or whatever, just plain MacOS Safari.
Does someone have any other solution that finally solves this strange behavior? I'm tearing my hair out here.
This has been happening on Firefox for Android (57.0.1, Android 8.1.0, Security patch level: December 5,2017 -- but I cannot be totally sure that it has happened since the most update, since I have automatic updates on), and just happened on Firefox ESR (52.5.2, 32-bit, updates disabled by sysadmin, on Windows 10 Enterprise, version 1703):
While I am browsing, the page I am on will, from time to time, become a solid mass of uniform color. Using "Inspect Element" and copy-and-pasting both make it clear that the contents of the page are still there; they've just become the same color as the background. Whether the color in question is a background color or a text color seems to be consistent for a given page, but not necessarily between pages.
When this happens, it applies to every other page I open in Firefox, including an "HTML" file that consists of the single character "A" (black-on-black, unlike a completely blank "html" file, which is white). The only solution is to close Firefox and reopen it, at which point everything works fine until the next time that this happens.
On the Windows machine, all settings that turn up when searching about:config for "color" are default other than settings for a particular printer that's hooked up to it.
Incidentally, while I was typing this up the first time, I tried to Inspect Element on a "just the letter A" "html" file, since things were working fine, and Firefox started screwing up the background and text colors of parts of pages, which had not happened previously. (Hence my initially posting a half-finished version of this question, in order to avoid losing it entirely.)
I want to know why this is happening, and how to prevent it from happening in the future and/or fix it once it has happened, other than by quitting Firefox and losing anything I have in progress.
ETA: This has now happened twice on this Youtube page: https://www.youtube.com/watch?v=BSFfhS4pKHg&index=19&list=PL9e3UCcU00TQmv44PITdAgihDTDehgMki and at least once in GMail (don't remember what page, and naturally, it wouldn't display for someone not logged into my account). So there may be a common Google connection; I don't know.
I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?
You can view and play around with the table here (use guest password "braese").
A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this):
I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.
Wow my chrome almost crashed :)
It is your styles
You are causing layer creation every time you apply translate transform
Check out the Layers menu in Chrome Dev tools;
Test if it runs better - only table :)
Also order your styles and scripts! - first styles after that scripts
Cheers!
This is a minor annoyance but I can't seem to find any solution.
I don't really like the console "drawer" (the console you see when you hit "Esc") and prefer to use the tab/page as I don't have a lot of space to devote to the developer tools. When you load a page with errors or warnings there's little icons on the far right that indicate counts of each, but when you click on that it always opens the "drawer" version of the console instead of the tab/page version. Is there any way to change this? (I vaguely recall that it used to always open the tab/page version before)
No, there is no way to customize such behavior. One thing you could do to slightly speed up things is to re-arrange panels in DevTools so that it is easier for you to get into "Console".
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.