首页 > 经验 > 关键词  > CSS最新资讯  > 正文

使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

2009-08-30 20:34 · 稿源:Saturn,http://www.cnsaturn.com/logs/2009/08/29/com

一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSSJS文件。这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢。如何加快网页响应速度?解决办法之一就是:依照Yahoo性能优化小组提出的N条性能优化建议对前端程序进行优化和重构,关于此文的讨论很多,在这里不再赘述。

这篇文章主要分享一下我个人在实际项目中,对于使用PHP对JS和CSS进行压缩的经验,在这里假设服务器仅支持GZIP压缩,不支持.htaccess(符合很多站长的租用的虚拟主机实际情况)。

首先说说对CSS和JS文件进行性能优化的几个小技巧:

将多个CSS/JS文档合并成一个文件,以减少HTTP请求

对合并后的文件进行文档压缩,比如分别使用js compressor和CSS compress

如果使用到一些主流的JavaScript框架,比如JQuery, Mootools或者YUI,强烈推荐直接使用Google AJAX Library以外部链接的形式导入基库。

最后,就是本文所提到的,使用GZIP在服务器端对JS/CSS文档进行压缩。

这里提到的方法对系统来说是无侵入式的,也就是说不管你的程序是新编写的,还是已经上线了很久,均适用。

先看我对图标吾爱进行优化的实例截图(YSlow):

在这个例子中,我分别对服务器输出的HTML文档、JS文档和CSS文档使用了GZIP压缩,可以看到压缩效果非常明显,文件体积减小了70%以上。页面加载速度明显加快。

实际上,用PHP使用GZIP压缩非常简单,其核心是使用ob_gzhandler,不过需要注意的一点是,并不是所有浏览器都支持GZIP传送到客户端的数据,所以要进行一定的容错处理。

下面是使用PHP通过GZIP压缩CSS的实例。

在存放CSS的文件夹中新建一个style.php文件,在此文件中加入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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文件
}
?>

如果你处理的是JavaScript文件,你需要将上面代码中的第5行的Content-type修改成以下:

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

同样需要注意的是文件的编码,这里我用的是gb2312,如果你采用的是UTF-8或其他编码,修改成对应的即可。

修改完成之后,在原引入CSS和JS文件的地方,将.css后缀/.js后缀的文件更换成这个style.php文件即可,如:

script type="text/javascript" src="https://www.icon52.net/scripts/autoSuggest.js.php?v=121

由于上面代码中使用到了HTTP的Expires(过期)属性用于在客户端缓存CSS/JS代码,所以,如果过期时间设置的太长(比如2020 年),当你在服务器端修改了JS/CSS代码时,客户端可能不会立即生效。解决办法是:在php文件后面添加一个随机参数,如上面例子中的v=121,当下次修改了文件时,记得相应修改此随机参数即可。

