Home >Backend Development >PHP Tutorial >Example of php gzip compressing js and css code

Example of php gzip compressing js and css code

WBOY
WBOYOriginal
2016-07-25 08:59:511243browse
In order to save bandwidth, we often need to compress files before transmitting them. In PHP programming, the most common method is to use the gzip module to compress CSS and JS files. This article gives you an example in this regard for your reference.

First, let’s understand the advantages of compression: 1) Merge multiple CSS/JS documents into one file to reduce HTTP requests. 2) Perform document compression on the merged files, such as using js compressor and CSS compress respectively. 3) If you use some mainstream JavaScript frameworks, such as JQuery, Mootools or YUI, it is strongly recommended to directly use Google AJAX Library to import the base library in the form of external links. 4) Use GZIP to compress JS/CSS documents on the server side.

Using GZIP compression with PHP is very simple, the core of which is to use ob_gzhandler. Note: Not all browsers support GZIP data transmitted to the client, fault tolerance must be considered. Let me give you an example of PHP compressing CSS through GZIP. In the folder where the CSS is stored, create a new style.php file. File style.php:

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

The above code is only used to compress CSS files. If you need to compress JavaScript files, change the Content-type in line 5 of the above code to:

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

At the same time, pay attention to the encoding of the file. The encoding used here is gb2312. If you use UTF-8 or other encoding, just change it to the corresponding one (i.e. utf-8). After the modification is completed, introduce the relevant required CSS files, and then replace the place where the CSS is introduced in the original HTML with the following introduction method:

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

Similarly, the way to introduce JS is as follows:


Since the above code uses the Expires attribute of HTTP to cache CSS/JS code on the client side, if the expiration time is set too long (such as one year), when you modify JS/css on the server side code, the client may not take effect immediately. Solution: Add a random parameter after the php file, such as v=121 in the above example. When the file is modified next time, remember to modify this random parameter accordingly (for example, change it to 122).

That’s it. I hope you can test it yourself and see if there will be a big improvement in the website access speed before and after compression! Programmer's Home, I wish you all to make progress in your studies and make progress every day! !



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn