ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
Neustar Security Services | Neustar
SECURE The Ultra secure suite of scalable cloud network security services provide consistent protection and high performance across all locations. RELIABLE With over 20 years of experience in online security and a global network with over 15 Tbps of dedicated cloud security capacity, Neustar Security Services offers award-winning managed services with proven reliability to thousands of large Enter
ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「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":
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
