RAPHAELIST

Raphael.jsは日本語ドキュメントが少ないので、初心者には敷居が高いのを何とかするブログ

【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