【網(wǎng)站性能指南】之四前端性能
【概述】
在這一章，我們會聚焦在前端性能:
外部的Css 和 Javascript
Css 和 Javascript 的 迷你化 與 合并
圖片的***化
Css 圖片拼合器
【外部的CSS和Javascript】
幾乎所有的CSS和Javascript 都應(yīng)該放在外部文件
減少頁面的尺寸；允許重用；允許使其過期 ；可讀性更高
把css 和 js 文件放到外部文件的確可以讓頁面看的更加清爽，同時減小了頁面本身的尺寸。
在外部的文件可重用性更高，例如你可以在一個css文件中定義整體布局。并且讓每個頁面的元素都遵從它。
在上一節(jié)中，我們提到了瀏覽器過期的重要性，所以在外部引用css和js文件也是非常重要的。
***是可讀性，有超過50%的人遇到過混亂的頁面。里邊夾雜著html、js、css 甚至還有c#code。這樣的代碼的可讀性和維護(hù)性都差到極點(diǎn)了。
【Css和Javascript的迷你化與合并】
Css 和 javascript 的迷你化與合并是一種減少 httprequest 和傳輸數(shù)據(jù)量 的行之有效的方式。
迷你化
1.移除白空格、注釋和多余的分號等
2.同樣可以看到這樣的文件名中包含".min" （如果你經(jīng)常使用jquery的插件，你會看到很多min文件）
3.我們看一下jquery官網(wǎng)，開發(fā)版本大小是247KB，min版只有32KB。整整壓縮了88%。
迷你化的工具合并
·JSMin
·Packer
·YUI Compressor
·CSS Min
·Microsoft Ajax Minifier （特別推薦 http://ajaxmin.codeplex.com/)
javascript 和 css；命令行、dll和build 任務(wù)；
·合并文件以減少httprequest次數(shù)msbuild
·策略實(shí)踐
使用外部文件；迷你化css和js文件；把所有js文件合并成一個文件（jquery、jquery插件等）；合并所有css文件成一個文件；添加一個唯一的版本號到合并的文件中，日后我們可以控制瀏覽器緩存；避免當(dāng)我們在運(yùn)行時迷你化和合并文件時發(fā)生的沖突；引用新的合并過的文件。
1.找到Visual studio Project File（.csporj)
2.修改一個.cs文件，確保項(xiàng)目文件可以重新編譯（如果我們只是修改js和css文件，項(xiàng)目不會重新編譯）
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 引用新的合并過的文件。
結(jié)果：主頁快了46%
代碼：
為了貼切描述這一過程，一下是proj文件的關(guān)鍵code。為了便于大家理解，我在本章的結(jié)尾放了一個完整的代碼示例。我們需要安裝msbuild 和 它的擴(kuò)展 ajaxmodifier
看看結(jié)果，我的proj里多了2個文件。我們在引用這兩個文件時候只需要拼接出版本號即可。
- <!-- To modify your build process, add your task inside one of the targets below and uncomment it.
- Other similar extension points exist, see Microsoft.Common.targets.-->
- <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
- <Import Project="$(MSBuildExtensionsPath)\ExtensionPack\4.0\MSBuild.ExtensionPack.tasks" />
- <Target Name="BeforeBuild">
- <ItemGroup>
- <GeneratedCSSJS Include="client/combined.*.css" />
- <GeneratedCSSJS Include="client/combined.*.js" />
- </ItemGroup>
- <Delete Files="@(GeneratedCSSJS)" />
- </Target>
- <Target Name="AfterBuild">
- <!--"Touch" a .cs file to force a rebuild so get a new version number even when only change .css or js files-->
- <Exec Command="ATTRIB -R code/forceRebuild.cs" />
- <Touch Files="code/forceRebuild.cs" />
- <Exec Command="ATTRIB +R code/forceRebuild.cs" />
- <MSBuild.ExtensionPack.Framework.Assembly TaskAction="GetInfo" NetAssembly="$(OutputPath)\MsBuildUsage.dll">
- <Output TaskParameter="OutputItems" ItemName="Info" />
- </MSBuild.ExtensionPack.Framework.Assembly>
- <Message Text="Version:%(Info.AssemblyVersion)" Importance="high" />
- <!--css file that need minimizing-->
- <ItemGroup>
- <CSSMin Include="content\Site.css" />
- </ItemGroup>
- <!--css file to combine-->
- <ItemGroup>
- <CSSCat Include="content\site.min.css" />
- </ItemGroup>
- <!--js file that need minimizing-->
- <ItemGroup>
- <JSMin Include="Scripts\jquery-1.5.1.js"/>
- <JSMin Include="Scripts\MicrosoftMvcAjax.js"/>
- </ItemGroup>
- <!--js file to combine-->
- <ItemGroup>
- <JSCat Include="Scripts\jquery-1.5.1.min.js"/>
- <JSCat Include="Scripts\MicrosoftMvcAjax.min.js"/>
- </ItemGroup>
- <!--Actual minimization and combine tasks-->
- <Message Text="minimization and combine js and css files..." Importance="high" />
- <AjaxMin JsSourceFiles="@(JSMin)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CssMin)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
- <Message Text="Concatinating js and css files..." Importance="high" />
- <ReadLinesFromFile File="%(JSCat.Identity)">
- <Output TaskParameter="Lines" ItemName="JSLines" />
- </ReadLinesFromFile>
- <WriteLinesToFile File="client/combined.%(Info.AssemblyVersion).min.js" Lines="@(JSLines)" OverWrite="true" />
- <ReadLinesFromFile File="%(CSSCat.Identity)">
- <Output TaskParameter="Lines" ItemName="CSSLines" />
- </ReadLinesFromFile>
- <WriteLinesToFile File="client/combined.%(Info.AssemblyVersion).min.css" Lines="@(CSSLines)" OverWrite="true" />
- <!--Include the combined files temporarily in project so publish moves them-->
- <ItemGroup>
- <Content Include="client/combined.%(Info.AssemblyVersion).min.js" />
- <Content Include="client/combined.%(Info.AssemblyVersion).min.css" />
- </ItemGroup>
- </Target>
#p#
【圖片***化】
我們平時接觸到的圖片大概分以下幾種：
JPEG JPEG 圖片以 24 位顏色存儲單個光柵圖像。JPEG 是與平臺無關(guān)的格式，支持***級別的壓縮，不過，這種壓縮是有損耗的。
PNG 流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的“PNG’s Not GIF”，其目的是企圖替代GIF和TIFF文件格式
GIF GIF 是用于壓縮具有單調(diào)顏色和清晰細(xì)節(jié)的圖像（如線狀圖、徽標(biāo)或帶文字的插圖）的標(biāo)準(zhǔn)格式。
如果我們不能確定用哪種格式的圖片，我們需要提供3種不同格式的相同圖片，并且比較它們的質(zhì)量和圖片占用空間。
在這里我主要講一下JEPG的壓縮。我的想法是縮小50%的占用空間，看看它的質(zhì)量如何？
【圖片優(yōu)化器】
Jpegtran 用特定的圖像格式從圖像文件中刪除不必要的元數(shù)據(jù)，無損
PNGcrush PNG優(yōu)化器
Smushit http://www.smushit.com/ysmush.it/ （同Jpegtran，支持多種格式，雅虎提供）
Paint.Net 按比例壓縮
下圖是我使用了 PaintNet 和Smushit優(yōu)化過的圖片。原圖是右邊的，大小32K。PaintNet壓縮50%后為左上圖。下圖是使用Smushit去掉無用的元數(shù)據(jù)。大小30K。
【CSS 圖片拼合器】
Css拼合器是一種合并圖片的工具。說它是一種，就是有很多工具可以實(shí)現(xiàn)這個功能。
它的主要功能是可以把很多小圖片合并成一張圖片，這樣有效減少了httprequest的次數(shù)。
使用小圖片時，只需要根據(jù)位置在那張圖片上定位。
我們可以訪問:http://spritegen.website-performance.org/ 去使用它。
【try it】
訪問 css 拼合器站點(diǎn)。
把需要拼接的圖片打包成zip格式。
上傳
勾選一些自定義的選項(xiàng)
生成
我去人人網(wǎng)主頁選擇了3張圖片，使用壓縮工具把它們打包，并且上傳。
點(diǎn)擊了最下邊生成拼合圖片之后。可以看到上方多了3行css 規(guī)則：
- .sprite-rrdesk{ background-position: 0 0; width: 75px; height: 75px; }
- .sprite-rrgame{ background-position: 0 -125px; width: 75px; height: 75px; }
- .sprite-rrmusic{ background-position: 0 -250px; width: 75px; height: 75px; }
讓我們看看合并之后的圖片：
在項(xiàng)目中使用的時候我們先引用css，在html里只需要這樣就可以啦：
- <span class = "sprite-rrgame"> <span>
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
【編輯推薦】
- 【網(wǎng)站性能指南】之一概述
- 【網(wǎng)站性能指南】之二網(wǎng)站性能測量神器
- 【網(wǎng)站性能指南】之三基礎(chǔ)建設(shè)
- Web前端應(yīng)該掌握的初、中、高、技能
- 學(xué)習(xí)Web開發(fā)技術(shù)***教程網(wǎng)站和博客
