hnakamur’s blog

ものすごい勢いで忘れる私のために未整理でもいいからとりあえずメモ

ラベル javascript の投稿を表示しています。 すべての投稿を表示
ラベル javascript の投稿を表示しています。 すべての投稿を表示

2011-12-03

google-code-prettifyの設置

16 Free Javascript Code Syntax Highlighters For Better Programmingで見つけたgoogle-code-prettify - syntax highlighting of code snippets in a web page - Google Project Hostingを設置してみました。これを選択した理由は単に正規表現でキーワードをマッチさせる方式より高度な判定を行っているからです。

Javascript code prettifierを参考に設定します。
htmlの</head>の前に以下の2行を追加します。
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
そして、<body>onload="prettyPrint()"を追加します。Bloggerの場合は管理画面の[Template]の[Backup/Restore]でテンプレートのXMLをダウンロード、編集、アップロードします。

使い方は<pre><code>class="prettyprint"を追加します。Javascript code prettifierからリンクされている4.6.11 The code element — HTML5: Edition for Web Authorsでは<pre><code class="language-html">という書き方が紹介してあるので、<pre>内で言語を指定する場合は<pre class="prettyprint"><code class="language-html">という書き方にしようと思います。

2009-08-14

WebWorkerの実行速度測定実験

実行結果

Safari 4.0.3

userAgent=Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; ja-jp) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9
Start testing workers for 3 times. n=100000000
worker result=4999999950000000, elapsed=3.805
worker result=4999999950000000, elapsed=3.781
worker result=4999999950000000, elapsed=3.78
elapsedAverage=3.789

Chromium 4.0.202.0 r23297

userAgent=Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/4.0.202.0 Safari/532.0
Start testing workers for 3 times. n=100000000
worker result=4999999950000000, elapsed=1.734
worker result=4999999950000000, elapsed=1.652
worker result=4999999950000000, elapsed=1.658
elapsedAverage=1.681

Chrome 3.0.198.1

userAgent=Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.198 Safari/532.0
Start testing workers for 3 times. n=100000000
worker result=4999999950000000, elapsed=1.735
worker result=4999999950000000, elapsed=1.655
worker result=4999999950000000, elapsed=1.654
elapsedAverage=1.681

Firefox 3.5.2

userAgent=Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ja-JP-mac; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
Start testing workers for 3 times. n=100000000
worker result=4999999950000000, elapsed=0.589
worker result=4999999950000000, elapsed=0.439
worker result=4999999950000000, elapsed=0.438
elapsedAverage=0.489

動作環境

機種 ID
MacBook5,1
プロセッサ名
Intel Core 2 Duo
プロセッサ速度
2 GHz

ソース

  • sum.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Web worker sample</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="stopwatch.js"></script>
    <script type="text/javascript">
    $(function() {
      var worker = new Worker("sum.js"),
        n = 100000000,
        tryCount = 3,
        tryIndex = 0,
        stopwatch = new Stopwatch();
     
      function log(message) {
        $('#result').append(message + '<br>');
      }
      log('userAgent=' + navigator.userAgent);
      log('Start testing workers for ' + tryCount + ' times. n=' + n);
      
      worker.onmessage = function(event) {
        stopwatch.stop(); 
        log('worker result=' + event.data + ', elapsed=' + stopwatch.elapsedTime());
        if (++tryIndex < tryCount) {
          startTry();
        }
        else {
          log('elapsedAverage=' + stopwatch.elapsedTimeAverage().toFixed(3));
        }
      }
      worker.onerror = function(event) {
        log("worker error: " + event.data);
      }
    
      function startTry() {
        stopwatch.start();
        worker.postMessage('' + n);
      }
      startTry();
    });
    </script>
    </head>
    <body>
    <div id="result"></div>
    </body>
    </html>
    
  • sum.js
    onmessage = function(event) {
      var n = parseInt(event.data);
      var sum = 0;
      for (var i = 0; i < n; i++) {
        sum += i; 
      }
      postMessage('' + sum);
    }
    
  • stopwatch.js
    function Stopwatch() {
      this.elapsedTimes = [];
    } 
      
    Stopwatch.prototype.start = function() {
      this.startTime = new Date();
    } 
    
    Stopwatch.prototype.stop = function() {
      this.stopTime = new Date();
      var time = (this.stopTime.getTime() - this.startTime.getTime()) / 1000;
      this.elapsedTimes.push(time);
    }
    
    Stopwatch.prototype.elapsedTime = function() {
      return this.elapsedTimes[this.elapsedTimes.length - 1];
    }
    
    Stopwatch.prototype.elapsedTimeAverage = function() {
      var n = this.elapsedTimes.length,
        total = 0;
      for (var i = 0; i < n; i++) {
        total += this.elapsedTimes[i];
      }
      return total / n;
    }
    

2008-12-31

John Resigさんの本『Secrets of the JavaScript Ninja』を購入



Manning: Secrets of the JavaScript Ninja


Secrets of the Javascript Ninja


early access editionなのでまだ一部の章しかありませんが、さすがjQueryのJohn Resigさんの著書だけあって深いです。





ブログ アーカイブ