国产男女精品_免费黄网在线观看_av综合在线观看_在线v片_欧美一区二区三区激情视频_99视频只有精品

【概述】

在這一章，我們會(huì)聚焦在前端性能：

1.外部的Css 和 Javascript

2.Css 和 Javascript 的 迷你化 與 合并

3.圖片的最佳化

4.Css 圖片拼合器

【外部的CSS和Javascript】

幾乎所有的CSS和Javascript 都應(yīng)該放在外部文件

1.減少頁面的尺寸

2.允許重用

3.允許使其過期

4.可讀性更高

把css 和 js 文件放到外部文件的確可以讓頁面看的更加清爽，同時(shí)減小了頁面本身的尺寸。

在外部的文件可重用性更高，例如你可以在一個(gè)css文件中定義整體布局。并且讓每個(gè)頁面的元素都遵從它。

在上一節(jié)中，我們提到了瀏覽器過期的重要性，所以在外部引用css和js文件也是非常重要的。

最后是可讀性，有超過50%的人遇到過混亂的頁面。里邊夾雜著html、js、css 甚至還有c#code。這樣的代碼的可讀性和維護(hù)性都差到極點(diǎn)了。

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

Css 和 javascript 的迷你化與合并是一種減少 httprequest 和傳輸數(shù)據(jù)量 的行之有效的方式。

1.迷你化

1.1移除白空格、注釋和多余的分號等

1.2同樣可以看到這樣的文件名中包含“.min” （如果你經(jīng)常使用jquery的插件，你會(huì)看到很多min文件）

1.3我們看一下jquery官網(wǎng)，開發(fā)版本大小是247KB，min版只有32KB。整整壓縮了88%。

2迷你化的工具合并

2.1JSMin

2.2Packer

2.3YUI Compressor

2.4CSS Min

2.5Microsoft Ajax Minifier （特別推薦 http://ajaxmin.codeplex.com/）

javascript 和 css

命令行、dll和build 任務(wù)

合并文件以減少httprequest次數(shù)

msbuild

3策略實(shí)踐

3.1使用外部文件

3.2迷你化css和js文件

3.3把所有js文件合并成一個(gè)文件（jquery、jquery插件等）

3.4合并所有css文件成一個(gè)文件

3.5添加一個(gè)唯一的版本號到合并的文件中，日后我們可以控制瀏覽器緩存

3.6避免當(dāng)我們在運(yùn)行時(shí)迷你化和合并文件時(shí)發(fā)生的沖突

3.7引用新的合并過的文件

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

2.修改一個(gè).cs文件，確保項(xiàng)目文件可以重新編譯（如果我們只是修改js和css文件，項(xiàng)目不會(huì)重新編譯）

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é)尾放了一個(gè)完整的代碼示例。我們需要安裝msbuild 和它的擴(kuò)展 ajaxmodifier

<!-- 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)MicrosoftMicrosoftAjaxajaxmin.tasks" />
  <Import Project="$(MSBuildExtensionsPath)ExtensionPack4.0MSBuild.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="contentSite.css" />
    </ItemGroup>
    <!--css file to combine-->
    <ItemGroup>
      <CSSCat Include="contentsite.min.css" />
    </ItemGroup>
    <!--js file that need minimizing-->
    <ItemGroup>
      <JSMin Include="Scriptsjquery-1.5.1.js"/>
      <JSMin Include="ScriptsMicrosoftMvcAjax.js"/>
    </ItemGroup>
    <!--js file to combine-->
    <ItemGroup>
      <JSCat Include="Scriptsjquery-1.5.1.min.js"/>
      <JSCat Include="ScriptsMicrosoftMvcAjax.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>