ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
htmlソースからDOM生成用のJavaScriptコードを吐くツール【DOM Tool】｜JavaScriptプログラムメモ｜プログラムメモ
◆ DOM Tool http://muffinresearch.co.uk/code/javascript/DOMTool/ 便利です。 htmlソースを入力して【Create DOM Statements】ボタンを押すと DOM生成用のJavaScriptコードを吐いてくれます。 例：＜div id="text"＞＜/div＞というhtmlコードを JavaScript で実行したい。 HTML： <div id="test"></div> OUTPUT： var div1=document.createElement('div'); div1.setAttribute('id','test');
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
要素の追加 (append) insertBefore
<script type="text/javascript"> <!-- window.onload = function() { if (!document.createElement) return; var ele = document.createElement("div"); // 新規に要素（タグ）を生成 var str = document.createTextNode("あいうえお"); // 生成する要素の値（文字列） ele.appendChild(str); // 生成する要素の作成（要素に値を追加） document.body.appendChild(ele); // このページ (document.body) の最後に生成した要素を追加 } // --> </script> 既存のエレメント（要素）に別の要素を追加する場合は createElement() を使用
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript : insertBefore
