+new Date を Date.now() に差し替えると200〜400% 高速化も - latest log
CSS を利用したアニメーションでは、必ず現在時刻を取得するコードが入ります。 var now = +new Date; ECMAScript-262 5th では Date.now() が新しく追加されました。 Date.now() は +new Date と同じ機能(現在時刻を数値で返す)を持ちながら、new の必要がないため速そうです。 ベンチ <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { Date.now || (Date.now = function() { // Date.now が実装されていないブラウザ用の実装 return +new Date; }); job1(); job2(); } function job1() { var
latest log
(ε・◇・)っ ひっこした http://uupaa.hatenablog.com/ (ε・◇・)з そのうちここは綺麗サッパリ消えます via http://www.mobilexweb.com/blog/android-4-0-browser-html5 Android Browser 4.0 は将来的に Chrome に置換されるけど、まだ時間が必要。4.0 に搭載されているブラウザは従来の改良版 Google Chrome と Android Browser のブックマーク同期 レンダリング速度が向上 WebKit Core と V8 Crankshaft を更新し、JavaScript ベンチマークスコアが5.5速倍に New Features SVG Motion Sensor API window.addEventListener("deviceorientation", .
textContent を使うと Opera10.60 がどんどん重くなる - latest log
追記 http://jsdo.it/uupaa/u0QX に最小化したコードを載せました 今回のケースでは、条件(1)と(2)を満たす場合に、どんどん重くなっていくようです。 function bench() { // (1) nodeList を関数内部で毎回取得している var nodeList = document.getElementsByTagName("li"); i = 0, iz = nodeList.length; for (; i < iz; ++i) { // (2) textContent に代入している nodeList[i].textContent = i; } } 本文 原稿書きの資料用に、最新のブラウザでベンチマークを取得していたところ、Opera10.60 のスコアだけがどんどん悪くなる(遅くなる)ケースがあることに事に気が付きました。 条件を絞り込んでい
MessagePack + WebWorkers - latest log
追記 @os0X さんと @edvakf さんからアドバイスをいただいたので、本文とコードを修正しました。 postMessageが文字列に限定されているのは旧仕様で、Firefoxや最近のWebKit(Chrome5とか)はオブジェクトをやり取りできると思います via @os0X http://twitter.com/edvakf/statuses/15644433920 自分でも試してみました。 http://javascript.g.hatena.ne.jp/edvakf/20100607/1275931930 via @edvakf http://twitter.com/os0x/statuses/15621293442 本文 昨日の日記の続きです。 IE9 と Opera で動くようになり、ちょっと速くなり、WebWorkers でデコードするモードを追加しました。 http:
HTML5 Audio デモ - latest log
HTML5 で、ブラウザの機能として「音」を再生する仕様が追加されました 音を再生するには、<audio src="..." autoplay> を HTML に埋め込むか、new Audio(src).play() とします。 仕様 ⇒ http://www.w3.org/TR/html5/video.html クロスブラウザ化する上での問題は2つ 1. 古いブラウザ向けに Silverlight(XAML) や Flash を使い、それらの違いも吸収しなければならない。 2. サポートしているコーデックの違いを吸収する仕掛けも必要。 Browser uu("Audio") HTML5Audio SilverlightAudio FlashAudio Firefox3.0 mp3 - mp3 mp3 Firefox3.5+ mp3,ogg,wav ogg wav mp3 mp3 Safa
Ajax リクエストの順番を直感的に記述可能な uu.ajax.queue を追加 - latest log
uu.ajax.queue は順番や待ち合わせなどの規則を指定した Ajax リクエストを可能にします。 uu.ajax.queue(cmd, [url, ...], [option, ...], [fn, ...], lastfn, ngfn) cmd には "0+1+2" や "a>b+c>d" などのような規則を文字列で記述します a+b なら a と b を同時に読み込みます。 ブラウザ毎に、同時にリクエスト可能な数に制限があるので、同時にならないこともあります。 a>b なら a をロード後に b をロードします。 a や b の部分には一文字の英数字(0-9,a-z,A-Z)を指定できます。 ここで指定した ID は lastfn や ngfn の第一引数(hash.id)に設定され、リクエストの追跡に利用できます。 option オプションを Hash で指定します。省略可能
自作ライブラリから Firefox2 と Opera9.2x のサポートを削ります。 - latest log
うやむやにサポートを切るのは忍びないので、ちゃんと私の考えを書いておきます。 自作ライブラリから、Firefox2とOpera9.2xのサポートを削ります。スキル不足でサポートできない訳では無く、開発リソースを集中する必要があるからです。 どうしてもサポートして欲しいと(もし)言われたら 「それは有料で」となります。 http://twitter.com/uupaa/status/5331581398 全て(100%)のシェアをカバーするようにブラウザをサポートするのが「理想」とするならば、理想の実現には「とても時間とお金が掛かる」というのも「現実」です。実際には全てのブラウザのサポートは無理なので、100% を 99% に減らすか、95% で妥協するか、いずれにしても切り捨てるブラウザの線引きをしなければなりません。 http://twitter.com/uupaa/status/533
良く訓練されたスライダー - latest log
JavaScript で作った UI 部品の話になると、 jQuery UI とか、jQuery TOOLS あるじゃん とか良く聞きますね。 jQuery UI http://jqueryui.com/demos/ ソータブルなリスト http://jqueryui.com/demos/sortable/default.html スライダー横 http://jqueryui.com/demos/slider/default.html Drag http://jqueryui.com/demos/draggable/default.html Drop http://jqueryui.com/demos/droppable/default.html jQuery TOOLS http://flowplayer.org/tools/index.html UI の話だったら、jQuery よりも
arguments と Function.apply(this) を上手に扱う - latest log
追記: apply("add string") で何が渡ってるのか見てみました。 Chrome以外のブラウザは new String("add string") が渡されてました function func1(var_args) { func2.apply("add string", arguments); // this に "add string" そのものを渡す } function func2(var_args) { alert("typeof this = " + typeof this); if (this instanceof String) { alert("this instanceof String"); } alert(this); // -> "add string" } typeof this this instanceof String Google Chrom
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
こっそりと特定の要素をマーキングし取得する - latest log
CSS + JavaScript(uupaa.jsも)を使い、ユーザに悟られないように要素をマーキングし、要素を特定する方法です。 昨日までの一連のエントリから、ユーザに知られずに要素をマーキングする妥当な方法がやっと見つかりました。 IE なら ruby-align: center を、その他のブラウザなら outline: 0 solid black を使う。 outline: は各ブラウザともバグだらけで、まだまだ現役で使えないプロパティだから、こういう用途にはもってこい outline: 0px solid black を指定すると実際は描画されない(描画されているかもしれないが見えない) IE は outline: に対応していないため、ruby-align で代用する。ruby-align は IE 独自機能なので安心して使える。 できた。 以下が、CSS :hover と一致
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
