例としてextJSを使用したJavaScriptライブラリのロードの最適化

だから、タスクはこれでした。 プロジェクトはextJSライブラリの使用を開始しましたが、サイズを除いて、すべてが問題ありません。 この奇跡の重量は790 Kbです。 ライブラリのサイズを圧縮し、ページの読み込み速度を上げる方法を探し始めました。

すべては、通常のYUICompressorから始まりました。 最新バージョン2.4.2は圧縮を示しました
1Kb弱。 私はこのように絞りました:
java -jar yui.jar --type js --verbose -0 ext-compress.js ext-all.js

結果:
ext-all.js-538.9 Kb
ext-compressed.js-537.5 Kb

不幸な結果。 そのため、私のライブラリはすでに圧縮されているか、何か間違ったことをしました。
さらに、私の研究は、ob_gzhandlerを介してすでに圧縮されたコンテンツを発行するサーバーに向けられました。

デフォルトのダウンロード:


圧縮を有効にした後:


完璧に制限はない、と私は思った-しかし、私は同じスクリプトを持っているということは何が再び要求されている
リロード時。 そして、インターネット上で解決策が見つかりました。
HTTPプロトコル機能、特にHTTP_IF_MODIFIED_SINCEヘッダーを使用する必要があります。
つまり スキームは次のとおりです。
1.ブラウザがサーバーにリクエストを送信します。
2.サーバーはブラウザにファイルを発行し、ヘッダーを設定します
ヘッダー( "Last-Modified:" .date( "D、j MYH:i:s"、filemtime($ path))。 "UTC");
pathはサーバー上のファイルへのパスです。
3.ブラウザーは2番目の要求を行い、サーバーはHTTP_IF_MODIFIED_SINCEヘッダーを受信します。
このヘッダーは、前に送信した場合にのみ受信されることに注意してください
最終変更ブラウザ。 結果の時間とディスク上のファイル時間を比較し、それらが同じ場合
ブラウザーにヘッダーヘッダー($ _ SERVER ['SERVER_PROTOCOL']。 '304 Not Modified')を与えると、ブラウザーが読み込まれます
キャッシュからの画像。

この方法を適用したときに起こったことは次のとおりです。


708Kbから243Kbへのボリューム削減と、1回限りのダウンロードおよび自動更新キャッシュの保証
ソースファイルを更新するとき。 悪くないと思う)

それを扱う方法

テストページ

スクリプト自体:
<?php
$path = $_SERVER['QUERY_STRING'];
// /public
if(ereg('/public/', $path)) {
if(file_exists($path)) {
$content = file_get_contents($path);
if($content != false) {
$lastmod = date("D, j MYH:i:s",filemtime($path))." UTC";
// .. , . ,
//
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
$modsince = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
if ($modsince != -1 && $modsince == $lastmod)
{
header($_SERVER['SERVER_PROTOCOL'].' 304 Not Modified');
exit();
}
}
// .. ,
@ob_start();
@ob_start('ob_gzhandler');
// css content-type, .. - Apache text/html
if(ereg('.css', $path)) {
Header ("Content-type: text/css");

}
Header("Expires: ".date("D, j MYH:i:s",time()+(86400 *30))." UTC");
Header("Last-Modified: ".date("D, j MYH:i:s",filemtime($path))." UTC");
Header("Cache-Control: Public");
Header("Pragma: Public");
print($content);
ob_end_flush();
}
}
}
?>


残されているもの:
1.何らかの理由で、頑固にext-all.cssを圧縮したくない、または、83Kbから13Kbに圧縮されている
しかし、その後、ページが台無しになります。 つまり 明らかにCSSスタイルは接続されていません。 方法を知ってうれしいです
それを行うことができます。
2.圧縮をオンにした後、時間が529msに増加しました。これは、コンピューターが遅いためだと思います。 明日はサーバーでテストします。

私の記事やテストの客観性を厳密に判断しないでください。
すべてが自宅のコンピューターで実行され、実行中のプログラムの束でさえ実行されました。

Source: https://habr.com/ru/post/J50605/


All Articles