ホームページ  >  記事  >  バックエンド開発  >  PHP の GZip 圧縮機能を使用して Web サイトの JS および CSS ファイルを圧縮し、Web サイトへのアクセスを高速化します。

PHP の GZip 圧縮機能を使用して Web サイトの JS および CSS ファイルを圧縮し、Web サイトへのアクセスを高速化します。

WBOY
WBOYオリジナル
2016-06-20 13:03:48907ブラウズ

現在、多くの WEB 2.0 Web サイトでは、ユーザー エクスペリエンスを追求するために、大量の CSS および JS ファイルが使用されています。このため、サーバーの帯域幅が一定である場合、複数のユーザーによる同時アクセスが遅くなります。 Web ページの応答を高速化するにはどうすればよいですか?この記事では、主に PHP を使用して JS と CSS を圧縮する方法を紹介します。ここでは、サーバーは GZIP 圧縮のみをサポートし、.htaccess をサポートしないことを前提としています (多くの Web マスターが仮想ホストをレンタルしている実態に合わせて)。

まず、CSS ファイルと JS ファイルのパフォーマンスを最適化するためのいくつかのヒントについて説明します。


(1) 複数の CSS/JS ドキュメントを 1 つのファイルにマージして、HTTP リクエストを削減します

(2) js 圧縮と CSS 圧縮をそれぞれ使用するなど、マージされたファイルに対してドキュメント圧縮を実行します。

(3) JQuery、Mootools、YUI などの主流の JavaScript フレームワークを使用する場合、強く推奨 Google AJAX ライブラリを直接使用して、外部リンクの形式で基本ライブラリをインポートすることをお勧めします。最後に、この記事で説明したように、GZIP を使用してサーバー側で JS/CSS ドキュメントを圧縮します。実際、PHP で GZIP 圧縮を使用するのは、ob_gzhandler を使用することは非常に簡単です。ただし、注意すべき点は、すべてのブラウザがクライアントに送信される GZIP データをサポートしているわけではないため、特定のフォールト トレランス処理が必要であるということです。

以下は、PHP を使用して GZIP 経由で CSS を圧縮する例です。

CSS が保存されているフォルダーに新しい style.php ファイルを作成し、このファイルに次のコードを追加します:

<p><?php</p>if(extension_loaded('zlib')){//检查服务器是否开启了zlib拓展<br />	ob_start('ob_gzhandler');<br />}<br />header('content-type: text/css; charset: utf-8');//注意修改到你的编码<br />header('cache-control: must-revalidate');<br />$offset = 60 * 60 * 24;//css文件的距离现在的过期时间,这里设置为一天<br />$expire = 'expires: ' . gmdate('D, d M Y H:i:s', time() + $offset) . ' GMT';<br />header($expire);<br />ob_start('compress');<br />function compress($buffer) {//去除文件中的注释<br />	$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);<br />	return $buffer;<br />}<br />//包含你的全部css文档<br />include('global.css');<br />include('layout.css');<br />if(extension_loaded('zlib')){<br />	ob_end_flush();//输出buffer中的内容,即压缩后的css文件<br />}<br /><p>?>

JavaScript ファイルを扱っている場合、上記のコードの 5 行目の Content-type を次のように変更する必要があります:

header('content-type:application/x-javascript; charset: utf-8');

変更が完了したら、該当する必要な CSS ファイルを導入し、元の HTML の CSS を導入している箇所を以下の導入方法に置き換えます。

<link rel="stylesheet" media="screen" href="style/css.php?v=100415" />

同様に、JS の導入方法は次のとおりです。 :

<script type="text/javascript" src="js/js.php?v=121"></script>

上記のコードでは HTTP Expires 属性を使用してクライアント側で CSS/JS コードをキャッシュしているため、有効期限が長すぎる (1 つなど) 場合、年)、サーバー側で変更する場合 JS/CSS コードを追加するときに、クライアントがすぐに有効にならない場合があります。

解決策は、php ファイルの後にランダムなパラメータを追加します (上記の例では v=121 など)。次回ファイルを変更するときに、このランダムなパラメータをそれに応じて変更することを忘れないでください。 122まで)。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。