bit of a heisenbug here...
Have a PHP/codeigniter app here. Pretty sure the controller/model etc. are sound and without bugs. Gotta be a client-side problem...
Very simple code like this in a page:
<div id="stuff">I'm empty now!</div>
<script language="javascript">
$(document).ready(function(){
var stuffID = <?=$id?>;
$.post('/event/viewStuff/'+stuffID,
function(response) {
$('#stuff').html(response);
}
);
});
</script>
After loading the above, the "stuff" div now has a grid of stuff, plus links to page through them 10 at a time, which look like this:
Next Page
But every time I click these links, the page freezes for 4-5 seconds, doing what I don't know - no network activity, no nothing chrome debugger. Then the "stuff" div reloads with the results. Also - the "Please wait" message is not shown. Weird thing is - when I yank the "document.ready()" function, reload the page, and just click on a bare / hard-coded paging link like the one above, things fires away fast as expected.
Thanks so much for taking time to read.
NEW INFO:
xdebug profile shows nothing unusual - about a 1 second functional call back to the controller/view to return content as expected.
Chrome profiler shows this - a stupid, unexplained idle:
Any additional insight on the "b.event.remove()" jquery function that's taking 6+ seconds? That seems to be the issue?
Fixed it - but don't understand the root cause:
As described above - there was a massive delay every time I clicked the "Next Page" link.
Javascript profiling proved that jquery 1.9.1 was hanging for ~6 seconds on b.event.remove(). No idea why. I thought to myself: "Hmm... maybe I've triggered some weirdly inefficient tear-down function. That #stuff div is rather large (lots of sub-forms etc)."
So I tried clearing it out first by adding this command to the link click code:
$('#stuff').html('');
No dice. Then I tried:
$('#stuff').empty();
Same deal - took even longer.
On a lark I then tried the non-jquery method:
document.getElementById('stuff').innerHTML = '';
It worked! The rest of the click-code executed immediately - no more delay!
Question is why??????
Thanks all!
try to use 127.0.0.1 instead of localhost
in mysql PDO is something like this thats costs performance... so just test it.
Related
I'm developing a web-page, basically from scratch. I have a .html file, .css file, and .js file that includes only JQuery. I am only running this locally on my own machine, and for some reason, now only some of my Javascript loads. For instance, I have some hidden s that when hovered over, they are displayed with JQuery calls. These seem to work fine as they always have. I have a scrolling sidebar that has hidden sub-menu items, and this usually loads fine as well. I have a hidden div that displays a definition list on a button click, and when you hover over the , the should slideDown. If I wait about 10-15 minutes this will start working. But obviously that is a problem.
Also, in Chrome's 'Developer Tools' I don't see any errors under the sources tab. I checked the 'Pause on caught exceptions' box, (this is where my knowledge ceases) and in jquery.min.js:formatted, it pauses and highlights e.querySelectorAll("*,:x"), and when I resume, it does the same thing here, c.call(e, "[s!='']:x"),
Hoping someone can not only answer my question, but explain what's going on here in the caught exceptions. By the way, I did not write jquery.min.js:formatted.
Thanks in advance!
I copy/pasted my link to fontawesome and the JQuery library is up to date. Someone said something about the possibility of an infinite loop, but I'm not keen on what that is, I'll look into it.
Showed some code above. Not sure how helpful it is.
My expected output would obviously be for my JQuery to work, but it is not.
No error messages in the Console.
I actually figured it out, sorry I can't post working examples bc it's proprietary.
I was missing a closing } bracket...
But the way I figured this out was through opening up Chrome's 'Developer Tools' and switching into the 'Sources' tab.
- From here, underneath the stop sign with a pause symbol, it displayed exceptions in the code where something breaks.
This was much easier than scanning the code with my eyes. Sorry if this was a basic answer, it really helped me a lot.
This is a little hard for me to explain as i am not much of a coder. So here we go.
I have script that is mostly encoded with ion cube. Not i have an addon that is also encoded. The addon is loading in a tab number 5. The problem is that every time i click on a function in the tab that complete page reloads, and you have to navigate back to tab 5 to see the results.
So this is what i am thinking. As i can't edit code and the make of the code doesn't know when they are adding tab support to their little piece of code. i figured that there are two options
1 Force the following variable to the end of the url #tab5 so that when people click a function they will not have to navigate back to the tab. How do i do this coding wise, javascript or something else and what would code be or where would i look to code something like that. I have looked everywhere but nothing really applies to my situation
2 I think it would also work if each function which is called just reloads that section of the page in an ajax field so that not the full page is being reloaded.
Who can help find the right solution.
thanks
I created a web page for viewing images. This page has some other code that gets included that I did not write. The page loads 40 small images upon load. Then the user will scroll down and additional pages of 40 images can be loaded via ajax. Once I get to 15-20 pages, I notice the page begins to slow significantly. I check app counters and it can go up to 100% cpu and memory can go over 3GB. Then I will inevitably get the modal that JQuery is taking too long to execute, asking me if I want to stop executing the script. Now I realize that a page with up to 800 images is a big load, but the issue with JQuery suggests to me that some code may also be iterating over this larger and larger group of dom objects. It almost appears to get exponentially slower as I pass 15 pages or so. Once I get to 20 pages it becomes almost unusable.
First of all, is it even possible to run a page efficiently, even with minimal JS, when you have this many images? Secondly, is there a recommended way to "trace" JS and see what kinds of functions are getting executed to help determine what is the most likely culprit? This is most important to me - is there a good way to do in Firebug?
Thanks :)
EDIT - I found my answer. I had some older code which was being used to replace images that failed to load with a generic image. This code was using Jquery's .each operator and thus was iterating over the entire page and each new ajax addition every time the page loaded. I am going to set a class for the images that need to be checked in CSS so that the ajax-loaded images are unaffected.
Firebug, and all the other debugging tools let you profile your functions. You can see how long they take to run and how many times they have been called.
http://getfirebug.com/javascript
See: Profile JavaScript performance
Another useful tool to look into is the profile() function
console.log('Starting Profile');
console.profile();
SuspectFunction();
console.profileEnd();
Though the console window in the debugger you can see the profile results.
The best tool I have used is https://developers.google.com/web-toolkit/speedtracer/ for Chrome
To answer your first question, 15 pages of images should not be a problem for a computer to handle. Google loads up to 46 pages of images without lagging at all. Although it does stop you from loading more after that.
The answer your second question, there are many ways to track JS code. Since you are doing a performance related debugged, I'd go with timestamped console log:
console.log(" message " + new Date());
I'd put one in the beginning and end of function you are interested in measuring the performance of, and read through the log to see how long it takes to execute each of those functions. You would compare the timestamp to see what excess code is executing and how long it took for the code to execute.
Finally, in Firebug, go to the console tab, and click on Pofile before you start you start scrolling down the page. Then scroll to your 15th page, and then click Profile again. It breaks down function called and amount of time it took.
I prefer to use the timer function in Firebug or Chrome, it can be called like this:
console.time('someFunction timer');
function someFunction(){ ... }
console.timeEnd('someFunction timer');
This isn't as robust as the profiler functions, but it should give you an idea of how long functions are taking.
Also if you are running at 100% CPU and 3GB of memory, you almost certainly have a memory leak. You may want to consider removing some the initial images, when more pages are loaded in. For example, after 5 pages being shown, you remove the first page when the user views the 6th page.
I was able to fix the problem by going over my code again. I was loading new images via ajax but I had an older line of code that was checking all images, ie $('img') to replace any images that failed to load with a generic image. This means that as I continually load new images, this selector has to iterate over the entire growing dom again and again. I altered that code and now the page is flying! Thanks everyone for the help.
Ok i've developed a nice tinymce-solution, where i create and destroy all the tinymce-instances programmatically through js - so, i know it is maybe not the daily-usage of a tinymce implementation - but basically it works like a charm.
Now, before i will give you specific example code - i will explain my strange issue: A friend of me is an extreme power-user of the online-tool i made and he is creating/destroying hundrets of tinymce-instances during the day...
Sometimes, after hours of work, he has the behavior, that tinymce won't show up when he hit "edit"-button. I never made it, to reproduce that on my own - but one day, in a teamviewer-session, i was able to have a look into his screen and page (with firebug), when the error already happened.
So, badly i was not able to make a full debugging through the javascript-code (because when you hit one times f5 in this situation, the error disappears and it will take some other hours to get it again) -> i realized, that, when the error was happened -> everything in the tinyMCE-object itself seems ok -> also everything in the DOM-rendering seems ok -> BUT, from some strange css-import-file, there was suddenly a definition like this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: hidden;
}
This is causing that a main-panel of tinymce won't show and nothing of tinymce is visible anymore.. killing and recreating of the instance won't fix the bug in this moment, you must press f5 and after a reload, you even can't find this css-definition again (or, at least, i was not able over teamviewer and his shitty, small laptop)
So, the only thing that came in mind was an ugly hack in my own css, telling this:
html.uvw-dialog-open object, html.uvw-dialog-open iframe, html.uvw-dialog-open embed {
visibility: visible !important;
}
And, since then... it was quite for weeks -> but today, my friend calls me again, telling me, that he can't see tinymce, AGAIN.. i was almost in tears, you can imagine :D
Ok.. after writing and re-reading all these lines -> i realize that my fix won't work... both are the same definitions and if they appear on the same level (file, not inline).. probably last-match-wins i guess, what would be the newly, lazy loaded tinymce-file.. so it will definitly be better, to make an inline visibility:visible; over the init_instance_callback of tinymce...
But, in my desperation, i thought i will write everything down here on stackoverflow -> maybe someone knows the real cause of this issue and.. you guys are the most awesome devs out there i know :D
Jebbie,
Thoughts more than a definitive answer ...
Sounds like a memory leak issue due to lots of javascript/DOM activity in a long-lifed page.
You've probably done nothing wrong and you're unlikely to track down the actual cause, however certain measures are available to you :
Try making your tinymce instances reusable rather that destroying and creating new every time.
Periodically have the page request a re-serve - it may be a challenge to reproduce the entire document state - DOM and javascript environment - in the re-served page.
Lots of work and no guarantees I'm afriad.
I wrote an infinite loop in my javascript code. Using WebKit's Web Inspector, how do I terminate execution? I have to quit Safari and reopen it again (after changing my code of course).
EDIT: To be more specific, I'm looking for a way to enter the looping executing process/thread to see why the loop isn't terminating. An analogy would be in GDB where I could do a ^C and break into the process. I'm not looking for a way to kill my web browser. I'm pretty good at that already.
I'm not familiar with WebKit, but this sounds like a common problem that I usually debug as follows: Declare an integer outside of the scope of the loop, and increment it for each iteration, then throw an exception when the iteration count exceeds the maximum expected possible amount of iterations. So, in pseudo-code, something like the following could be used to debug this problem:
var iterations = 0;
var greatestPossibleNumberOfValidIterations = 500;
while(shouldLoopBooleanTest){
iterations++;
if(iterations>greatestPossibleNumberOfValidIterations){
//do debugging/error handling
}
}
I don't expect that this is specific enough to warrant an accepted answer, but I hope it helps you solve your problem.
Have you tried top to look at the process tree? Find the PID of the program and then type kill -9 [PID].
Have you tried using F11? This is the key for step into: https://trac.webkit.org/wiki/WebInspector
In using Firefox (I know the question doesn't specify Firefox, but I'm just throwing this in, in case it helps somebody), Safari, and Chrome, I found that there isn't a consistent way to break into an infinite loop, but there are ways to setup execution to break into a loop if you need to. See my test code below.
Firefox
Utter trash. It just stood there spinning it's rainbow. I had to kill it.
Safari
The nice thing about Safari is that it will eventually throw up a dialog asking if you want to stop. You should say yes. Then hit command-option i to bring up the Web Inspector. The source should pop-up saying that the Javascript exceeded the timeout. Hit the pause button in the right hand side towards the top, then refresh. The code will reload, now step through: I like using command-; because it steps through every call. If you have complex code you might never get to the end. Don't hit continue though (command-/) or you'll be back at square one.
Chrome
The most useful of the three. If you naively load the code, it will keep going forever. But, before loading the page, open the Web Inspector and select 'Load resources all the time'. Then reload the page. While the page is trying to load, you can click over to scripts and pause the Javascript while it is running. This is what I was looking for.
Code
<html>
<head></head>
<body onload="TEST.forever.loop()">
Nothing
</body>
<script type="text/javascript">
TEST = {};
TEST.forever = {
loop : function() {
var i = 0;
while (i >= 0) {
i++;
}
}
};
</script>
</html>