Phantomjs works but is very slow

Question

I am trying to take a screenshot of a webpage with PhantomJS. Specifically, I am using the example of capturing espn.com from this example. My code looks like this:

var page = new WebPage(); 
    page.open('http://www.espn.com', function (status) {
    page.render('fb.png');
    phantom.exit();
});

I then go to my PhantomJS directory with either my terminal or command prompt and run:

phantomjs shotty.js

Everything runs great, however it takes 6-8 seconds to complete the output image. Is that normal? Is there a faster way to accomplish this so that it completes in a second or less?

I am using CentOS and Windows 7. Both boxes have 8GB of RAM, 3.2 GHz CPU, and I'm getting 22Mbp/s down and 1Mbp/s up on speedtest.net

Painterly

It took about 7 seconds to render the page in my desktop browser; so yes, that seems normal. – Bois

Thank you for verifying! – Painterly

DISABLE IPV6 and in Internet explorer "Click internet Options" => Click Connections => Click Lan Settings =>UNCHECK “Automatically detect settings – Copybook

Taking the screenshot is fast, but to start the actual process is very slow. – Consols

Answer 1

Yes this is normal. When you attempt to render, PhantonJS will still wait for the page.open event to fire the load event to signify that the entire DOM has been loaded.

Take a look at what happens when I load espn.com locally on my system. It takes ~2 seconds for DOMContentLoaded to finish, and then ~7 seconds for the ready event to fire.

Aixlachapelle

The operation itself should be fast, depending on the page. The slow thing is the process creation of phantomjs.exe! – Consols

Answer 2

Well, in my case, the page was waiting for some GET requests and was not able to reach the requests' server and it kept waiting for long. I could only figure it out when i used the remote debugger option.

phantomjs --remote-debugger-port=9000 loadspeed.js <some_url>

and inside the loadspeed.js file add this below code:

page.onResourceRequested = function (req) {
    console.log('requested: ' + JSON.stringify(req, undefined, 4));
};

page.onResourceReceived = function (res) {
    console.log('received: ' + JSON.stringify(res, undefined, 4));
};

and then loading localhost:9000 in any webkit browser (safari/chrome) and seeing the console logs where i could figure out it was waiting for some unreachable requests for a long time.

TO BYPASS THIS - REDUCE THE TIMEOUT by adding below to the same loadspeed.js file:

page.settings.resourceTimeout = 3000; //in milliseconds

and things were very quick after that. Hope this helps

Toothache

+1 and I wanted to add that by controlling timeout you can skip waiting for the whole page to load and work with a partial page. – Annabal

This was a big help. +1 – Panache

This is not a complete and working example and therefor not that helpful. – Epigram

This was extremely helpful. Thank you. @Myz, here's a complete working example: var page = require('webpage').create(), address = 'your url'; page.settings.resourceTimeout = 3000; page.open(menuURL, function(status) { if (status === 'success') { /*success code here*/ } } – Caenogenesis

How do I use the remote debugger? It shows me a link named loadspeed.js, then when I click into it, a F12-like page is appeared but no any data in it. – Amphistylar

It doesn't help, if I use page.evaluate to check for the existence of an element, it takes 10 sec to complete, in chrome less than a 6 sec with cache disabled. – Consols

I checked it again, the request completes very fast in my case, but it takes up to 7s for the phantomjs.exe process to be created, that is what is slow here. I am not sure, if it is possible to create the process once and reuse it for further requests...perhaps someone knows. – Consols

Answer 3

I didn't thought that the following would work but for me it did (on Windows):

open Internet Explorer > Internet Options > Connections > LAN Settings and disable the "Automatically detect settings"

original Post: https://plus.google.com/+MatthiasG%C3%B6tzke/posts/9v9BMCJj2k6

Adroit