React much slower on Firefox than Chrome? - performance

My React page seems to be considerably slower in Firefox than in any other browser. For example if I click on a button to open a filter in Chrome it will take less than a second for the filter to be displayed on the page. If I do the same action in Firefox it takes 2-3 seconds for the filter to be displayed on the page.
Has anyone else ran into this problem? If so what did you do to fix it?
I tried using the React.addons.Perf functions to see if this could point me to the issue. There does seem to be a large gap between the wasted time between FF and Chrome but it still seems like it shouldn't take seconds to display on FF.
Chrome Perf Results
FF Perf Results
Here are the versions of everything I am using:
Firefox ESR v45.7.0
Chrome v56.0.2924.87
React 15.4.0
Update
I ran the profiler in FF to see what was taking so long and it looks like FF is taking most of the time to calculate the layout. Not sure what this means so I'm going to do more research on this.

So the issue was not with react or javascript. I finally figured out that we just had too many deeply nested flex elements. This is what was taking firefox a long time to calculated the layout.

Related

Page scrolling is not smooth in firefox

When I use Firefox I have noticed when I'm using my mouse to scroll the page I'm on the page tends to stick or not move for a moment. I just tried IE and no problem there. I was even on the same page and Firefox still tends to hang up. Anyone can help me out?
Note that the website is mad with classic asp.
I found a similar post here but not any specific solution.
http://forums.mozillazine.org/viewtopic.php?f=7&t=324499
Okay, did some experimenting and found a setting in about:config that makes Smooth Scrolling both smooth and fast: look in about:config for mousewheel.min_line_scroll_amount. By default that has a value of 5. I changed that into 50 and now the Smooth Scrolling looks and feels like before.
But I need a way to do it programmatic. I mean if the website detect that the browser is FF then it will do the above manual things programmatic.
an alternate and more efficient solution is this:
How to programatically change the about:config dom.max_script_run_time value in Firefox?

No images are loading in Google Chrome - works fine in Firefox/IE

For some reason when I use Chrome to test out my website, no images load at all, not even tiny ones like loading icons or the simple "back to top of page" arrow icon at the bottom. The browser tab just hangs on the spinning circle loading state. If I refresh it like 10 times or something then a portion of the images might load. Interestingly my Nivo-Slider images never load... there is a large empty space at where the Nivo-Slider gallery should be at the top left of my page no matter how many times I refresh.
The console is completely clean of errors if you check.
Can anyone check for me why my website is not working in Chrome? It works perfectly in Firefox/IE. I admit some images might have large file sizes but it shouldn't cause Chrome to hang for like half an hour?
I'm using latest Chrome/IE/Firefox. Windows 7 64-bit.
My website: www.symphonyofpromise.com/inspiration/en
By the way my website is a completely fictional museum/gallery project, it's not the official site for some museum!
I cannot be 100% certain on this, but judging from the Network panel, you might be loading too many MP3 files at the same time, thus maxing out the number of simultaneous requests. Chrome might use a different prioritization algorithm.
I would recommend removing some of those MP3 files and deferring loading until after the initial load.
EDIT:
Nevermind that, it appears that the MP3s load fine, but other resources are definitely blocking it. A request should never be pending this long. Poke around further in the Network panel and you'll find the problem.

TinyMCE not capturing spacebar/whitespace keypress

I ran into a strange issue with tinyMCE that i was not able to replicate outside of my complete framework. The whole thing runs only in FireFox, as it supports only FF, therefore the issue is limited to FF.
I use AJAX calls to dynamically load one or multiple instances of tinyMCE.
However, when entering/editing text the spacebar will not work in the text editor. All other keys work, but the spacebar does not. Instead it triggers a page jump in the browser window itself.
This issue only occurs on Windows under FF 12.0
It all works perfectly fine on FF under OSX.
I was unable to find out why this would be happening. Perhaps somebody can give constructive input. Thank You!
This problem is a bug in TinyMCEs input handling and occurs in some cases when TinyMCE is being introduced to a document dynamically.

jQuery Marquee - Resets after four entries in Firefox

Good evening everyone.
I am puzzling over the oddity that the jQuery Marquee plugin, which was working fine, suddenly resets itself after showing only four of six entries here: http://site427.mysite4now.net/tazthedog/site1/ (click on the Upcoming Events tab in the lower-right hand corner).
This works correctly in IE and Chrome on a PC, but in Firefox on a Mac and PC it resets after four.
Any ideas why it resets?
Thanks in advance for the help.
Doesn't seem to be a problem for me in Chrome 5. What browser are you seeing this bug in?
Edit:
Ah, I got it in Firefox. Could be any number of things. Looks like it might be an edge detection thing. Or the height they pull from the page isn't the proper height needed for the animation. Chrome displays this properly, so you might want to check the "hitedge" and "height" variables to make sure they are properly assigned and defined. It could also be a timing thing or some sort of event delay with Firefox. Try upgrading to the latest version of jquery 1.4.2 to see if that resolves anything.

aspx page with gridview runs very fast in IE but 20% of the speed on Firefox

I have a simple aspx page with some search options which queries an SQLEXpress database, and it is displayed in a gridview.
For some reason, it runs lightning fast in IE but very slow in Firefox.
It has very little code, a gridview a couple of images and a couple of textboxes and a search button. It was done with Expression Web so no additional code added.
In production (not local) the speed is very noticiable when doing a search...
IE displays the results almost instantly...Firefox might take 3-5 seconds.
And everything else runs super fast as well in IE (update, delete etc).
Is there a reason for this ? Thanks
what kind of extensions do you have in firefox? something like fasterfox may be sending multiple page requests
Maybe the problem is with your Firefox Instance, maybe some creepy Add-Ons you installed or maybe you should disable Firebug which causes problems like this.

Resources