タグ

JavaScriptとperformanceに関するrc-2のブックマーク (8)

  • JavaScriptコーディング等を書く上でのパフォーマンス確認事項30:phpspot開発日誌

    30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項30。 自分へのインプット&メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない(使った事ないですが) for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列

  • ブラウザ別のタイマ性能比較 - bits and bytes

    えええ、先月あったMozilla Japan - The Future of JavaScript -presented by Mozilla & Shibuya.JS-にかなり遅刻して行って、まんまとじゃんけんで勝ち残ってJohn Resigと握手してもらってサイン入りFirefoxマウスパッドを持って帰った熊谷です。 そのJohn ResigがFirefox3でタイマの性能がどうなったか、FirefoxのほかにSafariとOperaとあわせて タイマ呼び出しの遅延 タイマ呼び出し間隔の安定度 複数タイマを使用するときのスケーラビリティ 利用可能な最小呼び出し間隔 について調べたはなしを John Resig - Analyzing Timer Performance で書いていたのでご紹介。 この記事ではOSXでFirefox2, Firefox3, Opera9, Safari3に

  • for 文を setTimeout に変換する - IT戦記

    for 文で 100 項目とか 1000 項目とかあるテストケースを処理するとブラウザが固まる。 こんなダイアログが表示されます。 ということで for 文を setTimeout や setInterval に変換する事で定期的にブラウザに処理を戻すことができる。 // ここでは console.log のところでログを取ってますが // 通常は処理が入ります。 for (var i = 0; i < 3; i ++) { console.log('a' + i); } /* * 結果 * a0 * a1 * a2 */ これをまず while 文に変換 var i = 0; while (true) { if (!(i < 3)) break; console.log('a' + i); i ++; } /* * 結果 * a0 * a1 * a2 */ で、 setTimeout に

    for 文を setTimeout に変換する - IT戦記
  • ぶいてく: 【JavaScript】 高速化プロジェクト その2

    先の投稿からずいぶん時間が経ってしまったが続編「その2」を書いてみる。 まず、問題となったものがどんなアプリかであるが、これは下図のように、スプレッドシートのような動作をするJavaScriptアプリで、サーバから必要なデータを初期表示の際にいっぺんに取ってきて、あとはブラウザ環境だけで動作するというものであった。タブを押すと別の画面が表示されるがサーバへのアクセスはない。表示されているタブの中に複数のテーブルがあり値を入力変更できる。しかし、値を変化させると隠れている他のタブの値まで影響するので、計算が多岐にわたって遅くなってしまう。これにはいくつか問題となるコーディングがなされていた。 問題となっていた部分を解決することで効果があった順に挙げると以下となる。 1)イベントリスナーの多用をやめる 2)DOMへの直接参照をやめる 3)数値計算の誤差は最後にまるめる 1)イベントリスナーの多

  • ハタさんのブログ : Javascriptによる大規模開発の覚え書き

    未だに半年前のエントリにブクマされるみたいなので、もう少しjavascriptについて書いてみる。 今回は大規模化開発におけるJavascriptの注意点とかそういうの。当てはまらない環境の方もいます。(しかも基的な事だらけで大したことは書いてないです) ほぼリッチクライアントを主目的としたjavascripterとコードを対象とします。 どちらかというと、ライブラリを提供する側の視点から 1.ログを出力せよ あなたが書いたコードは遅い、と必ず言われます。なので言われる前から、自分の書いたコードの処理時間をログするようにしましょう。 次のような処理時間を計測するロガーを作ります。 var TraceLog = function (){ this.startTime = -1; var outer = document.getElementById('_outer'); if(oute

  • はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記

    はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr

    はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
  • Pure JavaScript Template Engine その弐 - mixi engineer blog

    どうも、こんにちは。hirokiです。前回は、HTML::Template::ProのJavaScript実装を紹介させていただきました。今回はその実装部においてのちょっとした工夫についてと、Webフロントエンドのパフォーマンスチューニングについて簡単にまとめさせていただきます。 正規表現の話 通常、テキストベースのDSL評価系を作成する際にはyacc/lexなどで文法記述を行うのが定石なんですが、 シンプルな文法であること 構文木の評価からコードジェネレートに方向性を転換した テキストマッチングの回数や高速化のための制御がしやすい などの理由から、HTML Template(JavaScript)では正規表現ベースの文法解釈を行っています。( HTML::Template::Proのyacc文法ファイルをそのまま使えば記述は楽だったのですが...)以下に実際に利用している正規表現を示しま

    Pure JavaScript Template Engine その弐 - mixi engineer blog
  • ハタさんのブログ : Javascriptによる大規模開発の覚え書き。高速化編

    前回書いた「Javascriptによる大規模開発の覚え書き」が凄いことになってました。 今回は、省略した「5.高速化せよ」について書きます。 僕にとってjavascriptは非常に高速な言語です。それは何が高速か 開発速度が高速である 開発速度、及びそこに至るまでの修得速度はとても高速です。動的言語を上手く操る開発者はもちろん、開発に不慣れな(言葉が悪いけど)新人達でさえ「動く」モノをサクっと作ってしまえる。 また、プラットフォーム(? というかブラウザ)が広く普及しているので、ググればスグに問題解決もできる。 それにローカルで簡単に作れる。javascript、それは動作環境を含めて高速です。 高速にUI操作ができる(UI操作が非常に簡単である) swingとかでUI操作をするには多くのオブジェクト操作をしなければならないけど、javascript(もといDHTML)は非常に簡単に

  • 1