サイトのリターンを高速化する方法に関する多くのヒントがあります-これはnginxとクラスタリングによる静的なものであり、あらゆる種類のトリッキーなテクノロジーです。 ただし、サイトの負荷を増やす方法をアドバイスするすべての書籍には、「CSS / JSの接着」と「圧縮の有効化」という2つの絶えず繰り返されるトピックがあります。
接着
すべてが簡単です-たとえば、ページに3つのCSSファイルと5つのJSがある場合、ブラウザーは読み込み時に8つの接続を作成し、そこからデータをダウンロードする必要があります。ご存じのように、いくつかの大きなファイルは多くの小さなファイルよりも優れています。 これは、ブラウザが各接続セットアップに時間を費やすという事実によるものであり、多くの場合、かなり長い-ダウンロード時間の最大40％です。
原則として、必要なファイルを超えてそれらを1つにまとめる特定のバッチファイルを作成する標準的な方法は好きではありませんでした。なぜなら、自動で実行できるペンで物事を行うことは根本的に間違っているからです。開発中または実動中（追加のアクション）。
彼らが言うように、「あなたがただカットアンドペーストできるものを書き換えないでください」;）
圧縮
「ポンプされた」ファイルの量が少ないほど、それに応じてダウンロードにかかる時間が短くなります。 これらのファイルが圧縮されていて、解凍に時間がかかる場合でも、クライアントの最新の計算能力により、この時間コストは実質的には重要ではありません。
最新のブラウザのほとんどは、deflate圧縮方式をサポートしています。これは、これを行う標準* nixユーティリティの名前でgzipと呼ばれることもあります。
Web上で圧縮できるものと圧縮すべきものは何ですか？ JS / CSS / JSON / HTMLなどのテキストリクエスト。
Apache mod-deflate用のすばらしいモジュールがあります。これは、.htaccessから直接使用して、圧縮するものとしないものを示すことができます。非常に使いやすいですが、悲しいかな！ -通常、標準のホスティングサービスでは、彼ら（ホスティング事業者）がプロセッサ時間を恐れているため禁止されています。
もちろん、これには合理的なシェアがあります-このモジュールは「オンザフライ」ですべてを揺さぶります。もしあなたがいくつかのトリックをとらないなら、新しいユーザーのためにページをロードするたびに、彼は
すべてのCSS / JSなどを再圧縮します。
VDSがあり、自分が上司である場合、mod-deflateを使用します。これは、十分にデバッグされており、ネットワーク上に多くのアプリケーションの例があるためです。
そして、私たちは通常の人質に戻ります-方法はありますか？ あなたが食べられたとしても、あなたには常に2つの道があります-ここに道があります。 さらに、このタスクは前のタスクに非常によく規定されています。次に、その理由を説明します。
ほとんどのJS / CSSおよびその他のテキストは静的です。つまり、 サイトの機能中に変化することはありません。「接着」+すぐに圧縮するという条項を満たすために、それらを組み合わせることは理にかなっています。
受け取ったファイルを特定のキャッシュに入れ、Apacheがそれらを取得して提供します。 さらに、mod-rewriteによってプロセスを自動化します。
アルゴリズムは次のようになります 。
- 特別なURLでファイルをリクエストする
- クライアントが圧縮をサポートし、このタイプの圧縮ファイルがキャッシュにある場合-処理を提供して終了します
- 圧縮がサポートされておらず、このタイプのファイルのみがある場合-返して処理を終了する
- それ以外の場合は、ハンドラーを実行します
「/ glue / ....」という形式のURLにアクセスすると、モデルがトリガーされることに同意しましょう。
そして、ファイルは「/ static / glue / ...」にあります。
この場合、フォーメーション中にもう1匹のウサギを殺します-ファイルはPHPを介して1回だけ与えられます。そして、すべてが大きなもののようになります:) Webサーバーは静的データを提供する必要があります。
原則として、フォルダをURLに一致させることができ、それからmod-rewriteの設定はわずかに単純化されますが、それほど面白くはありません。一般的にはいつでも単純化できます:)
このようなコンテンツを含む.htaccessファイルがサイトのルートに既に存在することを願っています。
RewriteEngine On
RewriteBase /
RewriteRule ^.*$ index.php [QSA,L]
まあ、どちらも似ています。 主な条件は、mod-rewriteが着信URLの処理を見つけられなかった場合、最終的に何らかのスクリプトファイルを呼び出すことです。
この場合、index.php
アルゴリズムを追加するには、.htaccessに次のように記述します。
.jz.gzおよび.css.gzと同様に、圧縮された.gzファイルのサポートを追加します。
AddEncoding gzip .gz
< FilesMatch " \. js.gz$" >
#
Header set Cache-control: private
Header append Vary User-Agent
ForceType "text/javascript"
Header set Content-Encoding: gzip
AddCharset windows- 1251 .js.gz
</ FilesMatch >
< FilesMatch " \. css.gz$" >
#
Header set Cache-control: private
Header append Vary User-Agent
ForceType "text/css"
Header set Content-Encoding: gzip
</ FilesMatch >
ファイルをアップロードするためのルールを追加します （物理フォルダーへのURLの参照解除）
RewriteCond %{ENV:REDIRECT_GZ} = 1
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . - [L]
圧縮のクライアントサポートのチェックを追加
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1.gz -f
RewriteCond %{HTTP:Accept-Encoding} ^.*?gzip.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^konqueror [NC]
RewriteRule ^siteglue/(.*)$ /static/glue/$1.gz [L,E=GZ: 1 ]
圧縮がサポートされていない場合
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/static/glue/%1 -f
RewriteRule . static/glue/%1 [L,E=GZ: 1 ]
ここで、最も重要な魔法であるこれらのファイルの自動生成を取り上げましょう。
ここにもう1つのトリックがあります。この場合ではなく、別の規則です。htmlファイルでは、cssまたはjsへの要求を次の形式で書き込みます。
「/Glue/1.css—2.css-3-4-5.css」、「-」は置換「/」、「-」はファイル区切り文字です。
さらに、名前には英語の文字、数字、および記号「_」のみを含めることができます-これで十分です。
もちろん、これらは慣習であり、他のルールや他の区切り文字を自分で選択できます。 たとえば、「、」などを使用できます。
ただし、「-」を選択した理由は、これが完全に通常の一般的なURL文字であり、クライアントからクライアントへの途中でプロキシの曲がったスクリプトを使用してカットするなどの愚かな問題はほとんどないからです。
index.phpのファイル（または.htaccessに従って起動するもの）に、「/ glue /.*」に準拠しているかどうかURLをチェックし、偶然一致した場合にエコーを生成するハンドラーを追加します（Glue :: generate（$ str）） 、ここで$ strは、最後のスラッシュの後のURLにあるものです。 「/glue/a.js」の場合、「a.js」になります
Glueクラス自体はこのようなものです
class Glue {
static $allowedExt = array (
"js" => array ( "check" => "/^js/.*?.js$/" , "delimeter" => ";n" , "mime" => “text / javascript” ) ,
"css" => array ( "check" => "/^css/.*.css$/" , "delimeter" => "n" , "mime" => “text / css” ) ,
) ;
static function generate ( $str ) {
if ( ! $str ) return null ; // URL
$files = array ( ) ;
preg_replace ( "/((?:[a-z0-9_.]+-)+[a-z0-9_.]+.([a-z0-9]+))(?:--|$)/ie" , " $files []=str_replace( '-', '/', " 1 ")" , $str ) ;
if ( count ( $files ) == 0 ) return null ; // URL
$srcF = “ / static ” ; // ,
$dstF = “ / glue” ; //,
$content = "" ;
$cext = substr ( strrchr ( $files [ 0 ] , '.' ) , 1 ) ;
if ( $cext === false ) return null ; //
$fd = null ;
foreach ( self :: $allowedExt as $k => $v ) {
if ( $k == $cext ) {
$fd = $v ;
break ;
}
}
if ( ! $fd ) return null ; //
$usedNames = array ( ) ;
$fdC = & $fd [ "check" ] ;
$fdD = & $fd [ "delimeter" ] ;
foreach ( $files as $name ) {
$ext = substr ( strrchr ( $name , '.' ) , 1 ) ;
if (
$ext === false ||
in_array ( $name , $usedNames ) ||
$ext != $cext ||
! preg_match ( $fdC , $name )
) return null ; // ,
$usedNames [ ] = $name ;
$filec = file_get_contents ( " {$srcF} / {$name} " ) ;
if ( ! $filec ) return null ; //
$content .= $content != "" ? $fdD . $filec : $filec ;
}
//
file_put_contents ( " {$dstF} / {$str} " , $content ) ;
//
$gzip = gzencode ( $content , 9 ) ;; //gzdeflate( $content, 9 );
if ( $gzip ) file_put_contents ( "/ {$dstF} / {$str} .gz" , $gzip ) ;
// mime-
header ( "Content-type: " . $fd [ "mime" ] , true ) ;
return $content ;
}
}
繰り返しますが、これはこれを行う方法の1つのみを示しています-静的クラスは好きではありません-他の方法を選択できます-ブラックジャックと女性は重い動作ではありません;）
それはすべて、原則として、プロジェクトファイルを調べるために残っています-それでも、「手動」の作業があります:(-スクリプトの束の代わりに、上記のルールに従って1つを記述します。
すべて-最初のリクエストで、すべてが自動的に収集され、与えられ始めます。
もう1つ小さな追加-PHPに与えられたコンテンツをどうするか？
また、絞る必要があります！
これを行うには、テキスト形式のファイルを提供する場所で、生成されたコンテンツが提供されます。たとえば、 echo（$ content）;
以下を実行します。
if ( isClientSupportGzip ( ) ) {
ob_start ( "ob_gzhandler" ) ;
echo ( $content ) ;
ob_end_flush ( ) ;
} else echo ( $content ) ;
これにより、クライアントが圧縮をサポートしている場合、配信された動的コンテンツが圧縮されます。 それをチェックする関数はインターネットから取得され、次のようになります。
function isClientSupportGzip ( ) {
if ( headers_sent ( ) || connection_aborted ( ) ) return false ;
if ( stripos ( getenv ( "HTTP_ACCEPT_ENCODING" ) , "gzip" ) === false ) return false ;
if ( stripos ( getenv ( "HTTP_USER_AGENT" ) , "konqueror" ) !== false ) return false ;
return true ;
}
開発のために、特定の開発モード定数を作成することをお勧めします。1に設定した場合、キャッシュにファイルを書き込まず、ダイナミクスを圧縮しないでください。jsファイルを変更するたびにキャッシュディレクトリを登ってクリアする必要はありません。
それだけです-私たちはサイトをわずかに分散させました）私の観察によると、戻り速度の増加は30-40％になる可能性があります。
訂正、提案、または批判がある場合-コメントを歓迎します-彼らが言うように-世紀を学ぶので、私は非常に感謝します）
サイトの高速化、最大の圧縮率、そして楽しい顧客;）
PS
同じ場所にあるプロジェクトのすべてのページでライブラリ（jqueryなど）を使用する場合は、それをホテルファイルに配置することをお勧めします。これは単一のcssにも適用されます。 ブラウザにより高速にキャッシュされます。
JSを接着するときは、その特異性を覚えておいてください-「;」で接着する必要があります。 前のファイルの最後の行が「;」ではない場合があります
キャッシュフォーミングハンドラーを作成するときは、ハッカーについて覚えておいてください。すべてをチェックしてください。文盲シールドを使用すると、静的なものとして多くの興味深いものを手に入れることができます。 。
サイトが最も人気のないエンコーディングですべてがチョコレートになっている場合は、
ForceType "text / javascript"のForceType "text / javascript ;; 内容= windows-1251»
追加：AddCharset windows-1251 .jsおよびAddCharset windows-1251 .css
さらにもう1つのアドバイスとして、技術的に「/glue/a.js—b.js」と「/glue/b.js—a.js」は同じものですが、実際には次のようになります。キャッシュ内の2つのファイル...
コメントから
ImenemとTrueDragoは、収縮圧縮の最適レベルは9ではなく6