一般在网站发布时,会压缩前端HTML、CSS、JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现。当然,CDN分发、缓存等方式也是加快代码或资源文件传输的方式,但压缩代码和资源文件是最简单有效的手段,代码压缩的优点逐渐得到了大部分的开发者的认可,并已经成为了Web前端开发中不可或缺的一个步骤。以下是代码和资源压缩的具体实践方法。

1. Web服务器开启Gzip压缩

在HTTP协议中允许客户端可以选择从服务器上下载压缩的内容,Gzip就是其中一种支持的格式。Gzip是一种常见的压缩算法,可以参考维基百科的介绍获得这种算法的详细介绍 。目前,Gzip已经得到了大部分的主流Web服务器(比如IIS、nginx、apache、lighttpd等)和主流的浏览器的支持。服务器配置人员可以查看服务器对应的配置文档,开启Gzip压缩。服务器启用了Gzip压缩后,代码文件有更小的体积,尤其是文本文件。

Web服务器开启Gzip压缩后,会在Response的header中增加了Content-Encoding:gzip。可以通过检查此header项来判断服务器是否开启了Gzip压缩。

2. JavaScript代码压缩

JavaScript压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等。 JavaScript代码压缩工具很多,有在线工具、有应用程序、有编辑器插件。其中使用最多的是UglifyJSYUI CompressorClosure Compiler。UgligyJS不仅仅是一个压缩工具,同时具有JavaScript语法分析和代码美化功能,包括代码缩减、代码转化等。如:

var a = 10; var b = 20; ==> var a=10,b=20;
if (foo) bar(); else baz(); ==> foo?bar():baz();
if (foo) bar(); ==> foo&&bar();
new Array(1, 2, 3, 4) => [1,2,3,4]

Closure Compiler出自Google,来头不小。功能和UglifyJS类似,只是压缩的算法不同。

YUI Compressor出自Yahoo,此工具不同于以上两个工具。UgligyJS和Closure Compiler不光是Compressor,同时还是compiler,会针对代码进行优化,而YUI Compressor仅仅是压缩。

这三个工具都有对应的在线版,也可以本地安装后使用命令行方式。如果不想手动压缩代码,则可以选择编辑器自动化集成方式,比如在WebStorm编辑器中配置File Watchers。

3. CSS代码压缩

CSS代码压缩原理和JavaScript代码压缩的原理类似,也是去掉不必要的空格回车注释等,并同时优化合并一些CSS规则定义,让规则更简洁。比如,如下的代码:

background-color:#fff;
background-image: url(image.gif);
background-repeat:no-repeat;
background-position: top left;

会优化为:

background: #fff url(image.gif) no-repeat top left;

CSS代码压缩工具也有在线、本地应用程序和编译器插件。比较有名的在线在线工具是CSS Compressor,压缩时可以选择各种配置模式。自动化工具可以选择上面提到的JavaScript压缩工具YUI Compressor,YUI Compressor也可以压缩CSS代码。使用相同的工具压缩JavaScript和CSS代码,省去了安装多个工具的麻烦。

4. HTML代码压缩

压缩HTML代码的争议很大,反对的一方觉得压缩的作用不大,不像压缩JavaScript和CSS代码,压缩HTML代码仅仅是去掉空格回车注释等无关字符,并不会简化HTML代码本身,所以觉得在服务器开启Gzip就足够了。另外,压缩HTML代码也有一些限制,比如网站开发时,HTML页面并不是单纯地HTML代码,还是和服务器端脚本混合在了一起,比如PHP、ASP、JSP、ASP.NET等。压缩类似这些页面时,压缩的规则就比较复杂,也容易破坏代码。目前可用使用的HTML压缩工具不多,使用最多的时这款工具:htmlcompressor。使用此工具的时候需要仔细调查和测试,避免压缩工具破换页面的代码。

5. 图片资源压缩

除了代码的压缩外,网页中使用最多的资源文件就是图片,在一般的网站中,图片资源占有的比重还是挺大的。图片压缩工具主要是在线工具和本地应用程序,还没有好一点的编辑器插件可用。好在一般项目中,图片的变化并不是很大,所以图片的自动化压缩工具的需求并不是很迫切。