Live Demo请使用Firefox,并安装YSlow插件查看图标吾爱icon52.net这个网站。

  • 相关推荐
  • 大家在看
  • JetBrains 等多个社区成员宣布成立 PHP 基金会

    包括JetBrains在内的多个PHP社区成员今天宣布成立PHP基金会,以继续开发该语言。成员名单还包括Automattic、Laravel、Acquia、Zend、Craft CMS、Private Packagist、Tideways和PrestaShop。

  • 携手社区成员:JetBrains宣布成立PHP基金会

    Laravel News 报道称,包括 JetBrains 在内的多位社区成员,刚刚宣布了 PHP 基金会的正式成立。作为一家非盈利组织,这项 Open Collective 倡议旨在持续推进这款语言的未来发展。通过资助为 PHP 语言做出贡献的全职和兼职开发者们,PHP 基金会希望能够确保该语言的长期繁荣。(来自:Open Collective)除了 JetBrains,PHP 基金会的成员名单中还包括 Automattic、Laravel、Acquia、Zend、Craft CMS、Private Packagist、Tideways ?

  • Google Messages新功能:RCS不可用下通过Google Photos发送视频

    科技媒体 9to5Google 最新一期 APK Insight 报告中,对 Android 系统的原生 SMS/RCS 应用进行了逆向编译。Google Messages 即将可能获得一项新功能,让用户在 RCS 不可用的情况下通过 Google Photos 发送视频。Google Messages 10.4 Beta 版本中出现了“Google Photos: Share sharper clarity video in text (SMS/MMS)”的选项。该功能将会出现在该应用的设置菜单中。根据这一设置的描述,收件人可能会收到一个 Google Photos 链接

  • Chrome 97 Beta版发布:初步支持WebTransport 引入CSS媒体查询

    在 Chrome 96 稳定版发布之后,开发团队的重心已经偏移到 Chrome 97 版本中。在今天发布的 Chrome 97 Beta 版本中,最引人注意的是添加了对 WebTransport 的初步支持。WebTransport 是一个类似于WebRTC数据通道的协议框架,但主要是用于受网络安全模型限制的客户端,使用安全、多复式传输与远程服务器进行通信。WebTransport使用HTTP/3协议进行双向传输。与基于TCP的WebSockets不同,WebTransport依赖于类似UDP的数据包和可取消的?

  • APICloud AVM.js跨端框架的优势

    AVM(APICloud-View-Model)是APICloud推出的一个跨端的高性能 JavaScript框架,更趋近于原生的编程体验,它提供简洁的模型来分离应用的用户界面、业务逻辑和数据模型,适合高度定制化的项目。在大前端技术领域,当我们遇到了需要解决重复性的问题时,通常会考虑设计一个DSL(Domain-Specific Language)或者抽象出一个框架层,专门来解决这些类似的问题。使用DSL我们并不需要为特定终端编写多套代码,还可以利用宿主语言的抽象能力,?

  • Hennessey发布狂野6轮电动超跑Project Deep Space

    六个轮子、六个电动马达和一个灵感来自私人飞机的机舱,当你以200mph或更高的速度行驶时:没有人会指责汽车制造商Hennessey在谈到他们的Project Deep Space超跑时缺乏想象力。这家公司也许因制造更强大的性能皮卡版本而闻名,更不用说Venom F5了,它正在通过一款四座的全电动公路火箭来承诺更疯狂的事情。Hennessey Project Deep Space看起来更像是Thunderbirds的作品,而不是传统的豪华轿车。虽然该公司只分享了几张设计草图,但这

  • ConceptsiPhone展示带有侧滑副屏的iPhone 14概念智能机设计

    今秋发布的 iPhone 13 系列智能机,获得了相当不错的市场反响。与此同时,各路概念设计师已经在畅想下一代 iPhone 可能是什么样子。本文要为大家介绍的,则是来自油管 ConcetpsiPhone 频道的“侧滑 iPhone 14”。虽然苹果不见得会如此剑走偏锋,但侧滑出来的第二块屏幕的功能设计还是相当有趣。设计方面,ConceptsiPhone 为“侧滑 iPhone 14”概念智能机选用了打孔屏前摄方案,且后摄模组也与玻璃后盖完全持平(现阶段显然难以兼顾

  • OWC推出Accelsior 8M2 PCIe 4.0 SSD扩展卡:兼容PC与Mac Pro

    知名苹果配件制造商 OWC,刚刚推出了一款 PCIe 4.0 x16 固态硬盘扩展卡,它就是支持 64TB 容量、速度可达 26000 MB/s 的 Accelsior 8M2 。作为该公司旗下最快的 PCIe 4.0 SSD AIC,它还兼容 PC 与 Mac Pro 平台。如果在 PCIe 3.0 x16 插槽上使用,则读速会降低到 12000 MB/s 。(来自:OWC)OWC Accelsior 8M2 扩展卡可装备 8 条 PCIe 3.0 或 PCIe 4.0 固态硬盘,并且提供了多种容量选项。基于 8 条 240GB M.2 NVMe SSD 的“2TB”?

  • HPE以科技应对气候变化,助力实现1.5°C温控目标

    第 26 届联合国气候变化大会(COP26)制定了明确的目标,即将全球变暖的幅度控制在1. 5 度之内。这也表明,兑现《巴黎气候协定》中的承诺变得多么不易。世界所面临的一个最大挑战在于我们正以惊人的速度开发自然资源。《全球资源展望2019》(Global Resources Outlook2019 report)称,温室气体排放总量中的一半都是从开采和加工自然资源的过程中产生的。不仅如此,过去 50 年间,世界人口增加了两倍,但是对自然资源的索取却增长了三?

  • Phil Spencer:希望丰富Xbox休闲和社交类游戏

    微软的下一笔大型游戏收购可能会针对更广泛、更休闲受众的公司。在 Paley International Council 峰会上,Xbox 掌舵者 Spencer 接受彭博社报道时表示,收购并没有“配额”,关键在于是否合适。不过 Spencer 表示希望 Xbox 上有更多的休闲和社交游戏。Spencer 表示:“我们希望 Xbox 提供各种类型的游戏,我们有 Roblox,我们有Minecraft,我们有 FIFA 和 Fortnite,但我们希望继续投资于更多的社交、休闲内容”。自 2018 年以来,?

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天