最近Androidとの抗争が激化しているago(@kyo_ago)です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 (※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です) セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった(というか全然知らなくてちょっとびびった)ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。(#fooをとるとより高速) 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。 最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。 方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。 遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。 その方法と
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
InnoDBはMyISAMと比較して安全(OSクラッシュや電源断が発生してもテーブルが壊れない)分、書き込みが遅い。データベース屋さんからすると、それは当然のことでMyISAMがおかしいんだ、ということになり、だからバッテリバックアップ機能のついたRAIDカードを使うんだ、という話になる。でも、MyISAMを使っているウェブ屋さんの現場では、場合によって多少データが消えてもかまわないから、安いハードウェアで大量のアクセスを捌きたい... って乖離があるんじゃないかなーと思ってる。 そのような場合には、my.cnf の innodb_flush_log_at_trx_commit パラメータを調整することで、MyISAMに比肩する書き込み速度を得ることができる(そのかわり、クラッシュや電源断の場合は、設定によって直近1秒以内の変更が失われる)。 他のパラメータも含めて書いておくと、データベー
Firefox web browser - Faster, more secure & customizable LinuxLinksにおいてFirefox Tipsのタイトルのもと、Firefoxの高速化を実施するためのテクニックが紹介されている。設定をすることでFirefoxの性能を引き上げ、Google Chromeのように開発ペースの早いブラウザにも対応できると冒頭に説明がある。なお、紹介されているテクニックを試す前に、prefs.jpファイルに保存されている設定のバックアップをとることが推奨されている。紹介されているテクニックは次のとおり。 BleachBitを使う BleachBitをインストールして使う。BleachBitはキャッシュ、履歴データ、一時ファイル、不要な使われていないローカルファイル、ログ、クッキーなどのデータを削除するツール。Windows版とLinux版が提
PHP micro-optimization tips | Alex @ Net PHPコーディングに関する最適化TIPS というのがまとまっていましたのでご紹介。 元記事では、micro-optimization ということで、これらを直すのももちろんだけど、ロジックを直す方がパフォーマンスは改善されるということを言ってるようです。 個人的な勉強がてら、メモとして残します。 ・__call のマジックメソッドを使うと遅い ・staticなメソッドはインスタンス化したオブジェクトのメソッドより速い ・関数呼び出しは、staticなメソッド呼び出しより高速 ・ローカル変数へのアクセスはグローバル変数へのアクセスより速い ・グローバル変数へのアクセスは、オブジェクトのプロパティより速い ・オブジェクトプロパティへのアクセスは、__get, __set を使うと遅い ・初期化された変数はそうでな
あいあい、2日に一度は徹夜の小堤です。 今回は海外のBLOGネタです。 高速化させるための普段から押さえておけば何ともないことを書いておきます。小ネタとして使ってください。結構違いますよ。速度。 文字列長を計る if (strlen($foo) < 5) { echo “Foo is too short”; } 0.00838494300842 if (!isset($foo{5})) { echo “Foo is too short”; } 0.00405502319336(約50%高速) 数値化判定する preg_match(“![0-9]+!”, $foo); 0.0706009864807 type_digit($foo); 0.00814294815063(88.57%高速) 配列に含まれるか判定 if (in_array(‘mangoes’, $keys)) { … } 0.0
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記:2009/07/27 本エントリには続きがあります。 続:PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop(あるいは他の画
どこまで出来るか?!やれるところまでやってやるぜ!!と、威勢が良いのは若い間だけの話。オトナのオトコは、攻めるときはとことん攻めるが自らの限界もわきまえて賢く振る舞うのがスマートってものである。というわけで、今日はMySQLのいろいろな限界についてまとめてみる。皆さんも是非MySQLの限界を知り、MySQLをもっとスマートに使って頂きたい。 SQL文の最大長 MySQLサーバーが実行出来るSQL文の最大長は、max_allowed_packetシステム変数で表される。max_allowed_packetの最大値は1GBである。max_allowed_packetの値はセッションごとにも設定可能なので、デフォルトではそこそこの値(16MBなど)に設定しておいて、必要に応じて大きな対を使うと良いだろう。 データベースの個数 データベースオブジェクトの個数に制限はない。データベースオブジェクトは
前回はWindowsでのサーバやPCのボトルネック箇所の簡単な見分け方をご紹介させていただきましたが、要望がありましたので今回はLinuxの場合をご紹介いたします。 4つの主要ボトルネック要素の復習です。 サーバやPCには4つの主要ボトルネック要素があります。このいずれかがボトルネックとなった場合システム全体のレスポンスが低下します。 CPU使用率 メモリ使用量 ディスクI/O TCPコネクション数 Linuxにおいてはボトルネック箇所を以下のように見分けることができます。 1. CPU使用率 CPU使用率が常に100%に近い場合はCPUがボトルネックであることが判明します。CPU使用状況を簡単に調べるには3つの方法があります。「top」「w」「vmstat」コマンドを使う方法です。 -----------------------------------------------------
Firefoxはページのブラウジングを快適にするため、パソコンに搭載されているメモリを使いまくるという仕様になっています。ふつうの一般ピープルであればだからといってどうということもないのですが、Firefoxを好んで使う人のブラウジングスタイルだと異常なほどのメモリを消費し、もっさりしてきたり、快適さが損なわれてしまうように感じるのもまた事実。 なんとかならないものかとみんなあれこれ試行錯誤しているわけですが、そういう対策で一番お手軽で快適さが損なわれない方法を1つ、ピックアップしておきます。 なお、この対策方法はFirefox、Thunderbird、Mozillaで動作確認しています。 ■最小化したときにメモリ消費量を減らす メモリ消費量を抑える一番簡単な方法です。やり方もとっても簡単。 1. アドレスバーに「about:config」と入力してEnterキーを押す 2. 開いたページ
いつも「MySQLを使うときはこうするべき」という観点から記事を書いているが、今日は逆に犯してはいけない過ちをリストアップしようと思う。 1. 全てのカラムにインデックスをつけるデータベース初心者がもっともやってしまいがちな間違いはコレではないだろうか。インデックスはいい。検索がとても速くなるから。しかし、それと引き替えにインデックスは更新するときにコストがかかるし、その分多くのディスクスペースを消費する。特に更新にかかるコストは時に甚大で、該当するインデックスのページがキャッシュ上にない場合はディスクからいったんそのページを読み込まなければいけない。ディスクアクセスは動作にとても時間がかかるので、インデックスが多数、例えば全てのカラムに付いていたりすると「あれ?固まったか?」というような状態になってしまうことがあるだろう。インデックスは必要なカラムにだけつけるようにテーブルを設計しよう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く