【Raphael.js】大量のエレメント描画、add関数は速いのか!?
個別描画 VS まとめて描画
青コーナー!繊細な描画に定評のあるコベツ選手の入場です。迎え撃つ赤コーナーは配列の描画をまとめて行うジェイソン選手!その剛腕が期待されます! 競技のルールは至ってシンプル。格子状の矩形を計2500個早く描画したら勝ちです!大方の予想はやはりジェイソン選手。まとめて描画する点で期待が持てそうです!
実行結果
解説
結果は出てしまいましたが改めて実行結果をお伝えします。
回数 | コベツ | ジェイソン |
1回目 | 965ms | 1092ms |
2回目 | 789ms | 1072ms |
3回目 | 850ms | 1080ms |
4回目 | 997ms | 1038ms |
5回目 | 689ms | 1038ms |
なんということでしょうか。ジェイソン選手、破れてしまいました!大方の予想を覆したコベツ選手は、手間暇をかけながら丁寧にしかし確実に描画を重ね、勝利を掴みました!対するジェイソン選手は配列を作り、それを分解して描画するというのがボトルネックになったのか、全くかなわず、まさかの敗退!
いやーしかし今回は負けてしまったジェイソン選手ですが、ジェイソン選手が得意とするJSON配列がすでに手許にあったなら、別の結果になったかもしれません。 ご覧の番組はRaphaelの提供でお送りしました。
また来週!ごきげんよう!
参考
【Raphael.js】配列でRaphaelエレメントを追加する - RAPHAELIST