我過休暇的星期三
グレイトだ☆ な水曜日でした。
朝から親が出かけていたので、プログラミング三昧な過ごし方をしようとずっとパソコンの前にへばりついてましたよ。
前から書いてるように、Javascript使った何かを作ってます。
以前書いたRaphaelはイメージファイルの取り込みの段階で躓いたり（Safariで）、D&Dで動かすとゴミが残ったり（Chromeで）するので却下しまして。
代わりに別の角丸ライブラリを使ってdivに角丸な線を付設定し、jQueryのcssメソッドで不透明度を低めに。
あとはjQuery UIを使ってDraggableを付与して・・・とそこまでやってハタと気づく。
超重ぇ（ブラウザの動作的な意味で）
おそらくDOMが多すぎるせい、もしくはDraggableやhoverなどイベントを沢山仕組みすぎたせい。
とはいえ、DOMと言えば
<div> <img /> <!--ここから下に、divがどんどん増えていく予定（今は５個）--> <div> <div> <p></p> <p></p> </div> </div> <div> <div> <p></p> <p></p> </div> </div> <div> <div> <p></p> <p></p> </div> </div> <div> <div> <p></p> <p></p> </div> </div> <div> <div> <p></p> <p></p> </div> </div> </div>
こんな感じ。
pを挟んでるdivが二つあるのは角丸ライブラリによる自動生成のせいです（枠を作るため）。
ひょっとしたらこいつのせいかも知れない、と思い実行速度を測ってみると、152msしか使ってない。
いやまあ、十分長いんですけど。このブロードバンド全盛期に、表示に0.1秒かかるとか苦痛じゃないですか。
でも１秒以内に読み込めればよしとしよう（ぇ
ちなみにプログラム全体では300msくらいかかってる。
うーん、何がいけないのか・・・
draggableで引きずるdivの中に沢山要素が入ってるのが原因とか？
あ、ちなみにOperaよりSafariで動かした方がストレス無かったでした。
増やすdivの数を100個とかにしたら、表示まで１分くらいかかりました。そうするともうまともに要素がD&Dできない・・・
改善案
- もうdivばらまくのは止めて、onmouseoverの時にajaxか何かで情報とって来させるimgだけばらまく。onmouseoutで情報を表示した（Balloon Tipsとかで表示させると綺麗かも）DOMは削除。（外部ドメインアクセスの問題あり）
- 角丸をあきらめる
- draggableやhoverなんかのイベント類をあきらめる
一番可能性高いのは一番上。
強制的に自ドメインの２分割フレームページに飛ばして、片方に他サイト、片方に自サイトを表示、フレーム経由で自サイト側から非同期通信する？
でもJsonデータ読み込むだけなら外部ドメインでも行けそうな気はするし・・・要調査（jQueryとか読み込むときに一緒に読んじゃえば良いかも）。
メモリは食っても、あらかじめ全データを受け取っておいて、新しい投稿をするときは自ドメインのプログラムにPOSTでデータ送ればおｋ？
そのうちFlashとかで作り直したい・・・Flash買うかなぁ・・・
まだ完成してもないけどorz
今作ってるのは飽くまでインターフェース。内部ロジック（というかサーバサイドプログラム）はぜんぜん手付けてないんだっぜ☆
