网站性能指南(四):前端性能-压爆你的文件

王朝学院·作者佚名  2016-04-29
窄屏简体版  字體: 小  |  中  |  大  |  超大  

【概述】

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

1.外部的CSS 和 javascript

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

3.图片的最佳化

4.Css 图片拼合器

【外部的CSS和Javascript】

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

1.减少页面的尺寸

2.允许重用

3.允许使其过期

4.可读性更高

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

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

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

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

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

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

1.迷你化

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

1.2同样可以看到这样的文件名中包含“.min” (如果你经常使用jquery的插件,你会看到很多min文件)

1.3我们看一下jquery官网,开发版本大小是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 任务

合并文件以减少httprequest次数

msbuild

3策略实践

3.1使用外部文件

3.2迷你化css和js文件

3.3把所有js文件合并成一个文件(jquery、jquery插件等)

3.4合并所有css文件成一个文件

3.5添加一个唯一的版本号到合并的文件中,日后我们可以控制浏览器缓存

3.6避免当我们在运行时迷你化和合并文件时发生的冲突

3.7引用新的合并过的文件

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

<!-- 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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航