Flashのように滑らかなアニメーションを実装するには(uupaa.js vs jQueryデモ) - latest log
JavaScript で Flash のような滑らかなアニメーションを行うためには、クロスブラウザな知識の他に、GC(ガベージコレクション)や「どうすれば安定した品質がだせるのか」といったスキルが求められます。 # GC の話は WEB+DB PRESS 57 でちょっと書いてます。 派手目なアニメーションが目的で jQuery を採用している方もいるとは思いますが、実は uupaa.js でも アニメーションや easing が利用できるんです。あらびっくり。 ただ「機能がありますよ〜」だと、さみしいので みんな大好き jQuery と uupaa.js のアニメーションの品質の違いが分かるようなデモを作成してみました。 iPhone/iPad や、IE6〜IE8で opacity を切り替えて見ると、ハッキリと違いが分かると思います。 http://jsdo.it/uupaa/uufx
2分でわかる uupaa.js の サクサク :: handsOut.jp
スライド1: 2 分でわかる uupaa.js~ Speedy ~uupaa.js@gmail.com スライド2: 今日のテーマは「サクサク」 スライド3: サクサクにするには1. 名前解決コストを減らす2. ガベージレス3. Hash で評価4. Hash の事前生成5. イベントハンドラの軽量化 スライド4: 1. 名前解決コストを減らす• スコープ内に alias を作成し、そちらを参照する– STYLE B は JIT 非搭載ブラウザで特に効果的例: IE6で 6%, IE7,IE8で 9%, Firefox3で 12%, Opera10で 3% 高速化例: 関数の alias を用意すると IE6で 2.7倍 高速化// 元のコード (STYLE A)var _regexp = /regexp/;(function() {(function job() {for () {
Selectors API以降のセレクタ実装 - jQueryとSizzleとuupaa-selectorとkQuery - ?D of K
低速復活中なので、kQueryを細々と書き直しました。 http://kquery.if.land.to/slickspeed2/system/kquery.js URLからもわかるように大好きなSlickSpeedも置いておきました。 http://kquery.if.land.to/slickspeed2/ http://kquery.if.land.to/slickspeed2/slickspeed2.zip 広告入るスペースなので、zipに固めたものも置いておきます。 基本的に速度向上ではなくて、内部的なリファクタリングがメインなので、劇的に速度が向上したりはしていません。まぁ、少しは向上していますがｗ 今回の改造は、 親ノードを配列で複数渡せるように。 大抵のセレクタ実装だと一つの親しか渡せないけど、find関数を実装することを考えると複数取れた方が都合がいいよね？ ID、クラス
CSSセレクタがトータルで100倍速くなったからそろそろ終わり - latest log
function _fakeMutationEvents(elm) { elm.style.behavior = "none"; (function(n) { var fn = n.removeChild; n.removeChild = function(oldChild) { // DOMNodeRemoved uuClass.Selector.clearCache(); return fn(oldChild); } })(elm); elm.attachEvent("onpropertychange", uuClass.Selector.clearCache); // DOMAttrModified uuClass.Selector.clearCache(); // DOMNodeInserted } window.onload = function() { document.cre
DOMNodeInserted と DOMNodeRemoved に似た仕組みを IE でも使えるようにして、セレクタの実行結果をキャッシュする - latest log
セレクタ(id, tag, class, css, xpath)の実行速度を改善するには、2つの方法があります。 ロジックを改善する キャッシュを使う 今日は2の方法について検討したことを書き残します。 心配事 キャッシュを使う上での心配事は「キャッシュが古くなったらどうするか、それをどうやって知るか?」です。 古くなったキャッシュはクリアしなければなりません。 DOM Level2 MutationEvents を使うと、ノードの挿入, 削除と、属性の更新 を取得できる DOM Level2 MutationEvents という仕様があります。これらを活用するとDOMツリーが更新されたタイミングを監視できます。 DOMNodeInserted は ノードの挿入, DOMNodeRemoved は ノードの削除, DOMAttrModified は 属性の変更に対応しています。 各ブラウザ
uupaa.js version 0.6 をリリースしました。 - latest log
変更点: http://uupaa-js.googlecode.com/svn/trunk/CHANGELOG.htm 注意点 version 0.6 では CSSセレクタ(uu.css)を書き直しています。 → querySelectorAll相当の機能を実装してみた(uupaa.jsのCSSセレクタを書き直した) - latest log jQueryと比較した場合に、CSSセレクタとしての精度はuupaa.jsが上なのですが、速度的にはjQueryに100倍ぐらい差をつけられている項目がありました。 『まず正しく動くものを書き、その後に早くする』という格言 遅い部分については次以降のバージョンで改善していきますが、それでもトータルの速度ではjQueryに勝てない気がします。 なぜなら、jQueryは本来必要なチェックをすっ飛ばして速度を稼いでいる箇所が沢山あるからです。 ハンデ戦でし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
