Develop Reference

How to fix Firefox unresponsive script warning on server side?

Situation:
I have a website that is written in Java (1500 LOC) and compiled to javascript with GWT (Google Web Tools). I started observing "Warning: Unresponsive script" on my website few weeks ago. I got this pop up warning 22 times out of 25 tries.
I can fix this by clearing Firefox browser cache. And after that I saw warning message 1 time / 25 tries.
I am trying to figure out what's the root cause of this. It seems to be a client side issue. My customers are probably not seeing this since they don't load that website as often as I do. However, I feel like they might run into this issue in this future. I wonder if there are something I can do on the server side to eliminate/reduce the occurrence of unresponsive script warning.
Questions:
I compared Firefox "about:cache" before and after I load my website. The only difference is that a 43 byte cache gets created in memory every time I load the website. Is this something normal?
I thought cache is to help users load websites faster, what could be happening in my case? (I guess my website generates new cache every time on load and old cache are not used?)
Since clearing the cache can fix this issue, how can I automatically clear cache when user closes my website?
Could there be an issue in GWT compiled javascript? Could network speed also be a factor?
What else do I need to check and what are the potential solutions to resolve this issue?

Install FireBug to Firefox and see what scripts are timing out. Given this is GWT, there is a good chance something is getting stuck on the server side. If so:
Run you server under a profiler and see where are the host spots or bottlenecks. I prefer JProfiler, been using it for 10+ years.

Cordova hybrid app- HTTP requests are very slow

I am building a hybrid app, with AngularJS, Cordova, Restangular ond client side and Python with wsgiref.simple_server on server side. I am not doing anything special, this is very simply requests like this:
Restangular.one('/devices').get().then(function (response) {
viewModel.devices = Restangular.stripRestangular(response.devices);
});
I set baseUrl for Restangular:
.config(function(RestangularProvider){
RestangularProvider.setBaseUrl('http://192.168.54.102:8000/');
})
And when I use it on local computer with Chrome browser, everything is fast, works normal. But when I use it on Android on Phonegap developer app on device or install app on device with Android, it works crazy slow. It looks like it is send to server with big delay, cause it takes some time as I see debug server log on server side. It occurs also when python application with server is not in debug mode, for example when I start it normally after install on local computer. As I see some people has this problem, does anybody found a solution or a reason, which causes very slow HTTP requests in hybrid application? Thank you in advance for every answer.

Since you are a hybrid developer, I am sure you are familiar with the Chrome DevTools. For me on a Mac, hit cmd + option + i, or go to View -> Developer -> Developer Tools.
The really great thing about Chrome in recent history is it now works with Android WebViews too. Hybrid developers haven't always had this convenience, and had to debug essentially handcuffed using tools like Weinre.
Now we can use the DevTools directly in the Chrome browser while your Android device is connected by ADB from a new tab calling chrome://inspect
Here is some more detailed information on how to do this if you get stuck.
From here open up the network panel and see how long your requests are taking. If they are showing a significantly longer amount of time to load here, the issue has nothing to with Angular, Cordova, Restangular or probably even Hybrid architecture at all. I would check your network and performance elsewhere on the device.
If this is definitely not the issue, I would use the Timeline tab in the DevTools to see what is taking so long between your browser receiving the information and your device displaying it. If there is any significantly longer process taking place in between, you will see it here.

What can cause Chrome tabs to stop responding without crashing or using CPU?

Often when playing CodeCombat multiplayer, or simulating matches, especially with multiple tabs going at a time, I'll see my tabs stop responding. CPU usage goes to about 1%, but all animations on the page stop, JavaScript stops responding, and the dev tools interface sort of responds but can't actually do anything. I have to end the tab's process from the Chrome task manager.
This happens in Chrome Beta (34) through Canary (35), but not in stable (33).
I'm pretty sure it's not some sort of weird localStorage deadlock, and we're not using any synchronous networking, and it happens in incognito mode without any extensions, so what could it be?
Update: It has since stopped happening, so presumably Chrome fixed some bug.

why are chrome and firefox are 10x slower than curl at downloading a super small javascript file?

I work on a web application in which the dev environment loads about 500 js files from a local web server (I've tried both IIS and apache). These files are optimized in prod, but for development that's what we have. I know there are other strategic options that might prevent the need to load so many js files, but that's currently out of my hands. What I'd like to do is speed up these requests. Am I crazy to think that each of these requests could only take 10ms, so that the whole request could take 5s (10ms * 500 requests)? Currently both chrome and firefox are reporting that these requests take about 100ms (even for 304s).
I took this down to the smallest common denominator and created a 1 line js file. I issue a request to this file through firefox and chrome and each report that it takes >100ms. What's odd, though, is that when I make the same request from curl, it only takes 5ms-ish:
$ curl 'http://10.222.139.56:81/js/ben.js' -o /dev/null -w '%{time_total}'
0.005
What gives? I would think the curl number is correct? Why are chrome and firefox taking longer?

My guess would be that for each js file loaded by Firefox and Chrome, the reported time includes the browsers parsing, caching, etc, of the file. Even a one-liner file is going to take a small amount of work to process.
On the other hand, curl just pulls down the content and saves to disk or stdout. That operation is much faster.

The answer for me was simple: cookies.
On a single json file served as "Content-Type:application/json", Chrome's network tab consistently showed ~1400ms, while curl was ~300ms (even with a browser User-Agent set). The browser should have had little need to parse this as I disabled my pretty-printing plugins, and had "Disable cache" checked in Chrome's Dev Tools.
Finally I tried it in an incognito window and saw the same time results as Curl. I then went back to the original window and deleted cookies, nothing else, and got the same speed increase. I finally realized that my web application uses a specific authentication cookie in a request to another service which validates it.

Monitoring Client Side Performance for Sites

I want to monitor the client side performance for a page, and I can get the load time of the page by starting a timer in the beginning of the section and also by getting the time of when the onload event happens. However this does not account for the time it takes to request the page from the server. So after searching i've found out that I should use the web timing API. My problem is that while "window.performance" works for chrome, nothing works for firefox including "window.mozPerformance". So does anyone know how I can find the time of when my browser initiates the get request for a page, and finishes receiving the last byte of the page?

You can use something like:
var timing = performance.timing;
var loadtime = timing.loadEventEnd – timing.navigationStart;
This will work for you on:
Chrome 6+, IE9+, Firefox 7+, Android 4+
And you can read more in this old (but good) post:
http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html
Btw, I would use Chrome DevTools (or firebug on Firefox) to measure my code changes in the 'audit' tab. You can see what is the cost for every change in your JS code and measure it without any adding code. Moreover, if you want to see what are the performance of your site (or web app) over time, you have now an option to check the metrics in google analytics.