(edit: I did a search before posting but didn't see anything addressing this particular problem, if posts exist please point them out, thanks)
I am developing an internal site using Bootstrap 3 and jQuery 1.11.2. Browser use will be almost exclusively IE with a primary target of IE 11 and the rest (IE 7/8/9 and/or 11 in compatibility mode) dragged forward over the next few months.
The site is essentially a reporting site that pulls data from an Oracle database and generates various HTML reports, usually in HTML table format.
With Bootstrap 3 I am getting severe performance problems. I can't pin down the source of the problems but I do know that the more table rows there are the worse performance is. For example, I just generated a report that has 327 rows, in a table with class="table table-striped table-condensed", and while the screen painted in a few seconds it also froze and would not allow me to scroll for over 20 seconds. But this behavior happens on another report that doesn't use those table classes.
I've run the IE 11 F12 profiler on this and other reports and found RegExp.exec is running upwards of 150,000 to 200,000 times (!!) on these screens. I've previously tried removing all scripts and adding them back in one at a time, and found that adding bootstrap.js is what caused the performance problem.
Has anyone else experienced this? If so what are some general ways I can avoid this? It is rendering the application virtually unusable in spots.
Bootstrap 3 makes developing the screens easy so I can focus on the app functionality, but this is becoming a serious problem. I can deal with a 5-10 second delay, and on one screen I actually implemented a "loading, please wait" modal as a hack and set it to immediately close -- which means it stays open until the browser is finished running the client-side scripts, stops hanging up, and then allows the modal to close. So it is a hacky workaround for that report. I'd hate to have to implement such a modal on virtually every screen, especially screens where I may have 20-30 seconds or more delay solely because of Bootstrap.
Thanks!
I figured out what the issue is (that was fast!) so I'm posting this in case anyone else runs into it. It turns out the culprit in fact was not Bootstrap (or at least not exclusively). I'm developing an MVC app in Visual Studio 2013 which adds a new "feature" that injects a javascript into your output called browserLink. This in turn uses SignalR to establish a communication channel between browsers.
In my case this was wreaking havoc with IE11's layout engine, resulting in the above issue. It appears that it was interfering with Bootstrap 3 somehow causing it to take far longer than necessary to render the page. In fact, it was causing IE 11 to hangup even without Bootstrap 3 turned on.
I had previously used Visual Studio 2012 so this was a surprise when 2013 started injecting this script.
Explanation of the problem and solution is available here: http://sylvester-lee.blogspot.com/2014/03/javascript-or-jquery-perform-very-slowly.html
As recommended there, I disabled browser link from the run/debug menu and it is super-fast now.
If you don't need browserLink (and since I'd never heard of it before, I don't and don't see any reason why I would need it) then my suggestion is to turn it off first and see if that resolves performance issues.
Interestingly I do find it odd that VS2013 ships with Bootstrap as the default layout framework for MVC, and yet injects a javascript that causes performance problems to at least sometimes masquerade as Bootstrap issues.
Related
So I have this vanilla JavaScript code that is running very slow when on certain older mobile devices (like iPhone 5) but runs flawless on newer devices (like iPhone 7). And I'm not talking about load speed, but the actual JavaScript functionality. I'm using a few addEventListener to handle basic stuff like showing and hiding divs, including an overlay div with transparent opacity. When I click the button which has the addEventListener linked to it, it takes sometimes up to two seconds to show and/or hide the divs. Sometimes it won't even do it and I'll have to click the button again. I won't share the entire JS file here, but I can assure it's pretty basic. What I want to know is if there's someway to track the execution speed of the JavaScript code... Like, I'm not sure if it's something in the actual JS code, or it's slow because the brownser is taking a long time to rendering it. Any help is welcome! =)
2 ways that are available:
The developer tools in Chrome, but Firefox is more useful for tracking performance:
Also, try performance.now(), never used it but heard about it. Maybe that will help.
EDIT: You could also check how it runs via breakpointing. You can breakpoint in Chrome and Firefox I believe.
We have a PHP web application that relies on javascript and jquery. We have a create/read/update/delete page where users can edit content. The content is added/edited/deleted using AJAX, so there's no full page reload.
After 1-2 hours of working on the same page, the page is loading very slow and the browser freezes.
How can I debug and fix this issue? I guess there's a javascript function that keeps running. Is there a way to find this kind of bugs? Is there a js debug tool that can help me in this case?
UPDATE
On each add, 44 empty divs are added to the body. May this create a serious performance penalty? I tested locally and with 10 000 empty divs the website was working ok, but with 100 000 it was very slow.
Debugging Javascript is very simple if you are using any modern browser such as Chrome.
You can press F12 on Chrome to bring up the inspector then you can goto the console which serves you all the javascript logs. To debug the specific program, you can add console.log()'s to your code and debug in that way.
Generally this problem could be that you're filling up the web page with DOM elements without clearing some of the older ones. If you have a list of several thousand DOM elements the browser can work slowly.
However without any code I can't really provide you with a better answer.
I know a small amount of web development but not enough to make it a career. I am working for an organization that is restricted to using internet explorer and one of the main sites that we use is constantly undergoing changes and always has bugs.
I'd like to see if I can try to see some of the code behind the bugs sometimes. When I use developer tools on the site, I can see that there are about 20 or more JavaScript files downloaded. Each file is a few hundred to a few thousand lines long. Is there any type of tool that I can use in Internet Explorer browser tools that can show me what JavaScript is being executed when actions happen on the webpage?
e.g.: I click a button and a form appears. I then click a button on that form and a snackbar appears, but it always appears in random places. Is there any way I can see the JavaScript that was executed to display the snackbar, rather than search line by line in the JavaScript?
Well the answer is yes, but for more complicated sites it will be a painful experience. Without concrete knowledge of the javascript framework/library used it will often be near impossible.
Having the sourcecode for the website would help greatly. When the website has minified javascript it's pretty much a must.
Sometimes an element like a button will have an onclick attribute which makes a function call. Other time some function is attached to an element from javascript by addressing it by it's id etc.
Searching through the scripts using the F12 tools in Internet Explorer is very limited.
You can of course download some of the javascript files so you can browse them in a text/code editor. They may improve you ability to search etc.
If you can find some entry point you could use breakpoints with the debugger and step through to see what happens and what gets called.
I need to troubleshoot a problem with javascript drag and drop and need some counsel as far as the proper way to do it. I have some experience working in the console and often using inspect in Chrome browser. I don't mind installing other browser extensions if they will help. The problem is a drag and drop function that works in some circumstances and not in others. This takes place on two separate pages of the same type in a Rails application that should have all the same javascript present. My plan of attack is the following but feel free to advise me otherwise:
Find the javascript code responsible for the drag and drop. How do I do that?
Debug the code. I think by setting breakpoints and stepping through it and comparing it on two separate pages, one where it's working and the other where it's not. Will I run into problems debugging, though, since drag and drop requires me to hold down the mouse button and traverse the tracking pad at the same time and the instant I stop I will no longer be running through the drag and drop code?
EDIT: I found Firebug's Profile tab in Firefox and using that I can see that in the page that works just mousing over a blank part of the page fires off 5 js functions, while nothing happens doing the same on the other page. So apparently the working page is listening for events that the non-working page is not, though the pages should be identical in that aspect as they are generated from the same code. Now the question is how can I find out why these listeners aren't there on the non-working page?
I have a few Facebook groups and pages and they all work fine with sharing whatever I want. But on my main page (last 24 hrs), whenever I try to share something, all that happens is the share box pops up for a millisecond (no text) and simply vanishes.
I’ve tried it in both Chrome and Firefox, and on different computers, cleared caches, the lot; same result. It’s a fully public page too, so it’s not a security issue, I would think.
At the moment, the only way I’m able to get a rough idea what’s going on, is using Chrome’s right click → inspect element, or Firefox’es similar function. I’m not sure what I am looking for though, and I presume there is better software to debug things like this.
What software or plugins do you need to see what the code is actually doing as it executes? And hopefully highlight hangup points or show me where the issue likely is.
If this is an issue with Facebook products and not an issue with platform, the best way to highlight this issue is to file a bug report using Facebook's Report form (https://www.facebook.com/help/326603310765065/). It is highly likely that this is a known issue that engineers are working on, but it doesn't hurt to report the bug.