3

私はこの面白いページを実装しました:

http://www.xthema.it/misc/christmas-matrix.html

3 つの異なる方法で再試行しましたが、毎回 Firefox で良好なパフォーマンス結果を得ることができませんでした (バージョン 17 を使用しています)。

  • 最初の試みは、すべてのセルに対して毎回 div を作成および削除することでした。
  • 2番目の試みは、最初にすべてのdivセルを事前に割り当て、文字と色のみを変更することでした
  • 3 番目の試み (現在の試み) は、列 div を作成し、下部に新しい div セルのみを追加し、文字落下の最後で列全体を削除することでした。

Chrome、Safari、IE では常に良好な結果が得られますが、FF では遅くなります。

なにか提案を？DOM や CSS にアクセスする際の FF の弱点について知っている人はいますか? 推奨する最適化はありませんか?

4

3 に答える 3

1

別の可能な（超）高速ソリューションを見つけました：

説明: 半透明の png を取得し、マトリックス文字の上に配置して、一部が半透明になるようにします。png を移動します。説明が難しい - 添付された jsfiddle での迅速で汚い実装に従うのは簡単です。

迅速かつ汚れた実装: ( http://jsfiddle.net/zbHne/を参照)

<html>
<head>
<style type="text/css">
#box{
  height: 100px;
  width: 300px;
  overflow: hidden;
  border:2px solid;
  background: #000;
}

</style>
<script type="text/javascript">
onload = function(){
  var el = document.getElementById("test");
  el.style.position = "relative";

  var x = -700;
  function fly(){
    x += 10;
    el.style.left = x + "px";

    if(x > -100){
      x = -700;
    }
  }

  setInterval(fly, 50);
}
</script>
</head>

<body>

<div id="box">
<div style="position: relative; width: 1000px; color: green">test of letterstest of letterstest of letterstest of letterstest of letters</div>
<div id="test"><div style="width: 1000px; height: 100px; background: url(layer.png); position: relative; top: -50px">invisible</div></div>
</div>

</body>
</html>

これを機能させるには、適切な layer.png 半透明画像を作成する必要があります。

于 2012-12-20T10:55:22.410 に答える
1

最初の普遍的な最適化は、requestAnimFrameを使用することです。すべてのアニメーションで使用する必要があります。

あなたのコードに見られるのは、多くのdom操作です。特に、createElement を何千回も呼び出して drawFall を呼び出します。これは遅いです。描画する直前に秋を準備してから、色を変えてアニメーション化し、その後秋を削除してください。(したがって、createElement 呼び出しの数を最小限に抑えるようにしてください) さらに、documentFragmentを使用することもできます。

他のアイデアは、WebGL を使用して実装することですが、これはまったく別の話です。

于 2012-12-18T17:45:40.343 に答える
0

requestAnimFrame を使用してみましたが、大きな改善はありません。

firebug プロファイラーを使用すると、操作が遅いために色が変わっているようです

cellEl.style.color = br;

したがって、現時点で私が見つけた唯一の解決策は、FFでパレットを最小化することです

// BRIGHTNESS0 is the MAX brightness value
// BRIGHTNESSSTEPS is the palette size

// i : 31 = n : BRIGHTNESS0
var i = Math.floor(n * 31 / BRIGHTNESS0);
// brightness inc = BRIGHTNESS0 / BRIGHTNESSSTEPS
var inc = 31 / BRIGHTNESSSTEPS;
i = Math.floor(Math.floor(i / inc) * inc);

var brHex = '#';
if (i < 16) {
  var d = i * 16 + i;
  brHex += '0' + Number(i).toString(16) + '0';
} else {
  i -= 16
  var o = Number(i).toString(16);
  brHex += o + 'f' + o;
}

...

FF では 32 階調は使用しませんが、色が変わらない場合はstyle.color割り当てをスキップします。

var br = BRIGHTNESSTABLERGB[cell[1]];
if (cellEl.style.color != br)
  changeBrightness(cellEl,br);

この方法では少し良くなります。他の提案はありますか？

于 2012-12-19T06:46:41.697 に答える