纠结的前端优化
一、 来由
- 一个网站已经做好了，但是发现访问速度太慢了，虽然以前做项目也有这个感觉…网站已成，修改后台代码之类的感觉太麻烦了，没有前端优化来的爽快。
二、网页性能测试工具
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代码等等，力不足，停笔。
