phantomjs 是什么？----主要是mac下面

phantomjs 是什么？

PhantomJS是一個無界面的,可腳本編程的WebKit瀏覽器引擎。它原生支持多種web 標准：DOM 操作，CSS選擇器，JSON，Canvas 以及SVG。

phantomjs 可以做什么？

• 無UI界面的網站測試
• 屏幕快照
• 頁面操作自動化
• 網絡監控

下載安裝

找到對應版本下載安裝，或是通過源碼編譯安裝。

window

下載phantomjs-1.9.8-windows.zip並解壓，phantomjs.exe直接可用。方便起見，把phantomjs.exe所在目錄加入到PATH中

MAC OS X

下載phantomjs-1.9.8-macosx.zip並解壓，bin/phantomjs直接可用。

或者通過Homebrew安裝

brew update && brew install phantomjs 

或者通過MacPorts安裝

sudo port selfupdate && sudo port install phantomjs 

Linux

64位下載phantomjs-1.9.8-linux-x86_64.tar.bz2

32位下載phantomjs-1.9.8-linux-i686.tar.bz2

安裝渲染所需（FreeType,Fontconfig）依賴：

sudo apt-get install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 

快速開始

安裝完phantomjs 之后，將其可執行路徑加入到PATH中。

hello world

新建hello.js，添加如下代碼：

console.log('Hello, world!'); phantom.exit(); 

在命令行里執行：

phantomjs hello.js 

會輸出：

Hello, world! 

第一行代碼，console.log會打印字符串到命令行。第二行代碼，phantom.exit會終止執行過程。

注意：一定不要忘了在代碼里調用phantom.exit，否則PhantomJS將不會被終止

頁面加載

通過page 對象，我們可以加載，分析，渲染頁面。

下面的代碼展示了page 對象最簡單的用法。它加載example.com然后將其保存為一個圖片example.png。

var page = require('webpage').create(); page.open('http://example.com', function() { page.render('example.png'); phantom.exit(); }); 

PhantomJS基於Webkit引擎，可以布局和渲染頁面，我們可以利用這一點給網頁拍照。

下面的loadspeed.js,加載一個指定的URL，然后測量加載頁面所需時間。

var page = require('webpage').create(), system = require('system'), t, address; if (system.args.length === 1) { console.log('Usage: loadspeed.js <some URL>'); phantom.exit(); } t = Date.now(); address = system.args[1]; page.open(address, function(status) { if (status !== 'success') { console.log('FAIL to load the address'); } else { t = Date.now() - t; console.log('Loading ' + system.args[1]); console.log('Loading time ' + t + ' msec'); } phantom.exit(); }); 

從命令行執行(注意有http)：

phantomjs loadspeed.js http://www.google.com 

輸出結果類似下面這樣：

Loading http://www.google.com Loading time 719 msec

執行腳本

想要在頁面的上下文里執行javascript或者coffeescript代碼，要使用evaluate()函數。evaluate()可以返回一個對象，但必須是一個簡單的對象，不能包含函數或者閉包。

下面的代碼展示了如何顯示一個網頁的title:

var page = require('webpage').create(); page.open(url, function(status) { var title = page.evaluate(function() { return document.title; }); console.log('Page title is ' + title); phantom.exit(); }); 

默認情況下，頁面代碼里的console輸出的消息，以及evaluate()里的console輸出的消息都不會顯示出來。不過，通過使用onConsoleMessage回調函數,你可以改寫這一行為，上面的實例可以改為：

var page = require('webpage').create(); page.onConsoleMessage = function(msg) { console.log('Page title is ' + msg); }; page.open(url, function(status) { page.evaluate(function() { console.log(document.title); }); phantom.exit(); }); 

evaluate()里的代碼就像在瀏覽器里執行一樣，所以像標准的DOM操作、CSS選擇等都可以正常進行。我們可以利用這一點將一些頁面工作自動化。

網絡請求與返回

當頁面向服務器請求資源時，通過onResourceRequested 和 onResourceReceived 回調函數可以 記錄request和response。例如：

var page = require('webpage').create(); page.onResourceRequested = function(request) { console.log('Request ' + JSON.stringify(request, undefined, 4)); }; page.onResourceReceived = function(response) { console.log('Receive ' + JSON.stringify(response, undefined, 4)); }; page.open(url); 

基於此我們可以進行一些頁面性能的分析。