Javascriptの圧縮最適化について
3142 ワード
前言
私たちはJavascriptがスクリプト言語であることを知っています.つまり、ウェブサイトやアプリケーションにアクセスするときは、サーバーから相応のJSファイルを取りに来て、ブラウザ側で説明して実行します.Webアプリケーションの豊富性のために、Javascriptは自然に増えてきました.影響は私たちがより多くの時間をかけてサーバーにこれらのJSファイルを取りに行きます.だから、JSを圧縮することはとても重要なステップです.もちろんクライアントにダウンロードした以上、JSのコードはユーザーにも見られます.
コメントと空白を削除
注釈の役割は説明しないで、ユーザーはあなたのウェブサイトを訪問して、注釈のコードを持って行くことを持って、注釈のこの部分を実行することはできなくて、むだにこのコードの持ってくるネットの帯域幅を浪費したのではないですか?そこで私達は圧縮してDelに注釈を落とすべきです.
空白はコードの美しさのために、プログラマがデバッグを確認しやすくするので、インタプリタにとって、空白は無意味で、かえって時間をかけてスキャンしなければならないので、圧縮もこれらの無意味な空白を取り除くべきです.インデント、スペース、空行などを含みます.
このステップを仕上げたのは、第一段階の圧縮だけです.JSファイルをできるだけ小さくするために、新しいアイデアを採用しなければなりません.
コードの最適化
私たちはよく「abcd」+「efgh」という文字列を使ってつなぎ合わせますか?そこで、圧縮時に直接「abcdefgh」に圧縮するという比較を考えてみます.二つの二重引用符と一つのプラス記号が足りないです.文字列のつなぎ合わせが頻繁であれば、この最適化は多くのスペースを節約し、JSの実行効率を向上させます.(2つの文字列が連結されているので、解釈器はメモリ空間を再申請し、両端の文字列をコピーする必要があります.)
オブジェクトの属性アクセスも頻繁ですか?例えばo[name]など、オブジェクトを定義しています.
また、例えばvar a=new Aray()をvar a=[]などに最適化し、連続する複数のvar定義を使用して、1つの文の定義に最適化することができます.
同時にJSの実行性能も適切に向上できます.
このいくつかのバイトをばかにしないでください.往々にして大規模なアプリケーションでどれぐらいのユーザーがJSファイルをダウンロードしていますか?この数字は膨大です.
変数の置換
ファイルサイズをさらに縮小するには、JSの語法や変数を分析します.簡単な例によると、
もちろん、もっと牛逼の交代を見たことがあるようです.最後に全部の文字を16進の「x」に変換したという印象があります.どうすればいいのかを知っている方に教えてください.
undefined最適化
あなたのコードの中ではif(a=undefined)がよく現れますか?undefinedを含む言葉がたくさんありますが、この単語が長くてすっきりしないです.短い単語に直接置き換えることもできません.その前に例を見てみます.
例を挙げると、以下のようなコードがあります.
同時にこのような方法は実行します.また提唱したのです.発生する変数が全体を汚染しないように、具体的には私のもう一つのブログを参照してください.『Javascript多すぎる衝突を解決する—全体を汚染することを避ける』.
本編のまとめ
どのようなツールで圧縮するかについては、ネット上で多くのことが分かります.例えば、YUI compress or、jsminなど、Webアプリケーションがオンラインになったら、圧縮バージョンを提供して帯域幅を節約するのに役立つと思います.
私たちはJavascriptがスクリプト言語であることを知っています.つまり、ウェブサイトやアプリケーションにアクセスするときは、サーバーから相応のJSファイルを取りに来て、ブラウザ側で説明して実行します.Webアプリケーションの豊富性のために、Javascriptは自然に増えてきました.影響は私たちがより多くの時間をかけてサーバーにこれらのJSファイルを取りに行きます.だから、JSを圧縮することはとても重要なステップです.もちろんクライアントにダウンロードした以上、JSのコードはユーザーにも見られます.
コメントと空白を削除
注釈の役割は説明しないで、ユーザーはあなたのウェブサイトを訪問して、注釈のコードを持って行くことを持って、注釈のこの部分を実行することはできなくて、むだにこのコードの持ってくるネットの帯域幅を浪費したのではないですか?そこで私達は圧縮してDelに注釈を落とすべきです.
空白はコードの美しさのために、プログラマがデバッグを確認しやすくするので、インタプリタにとって、空白は無意味で、かえって時間をかけてスキャンしなければならないので、圧縮もこれらの無意味な空白を取り除くべきです.インデント、スペース、空行などを含みます.
このステップを仕上げたのは、第一段階の圧縮だけです.JSファイルをできるだけ小さくするために、新しいアイデアを採用しなければなりません.
コードの最適化
私たちはよく「abcd」+「efgh」という文字列を使ってつなぎ合わせますか?そこで、圧縮時に直接「abcdefgh」に圧縮するという比較を考えてみます.二つの二重引用符と一つのプラス記号が足りないです.文字列のつなぎ合わせが頻繁であれば、この最適化は多くのスペースを節約し、JSの実行効率を向上させます.(2つの文字列が連結されているので、解釈器はメモリ空間を再申請し、両端の文字列をコピーする必要があります.)
オブジェクトの属性アクセスも頻繁ですか?例えばo[name]など、オブジェクトを定義しています.
また、例えばvar a=new Aray()をvar a=[]などに最適化し、連続する複数のvar定義を使用して、1つの文の定義に最適化することができます.
同時にJSの実行性能も適切に向上できます.
このいくつかのバイトをばかにしないでください.往々にして大規模なアプリケーションでどれぐらいのユーザーがJSファイルをダウンロードしていますか?この数字は膨大です.
変数の置換
ファイルサイズをさらに縮小するには、JSの語法や変数を分析します.簡単な例によると、
var myObj = 1;
myObj++;
myObj--;
alert(myObj);
変数の置換とは、元の変数名をより短い変数名に変更するという意味です.var A = 1;
A++;
A--;
alert(A);
自分で比べてみると、何バイトが節約されていて、コードが効果的に保護されています.あなたのAはどういう意味ですか?もちろん、もっと牛逼の交代を見たことがあるようです.最後に全部の文字を16進の「x」に変換したという印象があります.どうすればいいのかを知っている方に教えてください.
undefined最適化
あなたのコードの中ではif(a=undefined)がよく現れますか?undefinedを含む言葉がたくさんありますが、この単語が長くてすっきりしないです.短い単語に直接置き換えることもできません.その前に例を見てみます.
function f1(name){
alert(name);
}
f1();
f 1を呼び出すときはパラメータを持たず、f 1のnameパラメータはundefined値になります.はい、undefinedを最適化し、短縮しました.例を挙げると、以下のようなコードがあります.
(function(name, undefined){// undefined !
/* */
if (name != undefined)
alert(name);
})('name');/* , , undefined */
私達は圧縮する時にすべてのundefinedを変数Aに変えます.これで多くのバイトを短縮しましたか?Jqueryなどのフレームはこの最適化をしました.jQueryのソースの構造は以下の通りです./*!
* jQuery JavaScript Library v1.6.2
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Thu Jun 30 14:16:56 2011 -0400
*/
(function(window, undefined) {
/* jQuery Code */
window.jQuery = window.$ = jQuery;
})(window);
同時にこのような方法は実行します.また提唱したのです.発生する変数が全体を汚染しないように、具体的には私のもう一つのブログを参照してください.『Javascript多すぎる衝突を解決する—全体を汚染することを避ける』.
本編のまとめ
どのようなツールで圧縮するかについては、ネット上で多くのことが分かります.例えば、YUI compress or、jsminなど、Webアプリケーションがオンラインになったら、圧縮バージョンを提供して帯域幅を節約するのに役立つと思います.