简单的web页面性能分析

最近公司的产品网站频频出现性能问题，优化过程中也基类了不少经验和方法，特此记录一下

chrome浏览器是非常强大的，我用它自带的监控基本就能分析出来问题,开发者工具中有个performance选项，运行一次就可以看到下图效果：

最上面是一个时序图，分别记录了在整个页面渲染过程中网络请求和HTML解析（蓝色），Javascript执行（黄色），样式计算和布局（紫色）以及绘制和计算（绿色）行为执行的时间段；
箭头标出来的地方还在时序图上生成了页面的快照。可以选中某个时间段之后具体来分析其中的各个部分的耗时；
中间部分就是具体各个部分的执行细节的具体执行耗时；
最下面是每个部分耗时的综合，如果选中具体的某个请求，它还会显示出具体的细节，比如url,流量大小，类型，堆栈调用过程，各个调用的耗时等等，如下图，展开Network,选中hm.js(…)可以看到大小类型方法等：

另外也可以看堆栈调用个的时耗

我们还可以通过timeing具体去观察这个请求具体发起的时间和结束时间、发送时间、等待时间、内容下载时间等等。

我在优化过程中就有发现有这种情况：后台返回的数据比较大，有好几兆，单单下载返回结果就用了四五秒，所以必须将返回内容进行精简，或者做分页等。
上图的说明：

• Stalled，等待可以发送请求所花的时间。
• Proxy negoiation，连接代理服务器所花的时间。
• DNS Lookup，执行DNS查找所花的时间
• Initial connection，初始化连接，包括了TCP握手/重试和SSL握手.
• Waiting(TTFB)，TTFB即Time To First Byte的缩写，即接收到第一个字节的时间。
• Content Download，接收内容所用的时间。*

    假如我们发现前台渲染比较耗时，那我们就要去看js文件中有没有大量的dom操作、定时器、事件等等，然后去优化；假如是后台ajax请求特别慢，这个时候就要去后台找到对应的方法，把整个方法的时耗打出来，然后一步步缩小范围，找出最耗时之所在，然后优化，一般来说IO、网络都是比较耗时的，比如多次连接数据库就会比较耗时，嵌套循环比较多，而循环次数比多的时候也是非常耗时的，如果没办法优化算法，可以考虑并行计算、多线程等等。