第3回 クロスブラウザの傾向と対策 | gihyo.jp
こんにちは、太田です。第1回は各ブラウザの特徴をまとめ、第2回は環境作りについて解説したので、ようやく今回からクロスブラウザの本題に入っていきます。まずはクロスブラウザ対応のパターンを整理し、そのパターンごとの対策をまとめます。 クロスブラウザとはなにか そもそも、クロスブラウザ対応とはどういうことでしょうか？ここで、この連載におけるクロスブラウザの定義を決めておきます。 サポート対象のブラウザで設計通りの表示・動作をして、たとえ未知のブラウザであっても、そのブラウザがWeb標準に沿っているなら最低限の表示・動作をすること サポート対象のブラウザについては第1回で解説した通りですが、メインターゲットはIE（6/7/8）、Firefox（3.6）、Chrome（4.1）、Safari（4.0.5）、Opera（10.51）とします。カッコ内はフルサポートするバージョンで、それ
イベントハンドラからイベントリスナへ - 高密度商業地域
JavaScript において、イベントハンドラを使ったイベント処理から、イベントリスナを使ったイベント処理にコードを変えたので、その手順などを備忘録がわりメモです。 その前段として、簡単なまとめ。 ■「イベントハンドラ」とは… JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のこと。 onClick、onMouseOverなど。 （イベントハンドラとは (event handler)： - IT用語辞典バイナリ） ■「イベントリスナ」とは… 何らかのイベントが発生した場合に呼ばれる関数を持つクラス。 ■イベントハンドラを使うメリット ・簡単 ・ブラウザの違いをあまり意識する必要がない ■イベントハンドラを使うデメリット ・HTML要素内にJavaScriptコードが混在することになり、HTMLの見た目が煩雑 ・同じ要素に同じイベントハン
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
最近javascriptでDOMをクロスブラウザで触ってみたまとめ - 走り書き.log
最近javascriptを使ってクロスブラウザでDOM操作とかしてみたので，それで分かったことや残したいことを今のうちにまとめておきます． Ajaxについても書こうとしたけど時間やばくなってきたので次回まとめる． なお自分で発見したことはほとんどなく，ほぼWeb上のリソースを参考にして書きますが，あまりに多いので割愛します．申し訳ありません． Webすごい！すばらしい！！ ■DOM要素のプロパティのブラウザによる違い DOM要素のプロパティはブラウザによってかなり違います． だからクロスブラウザでjavascriptをがしがし動かそうとするとすごく大変． なのでちょっとコツみたいなものをまとめます． ※使用したブラウザはIE8・Firefox3.6・Google Chrome8 dev版 要素のプロパティを調べるときはブラウザの開発者ツールを使う 私は「どの要素がどういうプロパティを持つか
JavaScriptベストプラクティス30選-jsEdu
#jsEduから適当に選んで日本語にしたものです。 訳とかは全く正確ではなく、as possibleなど表現をかなり省いてるので命令口調になってます。 フィーリング的なものはあんまり入れてないので、興味をもったらTogetter – 「JavaScriptのベストプラクティス大会 jsEdu」を読みましょう。(まとめた奴はこれの10倍くらいありますが、被ってるのや関係無いのもあるので読める程度の量です) 全てを確認したわけではないので、正確性は保証しかねます。 ==ではなく===を使うべき (自動的に型変換に行われないのでバグが減る、高速) new Object() and new Array() よりも[] or {}を使うべき。 []や{}の方がシンプル JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナルで出てくるのは間違いだと思う。 []
javascript高速化のポイント12
Swift/Objective-C/Java/Ajax/JavaScript/CSSなどの情報、開発中にはまったことなどをメモしていきます。 WEBアプリケーションのパフォーマンスにおいて、RIAの普及によりクライアント側の実装も複雑化してきておりサーバ側だけでなくクライアント側のパフォーマンスも非常に重要な要素となっている今日この頃。 複雑なクライアントを作ったときに、javascriptのパフォーマンスが気になったので実装レベルのイディオム的に高速化できるポイントをまとめてみた（羅列してみた）。 まぁ他にもjavascriptのロード方法とかiframeの使い方とか、はたまたjQueryなどのフレームワークを使用しているとか色々あると思うが、それはまた次回ということで。 １．length の参照を減らす ２．タイマ値はなるべく長く ３．同じイベントに登録する関数が多い場合は実行制御関数
JavaScriptを高速化する31のチェックリスト | エンタープライズ | マイコミジャーナル
Is your JavaScript SLOW JavaScript? Amy Hoy氏およびThomas Fuchs氏がIs your JavaScript SLOW JavaScript?において、JavaScriptアプリケーションのパフォーマンスをチェックするためのチェックリスト [PDF]を公開している。印刷して利用できるように工夫されたチェックリストで、31のチェック項目がある。紹介されているチェック項目は次のとおり。 scriptタグは正しい位置に記述されているか DOM MonsterブックマークレットでDOMを分析しパフォーマンス問題を明かにする キャッシュヘッダを正しい状態にする 結合、インライン、事前キャッシュ ミニファイ、Gzip圧縮 Smush、CSS Script、Favicon フレームワークの確認 ラナウェイタイマの管理 DOMコード効率の最大化 ノードセレ
iPhone Webアプリにおける13のJavaScript高速化アレコレ：マピオンラボ(Javascript)
こんちは、中村です。 先日マピオンラボよりリリースしたiPad用地図「マピオンタッチ デラックス」のコアとなるフリースクロール地図ライブラリの開発を担当させて頂きました。せっかくなのでターゲットブラウザをMobileSafariに設定し、比較的スペックがプアなiPhone3Gや3GSでも十分な速度で動作するようJavaScript部分の高速化をアレコレ調べてみたのでまとめてみます。一番低スペックなiPhone3Gで実際にどの程度早くなるかをタイマーで計測してみましたってのが本エントリーのミソです。 JavaScriptパフォーマンスチェック - Googleドキュメント 1. new Object より {}（Objectリテラル） オブジェクトを１万個生成するならばリテラルで記述することで約26ms高速化！ loop=10000; for(var i=0;i<loop;i++){}; /
CC Resources for Shogi Applications | 将棋アプリ用クリエイティブコモンズ画像
CC Resources for Shogi Applications 将棋アプリ用クリエイティブコモンズ画像 2ちゃんねるの将棋・チェス板・ボナンザ専用スレの駒職人1です。以下の素材は、当該スレでmind氏が開発されたCSA Shogi for Win 改良版用の駒/盤リソースを、UIの新規開発に利用しやすいであろう形式に変更したものです。駒/盤素材を一回り大きくし、アルファチャンネル付きPNG画像とすることで表示系のレイヤー化を容易にしています。 Hi, I'm Koma-Shokunin 1 in Bonanza article thead, at Shogi / Chess board in 2 Channel BBS. Here I place some Shogi pieces and gameboard images, which I originally created f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://javascriptrocks.com/performance/