ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines. NEW JSCSSP now has support for CSS Media
Nicole Sullivan「再フロー＆再描画：Javascriptを重くするCSS」 - 以下斜め読んだ内容
Yahoo!のNicole Sullivanの2009.3.27のブログエントリ Reflows & Repaints: CSS Performance making your JavaScript slow? ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ 再フロー＆再描画をどうやって減らすか。 TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。 MS独自仕様のcss expression使うな。 のみ。 以下斜め読んだまとめ。 Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中 再描画と再フ
CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transformcssSandpaperを使用した際のtransfor
SelectorGadget: point and click CSS selectors
SelectorGadget is an open source tool that makes CSS selector generation and discovery on complicated sites a breeze. Just install the Chrome Extension or drag the bookmarklet to your bookmark bar, then go to any page and launch it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then g
Mutation Event は、薬にも毒にもなるから気をつけて - latest log
jQuery1.3β みた(jQueryのコードをまじめに見たのは、これが初めてかも) 比較演算子(==)が厳密比較演算子(===)に jQuery の CSSセレクタが、Sizzle 0.9 になった。 以前の Sizzle に存在した“Firefox,Operaでクエリ結果をキャッシュする機能”が、Sizzle 0.9 からはカットされてる。 Sizzle 0.9 から キャッシュ機能 が消えたわけを想像してみる CSSセレクタの結果をキャッシュする方法の一つに、Mutation Event がある。 document.addEventListener("DOMSubtreeModified") ってやると、DOMツリーの全ての改変をフックしてくれる。 ちょっと前の Sizzle は、"DOMNodeInserted", "DOMNodeRemoved", "DOMAttrModifi
WebKit の CSS の字句解析部分を JavaScript に移植しました - IT戦記
これを JS に移植しました。 http://svn.webkit.org/repository/webkit/trunk/WebCore/css/tokenizer.flex ポイント それなりに汎用的な Flex みたいなものを作ったので、その部分は CSS 以外にも使えると思います。 あと、定義を文字列で書かずに正規表現オブジェクトで書くのでバックスラッシュをエスケープせずに書けます。ですので、ほとんどの箇所は WebKit の tokenizer の定義をコピーするだけで済みました。 その辺のアイデアは JavaScript で構文解析: Days on the Moon を参考にしました あと http://svn.coderepos.org/share/lang/actionscript/ascss/src/css/CSSLexer.as id:gyuque さんの ASCSS
HTML要素の位置取得 - elm200 の日記(旧はてなダイアリー)
趣旨 ウェブページとして描画された HTML 要素の画面上の位置を取得する。一見簡単そうに見えるこの作業が、現在実装されているブラウザ上ではとてつもなく難しい。そのことを以下で説明していく。 情報ソース この問題に関して調べたところ、最もよく出来ているエントリは、susie-t 氏による offsetTop/offsetLeft/offsetParentの闇 である。とてつもない力作で、実に多くのケースにわたって、包括的に探究が行われている。まるで犯人を追跡する刑事のような執拗さである。氏の自己紹介では「ナマケモノのプログラマ」とか謙遜されているが、これはとてもナマケモノにできる仕事ではない。 基本中の基本として W3C CSS 2.1 の次の章を抑えておきたい。 8 Box model 9 Visual formatting model 10 Visual formatting mode
スタイルシートにイベントを書くことはできないんですか？例えば,td{onmousemove:'move()';} - スタイル... - Yahoo!知恵袋
IE限定では behavior でできます。 td { behavior:url(aaa.htc); } として，aaa.htc にjavascriptを書きます。イベントの仕分けもこの中で指定します。 <SCRIPT type="text/javascript"> attachEvent("onmousemove",move); function move(){ ... } </SCRIPT> スタイルシートはHTMLから文書構造以外のものを括り出そうという営みですから，スクリプトも括り出されてしかるべきです。 ただ統一された方法ではない。 Mozilla系では-moz-bindingがありますが，behaviorほど知られておらずXBLは敷居が高いです。 td { -moz-binding:url(aaa.xbl#move); } 現状ではjavascriptで同様の結果を得るのが現実
BJKit(BeautifulJapaneseKit)（ツール） - アイデアマンズ株式会社
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
CSSのセレクタをXPathに変換する - nazokingのブログ
Warning! 2008/5/22追記：このエントリは情報が不十分だったり間違いが含まれてたりするので、下記URLのページを参考にするようにしてください↓ http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm CSS3あたりをXPath1.0あたりに変換する表 CSSXPath .class//*[@class="class"]*1 .class//*[contains(concat(" ",@class," ")," class ")]*2 tag//tag #id//*[@id="id"] tag.class#id//tag[@class="class"][@id="id"] .class.class2//*[contains(concat(" ",@class," "
expression() のまとめ
前書き expression()のことをダイナミックプロパティといいます。 スタイルシートのプロパティで body { height: expression(); } みたいに使います。 簡単に言うと、CSSの中でJavaScriptが動かせる、って感じです。 IE5以上での、独自拡張です。 Googleで検索しても、 イマイチまとめサイトとかサンプルみたいなものがなかったので、 値としてスクリプトのようなものが書けるということしか知らないのですが、 いろいろ実験してでてきた経験則を、 ここでまとめて紹介して置いておくことにします。 あくまで経験則なので、もしかしたら間違ってたり もっとうまいやり方があったりするかもしれません。 備考 IE5以上で、 expression() というプロパティを使うことで、 ダイナミックにページや要素のスタイルを変えることができます。 一番簡単で、かつ一番
我的春秋: 振る舞い分離 JavaScript ライブラリ一覧（編集途中）
我的春秋: 関連エントリー 2006-06-11: 振る舞い分離 JavaScript ライブラリ一覧（途中） 2006-06-10: 続 JavaScript ソースが HTML から消える日 2006-01-05: JavaScript ソースが HTML から消える日 lib. behaviour.js （v1.1） getElements BySelector cssQuery() jQuery prototype.js （v1.5+） 対応ブラウザ
IE の getAttribute / setAttribute: Days on the Moon
DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基本的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。 この (手抜き) 実装が原因で、getAttribute
IT戦記 - CSS の勉強会をしました
2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat
javascript - CSSをいじくる : 404 Blog Not Found
2007年03月12日02:00 カテゴリLightweight LanguagesiTech javascript - CSSをいじくる JavaScriptでDOM要素のstyle属性をいじるのは簡単ですが、これがCSSともなるとobject treeが深くて大変で、Webを見回してもほとんど参考例がありません。動的にCSSをいじっているサイトの例は徳保さん趣味のWebデザインぐらいしか見かけません。 というわけで、習作を兼ねて、style属性ではなくCSSをまるごと書き換える関数を作ってみました。 CSS Manipulation via JavaScript http://www.dan.co.jp/~dankogai/css/css_handlers.html 解説 動作確認はFirefox 2, Opera 9, Safari, Mac IE5で行っています。Safariでのみ
【HTML】スタイルシート？？ <div style=”display:none”>なんたらかんたら</div> このタグって どんな時使いますか？
【HTML】スタイルシート？？ <div style=”display:none”>なんたらかんたら</div> このタグって どんな時使いますか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
?D of K
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in
http://youmos.com/news/import_js