現在、多くの WEB 2.0 Web サイトでは、ユーザー エクスペリエンスを追求するために、大量の CSS および JS ファイルが使用されています。このため、サーバーの帯域幅が一定である場合、複数のユーザーによる同時アクセスが遅くなります。 Web ページの応答を高速化するにはどうすればよいですか?この記事では、主に PHP を使用して JS と CSS を圧縮する方法を紹介します。ここでは、サーバーは GZIP 圧縮のみをサポートし、.htaccess をサポートしないことを前提としています (多くの Web マスターが仮想ホストをレンタルしている実態に合わせて)。
まず、CSS ファイルと JS ファイルのパフォーマンスを最適化するためのいくつかのヒントについて説明します。
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まで）。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
