Menu

网页加速之“JS/CSS压缩优化”

我们在浏览网页的时候,浏览器需要把网页上的内容,包括网页HTML,CSS,JS,FLASH和图片等下载到本地,然后把它们显示出来。如果网页上的内容是固定的,下载速度也不是你我能控制的,但下载的大小则是可以控制的,只需要你再传送的过程中先把内容压缩优化一下即可。

对于一般的HTML,CSS和JS文件,GZIP的压缩比率达50%到80%,节约的流量是非常惊人的。相应的静态文本压缩的Apache模块有两种,GZIP和DEFLATE,后者更好,不过这都没啥选择,完全看服务器是否提供,个人无法配置,比如使用最多的Bluehost和Dreamhost都不支持。除了服务器本身提供的压缩之外,我们还可以对标准格式的CSS和JS等文件进行手动压缩优化。

Steve Souders在他的《High Performance Web Sites》一书中提出提高网页效率的14条准则,这些可以使用Yahoo! YSlow来进行一个比较形象的检测。这里主要来说一下第一条准则:Make Fewer HTTP Requests,意思就是尽可能的减少HTTP请求。当时要达到这个目的有很多种方法,其中最重要的一点就是将CSS文件和Javascript文件分别进行压缩和合并,这样就在很大程度上减少了浏览器对服务器的HTTP请求,另外一旦被浏览器下载到本地可以对此进行缓存,从而提高了加载速度。

压缩方法:

减少注释和不必要空格,多行合并,优化代码,减小文件大小。

关于压缩工具:

网络上常见的工具是简单的正则、字符串替换, 这种压缩方法比较传统,压缩后的代码可能在安全稳定方面有不足。除此之外,业界近几年出现了几个知名的压缩内核,内核模拟浏览器词法分析,压缩后的代码非常的安全稳定。

UglifyJS 是用 NodeJS 编写的 JavaScript 压缩工具,是目前最流行的JS压缩工具,JQuery 就是使用此工具压缩,UglifyJS 压缩率高,压缩选项多,并且具有优化代码,格式化代码功能。

YUI compressor 是Java编写的压缩工具,由雅虎发布,压缩是 100% 的安全,比大多数其他工具有更高的压缩比, 一般代码的压缩率达到 40% 至 60%,YUI compressor 也能够压缩CSS文件,国内互联网公司,阿里、淘宝、百度等都是采用 YUI compressor 内核压缩后发布代码。

JSPacker 由PHP编写的压缩工具,可以混淆代码保护知识产权,产生的代码兼容IE、FireFox等常用浏览器,国内大部分在线工具网站都采用这种算法压缩,只因为此算法采用PHP编写,正则表达式替换语句,没有语法分析内核,环境搭建成本低,压缩率上远不如以上两种内核,并且混淆代码页不符合开源精神。

JsMin 是用C语言编写的一个轻量级JS压缩器,去除JavaScript文件中的注释和不必要的空格。它通常减少了一半的文件大小,从而导致更快的下载速度。

对于其他压缩内核比如 Google Closure Compiler 根据反馈,由于压缩出错率太高,并且不是主流压缩内核,使用相对比较少一些。

压缩工具使用:

网上很轻松就能找到各种在线压缩工具,使用的内核各不相同。当然我们在压缩文件时候尽量使用软件进行压缩,方便快捷,安全稳定。

这里介绍一种国人(zjfree)做的压缩工具:JsCssZip,使用的压缩算法为:YUI Compressor for .Net,使用VS2005 C#开发,可以将指定目录包含的所有JS或CSS压缩,压缩生成的文件存储在“_bak”目录下。工具大家可以网上搜。

压缩好处:

文件压缩、减少文件数量等都是前台页面优化的措施,主要对网页加速有四点:1、减小了文件的体积;2、减小了网络传输量和带宽占用;3、减小了服务器的处理的压力;4、提高了页面的渲染显示的速度。

本文固定连接:https://code.zuifengyun.com/2014/07/527.html,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持
  • 东元电机 8年前(2016-08-22) 沙发

    好像很牛B的样子顺便也留下个脚印:http://teco-motors.com/post/276.html

  • 奇虎分享网 8年前(2016-08-24) 板凳

    写的不错哈,支持一下