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); 

基於此咱們能夠進行一些頁面性能的分析。