暮らし JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
『JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏』へのコメント
暮らし JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
DocumentFragmentの考察 - Personnel
DOMユーザーの方は、このようなことが出来たら良いと思ったことはありませんか? NodeListのクローンを作成する NodeListをそのままappendChildのパラメータにする もちろんこのようなことは出来ません。NodeListのitem一つ一つのクローンを作成し、一つ一つをappendChildしなければならないのです。しかし、DocumentFragmentを利用することによって、このような感覚の操作をすることが可能になります。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/documentFragment.html#seeds ここに、文書A、文書B、文書C があったとします。 文書A <rootA> <item /> <item /> <item /> <
JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
Firebugのコマンラインを拡張してincludeできるようにしたら便利でした « ku
さいきんFirebugでコードを書いている。書いてCtrl-Enterを押した瞬間に結果が確認できるので気持ちがいい。Canvasを使えばグラフィックも扱える。BASICでコードを書く感覚を思い出した。 Firebug上では、あんまり長いコードを書くのはつらいところが難点だった。自分で拡張してincludeできるようにしたらこれがすごくいい。Firebug上で実行して動作を確認しながら関数を書いていって、うまく動くようになった時点でincludeしているファイルのほうに移動してFirebugのコマンドラインを空にする。vim上でコードを書いてブラウザに戻ってきてreloadするのにくらべてストレスが少ない。 vim上でコードを書き換えたときもCtrl-Enterでもう一度includeされて実行されるので、リロードは発生しないし、Firefoxとvimとをいったりきたりしなくてもいい。
画像の遅延ローディング - hiroyのブログ
画像の遅延ローディングについて調べてみた。 参考にしたのはこの辺: lazierLoad – Javascript Image Lazy Loader for Prototype – Bram.us Vanilla JavaScript Lazy Load Plugin 仕組みは案外単純。適当なタイミングで遅延ローディングしたいimg要素のsrc属性を適当な画像（blank.gifとか）に置換、表示が必要になったらsrc属性の値を元の値に戻してあげるだけ。 あとは、表示が必要になるタイミングを判断するロジックと組み合わせればOK。画像のところまで画面がスクロールされたかとか、display値が切り替えられるタイミングとか。 // prototype.jsを利用した場合 Foo = { images: [], stopLoadingImages: function() { $$("div#f
ウノウラボ Unoh Labs: 画像の遅延読み込み
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
for 文を setTimeout に変換する - IT戦記
for 文で 100 項目とか 1000 項目とかあるテストケースを処理するとブラウザが固まる。 こんなダイアログが表示されます。 ということで for 文を setTimeout や setInterval に変換する事で定期的にブラウザに処理を戻すことができる。 // ここでは console.log のところでログを取ってますが // 通常は処理が入ります。 for (var i = 0; i < 3; i ++) { console.log('a' + i); } /* * 結果 * a0 * a1 * a2 */ これをまず while 文に変換 var i = 0; while (true) { if (!(i < 3)) break; console.log('a' + i); i ++; } /* * 結果 * a0 * a1 * a2 */ で、 setTimeout に
チェックボックスをマウスでなめるようにドラッグするだけで切り替えるJavaScriptのサンプル - F.Ko-Jiの「一秒後は未来」
※ 追記 livedoor Readerのものにより近づけたサンプルはこちら。 livedoor ReaderにOPMLをインポートすると登録可能なRSSの一覧が表示されますが、その画面ではチェックボックス上をマウスでなめるようにドラッグするだけでチェックをON/OFFできるようになっています。 かなり不思議なUIなので、これはどうやっているんだろう？と考えてみたのですが、仕組みは簡単でした。 マウスを左クリックしたままチェックボックスの上を移動させてみてください。(JavaScriptが無効なRSSリーダーから見ている場合はページを訪問してください。) (ドラッグするとテキスト選択されてしまうので、チェックボックスの上でクリックを開始するとテキスト選択されずに済みます。) ソースは以下の通り。簡単に実装するためにprototype.jsを利用しています。 /* require proto
404 Blog Not Found:Digest - 今日にでも使うべきJavaScriptの7つのテクニック
2007年04月25日12:00 カテゴリLightweight LanguagesBlogosphere Digest - 今日にでも使うべきJavaScriptの7つのテクニック 良質の記事だけに全訳したかったのだけど、時間もないので紹介と抄録。 Digital Web Magazine - Seven JavaScript Techniques You Should Be Using Today サンプルコードは、適宜書き換えてあります。 1. Branch when possible - 分岐はなるはやで これは実例を見た方が早いでしょう。クロスブラウザー対応のaddListener()を考える。機能だけを考えれば、以下でOK。 function addListener(el, type, fn) { if ( window.addEventListener ) { el.addE
Web標準化Tips - Web標準普及プロジェクト
特定のWebブラウザの独自拡張仕様を使っていたり、 特定のWebブラウザの表示が間違っていたために、 Mozillaによって実際に問題が発生した事例の修正方法を紹介しています。 また、ここで紹介する修正案は全てWeb標準仕様に基づいた内容となっています。
ブラウザ判別とオブジェクト検出 - Web標準普及プロジェクト
ブラウザ判別とオブジェクト検出 JavaScriptを使ったダイナミックHTMLを実現する場合、現状ではブラウザ毎に別々にコードを記述する必要があります。 そこで多くのサイトではブラウザ判別のコードが書かれています。 function toggleLayer(id){ if (navigator.appName == "Microsoft Internet Explorer") { if (document.all(id).style.visibility == "hidden") { document.all(id).style.visibility = "visible"; } else { document.all(id).style.visibility = "hidden"; } } else if (navigator.appName == "Netscape") { if (
ブラウザ判別では"Gecko/"を調べてください - Web標準普及プロジェクト
ブラウザ判別では"Gecko"を調べてください JavaScriptの互換性検査においてはブラウザ判別とオブジェクト検出にあるように、 オブジェクトの有無によって判定するのが一番確実です。 しかし、CSSの互換性等をJavaScriptで無理矢理切り分ける場合等にはこの手法は使えないので、 その場合はブラウザの種類とバージョンを検査しなくてはいけません。 Mozilla/Netscapeは区別せず、Geckoブラウザ MozillaやNetscape6/7は共に同じGeckoというレンダリングエンジンを使っていて、 Webページの表示性能は(バージョンの差によるものを除けば)全く同じです(バグも)。 そしてこのことはGeckoエンジンを使用する他のブラウザにも当てはまります。 例えばMozilla Firebird(旧Phoenix)やCamino(旧Chimera)等です。 このようなG
Trivial Tracks: Javascriptのクロスブラウザライブラリ
Javascriptを少しでも自分で書いたことある人は、各種ブラウザ間の共通性・互換性の弱さにため息や頭痛を感じた人も少なくないのではないでしょうか サイト上にスクリプトが記載されていて、それをコピペして借用する方法もあるが、経験上こういうコードは意外と完成度が低く、自サイトでは挙動がおかしいということが多々ある。 こう思った人がブラウザ間の差を吸収したライブラリを誰か提供してくれているに違いないと思い探してみるとまず最初に引っかかったのがPrototype.js。 残念ながらこれは間違いではないが、目的がAjaxに重点を置いているため古いブラウザは問題外となっている。 ちなみに正式対応なIEバージョンは6以降と書いてある。 そしてやっと探しあてたのが以下で紹介されている「X Library」 http://www.cross-browser.com/ これの完成度は本当に素晴らし
X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧 - FAX
X Library(クロスブラウザJavaScriptライブラリ)メソッド一覧 翻訳 (via Trivial Tracks: Javascriptのクロスブラウザライブラリ) 原文： XV: X Library Viewer xaddeventlistener xAddEventListener(ele, sEventType, fnEventListener[, bCapture]) エレメントにイベントリスナを登録する。いくつかのブラウザのために、window.onscrollとwindow.onresizeイベントをシミュレートする。 xappendchild xAppendChild(oParent, oChild) 安全なDOMラッパー。 xbackground xBackground(ele[, sColor[, sImage) エレメントの背景色とイメージを取得する。オプシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUI Library
https://labs.cybozu.co.jp/blog/kazuho/archives/2007/11/re_for_settimeout.php
IBM Developer