转 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