ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
2009-07-16 - 兼雑記 -サイトの rendering のベンチマークをするブックマークレット
たぶんこんな感じでいいんだと思う…5秒ほど body の表示非表示を繰り返して、一回の点滅にかかった時間、表示にかかった時間、消すのにかかった時間、をそれぞれ出す。結果はサイトの一番下に div としてくっつく。点滅の時間は JS の実行時間が入るようになってるので、表示時間+消す時間より微妙に多くなるようになってます。 javascript:c=-1,n="none",f=function(){e=(new(Date)()).getTime()-s,c++,b=document.body,t=b.style,d=t.display;d!=n?z+=e-p:(y+=e-p);e>5000&&d!=n?b.innerHTML+='<div>total: '+e/c+',show:'+z/c+',hide:'+y/c+'(ms)</div>':((t.display=d==n?"block":
SunSpider 1.0.2 JavaScript Benchmark
Try JetStream SunSpider is no longer maintained. We recommend JetStream, which tests the JavaScript techniques used by advanced web applications. ☀SunSpider 1.0.2 JavaScript Benchmark This is SunSpider, a JavaScript benchmark. This benchmark tests the core JavaScript language only, not the DOM or other browser APIs. It is designed to compare different versions of the same browser, and different br
IE8での変化点一覧 + 備忘録 - latest log
IE8 ではかなりの数のメソッドやプロパティが増えているようです。書き残します。 element.getAttribute について追記しました。 window.toStaticHTML window.toStaticHTML は、XDomainRequest や postMessage で受け取った文字列(HTML)をサニタイズ(消毒)するメソッド。 XHRやJsonで受け取った文字列のサニタイズにもシーンを選べば使えるのだろうか。 onclick等のイベントハンドラ系を潰す。 <div onclick="alert('hoge')">hoge</div> ↓ <div>hoge</div> scriptタグを潰す。 <script>alert("hoge")</script> ↓ 無かったことになる CSS::expressionを潰す img { expression(uuClass
お手軽 ブラウザバージョン判定 - latest log
getBrowserVersion() は、ブラウザのバージョン番号(Major[.Minor])を返します。 <html><head><title></title></head><body> <script> function getBrowserVersion() { // @return Number: return window.opera ? (opera.version().replace(/\d$/, "") - 0) // Opera10 shock : parseFloat((/(?:IE |fox\/|ome\/|ion\/)(\d+\.\d)/. exec(navigator.userAgent) || [,0])[1]); } window.onload = function() { alert(getBrowserVersion()); } </script> <
Canvasによる3Dテクスチャマッピングとパフォーマンスチューニング（仮題） - 最速チュパカブラ研究会
MAX 打ち上げのときに川崎さんに「英語の記事書いたら絶対ウケるから書くべきだよ」と言われていつ書こうかなーと思ってたら、そういえば11日は休日だったので、日本語の下書きだけでも一気に書いてみることにしました。 といっても、欲を出してあれもこれも書こうとして、結局まだ書ききれてませんけど。 タイトル案 Javascript と Canvas によるフルスクラッチ3Dプログラミング Javascript と Canvas 3Dプログラミング入門 ドキッ JSだらけの あと、今日（11日）は私の誕生日でもあります。25になりました。そろそろ鏡を見るのが怖くなってきますね。 以下、書きかけ Introduction Adobe MAX 2009 で Spark Project は、拡張現実（AR）のデモを展示し、来場者の注目を集めていた。Shibuya.JS のメンバーもこのデモに感激し、是非
Detecting IE in 12 bytes
Detecting IE in 12 bytes Wednesday, 28 January 2009 Andrea Giammarchi had a interesting article which stated you can detect IE in 32 bytes of code. I wondered if this could be improved, after a few failed attempts I found this to be the smallest and fastest way:- IE='\v'=='v' Pretty cool eh? The entry 'Detecting IE in 12 bytes' was posted on January 28th, 2009 at 12:04 pm and is filed under javasc
Flashから新規ウィンドウ(タブ)を開く際のポップアップブロック回避方法 - os0x.blog
下記はちょっと古い情報です、Re:IE、FirefoxでFlashから新規ウィンドウを開く際にポップアップブロックされる件の回避 - 0xFFをどうぞ 需要はありそうなので、(まだ検証が不十分ですが、)今のところうまくいっている方法を紹介します。 ちょっと補足 2007/08/20 16:00 この方法はポップアップブロックの誤動作を回避する方法であって、ブロックを無効化できるというわけではありません。HTMLでいうtarget="_blank"を指定相当のことがFlashだとブロックされてしまうので、それを回避するだけです。このTips自体は悪用のし様がないと思われます。 PopUp Test package { import flash.external.ExternalInterface; import flash.display.*; import flash.events.*;
ex animo » Blog Archive » StateManager
Due to the success (and quality) of Asual's SWFAddress, I've decided to stop work on this project. SWFAddress is now capable of all the things that StateManager is, so it doesn't seem very beneficial to the open source community to continue development on StateManager. The source code and examples will remain available but no longer be updated, but keep checking xa for other open source code! With
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