图片压缩工具也很多,以在线工具居多。在线工具中,推荐使用tinypng工具压缩PNG格式图片,推荐使用JpegMini压缩JPG格式图片。本地应用程序,则推荐ImageOptim。这是一款强大的工具,集成了多种压缩工具,所以可以压缩多种格式(如:PNG、JPEG及GIF动画)的图片,支持拖放操作,使用也非常方便。

以上就是网站发布时可以使用的各种资源压缩工具。除了在项目中使用合适压缩工具之外,何时压缩代码也很重要。因为压缩后的代码会影响代码的调试,使得开发者不易确定出错代码的位置,调试JavaScript代码时也不易设置断点,所以推荐在开发后期,甚至是在网站的发布阶段做代码和资源的压缩。如果放在网站发布阶段压缩,则开发者在开发过程中不需要考虑代码压缩的问题,方便了开发者的开发与调试。发布阶段压缩代码的方案也很成熟,比如使用ANT工具。ANT是一个基于Java™ 的构建工具,在这个工具中可以构建代码和资源压缩的任务:使用 YUI 压缩程序合并和压缩 JavaScript和CSS、使用 jpegtran和optipng优化JPG和PNG文件、使用htmlcompressor压缩 HTML及移除调试代码。

目前很流行的前端自动化构建工具Grunt 也可以集成代码和资源的压缩工具。在Grunt的插件列表页面上,有很多的压缩代码和资源文件的插件可用。比如,压缩JavaScript的grunt-contrib-uglify插件、压缩CSS代码的grunt-contrib-cssmin插件及压缩图片的grunt-contrib-imagemin插件等。

附录

Web前端开发最佳实践(3):前端代码和资源的压缩与合并的更多相关文章

  1. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  2. Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  3. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  4. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  5. Web前端开发最佳实践系列文章汇总

    Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...

  6. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  7. Web前端开发最佳实践(7):使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

  8. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  9. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

随机推荐

  1. 03-树2. List Leaves (25) 二叉树的层序遍历

    03-树2. List Leaves (25) 题目来源:http://www.patest.cn/contests/mooc-ds/03-%E6%A0%912 Given a tree, you a ...

  2. intellij 插件结构(文件结构以及概念层面上的结构)

    1.插件内的文件 2.插件类加载器 3.插件组件(component) 4.插件的扩展以及扩展点(Extensions.Extension Points) 5.插件的Action 6.插件的Servi ...

  3. jdk1.5后枚举类的定义规则

    转: http://blog.csdn.net/willcold/article/details/12844487  JDK1.5 新增的enum关键字用于定义枚举类             枚举类也 ...

  4. maven私服Nexus3.2的使用

    maven搭建私服的步骤: 分三步: 第一步:下载maven的安装包,然后配置好maven的环境变量. 第二步:将maven的私服Nexus安装好,修改maven的配置文件setting.xml问,在 ...

  5. forEach、for+i、map的用法及区别

      array.forEach(callback[, thisObject]); 下面是参数的详细信息: 1. callback : 函数测试数组的每个元素. 2.thisObject : 对象作为该 ...

  6. 不管谁坐了CIO的位置 都必须了解的法则

    目前一些设立了CIO岗位的央企中,CIO也只做到了“IO”(信息官,Information Officer),而没有做到“C”(首席,Chief).老总们总在抱怨没有合适的人选:懂技术的不懂业务,懂业 ...

  7. jQuery Mobile基本UI组件

    基本页面构造 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=&quo ...

  8. 【CodeForces】671 D. Roads in Yusland

    [题目]D. Roads in Yusland [题意]给定n个点的树,m条从下往上的链,每条链代价ci,求最少代价使得链覆盖所有边.n,m<=3*10^5,ci<=10^9,time=4 ...

  9. OGG相关操作

    参数文件详解: 1)truncate ogg 进程: Manager进程:manager进程是配置在源端和目标端 Extract(抽取)进程:部署在源端,用于捕获数据表或者日志中的数据文件: Pump ...

  10. Workqueue机制的实现

    Workqueue机制中定义了两个重要的数据结构,分析如下: cpu_workqueue_struct结构.该结构将CPU和内核线程进行了绑定.在创建workqueue的过程中,Linux根据当前系统 ...