ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況
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. HTMLのimgタグおよびscriptタグで「src=""」が指定されている場合、またはlinkタグで「href=""」が指定されている場合、リクエストが発生してページの取得が実施される振る舞いをするブラウザがあることをNicholas C. Zakas氏が指摘している。しかも空URL指定で取得されるコンテンツは何にも使われることなくそのまま消えていくという、まさに通信帯域だけを消費するという無駄な動きになっているという。 こうした動作の違
[HTML5] アプリケーションキャッシュの使い方
アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。 導入方法 あちこちで語られまくってて今更感あるけど一応…。 マニフェストファイルの作成 まずは何をキャッシュするのか指定するマニフェストファイルを作ります。 UTF-8のテキストファイルを開いたら、拡張子を “.appcache” にして適当な名前を付けて保存。 保存する場所はアプリケーションのルートでいいと思います。 保存したらテキストファイルの先頭に CACHE MANIFEST と追加。目印なので忘れずに。 その後にキャッシュするものとしないものの設定を書きます。 ま
![[HTML5] アプリケーションキャッシュの使い方](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
XMLの第一人者Tim Bray氏「URLに#!入れるな」 | gihyo.jp
Tim Bray氏のブログ記事を解説したものです。Tim Bray氏はXMLの生みの親であり、最近はGoogle Developer AdvocateとしてAndroidの普及に務めています。Twitterをはじめ、最近のWebサービスにて「twitter.com/#!/timbray」のようにURLに「#!」というhash-bang（shebang）が含まれるのをよく目にしますが、Tim氏はこの流行に批判の意を示しています。 hash-bangを含むURLはAjaxを利用するために考えられたしくみです。#以降は単なるフラグメントとして処理されるため、サーバは#より前のURLを解釈しコンテンツを出力します。そしてブラウザにてJavaScriptが#以降を解釈し、以降のパスに相当するコンテンツをAjaxにて取得しコンテンツを書き換えます。このしくみができた背景は、Ajax後のコンテンツをSE
【レポート】X-Frame-Options、ブラウザ対応完了 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable Firefox 4 Beta 5に導入されたX-Frame-Options機能は、現在のFirefoxリリース版の最新版となるFirefox 3.6.9にも取り込まれている。これですべての主要ブラウザの現行リリース版(IE8、Firefox 3.6.9+、Chrome 4.1.249.1042+、Safari 4+、Opera 10.50+)がX-Frame-Options機能に対応したことになる。 X-Frame-OptionsはHTTPレスポンスヘッダに指定するオプションヘッダのひとつ。レスポンスとして返されるコンテンツをフレームの内部に表示して良いかどうかを指定するといった機能になっている。指定できる値はSAMEORIGINとDENY。SAMEORIGINが指定されている
君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンブラウザ不具合特集