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

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

web前端性能：

便是web用户在访问一个页面时所要花费的时间总和。即一个彻底意义上的用户响应时间，相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所须要了解的基础知识，先了解一下用户从浏览器访问一个url后到页面彻底展现全部内容的整个过程吧。

页面的请求过程：

一、浏览器的url请求
二、递归寻找DNS服务器
三、链接目标IP并创建TCP链接
四、向目标服务器发送http请求
五、web服务器接收请求后处理
六、web服务器返回相应的结果【无效、重定向、正确页面等】

七、浏览器接收返回的http内容

================================前端解析分割线===========================================

八、开始解析html文件，固然是自上而下，先是头部，后是body

九、当解析到头部css外部连接时，同步去下载，若是遇到外部js连接也是下载【不过js连接不建议放在头部，由于耽误页面第一展示时间】

十、接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载

十一、一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树

十二、渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置

1三、一旦计算出来渲染的坐标后，又同步去开始渲染

1四、10-13步进行过程当中若是遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置

1五、同14步，若是渲染过程当中出现js代码调整DOM树机构的状况，也会再次从新来过，从修改DOM那步开始

1六、最终全部节点和资源都会渲染完成

=========================================分析结束分割线==============================================

1七、渲染完成后开始page的onload事件
1八、整个页面load完成

 

整个过程当中会有不少的分别请求，因此TCP链接会不少，而且每个用完都会本身关了，除非是keep-live类型的能够请求屡次才关闭。

综上所述：
一个页面的请求等于一个或多个url的请求，所以一个页面里包含的外部请求数会影响页面的总体性能
【每请求一次就要多占用一次cpu使用、多一次tcp链接】
每一个url的请求又包括寻址、链接、请求传输、返回传输、断连的过程；所以每一个阶段的外部环境也会影响总体性能
【DNS服务器的寻址时间，请求和返回内容时的网络环境】
除了URL请求数量外，每一个请求的内容大小也是影响性能的主要因素
【文件越大消耗在传输过程当中的时间就越长】
请求一样多的资源，并行请求和串行请求速率是不同的，因此请求的资源要尽可能支持同步请求
【同步请求不一样资源，即请求被发送到不一样的资源服务器便可】
依据浏览器的加载、渲染机制，选择合适的HTML内容排版方式
【减小反复建立对象实例的次数、充分利用缓存机制】
优先加载用户关注的内容
【css加载优于js内容，首屏内容优于非首屏内容】

关注完http请求的过程后，再来关注整个请求过程当中关注的几个时间点，经过肯定时间点就能够肯定影响性能的时间段，就是肯定影响性能的因素。根据上面的介绍主要的几个时间点又能够分页面的总体时间点、以及单个url请求过程当中的时间点。【基于httpanalyzer工具的指标】

 

单个url请求的主要时间点：
一、Cache Read：缓存读取时间，或304错误的处理时间 
二、Block：请求等待时间，取决于缓存检查，网络链接等待
三、DNS Lookup：DNS服务器查找时间，取决于dns服务的数量，dns注册的域
四、Connect：tcp链接的总时间，取决于链接类型，ssh，keepalive都会比http长
五、Send first to last：发送请求内容的时间，取决于请求内容大小，及上行的传输速度
六、Wait：等待响应的时间，取决于网络环境的响应，web服务器的处理时间
七、Receive first to last：接收响应内容的时间，取决于响应内容，下行的传输速度，也要考虑服务器的带宽
八、Time to first byte：从请求一直到接收到第一个字符的总时间，等于1+2+3+4+5+6
九、Network：网络消耗时间，等于3+4
十、Begin to end：整个请求的总时间，等于1+2+3+4+5+6+7


单个页面的主要时间点：
一、DOM Ready Time: DOM完成的时间，从接收html到彻底转换成dom树所需的时间
二、DOM Ready to Page Load: 页面元素的加载和渲染完成时间，包括html，css，img及其它内容
三、Page Load Time: page页onload事件的时间，其实际时间等于总时间 - （DOM ready + 元素渲染时间）
四、URL Requests Begin to End:url请求所消耗的全部时间，从发送请求发起到接收最后一个字节断开
五、Network Time:消耗在网络上的时间，即tcp的链接时间
六、Begin to End:全部消耗的时间，包括请求结束后的渲染时间


PS：
浏览器是怎样工做的

http://blog.csdn.net/zzzaquarius/article/details/6532299

英文原文：

http://taligarsiel.com/Projects/howbrowserswork1.htm