Does anyone know of a visual representation of how a browser loads content? A couple of videos that might explain different scenarios, like how how JS files are loaded. Does the html load first and then the JS or do they load together.
In general, I follow standards where my JS is added to the bottom of the page, but I have never had a very good grasp of how a browser loads content and I would love to see a visual representation like a slow motion video example of sorts.
Thanks!
I think the YSlow presentation is what you want. I saw a different version in person, so you might dig around a bit to see if you can find one with really great visuals. Also, try the YSlow plugin or one of the other analyzers, like Safari's Web Inspector.
You can use the Network tab in Firebug or Chrome's Dev Tools, these will show you a waterfall of things loading.
Also, you can test loading the page over a really slow connection with something like Charles and throttling the connection speed.
Related
I'm trying to decrease page loading time of a project I'm working on. At first the team I'm working with tried to optimize Apache/Symfony2/Postge but finaly in Networking panel of Chrome's Dev Tools I've found a large "gap" after loading all css and js files. The "gap" disappears when script files are removed. If I leave only jquery.min.js (no other libraries or scripts loaded) page still loads for aprox. 1.5s.
Developer tools doesn't say what happens during this period. I think this might be when browser parses and interprets CSS and JS but I need decreasing of DOMContentLoaded time. Any suggestions?
This is my first post and I need 10 reputation to post images, so I've uploaded screenshot of what I'm talking about here:
http://tinypic.com/m/imqw0n/1
P.S.: Screenshot is taken on "average" PC. The same test on my personal laptop (AsusG750JZ, 8-core CPU, 16Gb RAM, nVIDA 880m) shows very different results - load time is about 1.5s instead of 5.2s. Unfortunately I can't make everyone use the web app on hi-end ;)
P.S.2: Async loading of JS is not an option. I've tried RequireJS but I didn't like the results. It was clumsy because of all scripts dependencies.
In DevTools, go to the 'Timeline' tab. https://developer.chrome.com/devtools/docs/timeline
How do I measure if my jQuery (or JS) heavy webpage is dragging/ affecting the CPU performance of client computers (and touch devices)?
I'm not asking about load times/etc as they are dependant on the number of JS files. I'm asking about client side resource consumption and associated stability issues if any.
To be specific: I'v embedded a jQuery rotate function to perpetually animate an image, and a couple of other jquery based animated objects in the wordpress template.
You can use webkit profiler (profile, audit tab) that comes with web browsers like Google Chrome. Also extensions like page speed and speed tracer are really awesome. You can get an idea on the whole browser process like how much time it spends in UI thread, executing javascript etc.
This is a good question.
You could try Eric's tool that reports the frame rate of the browser.
http://churchm.ag/monitor-javascript-performance/
I'm not sure if this is something that you want to test during development, or monitor has feedback from real clients. It could be possible to run the above Javascript has a background thing and then send AJAX messages back to the server to report the performance for a visitor.
Another script I found attempts to measure CPU performance, but I don't know how good it is.
http://blog.pothoven.net/2007/12/performance-based-web-app-functionality.html
I wouldn't suggest using it on a production server, but Firebug has Javascript performance analysis tools. http://getfirebug.com/javascript
You can use the Google Chrome Web Inspector, specifically the "Profiles" panel. Here's some more information on it...
http://jtaby.com/2012/04/23/modern-web-development-part-1.html#The%20Profiles%20Panel%20
I am currently investigating why my site takes so long to load.
The Firebug net panel tells me this:
7.74s (onload: 16.02s)
What might be causing this huge gap?
What exactly is the browser doing after all resources are loaded until it fires the onload event?
Thanks.
It would be difficult to say the cause without a site URL. But you can do the following things at your end.
You can install the following Firefox addons
YSlow
Page Speed addon (check it with Google it is a product from Google itself)
This addons will give you fairly good idea about what causes your issue.
Also have a look the Best Practices for Speeding Up Your Web Site article from Yahoo! that specifies several points to improve the performance of the website.
Hope this helps.
JP
It's download time vs processing time onload. See also Timing with the Firebug Net Panel: What is the onload time?
Processing time of your onload scripts is very high, so use a profiler:
Use the Firefox Profiler tool to find bottlenecks in your JavaScript code. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples.
You can launch the Profiler by selecting "Profiler" from the "Web Developer" menu. You'll find the "Web Developer" menu under the "Tools" menu on Linux and OS X, and directly under the "Firefox" menu on Windows.
If you use the Net panel in Firebug you will get an itemised list of requests and times - you can determine the problem from there.
Ahem...
I'm trying to find all instances of an advert on a website. The advert is in an iframe which is loaded by javascript (it doesn't appear at all if javascript is turned off). Detecting the advert itself is extremely simple, both the name of the flash file and the target of the href always contain a certain string.
What would be the best "starting point" for achieving this? At the moment I'm considering an Adobe AIR app, which could crawl the site and examine the DOM to find the ad, and would run javascript and load the content of the iframe. The other option I can think of is using Firefox as the platform (using maybe GreaseMonkey or Selenium? I don't really know how to leverage Firefox like this).
Does anyone know of anything suitable to build this, or have any suggestions on using Firefox to do it?
Extra details:
Being CPU intensive isn't really an issue, nor is anything depending on a browser being open. This doesn't need to run on a headless server, it will be running on a powerful desktop box. OS is also not an issue. It would be advantageous if the crawler loaded each page multiple times, as the advert is in rotation. While the crawler does need to execute the javascript and load the content of the iframe, it does not need to be able to display flash files.
An alternative to using a "browser as a crawler" is using HTMLUnit as the page says, it's:
HtmlUnit is a "GUI-Less browser for Java programs". It models HTML documents and provides an API that allows you to invoke pages, fill out forms, click links, etc... just like you do in your "normal" browser.
It has fairly good JavaScript support (which is constantly improving) and is able to work even with quite complex AJAX libraries, simulating either Firefox or Internet Explorer depending on the configuration you want to use.
I think You don't want a crawler. You are going to run it on a single page and not want it to look around the internet through links, right?
If so - You want to find something on the page with javascript on. You then just have to use javascript.
You'll need:
the site :)
correct rights to access its content - use greasemonkey for FF or user scripts in Opera
a code similar to this jQuery sampe:
finding stuff in iframes:
$('iframe').each(function(){
$(this).contents().find('object').each(function(){
if($(this).attr('name').match(/regex/)){
$(this).remove(); //or do whatever You want
}
});
});
caution: accessing iframe contents may differ in browsers and is influenced by time when You run the script
If the ad is only displayed when javascript is enabled, you are going to have a problem, as no crawler is going to be able to read the web page in that matter.
Is there something in the javascript code itself that could be a tipoff to where the add is displayed? If so, maybe you can check that.
I've tried similar stuff before, and I used BeautifulSoup in python, and it worked really well.
http://shanamccormick.com
The page loads all the images and then says "(1 item remaining) Waiting on http:// shanamccormick com..." How can i see what it is waiting to load here?? and why does it take sooo long?
The index.html file uses a couple small internal JS and one external JS located within my website (jquery.min) The size of the external JS file is 54kb.
IE8 has a Javascript profiler, like Firebug for Firefox.
But I think you need Fiddler to profile the performance of the HTTP request/response.
If you want the Javascript developer tools (including profiler) I recommend moving to IE8, but if you can't,
IE7 has downloadable dev tools, like IE8's built-in capability.
I have a few solutions that might help. I learned of these from another question I asked earlier:
Firebug Lite is a JavaScript file you can insert into your pages to simulate some Firebug features in browsers that are not named "Firefox". Firebug Lite creates the variable "firebug" and doesn't affect or interfere with HTML elements that aren't created by itself.
WebWait is a website timer. Use WebWait to benchmark your website or test the speed of your web connection. Timing is accurate because WebWait pulls down the entire website into your browser, so it takes into account Ajax/Javascript processing and image loading which other tools ignore.
Also, the IE JavaScript Real Performance Tester can test your scripts.
Hope these help!
The page doesn't exist anymore? or is it: shanamccormick.com ? misstype?
Anyway I've found that googles IE8.js (for IE7 and less) (https://code.google.com/p/ie7-js/) takes up to 1 minute to load (on a computer from that time) every page load... could that have been the problem?