用 瀏覽器+WebWorker 來做網站壓力測試?

 Sat, 25 Sep 2010 13:29:10 +0800

昨天突然有一個想法,就是也許我們可以用WebWorker做壓力測試,這樣只要把簡單的網頁程式放在網站中,下一些條件來產生壓力。

花了一點時間寫了一個小程式來做了簡單的測試,包含網頁及webworker部份。網頁部份如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
  var workers = [];
  var count = 0;
  var start = 0;
  $("form#myform").submit(function(){
    var url = $("input#uri").val();
    var num = $("input#concurrent").val();
    var start = $("input#start").val();
    var times = $("input#times").val();
    function workercb(e) {
      $("#panel")[0].innerHTML += e.data + ":" + Math.round(((new Date().getTime())-start)/1000) + "<br>";
      if(count<times) {
        this.postMessage(JSON.stringify({'cmd':'action','count':count}));
        count++;
      }
    }
    for(var i=0; i<num; i++) {
      var tmp = new Worker('test602.js');
      tmp.onmessage = workercb;
      workers.push(tmp);
    }
    for(var i=0; i<workers.length; i++) {
      workers[i].postMessage(JSON.stringify({'id':i,'cmd':'prepare','uri':url}));
    }
    start = new Date().getTime();
    for(var i=0; i<workers.length; i++) {
      workers[i].postMessage(JSON.stringify({'cmd':'action','count':count}));
      count++;
    }
    return false;
  });
});
</script>
</head>
<body>
<form id="myform">
<table padding="2" spacing="0" border="0">
<tr><td><label for="uri">下載資源URI:</label></td><td><input type="text" name="uri" id="uri" size="30"></td></tr>
<tr><td><label for="concurrent">Worker數量:</label></td><td><input type="text" name="concurrent" id="concurrent" size="5"></td></tr>
<tr><td><label for="start">發動時間:</label></td><td><input type="text" name="start" id="start" size="10"></td></tr>
<tr><td><label for="times">發動次數:</label></td><td><input type="text" name="times" id="times" size="10"></td></tr>
<tr><td colspan="2"><input type="submit"></td></tr>
</table>
</form>
<div id="panel"></div>
</body>
</html>
webworker程式如下(test602.js):
var config = {
  'id': '',
  'uri': '',
  'start': null,
  'end': null,
  'count': 0,
  'result': 'fail'
};
var count = 0;
onmessage = function(e) {
  var payload = JSON.parse(e.data);
  switch(payload.cmd) {
    case 'prepare':
      config.uri = payload.uri;
      config.id = payload.id;
      break;
    case 'action':
      config.count = payload.count;
      action();
      break;
  }
};
function action() {
  var req = new XMLHttpRequest();
  var parm = new Date().getTime() + '' + Math.round(Math.random()*100000) + '' + count;
  req.open('GET', config.uri+'?'+parm, false);
  config.start = new Date().getTime();
  req.send(null);
  config.end = new Date().getTime();
  if(req.status==200) config.result = 'success';
  else config.result = 'fail';
  postMessage(JSON.stringify(config));
  count++;
}

用不同瀏覽器跑過以後(請求一個6MB的檔案,產生50個WebWorker,總共發出150次請求),發現幾個有趣的現象:

來看看幾張測試的截圖:

Safari在這張截圖後幾秒就當掉了

Chrome6的Concurrent比較低

Chrome6跑到結束...

Firefox4的concurrent比較高

Firefox4跑到結束...

每行最後一個數字是request結束時與測試開始的時間差,單位是秒,可以大略看出速度差距。不過不管怎麼測,瀏覽器看起來還是不適合拿來做壓力測試工具的。


2010-9-25 23:16 補充

剛剛用ab做了一下測試做對照,總共花了80秒就做完了...簡單地說,瀏覽器就是無法產生足夠的壓力啦。