Website freezes after a few hours on same page - javascript

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.

Related

How to track JavaScript execution performance?

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.

Blank screen between two pages on IE 11

I am working on an enterprise application developed on MVC, JQuery and while moving between pages , we are regularly seeing a blank screen i.e. the HTML takes time to render however, the same is not seen on Chrome browser.
on heavy pages, the blank screen appears for 4-5 seconds and then the actual pages comes up. Again, the same behavior is not seen on chrome, even these heavy pages are loaded quickly without an intermittent display of blank screen
Please let me know if there is a setting in IE or in code that should be included to ensure quicker rendering of HTML on IE.
Thanks in Advance... !
Blow tips might help you
validate pages with W3C standards.
Check any closing tag is missing.
Optimize the content if its to heavy to load, in chrome go to network select "all" option and reload page check loading time.
add preloader image remove it on window onload() method.
Try to load site contents in the background for better performance in Internet Explorer.
You can follow steps below to enable that option in Internet Explorer.
(1) Go to Tools in Internet Explorer.
(2) Click on Internet Options.
(3) Select Advanced tab.
(4) Find an option called Load sites and content in the background to optimize performance and checked it.
Again try to make a test with your site in Internet Explorer 11.
if still issue persist than you may need to check your site and try to take some steps to make it lightweight to improve its performance in IE 11.

Using Internet Explorer, from the UI of a website is it possible to view the Javascript that is behind certain functionality

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.

Bootstrap 3 performance -- Screens freezing 5-30 seconds each

(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.

My HTML5 web app crashes and I have no clue how to debug

I have written a word game using HTML5 canvas tag and a little bit of audio. I developed the application on the chrome web browser on a linux system. Recently during the testing phase it was tried on safari 5.0.3 on Mac and the webpage froze. Not just the canvas element, but interactive element on the page froze. I have at some times experienced this problem on google chrome when I was developing but since the console did not throw any error before this happened, I did not give it much credence. Now as per requirements I am supposed to support both chrome and safari but this dismal performance on safari has left me shocked and I cannot see what error can be thrown which might lead to such a situation. Worse yet the CPU usage on using this application peaks to 70-80percent on my 2yr old macbook running ubuntu... I can only but pity the person who uses mac to operate this app, which undoubtedly is a heavier OS. Could someone help me out with a place I can start with to find out what exactly is causing this issue.
I have run profiles on this webapp on google chromes console and noticed that in the heap spanshot value increases steadily with the playing of the game, specifically (root) value which jumps up by 900 counts. Any help would be very appreciated!
Thanks
EDIT: I don't know if this helps, but I have noticed that even on refreshing the page after the app becomes unresponsive the page reloads and I am still not able to interact with the page elements but the tab scroll bar continues to work and I can see my application window completely. So to summaries the tab stops accepting any sort of user interaction inside the page.
Edit2: Nop. It doesn't work still... The app crashes on double click on the canvas element. The console is not throwing any errors either! =/ I have noticed this problem is isolated only to safari!
Edit3: Okay, so I performed some other tests today. I isolated the HTML5 widget and its HTML data only and ran it on safari locally to reproduce the error. Alas it works well! So I tried playing the game from my server without Facebook integration, and it works fine again! So The issue crops up only on safari on MAC OSX, while the widget is on Facebook canvas as a Facebook application. I am very hard-pressed to come up with a reduced test case scenario for this app... =/ It gets weirder, the game works well on safari for windows. Also after the tab freezes the other tabs continue to be responsive and well working. This tab too closes on clicking the close button and stuff, but if I load another page on this same tab after its frozen the page loads in the tab canvas, but I cannot interact with it. Not even google.com! So I am sure there is no bug with my game but its a safari bug... Will soon file a bug report, thanks for all the help people... :)
What you should do, in one sentence: Reproduce the problem with as little code as possible.
Start removing parts of your app until you find nothing that can be removed while still preserving the error. Start by throwing out external resources (css, images, etc) and leave just the html and javascript. Try removing the audio. Try removing as much gaming logic as possible. Try removing all user input code.
If this truly is a bug in Safari itself and not in your code, it should be possible to create a very small code example. Until you have that, saying "my web app doesn't work in safari", without any details or examples, will get you nowhere.

Categories

Resources