ブラウザ動作の理解－レンダリングの負荷を測る | ゆっくりと…
転勤・単身赴任というライフ・イベントがあり、すっかり更新が止まっていましたが、前回 に続き、「Rendering: repaint, reflow/relayout, restyle」から後半のレンダリング負荷を測るツールの使い方をお届けします。記事中の リフロー や リペイント といった用語は、前回記事「用語の定義」 を参照してください。 元記事は初稿が2009年12月でツールのバージョンも古いため、現時点の最新バージョンで記事を再構成しています。また実行環境によって観測結果が異なるため （非力なマシンの方がレンダリング負荷の割合が高いけど、サンプルとしては分かりやすい）、以下に本記事で試した環境を記しておきます。 dynaTrace AJAX Edition バージョン：Version: 2.1.0.603, built on 2010-12-15 ブラウザ、PC：IE8 / Wind
CSS/JavaScriptのAsynchronous Loadingをめぐる熱い論議 | ゆっくりと…
2011年2月21日 追記 $script も新規参戦してきました。高々 643 バイトで、非同期読み込みや依存性の制御などができるそうです。いずれ紹介したいと思います。← 「新参の超軽量JavaScript非同期ローダー3種を徹底比較」で紹介しました！ これらのローダーのうち、LABjs の作者が 「On Script Loaders」 で HeadJS と ControlJS について意見をしていて、面白そうです。そのうち日本語訳や各ローダーの比較を行ってみたいと思います。 ローディング・スクリプトをめぐる議論 さてさて、本エントリーの本題は前述のローダーではありません。「Prefer asynchronous resources」 や Google Analytics のスニペット に示されているような、ローディング・スクリプトの変遷をまとめてみます。 これらのスクリプトのごく初期は
PVMとPVHVMの性能比較 at nkjmkzk.net
A Place to discuss Oracle VM, Linux and Other Great Software.PVMとは準仮想マシンのことで、より高性能を求めてカーネルがゲストOS専用に改造されています。 一方、HVMとは完全仮想マシンのことで、カーネルには何ら手が加えられていません。 これまでは単純にPVMとHVMの性能を比較すると圧倒的にPVMが勝っていました。HVMで最も性能劣化が顕著なのは下記2点です。 ネットワーク、ディスクI/O メモリ管理 しかしネットワーク、ディスクI/OについてはHVMであっても実はPVドライバを別途インストールすることでPVMと遜色ない性能を確保することが可能でした。 ＊このHVMにPVドライバをインストールした仮想マシンのことを属にPVHVMと呼んでいます。 問題だったのはメモリ管理です。HVMのゲストOSのメモリアドレスから物理メモリのア
linuxデスクトップ環境をたったの3ステップで高速化する方法 - ぴょぴょぴょ？ - Linuxとかプログラミングの覚え書き -
各所で話題になっていますが、Linuxを劇的に高速化する方法が発見されました*1 *2 *3。特にブラウザなど複数のアプリケーションを同時に起動した状態では、体感速度がびっくりするほど向上します。 高速化する方法も簡単です。カーネルの再構築という難しい作業は不要で、設定ファイルを数行書き換えるだけです。是非試しましょう！ ステップ-1: ~/.bashrc の編集 ~/.bashrc の末尾に以下の4行を追加します。 if [ "$PS1" ] ; then mkdir -m 0700 /sys/fs/cgroup/cpu/user/$$ echo $$ > /sys/fs/cgroup/cpu/user/$$/tasks fi ステップ-2: /etc/rc.local の編集 /etc/rc.local の末尾に以下の2行を追加します(2010/11/24更新。不要なmkdirコマンド
mod_pagespeed をちょっとだけ試してみた - 酒日記 はてな支店
Google の Page Speed の Apache module 版 mod_pagespeed をインストールして、ちょっとだけ動きを見てみた。 インストールは Ubuntu に deb パッケージで。 $ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb # sudo dpkg -i mod-pagespeed-beta_current_amd64.debconfig はデフォルトで入るものそのまま。 <IfModule pagespeed_module> SetOutputFilter MOD_PAGESPEED_OUTPUT_FILTER ModPagespeed on ModPagespeedUrlPrefix "http://localhost/mod_p
すべてZIPにまとめて高速化、Firefox 3.7で対応 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable MozillaのAlexander Limi氏がMaking browsers faster: Resource Packagesにおいてブラウザの動作を高速化させる方法を提案している。ブラウザ側の対応だけでよく、サポートしていないブラウザが閲覧しても影響がなく、現在の枠組みの中で簡単に実装して実現できる。Alexander Limi氏はPlone CMFの開発者であるとともに、以前はJarnやGoogleで働いていたこともある。 HTTPリクエストの数を減らすことでWebページの高速な表示を実現しようというテクニックのひとつにCSS Spritesと呼ばれる手法がある。これは複数の画像を一つの画像にまとめ、レンダリングの段階でCSSの分割表示機能を使うというもの。HTTPリク
404 Blog Not Found:HTTPサーバーのパイプライン対応
2006年12月21日17:30 カテゴリSciTech HTTPサーバーのパイプライン対応 今回は、HTTPのパイプラインの話。 「RFC2616の同時接続数の規定」@水無月ばけらのえび日記 「HTTPの同時接続数はどうあるべきか? (slashdot.jp) 」というお話。誰も原文を引用していないのが悲しかったので、引いておきます。 スラッシュドット ジャパン | HTTPの同時接続数はどうあるべきか?-taka2さんのコメントそれなら、「同時接続」しなくても、結果が返ってくる前に次のリクエストを送出して「リクエスト送信」と「結果受信」を並行して行えるようになれば、スループットの向上は見込める。 それがパイプライン化 [mozilla-japan.org]で、同時接続するよりも効率が良い。パイプライン化の前に、HTTPで何が行われているのかを、実際に見てみよう。telnetコマンドがあ
blog.8-p.info: Facebook の BigPipe と TTI
Posted at 2010/10/22 01:59, Modified at 2010/10/22 03:42 Facebook のフロントエンドは結構かわったことをやっていて、例えば、ログイン後の http://www.facebook.com/home.php には <div id="pagelet_home_stream"></div> みたいな空の HTML があり、その後に <script>big_pipe.onPageletArrive({ … });</script> <script>big_pipe.onPageletArrive({ … });</script> ... と script 要素が何個もならんでいる。 BigPipe: Pipelining web pages for high performance この仕組みは (変数名のとおり) BigPipe と呼
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
JavaScriptの高速化3 - Hashによる検索を活用することで、ドラッグをもっとスムーズに - latest log
IE6のベンチスコアを追加 補足を追加 アイコンやウインドウをつかんでずずっと移動する。 この動作をもっともっとスムーズにするために、何ができるか考えてました。 以下はサンプルコードです。 uuClass.MyDrag = uuClass.Generic(); uuClass.MyDrag .prototype = { construct: function() { // ウインドウを包括するオブジェクト this._frame = uu.id("WindowFrame"); // ウインドウのタイトル部分でmousedownされたらhandleEventを呼び出す。 uu.event.set(this, uu.id("WindowTitle"), "mousedown"); }, handleEvent: function(evt) { uu.event.stop(evt); // イベ
High Performance Web Sites
14 Rules for Faster-Loading Web Sites These rules are the key to speeding up your web pages. They've been tested on some of the most popular sites on the Internet and have successfully reduced the response times of those pages by 25-50%. The key insight behind these best practices is the realization that only 10-20% of the total end-user response time is spent getting the HTML document to the brow
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
2分でわかる uupaa.js の サクサク :: handsOut.jp
スライド1: 2 分でわかる uupaa.js~ Speedy ~uupaa.js@gmail.com スライド2: 今日のテーマは「サクサク」 スライド3: サクサクにするには1. 名前解決コストを減らす2. ガベージレス3. Hash で評価4. Hash の事前生成5. イベントハンドラの軽量化 スライド4: 1. 名前解決コストを減らす• スコープ内に alias を作成し、そちらを参照する– STYLE B は JIT 非搭載ブラウザで特に効果的例: IE6で 6%, IE7,IE8で 9%, Firefox3で 12%, Opera10で 3% 高速化例: 関数の alias を用意すると IE6で 2.7倍 高速化// 元のコード (STYLE A)var _regexp = /regexp/;(function() {(function job() {for () {
【レポート】JavaScriptコードのノンブロッキングダウンロードを実現する方法 | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. WebアプリケーションやWebサイトはますますJavaScriptに依存するようになりつつある。ページレンダリングという観点でみた場合、JavaScriptのサイズはユーザ不満度に与える影響が大きい。ライブラリも含め、利用するJavaScriptのコード量が増えるごとにこの部分は無視できない問題として顕著化してくる。このあたりの高速化テクニックはWebデベロッパが一通り抑えておきたいポイントだ。 このあたりの話がWhat is a non-
グーグルが構築した大規模システムの現実、そしてデザインパターン（3）～教訓編
グーグルが「Evolution and Future Directions of Large-Scale Storage and Computation Systems at Google」（グーグルにおける、大規模ストレージとコンピュテーションの進化と将来の方向性）という講演を、6月に行われたACM（米国計算機学会）主催のクラウドコンピューティングのシンポジウム「ACM Symposium on Cloud Computing 2010」で行っています。 講演の内容を4つの記事（MapReduce編、BigTable編、教訓編、デザインパターン編）で紹介しています。この記事はBigTable編の続き、教訓編です。 大規模分散処理システムの構築から学んだこと ここからは、グーグルがたくさんのシステムを経験して学んだことと、それらのデザインパターンなどを紹介していきたい。 まず、大きく複雑な
PacketShader - GPU-accelerated Software Router
New: The I/O engine is now available! We have partially released the source code used in this work. You can find the user-level packet I/O engine for Intel 82598/82599 NICs here. We do not have a definite release plan for other parts of the PacketShader code not made available on the web as of today. What is PacketShader? PacketShader is a high-performance PC-based software router platform that ac
[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック
IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上：test 1の測定結果（適用前：CSSの後に読み込み開始） 下：test 2の測定結果（適用後：CSSと並列で読み込み） [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1：ごく普通に条件付きコメントを使用 test 2：条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1：ごく普通に条件付きコメントを使用を参照 これを並
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
ASP.NET Web: The Official Microsoft ASP.NET 2.0 Site : Home Page
llamerada on Twitter: "Googleの新しい画像検索UIを少し調べてみたら、画像のサムネイルをbase64でエンコードした状態でDOMに埋め込んだ上で、表示する際にはcanvasに流し込んでいた。これだと画像のサムネイルを読み込む毎にhttpコネクションが発生することはないので非常に高速なはず。"
