如何通过phantomJS实时渲染JavaScript？

Question

I render the javascript behaviour of a page by phantomJS with a code like

var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open('index.html', function(){
    (function snap(i){
        if(i < 5000){
            window.setTimeout(function(){
                page.render('i+'.png');
                snap(++i);
            }, 20);
        }
        else{
            phantom.exit();
        }
    })(0);
});

The problem is when rendering at high resolution, the CPU is heavily used and thus the javascript performance becomes slower. For example, if a javascript action takes 100s, it will take 500s under a heavy load. Thus, the captured images are only for 1/5 of the javascript scenario.

Is it possible to guarantee that the javascript events is finished in the original timeframe? Or render the javascript according to the original timeframe rather than the occuring timeframe?

Answer 1

Is it possible to guarantee that the javascript events is finished in the original timeframe?

No, that's not possible because there is no concept of "original timeframe".

All you need to do instead is speed up your capability for capturing. You'll have to abandon PhantomJS for this. Fortunately, Chromium itself has a very nice tab capture API which can capture video in realtime.