jQuery高速化！処理速度を10倍上げるテクニック20選. Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。 ハイスペックPCではわからないかもしれませんが、低スペックPCやモバイルではWebページの表示速度が遅くすぐに閉じられてるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 そこで、jQuery高速化のポイントや方法をここにまとめておきます。 1. jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 jQueryは常にバージョンアップし続けています。 画像1は、jQuery「1.6」「1.7」「1.8」「1.9」「2.0 beta」バージョンの速度を比較を行ったものです。 ※2013/6/23では、最新バージョンは、「1.10.1」「2.0.2」がリリースされています。 2. 「1.x」と「2.x」バージョンを使い分ける jQueryにはIE6/7/8をサポートしている「1.x」バージョンとIE6/7/8のサポートを廃止した「2.x」バージョンがあります。 「1.x」と「2.x」バージョンをのファイルサイスを比較したところ10％ほど小さくなっていました。
jQuery 2.x 系:モダンブラウザに最適化されたバージョン（IE6/7/8はサポート対象外）jQuery 1.x 系:古いブラウザにも対応したバージョン なので、IE6/7/8には、「1.x」バージョンを読み込ませ対応しつつ、モダンブラウザには「2.x」バージョンを適用すれば速く安定した動作がえられます。 サンプルコード 3. 自サーバーでjQueryを読み込んで使うより、CDNサービスを利用した方がWebサイトを高速化できる可能性があります。 CDNって何？ CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Contents Distribution Network（コンテンツディストリビューションネットワーク）」のことで、コンテンツを配信するために最適化されたネットワークをを指します。 例えば、GoogleのCDNサービス「Google Libraries API」があります。 CDNでjQueryを使用するメリット デメリット 使用方法 Google 4. 例. JSMIN, The JavaScript Minifier. The JavaScript Minifier Douglas Crockfordwww.crockford.com JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files.
It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation. What JSMin Does JSMin is a filter that omits or modifies some characters. JSMin first replaces carriage returns ('\r') with linefeeds ('\n'). It omits spaces except when a space is preceded and followed by a non-ASCII character or by an ASCII letter or digit, or by one of these characters: It is more conservative in omitting linefeeds, because linefeeds are sometimes treated as semicolons. And if it follows a non-ASCII character or an ASCII letter or digit or one of these characters: No other characters are omitted or modified. JSMin knows to not modify quoted strings and regular expression literals. JSMin does not obfuscate, but it does uglify. The JavaScript Code Quality Tool. Jslint4java - A Java wrapper around Douglas Crockford's jslint tool.
Rhino. Java1.7のRhinoスクリプトエンジンはRhino1.7相当の機能を使用できる. Jrunscript+Rhino で MySQL に接続 - ライ麦畑で、つか、前見て. Rhino Shell. JavaScript shell はバッチモードでスクリプトを走らせるシンプルな方法、または調査的なプログラミングのための対話環境を提供します。 シェルの呼び出し java org.mozilla.javascript.tools.shell.Main [<var>オプション</var>] <var>ファイル名-or-url</var> [<var>スクリプト引数</var>] については... -e を JavaScript スクリプトとして実行する。 -f (ファイル名あるいは URL) の内容を読み込んで、JavaScript スクリプトとして実行する。 -opt / -O のレベルで最適化を行う。 -version 指定の言語バージョンとしてコンパイルする。 -strict 厳密 (strict) モードを有効にする。 -continuations 継続 (continuation) の実験的なサポートを有効にして、インタープリターモードを強制するため最適化レベルを -1 にします。 注記 システム・プロパティ rhino.use_java_policy_security を true にセットした状態で、導入されたセキュリティマネージャのもとで、シェルが起動される場合、シェルは Java ポリシー設定に従い、それらの URL に基づいたスクリプトのパーミッションを制限します。 定義済みプロパティ シェルで実行するスクリプトは、いくつかの追加されたトップレベル・オブジェクトのプロパティーへアクセスできます。 Arguments arguments オブジェクトは、シェル起動時にコマンドラインで与えられた、すべての引数の文字列で構成された配列です。 Help() help 関数を実行すれば、使用方法とヘルプメッセージを表示するはずです。
DefineClass() 文字列引数 で指名された Java クラスを使って、拡張機能を定義します。 Deserialize() 指定のファイルから、前もって serialize を呼んで書き込んでいたオブジェクトを、復元します。 Load([, ...]) 文字列引数で指名された JavaScript ソースファイルをロードします。 LoadClass() 文字列引数 で指名されたクラスを、ロードし実行します。 Print([ ...]) 式を評価してプリントします。 Usage: 実例. Rhinoを使おう. 全国1千万人のJavaScriptユーザーの皆様こんにちは。 たかだです。 本日は、拡張性とポータビリティにすぐれた JavaScript 処理系 Rhino(ライノー)をご紹介したいと思います。 JavaScript マニアなら、ブラウザ上だけではなく、もっと汎用的なツールとして JavaScript を利用したいと思いますよね？ 日常的に利用するちょっとしたスクリプトはもちろん、できれば サーバーサイドのWebアプリや GUIアプリケーションまで JavaScriptで書きたいですよね？
(という人が何人いるのかわかりませんが) RhinoはJavaScriptの実行環境としてだけではなく、Javaをインタラクティブに操る処理系としても役立ちます。 Rhino はオープンソースで開発されている JavaScript の処理系です。 インストール さっそく使ってみましょう。 $ java -classpath /path/to/rhino/js.jar org.mozilla.javascript.tools.shell.Main Rhino 1.7 release 0 0000 00 00 js> print(1+1); 2 js> 終了には quit() という関数を呼び出します。 Js> quit() ファイルに保存したスクリプトを実行することもできます。 $ echo 'print("hello, world");' > hello.js $ java -classpath /path/to/rhino/js.jar org.mozilla.javascript.tools.shell.Main hello.js hello, world ただし、こんなに長いコマンドを覚えるのは大変なので、呼び出し用の短いエイリアスを作成しておきましょう。 @echo off set CLASSPATH=/path/to/rhino/js.jar java -Dfile.encoding=UTF-8 org.mozilla.javascript.tools.shell.Main %1 %2 %3 %4 %5 %6 %7 %8 %9 bash(UnixライクOS)では以下の用なファイルをrhinoという名前で保存し、パスの通った場所に置き、実行権限を与えます。
Javaの機能を呼び出す. Rhinoで実感！JavaScriptとJavaの連携プレー | 株式会社シンメトリック公式ブログ | Javaで記述されたJavaScriptの実装「Rhino」。 シンメトリック社内の勉強会（檜山研）の１つ「JavaScript」チームでは、JavaScriptの学習にRhino（GUIで操作できるRhino JavaScript Debugger）を使っています。 講師の檜山さんが、Rhinoについての解説のなかで「RhinoはJavaScriptの処理系だけども、全てJavaで記述されているからJavaのクラスを使うこともできる」とコメントしていました。 RhinoでJavaのクラスを使った短いコードを試してみたりもし、そのときは正直「へ～」と感心する程度の認識だったのですが・・・。 その後、しばらくしてRhinoでJavaクラスを使うことが実に手軽で便利と思うことがありました。 今回はその使い方について説明します。 ある日の業務中、phpでの開発中にテストデータのための小さなコードを書こうと思いました。 そこでふと先日の檜山さんの言葉を思い出し、Rhino上でスクラップブックページ代わりのコードを書いてみると・・・。
すごいぞRhino！ 以降は具体的な使い方とサンプルです jsファイルを作る importPackage(java.lang) importPackage(java.util) function get_order_list() { var set = new LinkedHashSet(); var r = new Random(); while (set.size() < 10) { var n = r.nextInt(10) + 1; set.add(new Integer(n)); } return set.toArray(); } importPackage(java.lang) importPackage(java.util) function get_order_list() { var set = new LinkedHashSet(); var r = new Random(); while (set.size() < 10) { var n = r.nextInt(10) + 1; set.add(new Integer(n)); } return set.toArray(); } Rhinoでスクリプトを実行する. SpiderMonkeyで syntax check してみる. Firefox OSと直接の関係性が薄い記事ですが、開発環境(IDE)まわりを物色中の旨、御了承下さい。 SpiderMonkeyは、MojillaさんのC言語によるJavaScriptエンジンで FirefoxやSeaMonkeyなどで利用されています。 SpiderMonkeyには、JavaScript shell もあって Ver1.8.5 の実行もできるそうです。 さらにYuta.Kikuchiの日記：SpiderMonkeyでのコマンドラインJavascriptを参照すると、Vim では、JSLintとSpiderMonkeyを利用した syntax check ができるそうです。
これを使えば、「JavaScriptの作法チェックやアプリ開発時のちょっとした挙動確認に便利！」 …と思いましたが Vim 使いではない私(泣)は、勉強のためコマンドラインからSpiderMonkeyでJSLintを利用できるようにしてみました。 【お詫び】 私のPC環境は、Ubuntu 12.04 LTS 64bit ですので、サンプル内容も Linux 用になっています。 SpiderMonkey JavaScript シェルのダウンロード Mozilla Developer Network：Introduction to the JavaScript shellを読むと… To get the SpiderMonkey JavaScript shell, see the SpiderMonkey Build Documentation or download a compiled binary for your platform from the Nightly Builds …とありますように、JavaScript shell を利用するだけでしたら、ソースコードを取得してビルドしなくても Nightly Build のバイナリが取得できるようです。 SpiderMonkey JavaScript シェルのインストール ダウンロードした jsshell-linux-x86_64.zip ファイルを[SpiderMonkey shell展開先]ディレクトりで展開してください。 SpiderMonkey JavaScript シェルの使い方 JSLint について …だそうです。
前項のポイント. Java SE 6 じゃじゃ馬ならし Scripting. はじめに 2004 年の JavaOne で、Java でスクリプトをサポートするという発表がありました。 特にサーバサイドでの使用を前提にしてたようで、PHP がまず第一にサポートされるスクリプト言語ということになっていました。 もちろん、標準策定は JCP でおこなわれています。 具体的には JSR-223 Scripting for Java Platform で標準策定されています。 そして、その機能が Java SE 6 で取り入れられることになったのです。 しかし、PHP ではありませんでした。 JSR-223 は Java の中でスクリプト言語を使用するための標準で、スクリプト言語の種類を限定しているわけではありません。 同じようなフレームワークとして Apache の Bean Script Framework があります。 どうやら、PHP はサーバサイドということで、Java EE にまわされたようです。 とりあえず、JavaScript から使ってみましょう。 Java SE 6 の JavaScript Engine は Mozilla の Rhino が使用されています。 なお、ここで使用している JDK は 2005.10.6 に公開された build 55 です。 JavaScript をコマンドから使ってみる Java SE 6 には JavaScript を使ってみるのにちょうどいいコマンド jrunscript が標準で提供されています。 はじめは使い方を調べるためにヘルプを見てみましょう。 ここには書いてありませんが、-l を指定しないとデフォルトで JavaScript が使えるようになります。 -q を使用すると、使用できる言語の一覧が表示できるようなので、やってみます。
C:\temp>jrunscript -q Language ECMAScript 0 implemention "Mozilla Rhino" @IMPLEMENTATION.VERSION@ C:\temp> JavaScript が使えることは分かりますが、まだバグがあるようですね ^^;; それに -l の後に記述できる文字列を書いてくれないのはちょっと問題。 実際に -l ECMAScript と指定すると、そんな言語使えないといわれてしまいます。 これはちょっといただけないですね。