【网站性能指南】之四前端性能

【概述】

目前创新互联已为数千家的企业提供了网站建设、域名、雅安服务器托管、成都网站托管、企业网站设计、荣县网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

在这一章，我们会聚焦在前端性能:

外部的Css 和 Javascript

Css 和 Javascript 的 迷你化 与 合并

图片的***化

Css 图片拼合器

【外部的CSS和Javascript】

几乎所有的CSS和Javascript 都应该放在外部文件

减少页面的尺寸；允许重用；允许使其过期 ；可读性更高

把css 和 js 文件放到外部文件的确可以让页面看的更加清爽，同时减小了页面本身的尺寸。

在外部的文件可重用性更高，例如你可以在一个css文件中定义整体布局。并且让每个页面的元素都遵从它。

在上一节中，我们提到了浏览器过期的重要性，所以在外部引用css和js文件也是非常重要的。

***是可读性，有超过50%的人遇到过混乱的页面。里边夹杂着html、js、css 甚至还有c#code。这样的代码的可读性和维护性都差到极点了。

【Css和Javascript的迷你化与合并】

Css 和 javascript 的迷你化与合并是一种减少 httprequest 和传输数据量 的行之有效的方式。

迷你化

1.移除白空格、注释和多余的分号等

2.同样可以看到这样的文件名中包含".min" （如果你经常使用jquery的插件，你会看到很多min文件）

3.我们看一下jquery官网，开发版本大小是247KB，min版只有32KB。整整压缩了88%。

迷你化的工具合并

·JSMin

·Packer

·YUI Compressor

·CSS Min

·Microsoft Ajax Minifier （特别推荐 http://ajaxmin.codeplex.com/)

javascript 和 css；命令行、dll和build 任务；

·合并文件以减少httprequest次数msbuild

·策略实践

使用外部文件；迷你化css和js文件；把所有js文件合并成一个文件（jquery、jquery插件等）；合并所有css文件成一个文件；添加一个唯一的版本号到合并的文件中，日后我们可以控制浏览器缓存；避免当我们在运行时迷你化和合并文件时发生的冲突；引用新的合并过的文件。

1.找到Visual studio Project File（.csporj)

2.修改一个.cs文件，确保项目文件可以重新编译（如果我们只是修改js和css文件，项目不会重新编译）

3.使用msbuild Extension Pack（http://msbuildextensionpackcodeplex.com）

4.通过bin目录下webform程序集得到版本号。

5.使用Msbuild ajaxmodifier 去迷你化js和css文件。

6.使用Msbuild 去合并迷你化之后的文件。

7.注意文件以前的引用顺序。保持以前的顺序。

8.使用debug symbol vaule去确定是否在release 模式，为新的release build 引用新的合并过的文件。

结果：主页快了46%

代码：

为了贴切描述这一过程，一下是proj文件的关键code。为了便于大家理解，我在本章的结尾放了一个完整的代码示例。我们需要安装msbuild 和 它的扩展 ajaxmodifier

看看结果，我的proj里多了2个文件。我们在引用这两个文件时候只需要拼接出版本号即可。

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.     
    3.   
  
  
  
  3.     
    4.   
  
  
  
  4.     
    5.   
  
  
  
  5.       
    6.   
  
  
  
  6.         
    7.   
  
  
  
  7.         
    8.   
  
  
  
  8.       
    9.   
  
  
  
  9.       
    10.   
  
  
  
  10.     
    11.   
  
  
  
  11.     
    12.   
  
  
  
  12.       
    13.   
  
  
  
  13.       
    14.   
  
  
  
  14.       
    15.   
  
  
  
  15.       
    16.   
  
  
  
  16.       
    17.   
  
  
  
  17.         
    18.   
  
  
  
  18.       
    19.   
  
  
  
  19.       
    20.   
  
  
  
  20.       
    21.   
  
  
  
  21.       
    22.   
  
  
  
  22.         
    23.   
  
  
  
  23.       
    24.   
  
  
  
  24.       
    25.   
  
  
  
  25.       
    26.   
  
  
  
  26.         
    27.   
  
  
  
  27.       
    28.   
  
  
  
  28.       
    29.   
  
  
  
  29.       
    30.   
  
  
  
  30.         
    31.   
  
  
  
  31.         
    32.   
  
  
  
  32.       
    33.   
  
  
  
  33.       
    34.   
  
  
  
  34.       
    35.   
  
  
  
  35.         
    36.   
  
  
  
  36.         
    37.   
  
  
  
  37.        
    38.   
  
  
  
  38.       
    39.   
  
  
  
  39.       
    40.   
  
  
  
  40.       
    41.   
  
  
  
  41.       
    42.   
  
  
  
  42.       
    43.   
  
  
  
  43.  
    44.   
  
  
  
  44.       
    45.   
  
  
  
  45.       
    46.   
  
  
  
  46.         
    47.   
  
  
  
  47.       
    48.   
  
  
  
  48.       
    49.   
  
  
  
  49.       
    50.   
  
  
  
  50.         
    51.   
  
  
  
  51.       
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53.       
    54.   
  
  
  
  54.           
    55.   
  
  
  
  55.       
    56.   
  
  
  
  56.       
    57.   
  
  
  
  57.         
    58.   
  
  
  
  58.         
    59.   
  
  
  
  59.       
    60.   
  
  
  
  60.    
    61.

