Performance of phantom.js vs zombie.js

Question

I'm evaluating phantom.js and zombie.js. I expected the trade-off to be that phantom has wider documents support (since it uses a real renderer) while zombie is faster (since no rendering engine is used). However zombie seems much slower in the test I did. Does this make sense?

I am thinking maybe zombie waits for the full page to load before visit() returns (including running all scripts and loadsing css) while phantom returns immediatelly after start() (I used casperjs) allowing me to continue without waiting for the full page.

Phantom.js

casper.userAgent("Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13");

casper.test.begin('bing search', 2, function(test) {
    casper.start('http://www.bing.com/', function() {
        this.waitUntilVisible('#sb_form_q', function() {
            this.sendKeys('#sb_form_q', "book", true);
            this.click('#sb_form_go');
            this.waitUntilVisible('#count', function() {        
                var val = this.evaluate(function() {
                     return document.getElementById('count').innerText
                });

                console.log(val)
            });
        });
    }).run(function() {
        test.done();
    });
});

Zombie.js

var Browser = require("zombie");
var browser = new Browser()

browser.userAgent = "Mozilla/5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13"

browser.visit("http://www.bing.com/", function() {
    browser.fill("#sb_form_q", "book");
    browser.pressButton("#sb_form_go");

    function resultArrived(window) {
        return window.document.querySelector("#count")
    }

    browser.wait(resultArrived, function() {
        console.log(browser.document.querySelector("#count").innerHTML)               
    });
});

Answer 1

I'm not sure why aren't you utilizing the promises syntax of zombie (as you do with casper)? You should be doing something like:

browser.fill(...)
   .then(browser.pressButton)
   .then(something else)

not using the promises syntax may cause all kind of strange effects, since the order of execution in an async api is different from the top down code you are used to in script languages.

for your question, I can't be completely sure, but from my experience zombie.js and capser.js (on top of phantom.js) are quite similar in speed. Also notice that zombie.js docs state that:

To wait for the page to fully load and process events, you pass visit a callback function.

Since you do pass a callback, you get what you'll expect - waiting for full page load.