纠结的前端优化

一、 来由

1. 一个网站已经做好了，但是发现访问速度太慢了，虽然以前做项目也有这个感觉…网站已成，修改后台代码之类的感觉太麻烦了，没有前端优化来的爽快。

    

二、网页性能测试工具

Page Speed:下载地址https://developers.google.com/speed/pagespeed/download?hl=zh-CN

这个插件有firefox和chrome版

排在最前面的代表最影响该网页性能的原因，每一项都可以展开，会有相应的建议来优化。

 

三、优化

前端优化主要是减少http请求数和请求的文件大小

1、优化图片、合并图片

许多图片可以无损压缩（去除不影响图片质量的附加信息），可以点击optimized versions有无损压缩版本。或者使用Smush.it ----- YUI 团队制作的一款基于 YUI 的在线图片优化工具 进行压缩。

CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。从而减少http请求数。

比如查看谷歌首页的一张图片

2、压缩、合并js、css

js、css中为了增加可读性会出现许多换行，空格以及注释，从而增加了文件的大小，增加了传输的时间，我们可以每次发布网站之前都对js、css使用一些在线压缩软件进行压缩，但是这样太麻烦，凡是有修改之类的特别麻烦。但是有一开源组件，不用每次手工压缩js等，而是自动对网页引用的js、css等进行压缩而且还可以进行合并。可以点击这里下载。将里面的dll添加到引用

添加完引用后页面添加以下代码压缩、合并

 

在添加上述代码之前，即没有压缩合并js、css，观察到

添加之后

引用的css文件都合并为squish_css.css，引用的js文件都合并为squish_js.js。而且合并后的文件更小了，比如

squish_css.css = 1.6KB < 904B + 1.31KB + 786B。因为合并的同时也进行了压缩，去除了注释、无用的换行和空格等。

 

3、gzip压缩

 

将DC.Web.HttpCompress.dll添加到引用，然后进行web.config配置

 

   1: <configSections>

   2:   <sectionGroup name="DCWeb">

   3:     <section name="HttpCompress" type="DC.Web.HttpCompress.Configuration,DC.Web.HttpCompress"/>

   4:   </sectionGroup>

   5: </configSections>

   1: <DCWeb>

   2:    <HttpCompress compressionType="GZip">

   3:      <PathSettings jsPath="js/" cssPath="css"/>

   4:      <!-- 配置需要压缩的类型资源 -->

   5:      <IncludedMimeTypes>

   6:        <add mime="text/html"/>

   7:        <add mime="image/gif"/>

   8:        <add mime="image/jpeg"/>

   9:        <add mime="image/png"/>

  10:        <add mime="text/css"/>

  11:        <add mime="application/x-javascript"/>

  12:      </IncludedMimeTypes>

  13:      <!--配置不压缩何种类型资源请使用：

  14:            <ExcludedMimeTypes>

  15:                <add mime="text/html" />

  16:            </ExcludedMimeTypes>

  17:            注意：ExcludedMimeTypes及IncludedMimeTypes只需要配置一个就可以，如果像上面那样配置ExcludeMimeTypes的话，则表明除html类型的资源外，其它资源都会被压缩-->

  18:      <!--<ExcludedPaths>

  19:        设定不启用压缩的页面路径，下面设定了default.aspx页面将不会启用压缩功能,但其它页面则正常启用压缩

  20:        <add path="Default.aspx"/>

  21:        </ExcludedPaths>-->

  22:    </HttpCompress>

  23:  </DCWeb>

   1: <httpModules>

   2:         <!--设定启用压缩模块的参数-->

   3:         <add name="HttpCompressModule"

   4:             type="DC.Web.HttpCompress.HttpModule,DC.Web.HttpCompress"/>

   5: </httpModules>

完成后http传输内容编码为gzip,下面两幅图是使用gzip压缩前后的对比

 

look，content-Encoding为gzip而且Content-Length也减少了很多。

4、前端还有许多优化方法，比如缓存、优化css、js代码等等，力不足，停笔。

四、代码

PageOptimization.rar