#p#

【图片***化】

我们平时接触到的图片大概分以下几种：

JPEG JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持***级别的压缩，不过，这种压缩是有损耗的。

PNG  流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，其目的是企图替代GIF和TIFF文件格式

GIF  GIF 是用于压缩具有单调颜色和清晰细节的图像（如线状图、徽标或带文字的插图）的标准格式。

如果我们不能确定用哪种格式的图片，我们需要提供3种不同格式的相同图片，并且比较它们的质量和图片占用空间。

在这里我主要讲一下JEPG的压缩。我的想法是缩小50%的占用空间，看看它的质量如何？

【图片优化器】

Jpegtran 用特定的图像格式从图像文件中删除不必要的元数据，无损

PNGcrush PNG优化器

Smushit http://www.smushit.com/ysmush.it/ （同Jpegtran，支持多种格式，雅虎提供）

Paint.Net 按比例压缩

下图是我使用了 PaintNet 和Smushit优化过的图片。原图是右边的，大小32K。PaintNet压缩50%后为左上图。下图是使用Smushit去掉无用的元数据。大小30K。

【CSS 图片拼合器】

Css拼合器是一种合并图片的工具。说它是一种，就是有很多工具可以实现这个功能。

它的主要功能是可以把很多小图片合并成一张图片，这样有效减少了httprequest的次数。

使用小图片时，只需要根据位置在那张图片上定位。

我们可以访问:http://spritegen.website-performance.org/ 去使用它。

【try it】

访问 css 拼合器站点。

把需要拼接的图片打包成zip格式。

上传

勾选一些自定义的选项

生成

我去人人网主页选择了3张图片，使用压缩工具把它们打包，并且上传。

点击了最下边生成拼合图片之后。可以看到上方多了3行css 规则：

 
 
 
 
    
  
  
  
  
  1. .sprite-rrdesk{ background-position: 0 0; width: 75px; height: 75px; }   
    2.   
  
  
  
  2. .sprite-rrgame{ background-position: 0 -125px; width: 75px; height: 75px; }   
    3.   
  
  
  
  3. .sprite-rrmusic{ background-position: 0 -250px; width: 75px; height: 75px; }  
    4.

让我们看看合并之后的图片：

在项目中使用的时候我们先引用css，在html里只需要这样就可以啦：

 
 
 
 
    
  
  
  
  
  1.   
    2.

msbuild demo的源代码：

http://files.cnblogs.com/techborther/MsBuildUsage.7z

【msbuild 参考】  ：http://msdn.microsoft.com/zh-cn/library/0k6kkbsd.aspx

原文链接：http://www.cnblogs.com/techborther/archive/2012/08/19/2624989.html

网站题目：【网站性能指南】之四前端性能
网站链接：http://www.shufengxianlan.com/qtweb/news1/281351.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

分类信息网

成都光华电信机房　　 　B2C电商系统　　 　网站优化排名　　 　重庆网站建设网络公司　　 　二枢服务器托管　　 　泸县网站建设　　 　绵阳网站制作公司　　 　外贸营销网站建设　　 　成都服务器托管　　 　全网营销　　 　网站空间　　 　成都封阳台　　 　重庆网站制作　　 　定制网站开发　　 　服务器租用　　 　成都响应式网站建设　　 　虚拟主机　　 　百度推广公司　　 　广告品牌策划设计　　 　APP定制