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.
Related
How can we detect through PHP or maybe in node.js or other languages if a web page crashed (without the browser EXITing) so that when a user press the "reload" button on the "Aw Snap" page in chrome certain specific content inside the page can be shown in this particular case (crash case).
In a crash without EXIT, a browser shows per example in Google Chrome the famous "Aw, Snap!" page.
I don't want to know how to capture if the user refreshed the page or the page reloaded which can be known quite easily with different methods [one example see this PHP this code which can detect if users refreshed the page on major desktop/mobile browsers except IE unfortunately this code does not capture a crash event and the fact that user might request again the same page after a crash.
I tried using "register_shutdown_function", and some other maneuvers using connection PHP functions like "connection_aborted" etc... but with no success. I figure out a sloppy way through the use of session variables but probably there are better clever manoeuvres.
Any help or suggestion would be greatly appreciated. Any solution in nodejs will be also welcomed.
web brower crash because too many process from your browser to PC of Client.
this crash can't detected by php because PHP server scripting. and you have question.., why not use JS for detect crash of browser?, because JS created just for controller website,. if you force to checked that use ajax, node, etc you can't do that, why? because the problem comes suddenly
and detected crash browser from php is impossible.
I'm working on an angular application and came across the bug that in Firefox, if we refresh quickly enough (often takes several times) the page will eventually fail to load and, in my case, displays an HTTP 0 error code, which if I'm not mistaken means that an AJAX call was canceled before receiving the response from the server.
I have not seen this behavior in Chrome or IE, but I don't know if that's because the JS engines in those browsers are helping me out, or if it's a browser bug itself (in Chrome at least it appears that the refresh button for a page is disabled while requests are being made on page load).
Is there a Firefox bug, an angular bug, or a bug in my application? If it's the later, how can I avoid this?
Recent versions of Chrome on Android have added the ability to create full screen Webapps using the 'mobile-web-app-capable' meta tag in much the same way that you can on iOS.
On iOS when you quit a web app and open it again it will always be refreshed; on Chrome it will be up to the operating system resources; and if you re-open the same web app it will often restore the previous app context without reloading the page.
This is causing problems for my Weather Web App as on re-open it often displays old forecast data which can be days out of date.
Is there a way to detect the page re-open so that I can refresh/reload the content?
It seems that the trick is to use timers. Usually, when a webapp is in the background (not a tab background) it's frozen, so it's not executing code. Therefore, if you have a javascript timer that executes every X seconds and on one execution you see that the time passed between executions is far greater then it means that you need to update your data.
I'm having a really weird bug in my HTML5 script. I wrote a sharepoint app completely in OData which uses a few HTML 5 webworker to do the number crunching in the background. This works perfect on all major browsers (FF, IE10+ Chrome, ...). However, when I perform a refresh or browse to the page again. The script still works as intended on FF and Chrome, but hangs on IE.
In my network view I see a request for the Worker.js file, but with a 304 NOT MODIFIED response. IE then just hangs there on that request with a status of (Pending). This issue only gets resolved when I clear my browser cache.
I correctly close all my threads with self.close().
Any idea what the issue could be? I'm not sure if it's a code issue, a browser issue or a server side issue but I can replicate the bug on Sharepoint online as well as on a local server. The whole project is JS only, so I can't modify headers as a workaround either.
UPDATE: I ran exactly the same code outside of a sharepoint environment, and it worked perfectly. Issue is Sharepoint related.
using a time based querystring parameter prevents caching showing http status 200 on each refresh. tested on latest chrome, ie, ff;
var opus = new Worker("worker.js?q=" + new Date().getTime().toString() );
to be honest this a long shot as i do not have sharepoint right now
SharePoint sends the header:
Content-Disposition: attachment; filename="xyz.js"
X-Download-Options: noopen
and the IE Web Worker Implantation then does not run this web worker. (Tested in IE11) In the IE Network Monitor the request still on pending, even the Response text is visible.
I know so fare two workarounds:
Place the web worker js in the layouts folder (needs a Farm Solution, with the downside of this)
Set the Browser File Handling for the Web application to Permissive (maybe your security is not amused)
The problem is intermittent, but video.js is failing to load and play mp4's that have been cached in Chrome for OS X. Here's what I know so far:
Disable cache (while DevTools is open) allows the video to play 100% of the time on reload
If caching is not disabled, and cache is manually cleared the problem still happens
Closing and restarting Chrome will resolve the problem until the next page refresh
Appending a ?nocache=20131028-084318 to the source url does not resolve the problem.
Watching HTTP request using Charles Proxy, I see that on successful runs an HTTP request goes out to Brightcove (my video host). On failed refreshes, the request never happens.
On successful runs the sequence of VideoJS events:
loadstart
durationchange
loadedmetadata
loadeddata
On fails:
loadstart
I've tried a variety of ways of setting up the video element, including one noted here, Video.js Stalling during file load on iOS
and even the most basic setup noted here, https://github.com/videojs/video.js/blob/master/docs/setup.md The latter seems to work better; however, once the browser gets into a bad state clearing the cache and restarting the browser is required.
I'm having the same issue but in Chrome for Windows. I first noticed that it would only load when dev tools is open then I saw your question and realized the dev tools was bypassing caching.
If a user visits the page (on some browsers ie: Safari 6.1, etc...) the video will play the first time. If the user reloads the page by clicking in the address bar and hitting the 'ENTER' key, the video will not fire off it's LOADED/READY (or any other) events on the page 'reload'. This behavior does not happen if the user refreshes the page with the REFRESH button or REFRESH key combo (generally).
I bypassed my Brightcove player issues by dynamically loading the player on the page so it CANNOT be cached.
I also cache busted the Brightcove JS file for good measure.
Load player dynamically with this code:
http://support.brightcove.com/en/video-cloud/docs/dynamically-loading-player-using-javascript
Just some opinionated advice. Stay away form Brightcove whenever possible. My peers and I run into LOTS of bugs in their player as well as radically poor documentation.
I am not sure if this is specific to video.js. I am able to reproduce this problem by setting up a vanilla html5 video tag. It definitely looks to be related to some caching issue.
Currently, I am able to circumvent the problem by attaching a guid as a query parameter to the video url to ensure Chrome thinks this is a new video request. I do think there is a Chrome bug out there that needs to be addressed.
I Just found a ticket that matches what I can reproduce:
https://code.google.com/p/chromium/issues/detail?id=234779
I faced this problem and I solved it by disabling the cache to the javaScript file that contains the videojs instance options.
Add this line to your main page at the head
<script>document.write('<script src="vid.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>
Note: vid.js is the file that I put the settings in..
Another solution that I didn't try, but I think it might work, is by adding the JavaScript of the settings in jQuery (ready function).