转 web前端性能分析--分析篇

经过具体实施后就能够得到第一手的web前端性能的数据了，而后每次新版本都跑，这就会得到大量的数据，为性能分析提供了基础的输入，同时应该还要综合使用多种工具去从不一样的方向收集数据；好比showslow同时还支持yslow，pagespeed，webpagetest等测试工具传上去的数据，所以在具体的分析以前要从纵向、横向来收集数据，这样统计分析出来的结果才能有实际的参考价值。固然若是你还发现其它工具也能够提供一些性能数据，也能够收集起来，好比：httpanalyzer，httpwatcher都支持程序调用接口，很方便就能够收集http访问过程当中的数据。还有像firebug，ie开发者工具都是能够提供性能调用功能的。


“工欲善其事，必先利其器”，工具备了，生产资料也有了--数据，那么后面的工做是靠咱们本身的劳动力来产生价值了。性能调优的前提是分析出问题，分析问题是须要必定的准则的，不能盲人摸象人家说性能很差就很差，人家说已经调到最优了就是最优的状态了，只能这些标准仍是须要结合实际状况来考虑不能一味的应用。好比：全部的最佳实践都会建议少加图片的展现，搜索网站是能够这样，可是若是是电子商务网站不多是这样，不然网站就没有必要作了；而性能调优正是在这些现有的情况下、保证现有业务功能的前提下去找出具体能够优化的细节，帮助提升总体性能，而不是以牺牲业务功能为代价。好比：电子商务的网站虽然不能减小，可是能够把图片转换成优化格式的文件，png比bmp确定好，png8比gif要好等等。


那么接下来就是以前N多性能评测工具的最佳实践，学习并了解这些最佳实践是入门的第一步，至少你能够有一个容易的入口来开始进行你的工做了。具体的连接见下：
yslow
page speed
dynatrace
其实大概了解就能够了，由于使用工具测试后都会提示你哪些不知足，具体有哪些地方没有知足，很是的清晰方面。


而工具每每是死的，并且一般不少时候这些评测工具给出了高分可是前端性能仍是会很慢的，因此规则只是保证web具有良好性能的基本要素之一，但并非惟一或者最重要的。因此在评测工具以后咱们还要看具体的载入完成时间长短，固然不一样的网页载入时间是不同的，搜索的主要就几百k，而电子商务首页都得十几M甚至更多，因此它们的页面载入的所有时间确定是不同的。不过没有关系，由于咱们没有必要等全部内容都下载了再呈现内容给客户，因此仍是能够投机来“蒙骗”过用户，好比：优先显示首屏的内容，这样用户就会从感受上认同这个页面的高性能了。而页面的完整加载时间也是有价值的，能够内部制定一个性能标准，根据不一样的页面属性来肯定一个具体的网页彻底加载时间应该在一个什么样的范围内；同时还能够做为下次版本再测试时的基准数据。

到这里2个重要的标准出来了，一个是用户有第一感受时的时间，一个是彻底加载所用的时间；调优的目的就是下降这2个时间，想要具体调优以前咱们必须了解这些时间分别都由哪些时间判断组成的，这样就能够为达到最佳性能而提供最优秀的页面展示方案了。

 

第一用户感受时间：
即浏览器开始渲染时的时间，而浏览器开始渲染以前是要解析html，解析css文件，而后生成DOM树，再转换成渲染树，再给渲染树中的节点进行布局计算【具体坐标】，而后才开始一层层树开始渲染，因此每个步骤均可能影响到第一用户感受时间。好比：
单个html文件过大则解析时间就会比较长
CSS格式单独放在外部就比内嵌式的效率高，由于一次性所有加载和应用，并且引用css时应该在页面的头部，由于如今的浏览器通常不会等到所有解析完DOM才去解析CSS或作其它事情，因此提早加载css文件能够加速提早达到能够渲染的时间点。
DOM树生成是从html开始的，正常的html应该解析一遍就能够完成了，可是若是html中有js调用，那么在解析时就会反复从新调整DOM树的结构，这样就会影响DOM生成的时间。
渲染树 = DOM + CSS渲染说明；因此这块的转换速度取决于具体内容，渲染的层次越多天然越长
渲染树的布局计算时间，取决去渲染树的节点数目，也就是DOM树的节点数目
最后开始渲染并展示咱们看到的页面内容


第一用户感受时间---到---最终完成载入：
用户有了第一感受并无结束，并且可能第一感受只是页面上有内容，却并非首屏的内容所有展示出来了；所以要保证良好的第一用户感受，还得保障首屏的其余内容也是第一和时间被下载并展示出来。因此首屏用到的外部资源要优先下载，而且使用性能较好的资源服务器，资源要分布在不一样的服务器【这样就能够并行下载了】，并且把较大的图片等能够切成多个小图片，而后分别下载，这样即便是一个较大的图片也是能够很快就能展示出来的。
页面全部资源下载完成后才会去加载onload事件，即页面展示完成后要自动去作的一些事情，好比某些网站的弹窗、跳页等；这些操做都是js去作的，而若是作js运行的时间太长，那么即便页面资源加载完成了，用户的使用还不是很友好，因此js的运行时间也是前端性能的一部分，不只在加载时的js，整个页面上其它地方的js性能也是要考虑的，好比单个ajax请求的过程，某个前端操做js的使用时间；而JS除了时间性能之外还会有cpu、内存占用的性能考虑，这些dynatrace工具是能够提供的。
另外在整个外部资源下载过程当中，还要尽可能避免各种请求错误。

固然，除了这些还会有其它因素会影响web前端性能，好比：网速，DNS服务器配置等；如何抓住性能的瓶颈点是最重要的，通常最简单的就是看用时最长的段，而后再根据实际的状况和环境肯定是否是正常的数值，进而肯定是否有可调优的可能性及对应的手段等。

转自：http://blog.csdn.net/five3/article/details/7691365