Html压缩

增加网页访问速度，主要基于一下几个方面。

1.网速，这一点是最重要的，但这一点，作为程序员的我们无法改变。

2.服务器，硬件配置，这一块决定了服务器处理速度。这一点，作为程序员的我们也无法改变。

3.相关数据库表结构，简而言之，就是数据库访问速度，这一块对于我们刚刚入门的IT男而言，没有设计数据库的经验，我们也没啥可以发挥的地方。

4.页面代码的优化，这里我们主要介绍这一块（这里还是引用了很多网络上的资源，这里只是汇总整理，原因就是我也是个刚入门的IT男，也没有多少相关经验）。

 

 

A.简化html页面，删除页面多余的空格和注释。原因很简单，当网络传输速度一定的时候，我们就要减小下载文件的大小。（来自：http://www.divcss5.com/jiqiao/j326.shtml）

一、将table改为div布局

尽量将table标签布局html重构div布局，可以节约至少40%的代码量。由于div代码少于table布局的html网页，所以搜索引擎索引权重也优于table布局的html网页。

二、缩减精简div、span、ul li等系列标签  -   

布局DIV+CSS网页时候，我们有时候可以节约一些DIV布局代码，减少代码量。
如下案例代码：

1.  <div class="divcss5"> 
2.  　　<ul> 
3.  　　<li>CSS学习去DIVCSS5</li>
4.  　　<li>我爱DIVCSS5</li> 
5.  　　<li>DIV+CSS学习去DIVCSS5</li> 
6.  　　</ul> 
 7.  </div> 

可以改为：

 1.  <ul class="divcss5"> 
 2.  　　<li>CSS学习去DIVCSS5</li> 
 3.  　　<li>我爱DIVCSS5</li> 
 4.  　　<li>DIV+CSS学习去DIVCSS5</li> 
5.  </ul> 

这样可以节约一对div标签，从而减少html代码量，起到压缩html作用。这样直接对ul命名css样式类，可以区别在一个页面不同地方使用ul li列表标签。

三、删除多余空格  

删除多余空格换行，可以有效地压缩html代码占用字节，一般在开发完成后可以对html中代码进行删除换行和空格内容。

可以借助于DW软件进行批量删除html内标签之间空格

如：

1.  <div class="divcss5">
2.  　　<div ...></div> 
3.  </div> 

可以删除空格与换行后：

1.  <div class="divcss5"><div ...></div></div> 

这样即可节约空格和换行所占字节。

注意的是，网页发布版的可以借助于DW进行删除多余空格与空行。如果要再编辑，再到DW软件进行代码格式化排版即可。

四、表格类型布局时候适当使用table替代div布局  

如果是本身是表格数据列表排版，我们最好选择table，因为表格布局使用table优于div布局，使用table布局却比div布局节约html标签代码和节约css样式。

 

B.对css，js文件的处理。

     这一块处理，就是提取公用的css样式和js脚本，采取外部独立文件的形式，可以减少下载文件的大小。这里一般采用Gzip的方式去优化这一块。（来自：http://blog.const.net.cn/a/11471.htm）

GZIP压缩是一个经常被用到的WEB性能优化的技巧，它主要是对页面代码，CSS，Javascript，PHP等文件进行压缩，而且在压缩的前后，文件的大小会有明显的改变，从而达到网站访问加速的目的。
    接下来我们就介绍一下什么是GZIP压缩，以及GZIP压缩是个什么概念。
   GZIP网页压缩，是一种WEB服务器与浏览器之间共同遵守的协议，也就是说WEB服务器和浏览器都必须支持该技术才能实现GZIP压缩，而当下主流的浏览器都是支持GZIP压缩，包括IE6、IE7、IE8、IE9、FireFox、谷歌浏览器、Opera等，而常见的WEB服务器通常有Apache和IIS两种。 GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNIX系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。
目前，GZIP已经成为Internet上使用非常普遍的一种数据压缩格式，或者说一种文件格式。 下面介绍一下GZIP压缩时，WEB服务器与浏览器之间的协商过程如下： 1、首先浏览器请求某个URL地址，并在请求的开始部分头(head) 设置属性accept-encoding值为gzip、deflate，表明浏览器支持gzip和deflate这两种压缩方式（事实上deflate也是使用GZIP压缩协议，在之后的内容之我们会介绍二者之间的区别）； 2、WEB服务器接收到请求后判断浏览器是否支持GZIP压缩，如果支持就传送压缩后的响应内容，否则传送不经过压缩的内容； 3、浏览器获取响应内容后，判断内容是否被压缩，如果是压缩文件则解压缩，然后显示响应页面的内容。 HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指 WWW服务器中安装的一个功能，当有人来访问这个服务器的网站时，服务器的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文 内容可压缩到原大小的40%，这样以来文件的体积就减小了很多，传输速度也就快了。效果就是你点击网址后会很快的显示出来。当然这也会增加服务器的负载，一般的服务器中都会安装有这个功能模块。 GZIP压缩的比率往往在3倍到10倍，也就是本来90k大小的页面，采用压缩后实际传输的内容大小只有28至30K大小，这可以大大节省服务器的网络带宽，同时如果应用程序的响应足够快时，网站的速度瓶颈就转到了网络的传输速度上，因此内容压缩后就可以大大的提升页面的浏览速度。 在实际应用中，我们并不需要对网站所有文件都进行压缩，只需要对静态文件进行压缩就可以了，比如Javascript、CSS及和HTML文件。对其他文件进行压缩并不会给WEB性能带来太多的改观，并且对网站开启GZIP功能是需要牺牲部分服务器性能的。而且对于FLASH文件来说开启GZIP压缩之后还会影响其效果。

 

C.对于网页中相关媒体素材的优化。

网 页尺寸大小往往有网页上的图片，视频以及音频或者现在比较少用的flash造成的，如果网页上的这些元素少了，仅仅是文字性的内容，自然整个网页的尺寸就能够降下来，可是如果没有这些元素，网页看起来又太单调，对用户的吸引力不够，特别是一些视频网站，其主要内容更是以视频为主，所以在不能够减少这些元素 的应用之后，剩下来的就是要想办法把这些元素进行压缩了，不过对于图片音频和视频而言，可以通过格式的转变还是比较容易实现的!另外对于播放flash， 视频音频的控件也能够通过优化代码的方式来实现，这样就能够极大的减少网页的尺寸，让用户实现高速冲浪的快感!